（一）常用标签
div
span
ul
ol
a
img
form
button
input
table
h1, h2, h3
pre
em, i
（二）用法详解
- 1、
<div>——可定义文档中的分区或节
- 语法：
<div>
...
</div>
- NOTE：
如果用id或class来标记<div>，那么该标签的作用会变得更加有效。
<div>元素没有特定的含义，属于块级元素
- 2、
<span>——组合文档中的行内元素
- 语法：
<span> some text </span>
- NOTE：
<span>元素没有特定的含义
<span>元素是内联元素，可用作文本的容器。
- 3、
<ul>——ul-li是没有前后顺序的信息列表(无序列表) - 语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
- NOTE：
1、常用属性 type（项目符号的类型）取值：disc(小黑点)、circle(空心圆)、square(实心方块)
2、默认样式为：小黑点
3、ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
4、ul标签和li标签是一个组合，一般情况下ul标签和li标签都是一起出现, 不会单个出现
5、ul标签中不推荐包含其它标签，但是li标签中还可以继续放其它的标签
- 4、
<ol>—— ol-li是有前后顺序的信息列表(有序列表)- 语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
-
NOTE：
1、常用属性type（编号类型）取值：1、a、A、i、
2、默认样式为：从1开始 -
5、
<a>——可实现超链接 -
使用
<a>标签的方式：
1、通过使用href属性 - 创建指向另一个文档的链接(href：Hypertext Reference的缩写)
2、通过使用name属性 - 创建文档内的书签(可以使用 id 属性来替代 name 属性，命名锚同样有效） -
语法：
<a href="目标网址" title="鼠标滑过显示的文本"> 链接显示的文本 </a>
-
target属性的值：- _blank --在新窗口中打开链接
- _parent --在父窗体中打开链接
- _self --在当前窗体打开链接
- _top --在当前窗体打开链接，并替换当前的整个窗体
默认情况下：在当前浏览器窗口中打开
-
title属性的作用：
鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
- NOTE：
a标签不仅可以让文字可以点击, 还可以让图片也能够被点击
- 6、
<img>——插入图片- 语法：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
- NOTE：
* 1、`src`：标识图像的位置
* 2、`alt`：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本
* 3、`title`：提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）
* 4、图像可以是GIF，PNG，JPEG格式的图像文件
* 5、路径有两种填写方式：绝对路径、相对路径
* 6、相对路径：相对于我们当前 html 文件的位置来写路径
* 7、./表示当前目录，../表示上一级目录
* 8、加载图片是需要时间的，所以建议：慎用图片
* 9、`<img>` 是空标签，意思是说，它只包含属性，并且没有闭合标签
- 7、
<form>——与用户进行交互
- 语法：
<form method="传送方式" action="服务器文件">
- 举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
-
NOTE：
- 1、action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
- 2、method ： 数据传送的方式（get/post）。
- 3、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签内，否则用户输入的信息提交不到服务器上
- 4、表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据
-
8、
<input>——用于搜集用户信息 -
语法：
<form>
<input type="text / password" name="名称" value="文本" />
</form>
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
-
type属性：
type="text"定义文本输入框
type="password"定义密码输入框
type="hidden"定义隐藏输入字段
type="image "定义图像作为提交按钮
type="number "定义带有 spinner 控件的数字字段
type="password"定义密码字段，字段中的字符会被遮蔽
type="radio "定义单选按钮
type="checkbox"定义复选框按钮
type="range"定义带有 slider 控件的数字字段
type="reset"定义重置按钮。重置按钮会将所有表单字段重置为初始值
type="search"定义用于搜索的文本字段
type="submit"定义提交按钮 -
举例：
<form>
姓名： <input type="text" name="myName" placeholder="请输入姓名"/> <br/>
密码： <input type="password" name="pass"/>
</form>
- NOTE:
1、name：为文本框命名，以备后台程序使用。
2、value：为文本输入框设置默认值。(一般起到提示作用)
3、placeholder：提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
4、placeholder属性适用于以下的<input>类型：text, search, url, telephone, email ,password
5、同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用
- 9、
<table>——定义表格
- 语法：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
-
常用属性
1、border：规定表格边框的宽度
2、cellpadding：单元格中的文本与单元格边框的间距
3、cellspacing：单元格之间的间距 -
创建表格的四个元素：table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示
3、<tr>…</tr>：表格的行
4、<td>…</td>：表格的列
5、<th>…</th>：表格表头
6、colspan：规定单元格可横跨的列数，rowspan：规定单元格可横跨的行数 -
NOTE：
1、th标签中的文本默认显示为：粗体且居中
2、表格标签有一个边框属性,，这个属性决定了边框的宽度，默认情况下这个属性的值是 0 ， 所以看不到边框可用 css 样式，为表格加入边框
- 10、
<h1>……<h6>——标题标记
- 语法：
<h1 align = “left | center | right”>标题</h1>
- NOTE:
1、属性：align水平对齐方式
2、取值：left、center、right
- 11、
<pre>——预格式化的文本
- 语法：
<pre>内容</pre>
- 举例：
<pre>
var message="欢迎";
for(var i=1;i<=10;i++) {
alert(message);
}
</pre>
- NOTE：
1、被包围在 pre 元素中的文本通常会保留空格和换行符
2、标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码
参考文章推荐：
HTML需要掌握标签
HTML中级和进阶
HTML学习
网友评论