1.标题标签

1
2
3
4
<h1> </h1> 
<h2> </h2>
   ... 
<h6> </h6>

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题 即<h1>-<h6>:

h1
h2
h3
h4
h5
h6

2. 段落和换行标签

1
2
段落标签：<p>这是一个段落。</p>
段落标签：<p>这是第二个段落。</p>

在HTML标签中,标签用于定义段落,它可以将整个网页分为若千个段落

这是第一个段落。

这是第二个段落。

3.换行标签

1
2
换行标签：<p>这是一个<br/>段落。</p>
换行标签：<p>这是第二个段落。</p>

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望 某段文本强制换行显示，就需要使用换行标签<br/>

这是第一个
段落。

这是第二个段落。

4. 文本格式化标签

1
2
加粗：<strong>加粗</strong> 或者 <b>加粗</b>
倾斜：<em>倾斜</em> 或者 <i>倾斜</i>

加粗 或者 加粗

倾斜 或者 倾斜

5. <div></div>块级元素和<span></span>行内元素

1
2
3
4
5
6
<div style="background-color: #ff7242;width: 50px;height: 50px;"></div>
<div style="background-color: #49b1f5;width: 50px;height: 50px;"></div>
<div style="background-color: #5cb85c;width: 50px;height: 50px;"></div>
<span style="background-color: #ff7242;width: 50px;height: 50px;"></span>
<span style="background-color: #49b1f5;width: 50px;height: 50px;"></span>
<span style="background-color: #5cb85c;width: 50px;height: 50px;"></span>

6. 图像标签

1
图像标签：<img src="xxxxxx" 属性2="xxxxxx">
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
cat

7. 超链接标签

1
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能； href=“#”表示这是一个空链接
target 用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)， _ blank为在新窗口中打开方式

8. 锚点链接

1
<a href="#要跳转的元素的id"></a>

点击链接的时候，会跳转到指定元素所在的位置。

9. 注释和特殊字符

1
注释以“<!-”开头，以“->”结束。

特殊字符：

1
2
3
4
5
空格 &nbsp; 
<  小于号  &lt;
>  大于号  &gt;
￥  人名币  &yen;
©  版权  &copy;

10. 表格标签

1
2
3
4
5
<table></tabe>是用于定义表格的标签。
<table></tabe>是用于定义表格的标签。
<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
<th></th>表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示

一些常用的属性：

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
border 1 或 “” 规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度
height 像素值或百分比 规定表格的高度
rowspan 要合并的单元格个数 合并行单元格，记得要删除多余的单元格
colspan 要合并的单元格个数 合并列单元格，记得要删除多余的单元格
bgcolor 颜色 规定单元格的背景色
valign top、middle、bottom 规定单元格的垂直对齐方式 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="2"  cellpadding="50" align="center" width="50%">
  <caption>学生成绩表</caption>
  <tr bgcolor="black" bgcolor="magenta">
    <th colspan="3">学生成绩表</th>
  </tr>
  <tr align="center">
    <td valign="middle" rowspan="2">张三</td>
    <td bgcolor="blue">语文</td>
    <td>数学</td>
  </tr>
  <tr align="center">
    <td>数学</td>
    <td>90</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td>语文</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>90</td>
  </tr>
</table>

11. 列表标签

1
2
3
4
5
6
<ul></ul>：定义无序列表，里面只能放 li 标签，其它标签不被允许
<ol></ol>：定义有序列表，里面只能放 li 标签，其它标签不被允许
<li></li>：有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签
<dl></dl>：定义自定义列表，里面只能包含 dt 和 dd 标签
<dt></dt>：定义自定义列表中的项目
<dd></dd>：描述自定义列表中的每一个项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
    <dt>服务支持</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>

12. 表单标签

通常一个表单由一个大的表单域构成，表单域里面又包含表单元素和提示信息。

1
<form></form>：表单域标签，表单域就是一个包含表单元素的区域

<form></form>标签常用属性：

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get / post 用于设定表单数据的提交方式
name 名称 用于指定表单的名称，以区分用一个页面中的多个表单域 
1
2
3
4
5
<input/>：输入表单元素
<lable></lable>：绑定一个表单元素，当点击 lable 标签内的文本时，会自动将焦点转到对应的表单元素上，lable 标签的for属性必须得与相关元素的id属性相同
<select></select>：下拉表单元素，用于定义一个下拉列表
<option></option>：下拉列表中的元素，定义**selected=“selected”**属性时，当前项为默认选中项
<textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数

<input/>标签的常用属性：

属性 属性值 描述
type 见下表 用于设置<input/>标签的不同形式
name 用户自定义 定义input元素的名称
value 用户自定义 设置input元素的默认值
checked checked 设置此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度
placeholder 字符串 规定输入字段的提示信息
readonly readonly 规定输入字段为只读
disabled disabled 规定输入字段为禁用
size 正整数 规定输入字段的尺寸
src 图片地址 规定图像的地址
required required 规定输入字段为必填项
autofocus autofocus 规定当页面加载时，输入字段将获得焦点
accept 字符串 规定输入字段中所允许的文件类型
autocomplete 字符串 规定输入字段是否应该自动完成，如地址、电子邮件地址等

<input/>标签type属性值：

属性值 描述
button 定义可点击按钮
checkbox 定义复选框，一组复选框name属性必须相同
file 定义输入字段和 “浏览” 按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮，一组单选按钮的name属性值必须相同
reset 定义重置按钮，清除表单中的所有数据
submit 定义提交按钮，提交到action属性指定的地址
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 声明表单使用form标签
        action：服务器提交地址
        methode：提交的方法get（不安全）、post（安全）
   -->
  <form action="#" method="get">
    姓名：<input type="text" name="" id="" value="小心肝" /><br>
    密码：<input placeholder="请输入密码" required type="password" name="" id="" value="" /><br>
    性别：<input type="radio" checked="checked" name="sex"  value="男" />男
    <input type="radio" name="sex"  value="女" />女
    <br>
    兴趣爱好：
    <input type="checkbox" checked name="in" id="" value="富婆" />富婆
    <input type="checkbox" name="in" id="" value="马云" />马云
    <input type="checkbox" checked name="in" id="" value="富婆2" />富婆2
    <br>
    请上传你的私密图片：
    <input type="file" name="" id="" value="" />
    <br>
    生日年份：
    <select>
      <option value ="1995">1995</option>
      <option selected value ="1996">1996</option>
      <option value ="1997">1997</option>
    </select>年
    <br>
    请填写你要投诉的教师：
    <textarea rows="5" cols="60"></textarea>
    <br>
    <input type="submit"/>
    <input type="button" name="" id="" value="登录" />
    <input type="reset" />
  </form>