基础知识

HTML（HyperText Markup Language）：超文本标记语言，从语义角度描述页面的结构。

1. 基础结构

<!-- 文档声明头 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 头标签 -->
<head>
    <!-- 网页的编码方式 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面上的所有链接规定默认地址或默认目标(target) -->
    <base href="http://www.fourdays.com" />
    <!-- 文档标题 -->
    <title>Document</title>
</head>
<!-- 文档主体 -->
<body>
</body>
</html>

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。

  • head 区域的元素：meta，title，style，link，script，base 等；

  • body 区域的元素：详见“HTML标签”。

2. HTML 标签

参考链接：W3school HTML 标签参考手册

第一种分类：

  • 文本级标签：文本级标签里只能放文字、图片、表单元素，主要有 p、span、a、b、i、u、em 等；

  • 容器级标签：容器级标签里可以放置任何东西，主要有 div、h1、li、dt、dd 等。

第二种分类

  • block 块元素：块元素以新行来开始和结束，主要有 div、h1、p、ul、table 等；

  • inline 行内元素：行内元素不以新行来开始和结束，主要有 img、span、b、a、td 等；

  • inline-block 元素：对外的表现是行内元素，对内的表现是块级元素。

2.1 排版标签

div 是最常见的元素，大多数场景下都可以用div，这也导致 div 的语义并不是很明确，因此除了 div+css 布局之外，H5 中引入了更加明确语义的标签页面布局，例如 header、footer、nav、section 等，具体详见“语义化标签”。

基础标签

<!-- 标题标签 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!-- 段落标签 -->
<p>This is a paragraph</p>
<!-- 水平线标签 -->
<hr />
<!-- 换行标签 -->
<br />

格式化标签

<!-- 定义计算机代码（表示计算机源代码，不保留多余的空格和折行） -->
<code></code>
<!-- 定义预格式文本（编辑器的格式就是显示的格式，保留多余的空格和折行） -->
<pre></pre>

<!-- 定义粗体文本 -->
<b></b>
<!-- 定义强调文字 -->
<em></em>
<!-- 定义斜体字 -->
<i></i>
<!-- 定义小号字 -->
<small></small>
<!-- 定义加重语气 -->
<strong></strong>
<!-- 定义下标字 -->
<sub></sub>
<!-- 定义上标字 -->
<sup></sup>
<!-- 定义插入字 -->
<ins></ins>
<!-- 定义删除线 -->
<del></del>
<!-- 定义下划线 -->
<u></u>

<!-- 定义短引用（显示带“”） -->
<q></q>
<!-- 定义首字母缩写（显示会缩进） -->
<blockquote></blockquote>
<!-- 定义缩写(例如WHO)  -->
<abbr></abbr>
<!-- 定义地址联系方式(显示为斜体)  -->
<address></address>
<!-- 定义著作标题 -->
<cite></cite>

2.2 超链接

<a>标签属性：

  • href：目标URL

  • title：悬停文本

  • name：主要用于设置一个锚点的名称

  • target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：

    • _self：在同一个网页中显示（默认值）

    • _blank：在新的窗口中打开。

    • _parent：在父窗口中显示

    • _top：在顶级窗口中显示

外部链接

<a href="http://www.baidu.com" target="_blank">Link Text</a>

锚链接

<!-- 使用 id 属性进行链接，任意标签均有效 -->
<div id="top"></div>
<a href="#top">回到顶部</a>

<!--  a标签使用 name 属性作锚点，适用于 a 标签 -->
<a name='backTop'></a>
<a href="#backTop">回到顶部</a>

<!-- 其他页面也可定位至某个锚 -->
<a href="http://www.fourdays.top#tips">定位至fourdays页面的锚tips</a>

若浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。

邮件链接

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
<!-- 邮件连接 - 任何标准的邮件头字段都可以被添加到邮件URL中 -->
<a href="mailto:邮件地址?cc=抄送地址1&bcc=暗抄送地址&subject=主题&body=主体">Send mail with cc, bcc, subject and body</a>

知识点：区别 href 与 src

  • href 用于在当前文档和引用资源之间确立联系，例如 a 标签、link 标签等；

  • src 用于替换当前内，例如 img 标签、script 标签等。

2.3 图片标签

<!-- src为图片地址，alt为图片未显示时的替换文本, title为鼠标悬停时出现的文本 -->
<img src="url" alt="替换文本" title='鼠标悬停时出现的文本'/>

知识点：相对路径和绝对路径。

  • 相对路径：相对当前页面所在的路径，.和..代表当前目录和上一层目录；

  • 绝对路径：主要分为盘路径和网络路径

    • 以盘符开始的绝对路径，例如 C:\Users\html\images\1.jpg

    • 网络路径，例如 http://img.smyhvae.com/img.png

绝对不允许使用file://开头的文件，这个是完全错误的！

图片添加说明文字，建议舍弃使用<img>与<p></p>组合，采用<figure> 和 <figcaption>，建立图片与标题之间的语义。

<!-- 注意：figure可以是几张图片、一段代码、音视频、方程、表格或别的 -->
<figure>
  <img src="https://raw.github.com/mdn/learning-area/master/html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架"
     width="400"
     height="341">
  <figcaption>一只霸王龙的化石</figcaption>
</figure>

图片定位链接可在图片不同位置跳转至不同链接，具体详见“图像区域映射”。

<!-- usemap 属性与 name 一致 -->
<img src="img.jpg" height=100 width=100 usemap="#mymap" />
<map name="mymap">
    <area shape="rect" coords="0,0,50,50" href="url1" /> 
    <area shape="circle" coords="75,75,25" href="url2" /> 
</map>

2.4 列表标签

无序列表

<ul>
    <li type="disc">实心原点（默认）</li>
    <li type="square">实心方点</li>
    <li type="circle">空心圆</li>
</ul>

有序列表

<ol>
     <li type="1" start="4">默认</li>
     <li type="a" start="5"></li>
     <li type="A"></li>
     <li type="i"></li>
     <li type="I"></li>
</ol>

定义列表

<dl>
  <!-- <dt>：definition title 列表的标题，这个标签是必须的 -->
	<dt>购物指南</dt>
	<!-- <dd>：definition description 列表的列表项，这个标签是可选项 -->
	<dd><a href="#">购物流程</a></dd>
	<dd><a href="#">会员介绍</a></dd>
	<dd><a href="#">生活旅行/团购</a></dd>
	<dd><a href="#">常见问题</a></dd>
</dl>
<dl>
	<dt>配送方式</dt>
	<dd>
		<a href="#">上门自提</a>
		<a href="#">211限时达</a>
		<a href="#">配送服务查询</a>
		<a href="#">配送费收取标准</a>
		<a href="#">海外配送</a>
	</dd>
</dl>

2.5 表格标签

基本结构

<table>
    <!-- 标题 -->
    <caption></caption>
    <!-- 表头 -->
    <thread>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thread>
    <!-- 内容 -->
    <tbody>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </tbody>
    <!-- 表尾 -->
    <tfoot></tfoot>
  </table>

单元格合并

  • colspan：横向合并，例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。

  • rowspan：纵向合并，例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。

<table>
    <tr>
      <th colspan="2">Animals</th>
    </tr>
    <tr>
      <th colspan="2">Hippopotamus</th>
    </tr>
    <tr>
      <th rowspan="2">Horse</th>
      <td>Mare</td>
    </tr>
    <tr>
      <td>Stallion</td>
    </tr>
    <tr>
      <th colspan="2">Crocodile</th>
    </tr>
    <tr>
      <th rowspan="2">Chicken</th>
      <td>Hen</td>
    </tr>
    <tr>
      <td>Rooster</td>
    </tr>
  </table>

2.6 框架标签

在网页内显示网页：

<iframe src="targetURL"></iframe>

iframe 通过 name 属性作为链接的目标，点击 a 链接则 iframe 显示链接地址的内容：

<a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a>
<iframe src="http://wwww.baidu.com" name="iframe_a"></iframe>

2.7 表单标签

表单标签用<form>表示，用于与服务器的交互。

属性

  • name：表单的名称，用于JS来操作或控制表单时使用；

  • id：表单的名称，用于JS来操作或控制表单时使用；

  • action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”；

  • method：表单数据的HTTP提交方式，一般是get(默认)和post。

  • enctype属性：内容发送编码

知识点：编码格式

  • application/x-www-form-urlencoded（默认），key=value&key=value 格式

  • multipart/form-data，提交文件时需要设置

  • text/plain，纯文本

<form action="/my-handling-form-page" method="post">
  <div>
    <!-- label 标签的 for 可以与 input 标签的 id 相互绑定，这样就允许用户单击标签以激活相应的小部件 -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

表单语义化

  • fieldset 元素是用于创建具有相同目的的小部件组的方式，出于样式和语义目的；

  • legend 元素来给 fieldset 标上标签，其文本内容正式地描述 fieldset 的用途。

<form>
  <fieldset>
    <legend>账户信息</legend>
    姓名：<input value="name">
    密码：<input type="password" value="pwd" size="50">
  </fieldset>  
   
  <fieldset>
    <legend>其他信息</legend>
    性别：<input value="gender">
    爱好：<input value="love">
  </fieldset>
</form>

基础组件

完整表单组件详见 W3school HTML 标签参考手册

<form>
    <!-- 单行文本域 -->
    <input type="text" id="comment" name="comment" value="I'm a text field" />
    <!-- 多行文本域 -->
    <textarea rows="行数" cols="列数"></textarea>
    <!-- Email - multiple属性表示允许输入多个电子邮件地址(以逗号分隔) -->
    <input type="email" id="email" name="email" multiple />
    <!-- 密码 -->
    <input type="password" id="pwd" name="pwd" />
    <!-- 搜索域 -->
    <input type="search" id="search" name="search" />
    <!-- 电话号码域 -->
    <input type="tel" id="tel" name="tel" />
    <!-- URL域 -->
    <input type="url" id="url" name="url" />
    <!-- 数字 -->
    <input type="number" name="age" id="age" min="1" max="10" step="2" />
    <!-- 滑块 -->
    <input type="range" name="beans" id="beans" min="0" max="500" step="10" />

    <!-- 日期时间选择器，type分为date、datetime-local、month、time、week -->
    <input type="datetime-local" name="datetime" id="datetime" />
    <input
      type="date"
      name="myDate"
      min="2013-06-01"
      max="2013-08-31"
      id="myDate"
    />

    <!-- 自动补全输入框 -->
    <label for="myFruit">What's your favorite fruit?</label>
    <input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option>Apple</option>
      <option>Banana</option>
      <option>Blackberry</option>
      <option>Blueberry</option>
      <option>Lemon</option>
      <option>Lychee</option>
      <option>Peach</option>
      <option>Pear</option>
    </datalist>

    <!-- 按钮 -->
    <button></button>
    <input type="reset" value="重置（按钮上显示文字）" />
    <input type="submit" value="提交（按钮上显示文字）" />

    <!-- 单选按钮，name属性共享相同的值，那么它们将被认为属于同一组的按钮，同一组中只有一个按钮可以同时被选 -->
    <input
      type="radio"
      id="sp_type"
      name="p_type"
      value="single"
      checked="checked"
    />
    <input
      type="radio"
      id="dp_type"
      name="p_type"
      value="some"
      style="width: 10px"
    />
    <input
      type="radio"
      id="fp_type"
      name="p_type"
      value="family"
      style="width: 10px"
    />

    <!-- 复选按钮 -->
    <input
      type="checkbox"
      id="carrots"
      name="carrots"
      value="carrots"
      checked
    />
    <input type="checkbox" id="carrots" name="carrots" value="family" />
    <input type="checkbox" id="carrots" name="carrots" value="single" />

    <!-- 选择框-下拉框 -->
    <select id="simple" name="simple">
      <option value="提交值">Banana</option>
      <option value="提交值">Cherry</option>
      <option value="提交值" selected="selected">Lemon</option>
    </select>

    <!-- 选择框利用 optgroup 将选项进行分组 -->
    <select id="groups" name="groups">
      <optgroup label="fruits">
        <option>Banana</option>
        <option selected>Cherry</option>
        <option>Lemon</option>
      </optgroup>
      <optgroup label="vegetables">
        <option>Carrot</option>
        <option>Eggplant</option>
        <option>Potato</option>
      </optgroup>
    </select>

    <!-- 多选选择框 - 使用multiple -->
    <select multiple id="multi" name="multi">
      <option>Banana</option>
      <option>Cherry</option>
      <option>Lemon</option>
    </select>
  </form>

2.8 多媒体标签

video 和 audio 是 HTML5 中引入的。

视频 <video> 标签

<!-- video 标签内的段落，当不支持video时则会显示 -->
<video src="地址" controls>
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="地址">此链接</a>观看</p>
</video>

<!-- 当需要适配不同浏览器对不同格式视频的支持情况时 -->
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

音频 audio 标签

<audio src="输入文件地址" controls>
    浏览器不支持(浏览器不支持的时候显示)
</audio>

<!-- 多文件供浏览器支持 -->
<audio controls>
    <source src="输入文件地址" type="audio/ogg">
    <source src="输入文件地址" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

2.9 实体字符

如果你对内容有任何疑问，欢迎提交 ❕issues 或 ✉️ email

上一页HTML下一页进阶知识

最后更新于