• html
  • 排版标签
    • 标题标签 h
    • 段落标签 p
    • 水平线标签 hr
    • 换行标签 br
    • div 和 span 标签
  • 图像标签 img
  • 链接标签
  • table
    • 创建表格
    • 表格属性
    • 表头单元格标签 th
    • 表格标题 caption
    • 合并单元格
  • 列表标签
    • 无序列表 ul
    • 有序列表 ol
    • 自定义列表
  • 表单标签
    • input 控件
    • label 标签
    • textarea 控件(文本域)
    • select 下拉列表
• html5 相关
  • 语义标签
    • 布局
    • 状态
      • meter
      • progress
    • 文本
    • 列表
    • 表单
      • 表单控件
      • input
    • 多媒体
  • HTML5 兼容性处理

参考资料及查表

html

排版标签

标题标签 h

其基本语法格式如下：

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>

段落标签 p

作用语义：

可以把 HTML 文档分割为若干段落。在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>文本内容</p>

是 HTML 文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签 hr

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />
是单标签

在网页中显示默认样式的水平线。

换行标签 br

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

<br />

div 和 span 标签

div和span是没有语义的,都是布局用的

<div>这是头部</div>
<span>今日价格</span>

• div 标签一行只能放一个 div
• span 标签一行上可以放好多个 span

图像标签 img

要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。

语法如下：

<img src="图像URL" />

链接标签

在 HTML 中创建超链接非常简单，只需用标签把文字包括起来就好。

语法格式：

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

href：用于指定链接目标的 url 地址，（必须属性）当为标签应用 href 属性时，它就具有了超链接的功能

target：用于指定链接页面的打开方式，其取值有_self 和_blank 两种，其中_self 为默认值，__blank 为在新窗口中打开方式。

注意：

1. 外部链接 需要添加 http://
2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页
3. 如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为”#“(即 href=”#“)，表示该链接暂时为一个空链接。
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
5. 下载链接：如果 href 里面地址是一个文件或压缩包，会下载这个文件
6. 锚点链接：跳转作用

table

创建表格

在 HTML 网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

在上面的语法中包含基本的三对 HTML 标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1. table 用于定义一个表格标签。
2. tr 标签 用于定义表格中的行，必须嵌套在 table 标签中。
3. td 用于定义表格中的单元格，必须嵌套在标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

表格属性

常用属性有 border、cellpadding、cellspacing、align，默认为 0

案例 1：

//
border为表格外边宽，cellspacing为单元格间距，cellpadding为单元边沿与其内容之间的空白
<table
    width="500"
    height="300"
    border="1"
    cellpadding="20"
    cellspacing="0"
    align="center"
>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>刘德华</td>
        <td>男</td>
        <td>55</td>
    </tr>
    <tr>
        <td>郭富城</td>
        <td>男</td>
        <td>52</td>
    </tr>
    <tr>
        <td>张学友</td>
        <td>男</td>
        <td>58</td>
    </tr>
    <tr>
        <td>黎明</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td>刘晓庆</td>
        <td>女</td>
        <td>63</td>
    </tr>
</table>

表头单元格标签 th

作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

语法：只需用表头标签替代相应的单元格标签即可。

<table
    width="500"
    border="1"
    align="center"
    cellspacing="0"
    cellpadding="0"
>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>女</td>
        <td>110</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>男</td>
        <td>120</td>
    </tr>
</table>

th 也是一个单元格，只不过和普通的 td 单元格不一样，它会让自己里面的文字居中且加粗

表格标题 caption

<table>
    <caption>
        我是表格标题
    </caption>
</table>

注意：

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption 标签必须紧随 table 标签之后。

合并单元格

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

注意

1. 先确定是跨行还是跨列合并
2. 根据先上后下，先左后右的原则找到目标单元格，然后写上 合并方式 还有 要合并的单元格数量。
3. 删除多余的单元格单元格

<table>
    <thead>
        <tr>
            <th>月份</th>
            <th>存款</th>
            <th rowspan="3">节假日的储蓄！</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>一月</td>
            <td>￥3000</td>
            <td rowspan="0">￥6000</td>
        </tr>
        <tr>
            <td>二月</td>
            <td>￥4000</td>
        </tr>
    </tbody>
</table>

列表标签

前面我们知道表格一般用于数据展示的，但是网页中还是有很多跟表格类似的布局，如下图~~ 我们用什么做呢？

答案是列表， 那什么是列表？ 表格是用来显示数据的，那么列表就是用来布局的。 因为非常整齐和自由

无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

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

有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

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

所有特性基本与 ul 一致。 但是实际中比 无序列表 用的少很多。

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

表单标签

表单目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在 HTML 中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域 3 个部分构成。 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

示例

<form action="https://www.baidu.com/s">
    <input
        type="text"
        name="wd"
    />
    <button>去百度搜索</button>
</form>

input 控件

• 语法：

<input
    type="属性值"
    value="你好"
/>

• 标签为单标签
• type 属性设置不同的属性值用来指定不同的控件类型
• 除了 type 属性还有别的属性

1. type 属性

   • 这个属性通过改变值，可以决定了你属于那种 input 表单。
   • 比如 type = 'text' 就表示 文本框 可以做 用户名,昵称等。
   • 比如 type = 'password' 就是表示密码框用户输入的内是不可见的。

   用户名: <input type="text" /> 密 码：<input type="password" />

2. value 属性值

   用户名:<input
       type="text"
       name="username"
       value="请输入用户名"
   />

   • value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个 value 来设置。

3. name 属性

   用户名:<input
       type="text"
       name="“username”"
   />

   name 表单的名字， 这样，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，name 主要作用就是用于区别不同的表单。

   • name 属性后面的值，是我们自己定义的。
   • radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

   <input
       type="radio"
       name="sex"
   />男
   <input
       type="radio"
       name="sex"
   />女

   • name 属性，我们现在用的较少， 但是，当我们学 ajax 和后台的时候，是必须的。

4. checked 属性

   • 表示默认选中状态。较常见于单选按钮和复选按钮。

   性 别:
   <input
       type="radio"
       name="sex"
       value="男"
       checked="checked"
   />男
   <input
       type="radio"
       name="sex"
       value="女"
   />女

   上面这个，表示就默认选中了男这个单选按钮

label 标签

label 标签为 input 元素定义标注（标签）。

作用：

用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

1. 第一种用法就是用 label 直接包括 input 表单。

   <label>
       用户名：
       <input
           type="type"
           name="usename"
           value="请输入用户名"
       />
   </label>

2. 第二种用法 for 属性规定 label 与哪个表单元素绑定。

   <label for="sex">男</label>
   <input
       type="radio"
       name="sex"
       id="sex"
   />

当我们鼠标点击 label 标签里面的文字时，光标会定位到指定的表单里面

textarea 控件(文本域)

• 语法：

<textarea>
  文本内容
</textarea>

• 作用：

  通过 textarea 控件可以轻松地创建多行文本输入框.cols=“每行中的字符数” rows=“显示的行数” ,实际开发不用

select 下拉列表

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

• 注意：

1. 至少包含一对 option
2. 在 option 中定义 selected =“selected”时，当前项即为默认选中项。
3. 实际开发会用的比较少

html5 相关

语义标签

布局

关于 article 和 section:

1. artical 里面可以有多个 section 。
2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元 素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素

状态

meter

定义已知范围内的标量测量，也被称为 gauge（尺度），双标签，例如：电量、磁盘用量等。

progress

显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。

<body>
    <span>手机电量：</span>
    <meter
        max="100"
        min="0"
        value="90"
        low="10"
        high="20"
        optimum="90"
    ></meter>
    <br />
    <span>当前进度：</span>
    <progress
        max="100"
        value="20"
    ></progress>
</body>

文本

<ruby>
    <span>魑魅魍魉</span>
    <rt>chī mèi wǎng liǎng</rt>
</ruby>

列表

<input
    type="text"
    list="mydata"
/>
<datalist id="mydata">
    <option value="周冬雨">周冬雨</option>
    <option value="周杰伦">周杰伦</option>
    <option value="温兆伦">温兆伦</option>
    <option value="马冬梅">马冬梅</option>
</datalist>

<details>
    <summary>如何走上人生巅峰？</summary>
    <p>一步一步走呗</p>
</details>

表单

表单控件

input

多媒体

1. 视频标签 <video> 标签用来定义视频，它是双标签。

preload 属性解释:

• none: 不预加载视频。

• metadata: 仅预先获取视频的元数据（例如长度）。

• auto: 可以下载整个视频文件，即使用户不希望使用它。

  2.<audio>音频标签属性

preload 属性解释:

• none: 不预加载音频。
• metadata: 仅预先获取音频的元数据（例如长度）。
• auto: 可以下载整个音频文件，即使用户不希望使用它。

HTML5 兼容性处理

添加元信息，让浏览器处于最优渲染模式。

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta
    http-equiv="X-UA-Compatible"
    content="IE=Edge"
/>
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta
    name="renderer"
    content="webkit"
/>

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。

<!--[if lt ie 9]>
    <script src="../sources/js/html5shiv.js"></script>
<![endif]-->

扩展 lt 小于 lte 小于等于 gt 大于 gte 大于等于 ! 逻辑非 s 示例：

<!--[if lt ie 9]>
    <script src="../sources/js/html5shiv.js"></script>
<![endif]-->
<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if !IE 8]>非IE8的IE可见<![endif]-->