学习html，这一篇足矣

目录

基础元素

标签之标题

标签之段落、换行、水平线

路径详解

标签之超文本链接

超链接之锚点

标签之文本

 列表标签之有序列表

列表标签之无序列表

 列表标签之自定义列表

 标签之表格

表格单元格合并

Form表单

 表单元素

文本框

密码框

 单选按钮

复选框

文件

提交按钮

重置按钮

按钮

图像图片按钮

下拉列表

多行文本框

label

HTML5新增type类型

email

url

search

tel

color

number

range

date

HTML5新增属性

autofocus 属性

placeholder 属性

required 属性

实体字符

 块元素与行内元素（内联元素）

HTML新增元素

容器元素（div）

HTML5新增布局标签

 视频和音频

HTML5新增标签

figure

details

mark

meter

progress

datalist

canvas

---

基础元素

标签之标题

标题（Heading）是通过<h1>-<h6>标签进行定义的。

<h1>定义最大的标题 <h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键：h$*6

标题标签位置摆放

在标签中添加属性： align="left | center | right" 默认居左

标签之段落、换行、水平线

标签之段落

段落是通过<p>标签定义的

<p>这是一个段落 </p>
<p>这是另一个段落</p>

换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<br>元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

水平线

<hr/>标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

属性：

1 color：设置水平线的颜色

2 width：设置水平线的长度

3 size：设置水平线的高度

4 align：设置水平线的对齐方式（默认居中），可取值left|right

标签之图片

网站中最多的元素毋庸置疑，一定是图片

<img>标签定义 HTML 页面中的图像

<img src="" alt="" title="" width=""
height="">

注意事项:  <img>是单标签，不需要进行闭合操作

属性：

1 src：路径（图片地址与名字）

2 alt：规定图像的替代文本

3 width：规定图像的宽度

4 height：规定图像的高度

5 title：鼠标悬停在图片上给予提示 

路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

比如：E:\itbaizhanCode\1.jpg

<img src="E:\itbaizhanCode\1.jpg">

相对路径

两者相对关系，两者在同⼀路径下可以直接访问

1 ⼦级关系: /

2 ⽗级关系: ../

3 同级关系: ./

网络路径

具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

标签之超文本链接

超链接描述

HTML使用标签<a>来设置超文本连接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像， 您可以点击这些内容来跳转到新的文档或者当前文档中的某个部 分。

超链接属性

在标签<a>中使用了 href 属性来描述链接的地址 默认情况下，链接将以，以下形式出现在浏览器中： 1 一个未访问过的链接显示为蓝色字体并带有下划线。 2 访问过的链接显示为紫色并带有下划线。 3 点击链接时，链接显示为红色并带有下划线。

<a href="url">链接文本</a>

超链接之锚点

超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个 部分。 跳转到当前文档的某个部分的形式就是“锚点”

锚点实现方式

<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>

标签之文本

常用文本标签

 特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标 签一般表示文本词汇

 列表标签之有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。

<ol>
    <li>学习</li>
    <li>打游戏</li>
</ol>

type属性

<ol>的属性type 拥有的选项 

1 表示列表项目用数字标号（1,2,3...）

2 a 表示列表项目用小写字母标号（a,b,c...）

3 A 表示列表项目用大写字母标号（A,B,C...）

4 i 表示列表项目用小写罗马数字标号（i,ii,iii...）

5 I 表示列表项目用大写罗马数字标号（I,II,III...）

有序列表嵌套

列表是可以进行嵌套的

<ol>
    <li>购物</li>
    <li>
        <ol>
            <li>阿里</li>
            <li>京东</li>
        </ol>
    </li>
    <li>外卖</li>
</ol>

列表标签之无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑 圆圈）进行标记 无序列表始于

<ul>标签。每个列表项始于<li>标签。

<ul>
    <li>学习</li>
    <li>打游戏</li>
</ul>

type属性

<ul>的属性type 拥有的选项

disc 默认实心圆

circle 空心圆

square 小方块

none 不显示

无序列表嵌套

列表是可以进行嵌套的

<ul>
    <li>购物</li>
    <li>
        <ul>
            <li>阿里</li>
            <li>京东</li>
        </ul>
    </li>
    <li>外卖</li>
</ul>

常见应用场景

1 无序的列表效果

2 导航效果

导航效果

<ul>
    <li>Xiaomi手机</li>
    <li>Redmi 红米</li>
    <li>电视</li>
    <li>笔记本</li>
</ul>

快捷键

快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修 改）

 列表标签之自定义列表

自定义列表实现 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以

<dl>标签开始。每个自定义列表项以<dt>开始。每 个自定义列表项的定义以<dd>开始。

<dl>
    <dt>淘宝</dt>
    <dd>唯品会</dd>
    <dt>京东</dt>
    <dd>阿里</dd>
</dl>

 标签之表格

表格组成与特点

行、列、单元格

单元格特点：同行等高、同列等宽。

表格标签

表格：<table>

行：<tr>

单元格：<td>

<table>
    <tr>
        <td>购物</td>
        <td>外卖</td>
    </tr>
    <tr>
        <td>阿里</td>
        <td>京东</td>
    </tr>
</table>

表格属性详解

<table>表格属性 border：设置表格的边框 width：设置表格的宽度 height：设置表格的高度 align：设置表格的水平对齐方式 cellpadding：设置内容距离边框的距离 cellspacing：设置单元格之间的距离 bgcolor：设置表格背景颜色 b ordercolor：设置边框颜色 background：设置背景图片

 <tr>的属性

height：设置一行的高度

bgcolor：设置一行的背景颜色

background：设置一行的背景图片

align：设置行里内容水平对齐方式，取值：left、center、right

valign：设置行里内容垂直对齐方式，取值：top、middle、bottom

<td>的属性

width：设置单元格的宽度，同列等宽

height：设置单元格的高度，同行等高

align：设置单元格内容水平对齐方式

valign：设置单元格内容垂直对齐方式

bgcolor：设置单元格背景颜色

background：设置单元格背景图片

表格单元格合并

单元格合并属性

水平合并：colspan

垂直合并：rowspan

<table align="center" border=""
width="500px" height="200px"
cellspacing="0">
    <tr>
        <td colspan="3">单元格1单元格2单元格
3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td rowspan="2">单元格6-11</td>
        <td>单元格7</td>
        <td rowspan="3">单元格81318</td>
        <td colspan="2" rowspan="2">单元格
9101415</td>
    </tr>
    <tr>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
</table>

Form表单

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的 输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能 够容纳各种各样的控件

<form action="url" method="get|post"
name="myform"></form>

属性说明

action服务器地址

name表单名称

method中Get和Post的区别

1 数据提交方式，get把提交的数据url可以看到，post看不到

2 get一般用于提交少量数据，post用来提交大量数据

 表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单 按钮

1 表单标签

2 表单域

3 表单按钮

<form>
    <input type="text">
    <input type="submit">
</form>

文本框

文本域通过<input type="text">标签来设定，当用户要在表单中键入字 母、数字等内容时，就会用到文本域

<form>
   First name: <input type="text"
name="firstname">
    <br>
   Last name: <input type="text"
name="lastname">
</form>

密码框

密码字段通过标签<input type="password">来定义

<form>
   Password: <input type="password"
name="pwd">
</form>

温馨提示

密码字段字符不会明文显示，而是以星号或圆点替代

 单选按钮

<input type="radio">标签定义了表单单选框选项

<form>
    <input type="radio" name="sex"
value="male">Male
    <br>
    <input type="radio" name="sex"
value="female">Female
</form>

复选框

<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取 一个或若干选项

<form>
    <input type="checkbox" name="vehicle"
value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle"
value="Car">I have a car 
</form>

文件

定义文件选择字段和 "浏览..." 按钮，供文件上传

<form>
    <input type="file" name="img">
</form>

提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单 的动作属性定义了目的文件的文件名。由动作属性定义的这个文件 通常会对接收到的输入数据进行相关的处理

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

重置按钮

定义重置按钮（重置所有表单值为默认值）

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
    <input type="reset">
</form>

按钮

没有任何功能的按钮

<form name="input" action="url" method="get">
    <input type="button" value="点我"/>
    <button>点我</button>
</form>

图像图片按钮

定义图像作为提交按钮

<form name="input" action="url" method="get">
    <input type="image" src="close.jpg" />
</form>

下拉列表

<select>元素用来创建下拉列表。

<option>标签定义下拉列表中的一个选项（一个条目）

<form name="input" action="url" method="get">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option
value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</form>

多行文本框

<textarea>标签定义一个多行的文本输入控件。文本区域中可容纳无限 数量的文本。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的 办法是使用 CSS 的 height 和 width 属性

<form name="input" action="url" method="get">
    <textarea rows="10" cols="30">我是一个文本
框</textarea>
</form>

label

<label>标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进 了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是 说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关 的表单控件上。

<label>标签的 for 属性应当与相关元素的 id 属性相同

HTML5新增type类型

email

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的 值进行验证）

<form>
   E-mail: <input type="email"
name="usremail">
    <input type="submit">
</form>

url

定义用于输入 URL 的字段

<form>
    <input type="url" name="homepage">
    <input type="submit">
</form>

search

定义搜索字段（比如站内搜索或谷歌搜索等）

<form>
   Search Google: <input type="search"
name="googlesearch">
    <input type="submit">
</form>

tel

定义用于输入电话号码的字段

<form>
   电话号码: <input type="tel" name="usrtel">
    <input type="submit">
</form>

color

从拾色器中选取颜色

<form>
   选择你喜欢的颜色: <input type="color"
name="favcolor">
    <input type="submit">
</form>

number

定义用于输入数字的字段（您可以设置可接受数字的限制）

<form>
   数量 ( 1 到 5 之间): <input type="number"
name="quantity" min="1" max="5">
    <input type="submit">
</form>

range

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您 也可以设置可接受数字的限制

<form>
    <input type="range" name="points" min="1"
max="10">
    <input type="submit">
</form>

date

定义 date 控件

<form>
   生日: <input type="date" name="bday">
    <input type="submit">
</form>

month

定义 month 和 year 控件（不带时区）

<form>
   生日 ( 月和年 ): <input type="month"
name="bdaymonth">
    <input type="submit">
</form>

week

定义 week 和 year 控件（不带时区）

<form>
   选择周: <input type="week"
name="week_year">
    <input type="submit">
</form>

HTML5新增属性

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

<form>
   User name: <input type="text"
name="user_name"  autofocus />
    <input type="submit">
</form>

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值

<form>
    <input type="search" name="user_search"
placeholder="Search itbaizhan" />
    <input type="submit">
</form>

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）

<form>
   Name: <input type="text" name="usr_name"
required />
    <input type="submit">
</form>

实体字符

我们考虑⼀个问题，如果我们要在页面上显示⼀个 < 的时候，应该 如何来写，如果直接写符号显然是不合理的，毕竟，它是属于标签 的关键字，那我们应该如何来实现呢？ 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字 符实体

<p>&#165;</p>
<p>&reg;</p>

 温馨提示

实体名称对大小写敏感！

 块元素与行内元素（内联元素）

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在 HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区 分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语 句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的， 元素可能属于不止⼀个类别，称为混合的

 常见块级元素 div、form、h1~h6、hr、p、table、ul、等

常见内联元素 a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高） button、img、input等

HTML新增元素

容器元素（div）

<div>可定义文档中的分区或节（division/section）

<div>标签可以把文档分割为独立的、不同的部分

<div>是一个块级元素。这意味着它的内容自动地开始一个新行

<div>主要应用在布局上，作为布局的每个区域的容器

<body>
    <div class="container">
        <div class="header">网站头部</div>
        <div class="nav">网站导航</div>
        <div class="main">
            <div class="left">网站主要内容
</div>
            <div class="right">网站右侧模块
</div>
        </div>
        <div class="footer">网站底部</div>
    </div>
</body>

HTML5新增布局标签

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 （W3C） 完 成标准制定 在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样 的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎 爬虫对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的 语义化标签

 视频和音频

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方 工具实现的，现在HTML5也支持了这方面的功能。在一个支持 HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。

视频

Video标签定义视频，比如电影片段或其他视频流

<video src="movie.mp4" controls>
 您的浏览器不支持 video 标签。
</video>

 音频

Audio 标签定义声音，比如音乐或其他音频流

<audio src="someaudio.mp3">
 您的浏览器不支持 audio 标签。
</audio>

 source

<source>标签为媒介元素（比如<video>和<audio>）定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒 体类型或者编解码器的支持进行选择

<audio controls>
   <source src="horse.ogg" >
   <source src="horse.mp3" >
 Your browser does not support the audio
element.
</audio>

HTML5新增标签

figure

用于对元素进行组合。多用于图片与图片描述组合

<figure>
 <img src="img.gif" alt="figure标签"
title="figure标签" />
 <figcaption>figure的标题</figcaption>
</figure>

details

用于描述文档或文档的某个部分的细节，类似于下拉列表

<details>
      <summary>指定的标题，用户点击标题时展示下面
的所有内容，内容可以是任何形式的内容</summary>
      <div>
          <p>内容描述</p>
      </div>
</details>
<!-- 当增设open属性时，描述内容默认展示 -->
<details open>
     <summary>指定的标题，用户点击标题时展示下面的
所有内容，内容可以是任何形式的内容</summary>
     <div>
         <p>内容描述</p>
     </div>
</details>

mark

主要用来在视觉上向用户呈现那些需要突出的文字。 标签的 一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词

<p>你是<mark>大长腿</mark>吗？</p>

meter

定义度量衡。仅用于已知最大和最小值的度量

<meter min="0" max="100" value="81" low="20"
high="80"></meter>

progress

运行中的进程。可以使用<progress>标签来显示 JavaScript 中耗费时间的 函数的进程

<progress max="100" value="20"></progress>

datalist

定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值 的下拉列表。 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist

<input id="myCar" list="cars" />
<datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
</datalist>

canvas

定义图形，比如图表和其他图像