美文网首页
HTML学习

HTML学习

作者: 不吃鱼的猫_8e95 | 来源:发表于2018-09-15 19:35 被阅读0次

1.HTML 文档 = 网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

<html>
<meta charset="UTF-8">
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body> 
</html>
  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落
    如果编写html的时候中文出现乱码,加入<meta charset="UTF-8">即可

2. HTML标签

  • <h1>~<h6>
    标题标签
  • <p>
    段落标签
  • <a>
    链接标签url
    <a href="http://www.sunmingming.top">This is a link</a>
  • <img>
    图片标签
    <img src="w3school.jpg" width="104" height="142" />
  • pre 标签对空行和空格进行控制。
    <pre>
    在pre标签之间的文字将会保留空格
    </pre>

3. HTML元素

  • HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
  • 大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
  • HTML 文档由嵌套的 HTML 元素构成
    HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
  • < br>标签表示换行

4. HTML 属性

  • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
  • 属性总是以名称/值对的形式出现,比如:name="value"。
  • 属性总是在 HTML 元素的开始标签中规定

5. HTML水平线

<hr /> 标签在 HTML 页面中创建水平线。

6.HTML注释

7.HTML拆行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签

<p>This is<br />a para<br />graph with line breaks</p>

HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

8.HTML样式

  • style 属性的作用:提供了一种改变所有 HTML 元素的样式的通用方法
  • 背景颜色
    background-color 属性为元素定义了背景颜色
<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>
  • HTML 样式实例 - 字体、颜色和尺寸
    font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>


</html>

9. HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式

10.HTML链接

**HTML链接分两种,一种是指向本网站的超链接。另一种是指向万维网的链接

- 指向本站的<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
- 指向万维网的<p><a href="http://www.baidu.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

相关文章

  • 前端学习路线

    前端学习相关网站 1 、关于HTML的学习 对于HTML的学习分为HTML和HTML5,HTML 指的是 HTML...

  • HTML学习:HTML基础

    一、HTML标题 HTML 标题(Heading)是通过 ~ 标签来定义的。 定义重要等级最高的标题。 定义...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • HTML (1)相关简介和VSCode

    更多学习HTML[https://www.runoob.com/html/html-tutorial.html],...

  • 04_HTML 属性

    前面我们学习了HTML的标签、元素。这次我们来学习HTML 属性。 HTML属性 HTML标签可以拥有属性。属性提...

  • HTML5—HTML学习

    HTML学习感想: 下面大致的记录了一写HTML的学习笔记 什么是HTML? HTML 是HyperText Ma...

  • html学习

    web标准构成: web标准不是某一个标准,而是由W3C和其他标准化组织敲定的一系列标准集合。主要包含结构(str...

网友评论

      本文标题:HTML学习

      本文链接:https://www.haomeiwen.com/subject/mzvjfftx.html