大部分标签是成对出现的（开始，结束）

1. 骨架标签

<html> </html>：页面中最大的标签，也称为 根标

<head> </head>：文档的头部（其中一定要设置 title标签)

<title> <title>：网页标题

<body> </body>：文档的主
格式

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        揽日月星河
    </body>
</html>

2. 常用标签

  • 标题标签（一个标题独占一行）

    <h1> - <h6>       (重要性递减)

  • 段落标签

    <p>段落</p>        (之间有较大间隙)

  • 换行标签

    <br />        (也可以为：<br>)、(上下两行间没有太大间隙)

  • 文本格式化标签

    <strong> </strong> 或 <b> </b>：文字加粗

    <em> </em> 或 <i> </i>：文字倾斜

    <del> </del> 或 <s> </s>：删除线

    <ins> </ins> 或 <u> </u>：下划线

  • 盒子

    <div> </div>：大盒子 (独占一行)

    <span> </span>：小盒子 (一行可以有多个)

  • 图像标签

    <img src="图像URL" />

    src 为必须属性，用于指定文件路径

    路径：

    下一级路径：”文件夹/图片”
    上一级路径：”../图片”

    补充属性：
    alt：图像显示不出来时用文字替换

    title：鼠标放到图片上时显示文字

    width：设置图像宽度

    height：设置图像高度

    border：设置图像的边框粗细

  • 超链接标签

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

    target=""：指定链接页面的打开方式 ('_self':默认为当前页面打开，也可设置为新窗口中打开:'_blank')

    外部链接：具体网址
    内部链接：跟图片的一样
    空链接：用’#’
    下载链接：地址里是文件或压缩包
    锚点链接：快速定位到页面中的某个位置

  • 特殊字符

    空格：&nbsp;

    小于号：&lt;

    大于号：&gt;

    平方 (上标2)：&sup2;

    立方 (上标3)：&sup3;

    正负号：&plusmn;

    乘号：&times;

    除号：&divide;

  • 表格标签 (展示数据)

    <table> </table>：定义表格

    <tr> </tr>：表格中的行 (必须嵌套在<table> </table>标签中)

    <td> </td>：行中的单元格 (必须嵌套在 <tr> </tr>标签中)

    <th> </th>：表头单元格 (文字会居中加粗)

    <thead> </thead>：表格头部区域 (包含 <th> </th>标签)

    <tbody> </tbody>：表格主题区域 (余下的所有)

    属性 (写在<table> </table>标签里)

    align：规定对齐方式 (left, center, right)

    border：规定是否有边框 (1 或 “”)

    cellpadding：规定单元边沿与其内容之间的空白 (默认为 1像素)

    cellspacing：规定单元格之间的空白 (默认为 2像素)

    width：规定表格的宽度

格式

1
2
3
4
5
6
7
<table>
<tr>
    <td>文字内容</td>  
    ...    
</tr>
...
</table>

合并单元格

跨行合并：rowspan="合并单元格的个数
        目标单元格：最上侧
跨列合并：colspan="合并单元格的个数
        目标单元格：最左侧

步骤：1.确定是跨行还是跨列
           2.找到目标单元格
           3.删除多余单元格

  • 列表标签

无序列表：
列表项使用 <li> </li> 标签定义
<ul> </ul> (里面只能放<li> </li>标签)
<li> </li> (放什么都可以)

格式

1
2
3
4
5
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
</ul>

有序列表：

列表会自动以数字排序显示
<ol> </ol>
<li> </li>

格式

1
2
3
4
5
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
</ol>

自定义列表：

<dl> </dl>：定义列表
<dt> </dt>
<dd> </dd>

格式

1
2
3
4
5
6
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
</dl>
  • 表单标签

表单域 ( <form>标签用于定义表单域，以实现用户信息的收集和传递)

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

表单控件 (允许用户输入或选择内容)

<input 属性="属性值">

属性:
type=""

其属性值含:
text

passward

radio：定义单选按钮（圆形）

checkbox：复选框 实现多选（正方形）

submit：定义提交按钮

reset：定义重置按钮

image：定义图像形式的提交按钮

button：定义可点击按钮（通常和js搭配使用）

file：定义输入字段和浏览按钮，供文件上传

name="" ：定义不同的 name属性值，以便后台可以区

value="" ：同 name (详细使用见 07)

checked="checked" ：规定首次加载时会自动选择 在单选的各元素中只能有一个该属性)

maxlength="" ：规定输入字符的最大长度

<select> </select> (下拉标签)

<option>选项</option> (可用属性selected="selected"来定义默认显示)

格式

1
2
3
4
5
6
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<textarea> </textarea> (文本域)

属性：rows="" ：可输入的行数
           cols="" ：每行可以输入多少字符
格式

1
2
3
<textarea rows="" cols="">
    文本内容
</textarea>

<lable> </lable>标签

用于绑定一个表单元素，在用户点击标签内的文本时，浏器会自动的将光标转移到选择的对应表单元素上以增加用户体验

格式（for 中的属性值必须和目标中 id的属性值一样）

1
2
<lable for="sex">男</lable>
<input type="radio" id="sex">