一，HTML与HTML5常用标签

学前准备

1）百度上的关于操作系统上的使⽤统计

百度统计流量研究院

2）谷歌浏览器下载

⾕歌浏览器下载⽹址

3）浏览器的使⽤技巧——WEB前端助⼿(FeHelper) 前端⼈员的神器

WEB前端助手(FeHelper) 前端人员的神器

可参考网站上的安装说明进行安装（后缀crx改为zip =》直接拖入更多工具/拓展程序中）

安装完成效果：

4）工具介绍

SublimeText（高级记事本显示代码高亮，推荐）

Notepad++

aptana

EditPlus

VSCode（轻量级集成开发环境，推荐）

Hbuilder

WebStorm

1，HTML简介

1.1 HTML是什么

HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是超⽂本标记语⾔

HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔

超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成

⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm

html⽂档也叫 Web⻚⾯，其实就是⼀个⽹⻚，html⽂件⽤编辑器打开显示的是⽂本，可以⽤⽂本的⽅式编辑它

如果⽤浏览器打开，浏览器会按照标签描述内容将⽂件渲染成⽹⻚，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚

1.2 HTML发展历史

1.3 HTML⽂档类型的设定

HTML在不同版本下⽂档类型的设定，即对应的属性值

(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：

(2) XHTML ，其基本结构如下：

(3) HTML5 ，其基本格式如下

2，HTML基础语法

2.1 HTML基本结构:

HTML⽂件的扩展名为 .html 或者 .htm

HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息（包括标题，字符集等），“主体”部分提供⽹⻚的具体内容

HTML是由：标签和内容构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 ...标签包裹

HTML标签（标记）的语法是由 < 和 > 括起来（比如head标签，body标签~）。

HTML标签有两种：双标签： <标签名>....</标签名> 和单标签： <标签名 />（双标签：
....
，单标签：
）

HTML标签中还可以添加属性： <标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>

HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果

2.2 注释

2.3 HTML注释

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

 <!-- 这就是唯⼀的⼀种HTML注释了 -->

2.4 HTML中HEAD头部设置

head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置

在head中常包含如下⼦标签：

3，HTML文本标签

3.1 常用文本标签如下：

... 其中n为1--6的值。标题标签（加粗、独⽴⾏）

... 斜体

... 强调斜体

... 加粗

... 强调加粗（搜索引擎会对此强调的内容进行收录，优先展示）

作品的标题（引⽤）

_... 下标 ^... 上标

~~...~~ 删除线

3.2 举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>H1标题标签</h1>
	<h2>H2标题标签</h2>
	<h3>H3标题标签</h3>
	<h4>H4标题标签</h4>
	<h5>H5标题标签</h5>
	<h6>H6标题标签</h6>

	<u>u下划线标签</u><br/>
	<del>del删除线标签</del><br/>
	<b>b加粗标签</b><br/>
	<strong>strong强调加粗标签</strong><br/>
	<i>i斜体标签</i><br/>
	<em>em强调斜体标签</em><br/>
	<br/>
	<cite>清明上河图</cite>是我国十大传世名画之一 <br/><br/>
	水分子：H<sub>2</sub>O <br/>
	2<sup>4</sup>=16
</body>
</html>

4，HTML格式化标签

只是用于做一个简单排版

4.1 常见格式化标签

换⾏

...
换段
⽔平分割线
列表：

...
⽆序列表

...
有序列表其中type类型值：A a I i 1 start属性表示起始值

...
列表项

...
⾃定义列表

...
⾃定义列表头

...
⾃定义列表内容（会有自动缩进）

...
常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化（两个标签之间自动换行）
... 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。（两个标签之间不换行，无法指定宽、高、尺寸）

4.2 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML格式化标签</h1>
    <hr>
    <div style="width: 600px">
        <p>
            据今日俄罗斯电视台（RT）援引当地媒体报道，以色列情报和特殊使命局（又称摩萨德）已获得中国新冠肺炎疫苗，并带回开始进行“研究”。
        </p>
        <p>
            以色列媒体12频道（Channel 12）周一报道称，最近几周，摩萨德将中国疫苗带到了以色列。目前还不清楚该情报机构究竟是如何获得这种疫苗的。
        </p>
    </div>
    我的爱好：
    <ul>
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ul>
    <ul type="circle">
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ul>
    <ol>
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ol>
    <ol type="a">
        <li>看书</li>
        <li>听歌</li>
        <li>学习</li>
        <li>运动</li>
    </ol>

    <dl>
        <dt>问：HTML是什么</dt>
        <dd>答：超文本标记语言</dd>
    </dl>
    <div>aaaaa</div><div>bbbbb</div><span>cccccc</span><span>dddddd</span>
</body>
</html>

4.3 小技巧

1）快速生成多个列表项

5，HTML图像标签

5.1 简介

在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签：（也可以将图片作为背景，插入图片）

其中img标签中常⽤属性如下：

src：图⽚名及url地址

alt: 图⽚加载失败时的提示信息

title：⽂字提示属性（鼠标放置上去的提示信息）

width：图⽚宽度（宽/高只指定一个的话，另一个会根据比例自适应变动）

height：图⽚⾼度

border：边框线粗细

5.2 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML图片img标签</h1>
    <img src="./images/11.jpg" alt="图片1" width="600">
    <img src="./images/12.jpg" alt="图片2" width="600">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下" width="200">
</body>
</html>

5.3 理解绝对路径与相对路径

绝对路径：

绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)

例如：

C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。

www.sun.com/index.htm也代…

相对路径：

相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录），例如：

在Web开发中，"/"代表Web应⽤的根⽬录。

"./" 代表当前⽬录,

"../"代表上级⽬录。这种类似的表示，也是属于相对路径。

5.4 小技巧

1）快速生成标签

6，HTML超链接标签

6.1 超级链接标签a

格式：

<a href="链接⽬标url地址">显示⽂字</a>

a标签属性

href: 必须，指的是链接跳转地址

target: 表示链接的打开⽅式：

_blank 新窗⼝

_parent ⽗窗⼝

_self 本窗⼝（默认，点击回退可以回到上一个页面）

_top 顶级窗⼝

framename 窗⼝名

title：⽂字提示属性（鼠标放上去，可以看到详情）

锚点链接（可以通过id定位，在页面内跳转）

定义锚点：以前使⽤的是

使⽤锚点：跳到a1处

6.2 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML实例-超级链接a标签</h1>

    <!-- 锚点超级链接 -->
    <a href="#girl1">美女1</a><br/><br/>
    <a href="#girl2">美女2</a><br/><br/>

    <!-- 普通超级链接 -->
    <a href="https://ww.baidu.com" title="百度链接">百度(本窗口打开)</a><br/>
    <a href="https://ww.baidu.com" target="_blank">百度(新窗口打开)</a> <br/><br/>

    <a href="./Demo.html" target="_blank" >图片标签实例</a><br/><br/>

    <a id="girl1"></a>
    <h4>美女1</h4>
    <img src="./images/11.jpg" alt="girl1" width="100%"><br/><br/>

    <a id="girl2"></a>
    <h4>美女2</h4>
    <img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/>

</body>
</html>

7，HTML表格标签

7.1 表格中的标签

th与td相比，th默认有加粗居中效果

7.2 举例

1）简单的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML实例-表格标签</h1>

    <table>
        <!-- 表头 -->
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>

        <!-- 第一行数据 -->
        <tr>
            <td>100</td>
            <td>旗木·卡卡西</td>
            <td>21</td>
            <td>8班</td>
        </tr>

        <!-- 第二行数据 -->
        <tr>
            <td>101</td>
            <td>漩涡鸣人</td>
            <td>15</td>
            <td>8班</td>
        </tr>

        <!-- 第三行数据 -->
        <tr>
            <td>102</td>
            <td>宇智波·佐助</td>
            <td>15</td>
            <td>8班</td>
        </tr>
    </table>
    

</body>
</html>

2）添加表格线

3）调整宽度

4）消除缝隙

5）调整内容与边框的距离

6）检查元素

发现浏览器自动为表格添加 tbody 标签

7）添加标题

8）跨单元格

从上往下跨，从左往右跨

9）指定表格内容横向位置

10）指定表格内容纵向位置

11）从左向右跨

7.3 小技巧

1）快速生成表格

8，HTML表单标签（重要）

8.1 form 表单标签

1）form标签常⽤属性：

*action属性:提交的⽬标地址(URL)

*method属性:提交⽅式:get(默认)和post

get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.

post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.

enctype:提交类型

target: 在何处打开⽬标 URL。

name:属性为表单起个名字.在HTML5中使⽤ id 代替。

2）举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML实例-表单标签：form, input, select, textarea</h1>
    
    <form action="a.html" method="GET">
        姓名：<input type="text" name="uname"/> <br/><br/>
        密码：<input type="password" name="upass"/> <br/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>

</body>
</html>

8.2 input 表单项标签input定义输入字段

1）input常用属性

⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。

*type属性:表示表单项的类型:值如下:

text:单⾏⽂本框

password:密码输⼊框

checkbox:多选框注意要提供value值

radio:单选框注意要提供value值

file:⽂件上传选择框

button:普通按钮

submit:提交按钮

image:图⽚提交按钮

reset:重置按钮, 还原到开始(第⼀次打开时)的效果（如果有默认值，则会恢复默认值，而不是清空的意思）

hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改

HTML5新增属性

email ⽤于应该包含 e-mail 地址的输⼊域

url ⽤于应该包含 URL 地址的输⼊域

number ⽤于应该包含数值的输⼊域。

max 规定允许的最⼤值

min 规定允许的最⼩值

step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value 规定默认值

range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条

max 规定允许的最⼤值

min 规定允许的最⼩值

step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value 规定默认值

⽇期选择器 Date pickers

date - 选取⽇、⽉、年

month - 选取⽉、年

week - 选取周和年

time - 选取时间（⼩时和分钟）

datetime - 选取时间、⽇、⽉、年（UTC 时间）

datetime-local - 选取时间、⽇、⽉、年（本地时间）

search ⽤于搜索域，⽐如站点搜索或 Google 搜索

color 颜⾊选择

*name属性: 表单项名,⽤于存储内容值的

*value属性: 输⼊的值(默认指定值)

*placeholder: 预期值的简短的提示信息

size属性: 输⼊框的宽度值

maxlength属性: 输⼊框的输⼊内容的最⼤⻓度

readonly属性: 对输⼊框只读属性（不可修改，但仍会提交）

*disabled属性: 禁⽤属性（不可修改，不会提交）

*checked属性: 对选择框指定默认选项（单选，若多选项添加checked则默认最后一个）

accesskey属性: 指定快捷键(不常⽤) (IE:alt+键⽕狐:alt+shift+键)

tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

src和alt是为图⽚按钮设置的

注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空

image图⽚按钮，默认具有提交表单功能。

2）举例——type属性

radio

0/1是要传送至后台的，之所以选择0/1而不是男/女，是因为数字相较于汉字，查询速度以及占用空间要更高效

checkbox

其他属性值

reset

设置默认值

重置后

8.3 select 标签创建下拉列表

1）常用属性

name属性:定义名称,⽤于存储下拉值的

size：定义菜单中可⻅项⽬的数⽬，html5不⽀持

disabled 当该属性为 true 时，会禁⽤该菜单。

multiple 多选
... 下拉选择项标签,⽤于嵌⼊到标签中使⽤的; *value属性:下拉项的值 *selected属性:默认下拉指定项. 2）举例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML实例-表单标签：form, input, select, textarea</h1> <form action="a.html" method="GET"> 学历：<select name="education" id=""> <option value="1">大专</option> <option value="2">本科</option> <option value="3" selected>硕士</option> <option value="4">博士</option> </select> </form> </body> </html> 8.4 textarea 多行的文本输入区域 1）常用属性 name :定义名称,⽤于存储⽂本区域中的值。 cols ：规定⽂本区内可⻅的列数。 rows ：规定⽂本区内可⻅的⾏数。 disabled：是否禁⽤ readonly：只读 ... 默认值是在两个标签之间 2）举例无value属性，而是在标签开始结束中间添加内容，如图： 8.5 button 标签定义按钮可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。 8.6 fieldset 元素可将表单内的相关元素分组（圈框） disabled属性：定义 fieldset 是否可⻅。 form属性：定义该 fieldset 所属的⼀个或多个表单。 8.7 legend -- 标签为 fieldset 、 figure 以及 details 元素定义标题 8.8 optgroup html5标签-- 定义选项组此元素允许您组合选项，允许进行分组 8.9 datalist html5标签-- 定义可选数据的列表与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。 9，HTML框架标签 1）常用属性： src：规定在 iframe 中显示的⽂档的 URL name：规定 iframe 的名称 height：规定 iframe 的⾼度。 width：定义 iframe 的宽度。 frameborder：规定是否显示框架周围的边框。例如： 2）举例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML框架标签：iframe</h1> <ul> <li><a href="f.html" target="myframe">表单标签实例</a></li> <li><a href="e.html" target="myframe">表格标签实例</a></li> <li><a href="c.html" target="myframe">图片标签实例</a></li> </ul> <iframe src="f.html" name="myframe" frameborder="1" width="80%" height="500"></iframe> </body> </html> 10，HTML5多媒体标签 10.1 新增布局标签将一些标签的含义更加具体化，这样可以快速区分页面中的各个部分，提高检索内容的速度 10.2 新增的input type属性这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示更多新增type 参考 w3school 10.3 新增的input属性举例audio标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML多媒体标签</h1> <audio src="./images/beidahuang.mp3" controls="controls"> 你的浏览器不支持audio音频标签 </audio> <br/> <audio controls> <source src="./images/beidahuang.mp3" type="audio/mpeg" /> 你的浏览器不支持audio音频标签 </audio> <br/><br/> <video src="./images/fun.mp4" controls="controls" width="400" height="400"> 你的浏览器不支持video视频标签 </video> <br/><br/> <video controls="controls" width="400" poster="./images/11.jpg" height="400"> <source src="./images/fun.mp4" type="video/mp4" /> 你的浏览器不支持video视频标签 </video> <br/><br/> <embed src="./images/haowan.swf" width="300" height="300" /> </body> </html> 由于浏览器厂商不同，默认控件的展示效果可能不太一致，所以一部分厂家会自定义视频播放控件章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731 有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

04-前端技术_HTML与HTML5常用标签