一、HTML
1. 1HTML简介
（1）HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是 超⽂本标记语⾔
（2）HTML不是⼀种编程语⾔，⽽是⼀种 标记语⾔
（3）超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成
（4）⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm
（5）html⽂档也叫 Web⻚⾯ ，其实就是⼀个⽹⻚，html⽂件⽤ 编辑器打开 显示的 是⽂本 ，可以⽤⽂本的⽅式 编辑它
（6）如果⽤ 浏览器打开 ，浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚
1.2 HTML的版本发展历史：
1.3 HTML⽂档类型的设定：
HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值。
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title></head><body></body></html>
(2) XHTML ，其基本结构如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
(3) HTML5 ，其基本格式如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
1.4 HTML基础语法
1.4.1 HTML基本结构:
（1）HTML⽂件的扩展名为 .html 或者 .htm
（2）HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容
（3）HTML是由： 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 … 标签包裹
（4）HTML标签（标记）的语法是由 < 和 > 括起来。
（5）HTML标签有两种： 双标签 ： <标签名>….</标签名> 和 单标签 ： <标签名 />
（6）HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>….</标签名>
（77）HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果 ^_^ 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 此处可以写各种⻚头属性设置、CSS样式和JavaScript脚本等... -->
</head>
<body>
<h1>黑客预备队队友网站</h1>>
<hr/>
<a href="http://www.baidu.com" title="百度网址">百度</a>
</body>
</html>
1.4.2 HTML注释
html⽂档代码中可以插⼊注释，注释是对代码的说明和解释
<!-- 这就是唯⼀的⼀种HTML注释了 -->
1.4.3 HTML中HEAD头部设置
head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置
在head中常包含如下⼦标签：
具体示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⽹⻚标题</title>
<meta name="Keywords" content="关键字" />
<meta name="Description" content="简介、描述" />
<link type="text/css" rel="stylesheet" href="**.css"/>
<style type="text/css">
嵌⼊css样式代码
</style>
<script >
JavaScript脚本程序
</script>
</head>
<body>
<h3>⽹⻚显示内容</h3>
</body>
</html>
1.5 HTML⽂本标签
常⽤⽂本标签如下：
… 斜体
… 强调斜体
… 加粗
… 强调加粗
作品的标题（引⽤）
… 下标 … 上标… 删除线
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>HTML标签实例--⽂本标签</h3>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<i>i: 斜体标签</i> <br/>
<em>em: 强调斜体标签</em> <br/>
<b>b: 加粗标签</b><br/><br/>
<strong>strong: 强调加粗标签</strong><br/>
<del>del: 删除线</del><br/>
<u>u: 下划线</u> <br/><br/>
⽔分⼦：H<sub>2</sub>O <br/>
4<sup>2</sup>=16
</body>
</html>
1.6HTML格式化标签
常⻅格式化标签如下：
换⾏
…
换段⽔平分割线
列表：
- …
- …
- …
…
常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化… 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对
它进⾏操作。
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML格式化标签</title>
</head>
<body>
<h2>台风“海高斯”巅峰状态登陆广东 树木倒伏高速关闭</h2>
<div style="width: 300px"><p>本文转自【中国天气网】；</p>中国天气网讯 今年第7号台风“海高斯”于今天（8月19日）6时前后以<br/>巅峰状态台风级别正面登陆广东省珠海市金湾区沿海。</div>
<hr/>
<div>今天2时至8时，
广东雨势最大的区域集中在珠三角一带。从早上8时到10时，强降雨区有所扩大，雨势最强的地方出现在广东台山一带，两小时降雨量约88毫米。在台山市赤溪镇，6时最大风力达10级，
导致路旁树木倒伏，新台高速斗山站也已封闭，禁止通行。（图/杜督 曾子隽）</div>
一个家族
<ul type="circle">
<li>小白</li>
<li>小黑</li>
<li>小红</li>
<li>小黄</li>
</ul>
<ol type="i">
<li>小白</li>
<li>小黑</li>
<li>小红</li>
<li>小黄</li>
</ol>
<dl>
<dt>dt是标题</dt>
<dd>dd是内容</dd>
</dl>
<div>aaaaa</div>
<div>ccccc</div>
<span>444444</span>
<span>11111</span>
</body>
</html>
1.7HTML图像标签
在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签：
其中img标签中常⽤属性如下：
src： 图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title：⽂字提示属性
width：图⽚宽度
height：图⽚⾼度
border：边框线粗细
绝对路径：
绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)
例如：
C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。
相对路径：
相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录），
例如：
在Web开发中，"/"代表Web应⽤的根⽬录。
和物理路径的相对表示，
例如："./" 代表当前⽬录,
"../"代表上级⽬录。这种类似的表示，也是属于相对路径。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML图像标签</title>
</head>
<body>
<h1>黑客预备队的练习</h1>
<img src="E:\web\images\33.jpg" alt="无了" title="33" width="300">
<img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" alt="百度" title="流量" width="300">
<img src="https://pics0.baidu.com/feed/9213b07eca8065389479716c5dc48743ac3482db.jpeg?token=9bbcd93148dc539243df5b9dd4cb66ad" alt="台风" width="300">
</body>
</html>
1.8 HTML超链接标签
超级链接标签a：
格式： 显示⽂字
a标签的属性：
href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）
锚点链接：
定义⼀个锚点： 以前使⽤的是
使⽤锚点： 跳到a1处
示例代码：
<!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>超级链接a</h1>
<!--锚点链接-->
<a href="#mn1" > 宅在家里</a>
<!--普通超级链接-->
<a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8995161869904916006%22%7D&n_type=0&p_from=1" target="-blank"> 台风“海高斯”巅峰状态登陆广东 树木倒伏高速关闭</a>
<a id="mn1"></a>
<h4>美女图片</h4>
<img src="E:\web\images\11.jpg" alt="无了" width="50%">
</body>
</html>
运行效果
1.9 HTML表格标签
示例代码：
<!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>
<h2>表格</h2>
<table border="1" width="300" cellspacing="0" cellpadding="1">
<caption><h2>学生信息表</h2></caption>
<tbody>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
</tbody>
<tbody>
<tr>
<td>小白</td>
<td>01</td>
</tr>
<tr>
<td><小兰/td>
<td>02</td>
</tr>
<tr>
<td>小黑</td>
<td>03</td>
</tr>
</tbody>
</table>
</body>
</html>
2.0 HTML表单标签
(1)
表单标签form标签常⽤属性：
*action属性:提交的⽬标地址(URL)
*method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。
(2) 表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。
具体在下⾯有详解：
如：<input type="text" name="username">
*type属性:表示表单项的类型:值如下:
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
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属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)
src和alt是为图⽚按钮设置的
注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空
image图⽚按钮，默认具有提交表单功能。
代码：
<!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>
<form action="a.html" method="post">
姓名：<input type="text" name="username" placeholder="请输入账号"><br/><br/>
密码：<input type="password" name="userpass"><br/><br/>
性别：<input type="radio" checked name="sex" value="0">男
<input type="radio" name="sex" value="1">女<br><br>
爱好：<input type="checkbox" name="likes" value="1">运动
<input type="checkbox" checked name="likes" value="2">游戏
<input type="checkbox" name="likes" value="3">音乐
<input type="checkbox" name="likes" value="4">学习 <br><br>
头像：<input type="file" name="pic" ><br> <br>
<input type="button" value="普通按钮">
<input type="image" src="./images/44.jpg" width="50" value="美白"><br><br>
qq邮箱：<input type="email" name="pic" ><br><br>
年龄：<input type="number" min="18" max="90" value="18" name="pic"><br><br>
网址：<input type="url" name="pic"><br><br>
日期：<input type="data" name="pic"><br><br>
颜色：<input type="color" name="pic"><br><br>
指数：<input type="range" min="0" max="100" step="5"><br><br>
学历：<select name="education" id="">
<option value="1">小学</option>
<option value="2" selected>初中</option>
<option value="3">其他</option>
</select><br><br>
简介：<textarea name="" id="" cols="30" rows="10">请输入</textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
运行效果：
(3) 标签创建下拉列表
name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
(4) 多⾏的⽂本输⼊区域
name :定义名称,⽤于存储⽂本区域中的值。
cols ：规定⽂本区内可⻅的列数。
rows ：规定⽂本区内可⻅的⾏数。
disabled： 是否禁⽤
readonly： 只读
…
默认值是在两个标签之间
(5) 标签定义按钮。
您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之
处。
(6)
disabled属性：定义 fieldset 是否可⻅。
form属性： 定义该 fieldset 所属的⼀个或多个表单。
(7) — 标签为
<form>
<fieldset>
<legend>个⼈信息：</legend>
姓名：<input type="text" /><br/>
年龄：<input type="text" /><br/>
</fieldset>
<br/><br/>
<fieldset>
<legend>健康信息：</legend>
身⾼：<input type="text" /><br/>
体重：<input type="text" /><br/>
</fieldset>
</form>
(8)
城市：
<select name="city">
<optgroup label="河北省">
<option>⽯家庄</option>
<option>保定</option>
<option>廊坊</option>
</optgroup>
<optgroup label="河南省">
<option>郑州</option>
<option>安阳</option>
<option>周⼝</option>
</optgroup>
</select>
(9)
<form action="demo_form.php" method="get">
搜索：
<input type="search" list="namelist" name="keywords"/>
<datalist id="namelist">
<option value="zhangsan">
<option value="zhangsanfeng">
<option value="zhangwuji">
<option value="lisi">
<option value="lixiaolong">
</datalist>
</form>
2.1 HTML框架标签
2.1HTML框架标签
属性：src：规定在 iframe 中显示的⽂档的 URL
name：规定 iframe 的名称
height：规定 iframe 的⾼度。
width：定义 iframe 的宽度。
frameborder：规定是否显示框架周围的边框。
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
代码：
<!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>
<ul>
<li><a href="a.html" target="myframe">超级链接</a></li>
<li><a href="b.html" target="myframe">表格</a></li>
<li><a href="c.html" target="myframe">表单</a></li>
</ul>
<iframe src="c.html" frameborder="0" width="50%" height="500" name="myframe"></iframe>
</body>
</html>
二、HTML5
2.1新增布局标签
2.2新增的input type属性值
这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应
提示.更多新增type 参考 w3school
2.3新增的input 属性
2.4多媒体标签
<audio src="./images/beidahuang.mp3" controls="controls">
你的浏览器不⽀持播放
</audio> <br/>
<audio controls="controls">
<source src="./images/beidahuang.mp3" type="audio/mpeg" />
你的浏览器不⽀持播放
</audio> <br/><br/>
<video controls="controls" width="400" height="400">
<source src="./images/fun.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm">
你的浏览器不⽀持视频播放
</video> <video controls loop poster="tiao.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的破浏览器该扔了，不⽀持视频标签
</video> <br/><br/>
<embed src="./images/haowan.swf" width="300" height="300" />
若有收获，就点个赞吧
0 人点赞
