张登友，张登友的博客，张登友的网站——
html标签
| 标签名 | 名称 | 解释 | 属性 |
|---|---|---|---|
<h1>至<h6> |
定义标题 | <h1>定义最大的标题，<h6>定义最小的标题。具有align属性 |
lign="属性值"：对齐方式。属性值包括left center right。 |
| <p> | 段落标签 | 可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。 | lign="属性值"：对齐方式。属性值包括left center right。 |
| <hr /> | 水平分隔线 | 可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。 | align="属性值"：设定线条置放位置。属性值可选择：left right center。 size="2"：设定线条粗细。以像素为单位，内定为2。width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。color="#0000FF"：设置线条颜色。noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。 |
| <br/> | 换行标签 | 如果希望某段文本强制换行显示，就需要使用换行标签。 | |
| <div> | 容器级标签 | 可以把标签中的内容分割为独立的区块。必须单独占据一行。里面什么都能放，甚至可以放div自己。 | align="属性值"：设置块儿的位置。属性值可选择：left、right、 center。 |
| <span> | 文本级标签 | <span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。span里面只能放置文字、图片、表单元素。 |
|
| <center> | 内容居中标签 | 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。 HTML5里面，center标签不建议使用，建议使用css布局来实现。 | |
| <pre> | 预定义（预格式化）标签 | 将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）真正排网页过程中，<pre>标签几乎用不着。 |
|
| <u> | 下划线标记 | ||
<s>或<del> |
中划线标记（删除线） | ||
<i>或<em> |
斜体标记 | ||
| <sup> | 上标 | ||
| <sub> | 下标 | ||
| <a> | 超链接标签（a是一个文本级的标签） | a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。 |
href：目标URL title：悬停文本。 name：主要用于设置一个锚点的名称。 target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值： _self：在同一个网页中显示（默认值）_blank：在新的窗口中打开。 _parent：在父窗口中显示 _top：在顶级窗口中显示 |
| <a> | 锚链接 | 给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字 |
name属性或者id属性name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。 |
| <img /> | 图像标签 | 英文全称 image（图像），代表的是一张图片。 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。 不能往网页中插入的图片格式是：psd、ai等。 | src属性：指图片的路径。英文名称 source。有两种写法：相对路径、绝对路径alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。title：提示性文本。鼠标悬停时出现的文本。width：图像的宽度。 height：图像的高度。align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。重要提示：如果要想保证图片等比例缩放，请只设置width和height中其中一个。 |
| <ul> | 无序列表 | ul：unordered list，“无序列表”的意思。 | type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。 |
| <ol> | 有序列表 | 英文单词：Ordered List。 | type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。 |
| <li> | 列表项 | li：list item，“列表项”的意思。 li不能单独存在，必须包裹在ul或者ol里面；反过来说，ul的“儿子”不能是别的东西，只能有li。 |
<ul>里面的<li>标签也有type属性（虽然说这种写法很少见） |
| <dl> | 定义列表 | 英文单词：definition list，没有属性。dl的子元素只能是dt和dd。 |
|
| <dt> | 列表的标题(容器级标签) | definition title 列表的标题，这个标签是必须的dt只能在dl里面 |
|
| <dd> | 列表的列表项(容器级标签) | definition description 列表的列表项，如果不需要它，可以不加dd只能在dl里面<br />dd是描述dt的。 |
|
| <table> | 表格标签 | 一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。一个表格是由行组成的（行是由列组成的） |
border：边框。像素为单位。 style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条） width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置） cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。 cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。 bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色 bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果。 dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） 既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。 |
| <tr> | 行 | 一个表格就是一行一行组成的。 | dir：公有属性，设置这一行单元格内容的排列方式。可以取值： ltr：从左到右（left to right，默认） rtl：从右到左（right to left） bgcolor：设置这一行的单元格的背景色。 注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。 height：一行的高度 align="center"：一行的内容水平居中显示，取值：left、center、right valign="center"：一行的内容垂直居中，取值：top、middle、bottom |
| <td> | 单元格 | align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。 valign：内容的纵向对齐方式。属性值可以填：top middle bottom width：绝对值或者相对值(%) height：单元格的高度 bgcolor：设置这个单元格的背景色。 background：设置这个单元格的背景图片。colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。 |
|
| <th> | 加粗的单元格 | 相当于<td> + <b> |
属性同<td>标签。 |
| <caption> | 表格的标题 | 使用时和tr标签并列 |
属性：align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom 效果： |
| <thead> <tbody> <tfoot> |
1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。 | ||
| <iframe> | 内嵌框架标签 | <iframe>是<body>的子标记。内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持，可能有其他浏览器也支持，暂时我不清楚)。 | src="subframe/the_second.html"：内嵌的那个页面 width=800：宽度 height=“150：高度 scrolling="no"：是否需要滚动条。默认值是true。 name="mainFrame"：窗口名称。公有属性。 |
| <form> | 表单标签 | 用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。 注意：表单和表格嵌套时，是在 <form>标记中套<table>标记。 |
name：表单的名称，用于JS来操作或控制表单时使用； id：表单的名称，用于JS来操作或控制表单时使用； action：指定表单数据的处理程序，一般是PHP，如：action=“login.php” method：表单数据的提交方式，一般取值：get(默认)和post |
| <input> | 输入框标签 | 用于接收用户输入。 注意，多个个单选框的input标签中，name 的属性值可以相同，但是 id 的属性值必须是唯一的。 |
type="属性值"：文本类型。属性值可以是： text（默认） password：密码类型 radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。 checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是checked，可以省略。 hidden：隐藏框，在表单中包含不希望用户看见的信息 button：普通按钮，结合js代码进行使用。 submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 reset：重置按钮，清空当前表单的内容，并设置为最初的默认值 image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 file：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。 value="内容"：文本框里的默认内容（已经被填好了的） size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。 readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。 |
| <select> | 下拉列表标签 | 标签里面的每一项用<option>表示。select就是“选择”，option“选项”。select标签和ul、ol、dl一样，都是组标签。 |
multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=""，也可以写成multiple="multiple"。 size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。 |
| <option> | 选项标签 | 预选中 | |
| <textarea> | 多行文本输入框 | text 就是“文本”，area 就是“区域”。 | rows="4"：指定文本区域的行数。 cols="20"：指定文本区域的列数。 readonly：只读。 |
| <label> | 我们可以通过label把input和汉字包裹起来作为整体。让label标签的for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了。复选框也有label：（任何表单元素都有label） | ||
| <marquee> | 滚动字幕标签 | 如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。 | direction="right"：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。 behavior="slide"：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）、。alternate和scroll属性值都是循环移动，区别在于：假设在direction="right"的情况下，behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右··· scrollamount="30"：移动的速度 loop="3": 循环多少圈。负值表示无限循环 scrolldelay="1000"：移动一次休息多长时间。单位是毫秒。 |
HTML5新增标签
本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于<nav>。
| 标签名 | 解释 | 属性 |
|---|---|---|
| <section> | 区块 | |
| <article> | 文章。如文章、评论、帖子、博客 | |
| <header> | 页眉 | |
| <footer> | 页脚 | |
| <nav> | 导航 | |
| <aside> | 侧边栏 | |
| <figure> | 媒介内容分组 | |
| <mark> | 标记 ( 用得少 ) | |
| <progress> | 进度 | |
| <time> | 日期 | |
| <fieldset> | 标签将表单里的内容进行打包，代表一组；而<legend>标签的则是 fieldset 里的元素定义标题。 |
|
| <datalist> | 数据列表 input里的list属性和 datalist 进行了绑定。 |
|
| <keygen> | keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 | |
| <meter> | 度量器 | low：低于该值后警告 high：高于该值后警告 value：当前值 max：最大值 min：最小值。 |
| 表单属性 | placeholder 占位符（提示文字） autofocus 自动获取焦点 multiple 文件上传多选或多个邮箱地址 autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off) form 指定表单项属于哪个form，处理复杂表单时会需要 novalidate 关闭默认的验证功能（只能加给form） required 表示必填项 pattern 自定义正则，验证表单。例如 |
|
| 表单事件 | oninput()：用户输入内容时触发，可用于输入字数统计。 oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。 |
|
| <audio> | 音频标签 | autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。 controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里） loop 循环播放。 preload 预加载 同时设置 autoplay 时，此属性将失效。 |
| <video> | 视频标签 | autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。 controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里） loop 循环播放。 preload 预加载 同时设置 autoplay 时，此属性将失效。 width：设置播放窗口宽度。 height：设置播放窗口的高度。 |
PS：单标签不用写关闭符号。
HTML5新增的表单类型
| 名称 | 解释 |
|---|---|
| 只能输入email格式，自带验证功能 | |
| tel | 手机号码 |
| url | 只能输入url格式 |
| number | 只能输入数字 |
| search | 搜索框 |
| range | 滑动条 |
| color | 拾色器 |
| time | 时间 |
| data | 日期 |
| datatime | 时间日期 |
| month | 月份 |
| week | 星期 |
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| " | 双引号 | " |
| ' | 单引号 | ' |
| ™ | 商标™ |
™ |
| 绐 | 文字绐。其实，#32464是汉字绐的unicode编码。 |
绐 |
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | < |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
