前端 --- HTML的基础标签

HTML 入门

• < !DOCTYPE html> 声明为 HTML5 文档
  
• < head> 元素包含了文档的元（meta）数据，如 < meta charset=“utf-8”> 定义网页编码格式为 utf-8
  
• HTML文档也叫做 web 页面
  
• 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
  

HTML标签

HTML 标签对大小写不敏感：

等同于

，而在未来 (X)HTML 版本中强制使用小写，一般用小写

HTML 的 标签一般成对出现，特例：

1、< area>：用于图像映射内的区域。

2、< base>：文档中所有相对URL的基本URL。每个文档只能有一个，它必须位于页面的< head>中。

3、< br>：换行符，通常用于文本内容以创建单个换行符而不是段落。它不应该用于通过堆叠

许多< br>标签在页面上创建视觉分离，因为该函数是视觉需求，因此是CSS的域而不是

HTML。

4、< col>：指定元素中每列的列属性。

5、< command>：指定用户可以调用的命令。

6、< embed>：与外部应用程序和交互式内容一起使用以进行集成。

7、< hr>：水平规则，是页面上的一条直线。在许多情况下，CSS边框用于创建分隔线而不是

此HTML元素。

8、< img>：HTML的主要元素之一，这是图像标记。它用于将图形图像添加到网页。

9、< input>：用于从访问者捕获信息的表单元素。有许多有效的输入类型，从多年来在表单

中使用的常见“文本”输入到属于HTML5的一些新输入类型。

10、< keygen>：此标记创建用于表单的密钥对生成器字段。

11、< link>：不要与“超链接”或锚点（< a>）标签混淆，此链接用于设置文档与外部资源之

间的链接。例如，您可以使用它链接到外部CSS文件。

12、< meta>：元标记是“有关内容的信息”。它们位于文档的< head>中，用于将页面信息

传递给浏览器。有许多不同的meta标签，你可以在网页上使用。

13、< param>：用于定义插件的参数。

14、< source>：此标记允许您为页面上的媒体指定备用文件路径，包括视频或图像或音频文件。

15、< track>：此标记设置要与媒体文件，视频或音频一起使用的轨道，这些轨道通常与或标记一起添加。

16、< wbr>：这代表断言机会。它指定添加换行符可以接受的文本块中的位置。

元素定义了整个 HTML 文档。

• < head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript> 和 < base>。

< head> 定义了文档的信息

< title> 定义了文档的标题

< base>定义了页面链接标签的默认链接地址

< link>定义了一个文档和外部资源之间的关系

< meta>定义了HTML文档中的元数据

< script>定义了客户端的脚本文件

< style>定义了HTML文档的样式文件

< body> 元素定义了 HTML 文档的主体。

常用标签

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

< h1> h1定义最大的标题。

h6定义最小的标题。

段落是通过

标签定义的。

< br> 是个换行符

< a href=“url”>链接文本< /a> 超链接

• 使用 target 属性，你可以定义被链接的文档在何处显示。

< img src=“url” alt=“some_text”> 图像

• alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
  
• height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
  表格

< table border=“1”>

< tr>

< td>row 1, cell 1

< td>row 1, cell 2

< /tr>

< tr>

< td>row 2, cell 1

< td>row 2, cell 2

< /tr>

< /table>

• 表格的表头使用 标签进行定义。
  
• border="1"是设置边框
  

有序链表无序链表

• 无序列表使用

• • 标签

• < ul>
  < li>Coffee< /li>
  < li>Milk< /li>
  < /ul>
• 有序列表始于 < ol> 标签
• < ol>
  < li>Coffee
• 
  < li>Milk
  < /ol>
• 自定义列表以 < dl> 标签开始
• < dl>
  < dt>Coffee< /dt>
  < dd>- black hot drink< /dd>
  < dt>Milk< /dt>
  < dd>- white cold drink< /dd>
  < /dl>

表单

• 多数情况下被用到的表单标签是输入标签（< input>）。
• 文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
• 密码字段通过标签< input type=“password”> 来定义
• 标签定义了表单单选框选项 name 要一致，不然单选效果出不来
• < input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 name 属性也要相同
• < input type=“submit”> 定义了提交按钮.

框架

• 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
• < iframe src=“URL”>< /iframe> 框架语法
• frameborder 属性用于定义iframe表示是否显示边框。
• height 和 width 属性用来定义iframe标签的高度与宽度。
• iframe可以显示一个目标链接的页面，如：< iframe src=“demo_iframe.htm” name=“iframe_a”>< a href=“http://www.runoob.com” target=“iframe_a” rel=“noopener”>RUNOOB.COM
  

颜色

• HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
  
• HTML 颜色由红色、绿色、蓝色混合而成。有需要自己搜
  
• 目前所有浏览器都支持以下颜色名。颜色名是HTML和CSS定义规范的
  
• 颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
  

HTML中元素被定义为块级元素或内联元素

• 块级元素在浏览器显示时，通常会以新行来开始（和结束）。如: < h1>, < p>, < ul>, < table>
  
• 内联元素在显示时通常不会以新行开始。如：< b>, < td>, < a>, < img>
  
• HTML < div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
  
• < div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
  如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
  < div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法
  
• HTML < span> 元素是内联元素，可用作文本的容器
  < span> 元素也没有特定的含义。
  当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
  

文本格式化标签

<b> 定义粗体文本

<em> 定义着重文字

<i> 定义斜体字

<small> 定义小号字

<strong> 定义加重语气

<sub> 定义下标字

<sup> 定义上标字

<ins> 定义插入字

<del> 定义删除字

盲人朋友使用阅读设备阅读网络时：<strong>会重读，<b>不会

"计算机输出"标签

<code> 定义计算机代码

<kbd> 定义键盘码

<samp> 定义计算机代码样本

<var> var定义变量

<pre> 定义预格式文本

HTML 字符实体

• HTML 中的预留字符必须被替换为字符实体。
  
• 如需显示小于号，我们必须这样写：&lt 或 &#60 或 &#060
  

• 
  
• HTML 中的常用字符实体是不间断空格( )。
  

属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

• HTML 元素可以设置属性
  
• 属性可以在元素中添加附加信息
  
• 属性一般描述于开始标签
  
• 属性总是以名称/值对的形式出现，比如：name=“value”。
  <a> 标签中的 herf 就是属性，该属性定义了一个链接
  主要第几个属性

统一资源定位器

scheme://host.domain:port/path/filename

说明:

• • scheme - 定义因特网服务的类型。最常见的类型是 http
    
  • host - 定义域主机（http 的默认主机是 www）
    
  • domain - 定义因特网域名，比如 runoob.com
    
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
    
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
    
  • filename - 定义文档/资源的名称
    

HTML引入CSS

• 内联样式- 在HTML元素中使用"style" 属性
• 内部样式表 -在HTML文档头部 区域使用

内联样式

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

外联样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML引入JS（脚本）

JavaScript 使 HTML 页面具有更强的动态和交互性。

标签速查

菜鸟教程