HTML的常用标签简介_在网页中输入字符画使用的标签

1.HTML 常用简单标签

1.1 标题标签h1-h6

<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
1
2
3
4
5
6
7

h1-h6 的重要程度逐级递减，直观反应在页面中文字的粗细和大小。一般来说，标题标签常用在文章中，或者凸显页面中的标题。需要注意的是标题标签为块状元素 ，会独占一行, 上面所示的代码案例中，每个标题标签中的文本会占用一行。至于什么是块状元素，会在CSS部分仔细介绍。

1.2 段落标签和换行标签

段落标签p 是 paragraph 的缩写。在页面中一个直观的体现是，若有p标签内部的文本和其他元素之间有这明显的段间距（上下都有），但是没有首行缩进，这需要设置CSS样式，一般用于正文的显示。

段落标签的另外一个特点是，一个段落标签中的文本会根据浏览器窗口大小自动换行。另外，p 标签也属于块状元素，一个p 标签会独占一行。

<p>我是一个段落标签</p>
1

当我们需要文本强制换行时，需要使用到br标签，注意，不能使用回车键换行。另外br是单标签。

<br />
<br>
1
2

1.3 文本格式化标签

文本格式化标签的基本功能是为文字设置粗体 ，斜体或下划线，起到文字级别的装饰效果。

<strong>我会加粗</strong>
<em>我要倾斜</em>
<del>我有删除线</del>
<ins>我有下划线</ins>
1
2
3
4

这些标签不会独占一行，属于行内元素。

1.4 div和span标签

div 和span 标签没有语义，它们是一个容器，用来装其他内容的。因此，可以将其他标签，例如p,h1-h6,img 等标签，放到div 和span标签里面。也可以嵌套着互相放。这种容器标签的主要作用是完成页面的布局。

div 和span 的主要区别是：

• 默认情况下，一行只能放一个div，大盒子，属于块状元素
• 默认情况下，一行能放多个span，小盒子，属于行内元素

为什么要强调默认情况，因为通过设置CSS可以完成块状元素和行内元素的相互转换，也可以设置成行内块元素，同时具有行内元素和块状元素的特点。

1.5 图像标签

可以使用img 标签往网页中插入图片，具体语法格式为：

<img src="图像url" />
1

需要注意以下几点：

• 必须指定 src  的值，用于指定需要显示的图像的路径和文件名。
• img 是一个单标签。

img 标签的其他重要属性值：

设置  width ,  height 和  border 的值时，我们只需要一个具体数字就行，不需要跟单位。一般来说， width 和  height 只用设置其中一个就行，图片会等比例缩放，为了更加详细地说明，下面的示例中既给出了 width 的设置，也给出了 height 的设置。设置多个属性值时，需要用空格分隔，对比CSS设置属性值时，需要用分号分隔。

<img src="img.png" alt=" Ayanokouji Monki" title=" Ayanokouji Monki" width="500" height="100" border="15" />
1

1.6 超链接标签

a 标签的语法格式为：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
1

a 的属性值说明如下：

超链接分类：

• 外部链接：链接到其他网站。

  	<a href="www.baidu.com" target="_self">百度</a>
1

• 内部链接：链接到用户自己编写的html文件（自己项目中不同页面之间的跳转）。

<a href="index.html" target="_self">跳转到index.html</a>
1

• 空链接：点击链接后不跳转，只是刷新了当前页面（比较常见的场景是将公司logo图片处设置空链接）。

< + a href="#" target="_self">空链接</a>
1

• 下载链接： href 设置为文件的路径。

<a href="demo.zip" target="_self">点击下载demo.zip文件</a>
1

• 网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。

<a href="www.baidu.com" target="_self"><img src="img.png"/></a>
1

• 锚点链接：点击链接时，快速定位到页面中的某个位置（之前一直不太懂这个功能怎么实现的）。实现主要分为两步：

  1. 将a标签中的 href设置为"#名字"。
  2. 将目标位置标签的 id改为"名字"。

1.7 HTML 中的特殊字符号

我们之前说过，在代码中的回车键换行并不能使得网页中的文字换行，需要使用到br 标签。同理，如果想实现空格和一些特殊字符的显示，也有一定的规则。这里就简单介绍一下三种常用的特殊字符：

2.HTML 常用复杂标签

为什么称之为复杂标签，是因为这些标签在使用的时候可能需要考虑到结构，语法上来说也相对复杂。

2.1 表格标签

2.1.1 表格标签的组成

表格标签的主体结构主要是由下面三部分组成：

1. table 用于定义表格，声明这组标签下的所有内容均属于表格。
2. tr 用于定义表格中的行，必须放在table 中。
3. td 用于定义表格中的单元格。必须放在 tr 中。

这三组标签的父子关系为：table>tr > td 。最后需要展示的内容放在td 标签中，文本，图像等均可。td 标签带有容器标签的性质，可以放入其他类型的标签。

2.1.2 其他表格标签

除了上述三组标签外，HTML 还提供其他表格标签：

• th :一般用于表格的第一行或第一列（理论上来说可以将任意的td 替换成th ）,会将内容加粗居中显示。
• thead :没有具体的语义作用，表示表格的头部区域，更好区分表格结构。
• tbody ：同样没有具体的语义作用，表示 表格的主体区域，更好区分表格结构。

2.1.3 表格属性

表格属性比较多，一般都不会直接设置，后期通过CSS规定表格的样式。

2.1.4 合并单元格

单元格的合并方式主要分为两种：

• 跨行：设置 rowspan ,rowspan=“合并单元格个数”。
• 跨列：设置 colspan ，colspan=”合并单元格个数“。

需要注意的是，合并完单元格后，需要将多余的单元格删除，否则表格会在某一行或者某一列多出来一个单元格。

2.2 列表标签

表格展示数据，列表则用来布局。列表标签分为三大类：

• 无序列表
• 有序列表
• 自定义列表

2.2.1 无序列表

ul 标签用来定义无序列表，基本语法格式为：

<ul>
    <li>夏目友人帐</li>
    <li>紫罗兰永恒花园</li>
    <li>四月是你的谎言</li>
    <li>未闻花名</li>
</ul>
1
2
3
4
5
6

需要注意的是：

• 无序列表之间没有顺序级别之分，li 之间属于并列关系。
• ul 标签中只能嵌套li 标签，不允许放置其他标签 ，这更像是一个规范。
• li 标签相当于一个容器，可以容纳所有元素。
• 无序列表有自己的属性，可通过CSS来设置。

因为li 标签起到了容器的作用，所以列表不仅仅可以让文本整齐的显示，也可以让其他元素整齐的显示。因此，列表对于页面布局来说是一个很重要的元素。

2.2.2 有序列表

ol 标签用来定义有序列表，基本语法格式为：

<ol>
    <li>夏目友人帐</li>
    <li>紫罗兰永恒花园</li>
    <li>四月是你的谎言</li>
    <li>未闻花名</li>
</ol>
1
2
3
4
5
6

特性与无序列表类似。

2.2.3 自定义列表

与无序列表和有序列表不同，自定义列表的语法规则有些许不一样。使用dl 标签来定义列表，dt 和 dd 来设置列表内容。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
1
2
3
4
5

dt和dd 里面可以放置所有标签。

2.3 表单标签

一个完整的表单通常包含三个部分： 表单域， 表单元素和 提示信息。表单的主要作用是收集用户信息，并提交给后端（服务器）处理。

2.3.1 表单域

使用form 标签来定义表单域，基本语法格式为：

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>
1
2
3

常用属性：

2.3.2 表单元素（表单控件）

使用input标签在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。表单元素的基本语法格式为：

<input type="" />
1

根据 type 的取值不同，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

type 的常用属性值有：

2.3.3 单选按钮和复选按钮

单选按钮和复选按钮的基本语法格式为：

性别：男<input type="radio">女<input type="radio" >
爱好：羽毛球<input type="checkbox" >跑步<input type="checkbox">学习<input type="checkbox">
1
2

注意这样只是定义了单选按钮和复选按钮的基本样式，并不能实现单选和多选的功能，若要进一步实现单选和多选的功能，需要设置input 标签的属性值。

常用属性如下：

单选按钮必须有相同的 name 才能实现多选一：

性别：男<input type="radio" name="sex">女<input type="radio" name="sex">
1

一组多选按钮为了让服务器识别到自己，也需要设置成相同 name ：

爱好：羽毛球<input type="checkbox" name="hobby">跑步<input type="checkbox" name="hobby">学习<input type="checkbox" name="hobby">
1

我们通过 name 属性可以绑定一组单选按钮或者多选按钮，但是如何让服务器知道我们的选择呢，这就需要设置 value属性：

性别：男<input type="radio" name="sex" value="man">女<input type="radio" name="sex" value="woman">
1

同理多选框也可以设置 value 属性，来告诉后台用户的选择是什么。 因此， value 属性和 name 属性是方便后台人员获取页面信息而设置的。

另外，简单介绍一下 check 和  maxlength 属性， check 可以让单选和复选框默认选择一些选项，具体使用规范为：

性别：男<input type="radio" name="sex" value="man" checked="checked">女<input type="radio" name="sex" value="woman">
1

maxlength 规定了用户最多输入的字符个数：

<input type="text" name="username" maxlength="6">
1

2.3.4 label标签

label 标签为input元素定义标签，input 标签用于绑定一个表单元素，当点击input 标签内的文本时，浏览器会自动将光标转到对应的表单元素上，增加用户体验。

简单来说，当我们使用单元框让用户选择性别时，用户必须将鼠标移到单选按钮处点击才能选中。

性别：男<input type="radio" name="sex" value="man">女<input type="radio" name="sex" value="woman">
1

如果我们用label 标签将单选按钮后面的文本选中时，用户就可通过点击文本实现单选按钮选中。

<input type="radio" id="nan"><label for="nan">男</label>
1

关键点在于，label 标签的 for 属性和相关标签的 id 属性相同。

2.3.5 select下拉表单

基本语法格式为：

你最喜欢的番剧：
<select>
    <option value="大老师" selected="selected">我的青春恋爱物语果然有问题</option>
    <option value="夏目贵志">夏目友人帐</option>
    <option value="薇尔莉特">紫罗兰永恒花园</option>
    <option value="有马公生">四月是你的谎言</option>
</select>
1
2
3
4
5
6
7

 value属性值也是为了后台人员方便获取页面信息，通过selected=“selected”来设置默认选项。

2.3.6 textarea 文本域表单元素

当需要输入较多内容时，input 标签就不合适了，需要使用到textarea标签：

<textarea cols="50" rows="5">
        请输入内容
</textarea>
1
2
3

3.说明文档下载

css2.0中文手册.chm：点击下载.

csss手册4.2.3.chm：点击下载.

W3CSchool.chm：点击下载
（若chm文件右边显示空白，请自行百度解决。）