互联网的三大基石

HTML(Hyper Text Markup Language)：超文本标记语言

HTTP(HyperText Transfer Protocol)：超文本传输协议

URL(Uniform Resource Location) ：统一资源定位符

HTML的基本结构

  • <head> 与 </head>之间对当前⻚⾯的各种设置
  • <html> 与 </html>之间的文本描述网页
  • <body> 与 </body>之间的文本是可见的页面内容
  • <h1> 与 </h1 >之间的文本被显示为标题
  • <p’> 与 </p>之间的文本被显示为段落

<head> 元素：

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

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

标签描述示例
<title>定义了⽂档的标题<title>本⽹⻚标题</title>
<base>定义了⻚⾯链接标签的默认链接地址<base href="http://www.****.com/"<br/>target="_blank">
<link>定义了⼀个⽂档和外部资源之间的关系导⼊CSS⽂件 <link type="text/css" rel="stylesheet"<br/>href="**.css"/>
<meta>定义了HTML⽂档中的元数据设置⽹⻚编码、关键字、描述<meta charset="utf-8"/><br/><meta name="Keywords" content="关键字"<br/>/><br/><meta name="Description" content="简介、<br/>描述" />
<script>> 定义了客户端的js脚本⽂件<script ><br/> JavaScript脚本程序<br/></script>
<style>定义了HTML⽂档的样式⽂件<style type="text/css"><br/>嵌⼊css样式代码<br/></style>

<p> 元素：

1
<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签</p>。

元素内容是：This is my first paragraph。

<body> 元素：

1
2
3
<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

1
2
3
4
5
6
7
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

1
2
<p>This is a paragraph
<p>This is a paragraph

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注释：未来的 HTML 版本不允许省略结束标签。

HTML 标题

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

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

实例:

1
2
3
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 水平线

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

hr 元素可用于分隔内容。

实例:

1
2
3
4
5
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML 折行

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

1
<p>This is<br />a para<br />graph with line breaks</p>

超连接标签

超链接标签的作用（不会自动换行）

【1】实现不同页面之间的跳转

href：指定跳转到目标资源的位置

target：打开网页的方式

_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）

【2】实现锚点功能

1
2
3
4
5
6
7
8
<!--跳转到本地的资源位置-->
<a href="02body中常用标签.html" target="_blank">02标签测试</a>
		
<!--跳转到网络的位置-->
<a href="http://www.baidu.com">百度</a>
<!--锚点功能-->
<a href="#bottom" id="top">返回底部</a>
<a href="#top" id="bottom">返回顶部</a>

文本标签

1
2
3
4
5
6
7
8
9
常⽤⽂本标签如下：
<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独⽴⾏）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引⽤）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

HTML 中有⽤的字符实体

image-20211011094203610

格式化标签

常⻅格式化标签如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<br/> 换⾏
<p>...</p> 换段
<hr /> ⽔平分割线

列表：
<ul>...</ul> ⽆序列表
<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
<li>...</li> 列表项
<dl>...</dl> ⾃定义列表
<dt>...</dt> ⾃定义列表头
<dd>...</dd> ⾃定义列表内容

<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化
<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对
它进⾏操作。

图片标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--相对路径-->
<img src="img/1.jpg" />
<!--绝对路径-->
<img src="E:\\HBuilderProjects\\my01HTML\\img\\1.jpg" />
<!--网络路径-->
<img src="https://www.baidu.com/img/bd_logo1.png" />

<!--参照物-->
6666
<a href="#">
	
<img src="img/1.jpg" title="图片"  width="300px" height="200px" border="10px" alt="图片显示错误" align="right"/>		
</a>
8888

img (不会自动的换行)

  • src:引入图片的位置{相对路径、绝对路径、网络路径 }

  • title：图片的标题

  • border:图片的边框

  • alt：图片无法正常显示的时候显示的属性

  • align:图片的位置 ，必须有参照物

理解绝对路径 和相对路径 :

  • 绝对路径：
    绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)
    例如：
    C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
    http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

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

    例如：
    在Web开发中，”/“代表Web应⽤的根⽬录。
    和物理路径的相对表示，例如：”./“ 代表当前⽬录，”../“代表上级⽬录。这种类似的表示，也是属于相对路径。

表格标签

表格描述常⽤属性
<table>定义表格border、width、cellspacing、cellpadding
<caption>定义表格标题align排列⽅式
<th>定义表格的表头align,valign,bgcolor、rowspan、colspan、width、height
<tr>定义表格的⾏align,valign,bgcolor
<td>定义表格单元格lign,valign,bgcolor、rowspan、colspan、width、height
<thead>定义表格的⻚眉align,valign
<tbody>定义表格的主体align,valign
<tfoot>定义表格的⻚脚align,valign

table表格的自适应能力 (align=”center”)整个的表格整体居中

  • cellpadding：内容和单元格的距离

  • cellspacing：单元格和单元格的距离

  • colspan：列合并

  • rowspan：行合并

  • bgcolor：背景颜色

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--创建表格-->
<table border="1px" align="center" cellpadding="20px" cellspacing="30px">
			
	<tr height="100px" align="center">		
		<td width="100px" align="center">11</td>
		<td width="100px">2</td>
		<td width="100px">3</td>
	</tr>
<!--表格属性-->
<table border="1px" width="300px" height="300px" bgcolor="bisque">
	<tr bgcolor="aqua">
        <th colspan="2">1--2</th>
        <th rowspan="2">6--9</th>

表单标签

(1) <form>...</form> 表单标签

form标签常⽤属性：
action属性:提交的⽬标地址(URL)
method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。

1
2
3
4
5
6
7
8
<form action="02body中常用标签.html" method="get">
			
	<!--普通文本框-->
	<input type="text"  name="wd"/> 
			
	<input type="submit" value="百度一下" />
			
</form>

action：表单提交的位置

method（get/post）：表单提交的方式，有get和post。

get：

  • (1)参数会依附于url地址之后

  • (2)利用get方式提交数据，数据的长度有限制

  • (3)利用get方式提交数据，是不安全的

post：

  • (1)请求不会依附于地址

  • (2)利用post处理参数不受限制

  • (3)post提交数据比较安全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form>
	<!--普通文本框  value：文本框中值-->
	账号： <input type="text"  name="zh" value="123" /> <br />
			
	密码：<input type="password" name="pwd" value="123" /><br />
			
	<!--单选框  实现单选的效果必须指定同一个name属性   checked：默认的选择-->
			
	男：<input type="radio"  name="sex"  value="1" checked="checked"/>
	女：<input type="radio"  name="sex" value="0"/>	<br />
		   
	<!--多选框-->
		   
	抽烟:<input type="checkbox"  value="1" checked="checked">
		   
	喝酒:<input type="checkbox" />
		    
	烫头:<input type="checkbox" /><br />
		    
	<!--多行文本框-->
		    
	个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br />
		    
	<!--文件选择框-->
	<input type="file" name="file" /><br />
		    
	<!--隐藏框-->
		    
	<input type="hidden" name="sno" value="20180607" /><br />
		    
	<!--下拉框  selected：默认的选择-->
		    
	<select name="ch">
		    	
		<option value="1">中国</option>
		    	
		<option value="2" selected="selected">美国</option>
		    	
		<option value="3">日本</option>
		    	
		<option value="4">新加坡</option>
		    	
	</select> <br />
		    
	<!--提交按钮-->
	<input type="submit" value="提交" /> <br />
		    
	<!--清除按钮,清空写好的内容-->
		    
	<input type="reset" value="清除" />
		    
	<!--普通的按钮  没有提交数据的功能-->
	<input type="button" value="提交" />
    
	</form>

(2) <input> 表单项标签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 - 选取⽉、年

(3) <select>...</select> 标签创建下拉列表。

name属性:定义名称,⽤于存储下拉值的 size：定义菜单中可⻅项⽬的数⽬，html5不⽀持 disabled 当该属性为 true 时，会禁⽤该菜单。 multiple 多选 … 下拉选择项标签,⽤于嵌⼊到标签中使⽤的; *value属性:下拉项的值 *selected属性:默认下拉指定项.

(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域

name :定义名称,⽤于存储⽂本区域中的值。 cols ：规定⽂本区内可⻅的列数。 rows ：规定⽂本区内可⻅的⾏数。 disabled： 是否禁⽤ readonly： 只读 … 默认值是在两个标签之间

(5) <button>...</button>标签定义按钮。

您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处

(6) <fieldset> —fieldset元素可将表单内的相关元素分组。

disabled属性：定义 fieldset 是否可⻅。 form属性： 定义该 fieldset 所属的⼀个或多个表单。

(7) <legend></legend>标签为<fieldset>、<figure>以及<details>元素定义标题。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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) html5标签–<optgroup></optgroup>标签定义选项组。此元素允许您组合选项

1
2
3
4
5
6
7
8
9
10
11
12
13
城市：
<select name="city">
 <optgroup label="河北省">
 <option>⽯家庄</option>
 <option>保定</option>
 <option>廊坊</option>
 </optgroup>
 <optgroup label="河南省">
 <option>郑州</option>
 <option>安阳</option>
 <option>周⼝</option>
 </optgroup>
</select>

(9) html5标签–<datalist></datalist>标签定义可选数据的列表。与 input 元素配合使⽤，就可以 制作出输⼊值的下拉列表。

1
2
3
4
5
6
7
8
9
10
11
<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>

框架标签

属性：src：规定在 iframe 中显示的⽂档的 URL name：规定 iframe 的名称 height：规定 iframe 的⾼度。 width：定义 iframe 的宽度。 frameborder：规定是否显示框架周围的边框。

iFrame

1
2
3
4
5
6
7
8
9
10
<body>
	<ul>
		<!--target为框架名字会在框架内显示内容-->
		<li><a href="http://www.baidu.com" target="ifm">01</a></li>
		<li><a href="02body中常用标签.html">02</a></li>
		<li><a href="03body中常用的小标签.html">03</a></li>
	</ul>
	<!--框架标签  width宽度，height高度，name名字，src为默认显示路径-->
	<iframe width="700px" height="450px" name="ifm" src="http://www.baidu.com"></iframe>	
</body>

属性：

  • src：规定在 iframe 中显示的文档的 URL
  • name：规定 iframe 的名称
  • height：规定 iframe 的高度
  • width：定义 iframe 的宽度
  • frameborder：规定是否显示框架周围的边框

Frameset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<frameset rows="150px,*,100px">
	<!--顶部部分-->
	<frame src="admin/top.html" noresize="noresize" />

	<!--中间部分-->
	<frameset cols="10%,*">
	<!--左侧部分-->
	<frame src="admin/left.html" />
	<!--右侧部分-->
	<frame src="admin/right.html" name="rig" />
	</frameset>

	<!--底部部分-->
	<frame src="admin/bottom.html" />
</frameset>

HTML5表单增强标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--邮箱属性-->
邮箱：<input type="email" />
<!--数字属性-->
年龄：<input type="number" />
<!--滑动器属性-->
滑动器：<input type="range" />
<!--搜索属性-->
搜索：<input type="search" />
<!--日期属性-->
日期：<input type="date" />
<!--日期 周-->
日期：<input type="week" />
<!--日期 月份-->
日期：<input type="month" />

表单增加属性
placeholder：添加默认文字
autofocus：光标自动定位到该处
max：最大值/ min：最小值
maxlength：字符最大长度
minlength：字符最小长度

HTML5结构增强标签

1
2
3
4
5
6
7
8
9
10
11
12
<!--增强结构标签-->
<!--头部模块-->
<header></header>
<!--中间提示-->
<nav></nav>
<!--中间的展现-->
<div class="center">
<div class="login">
</div>
</div>
<!--底部模块-->
<footer></footer>

HTML5引入多媒体标签

  1. 引入视频标签
1
2
3
4
5
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

  • video 元素提供了 播放、暂停和音量控件来控制视频。

  • 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

  • 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

  • video 元素支持多个 source 元素. source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

  1. 引入音频标签
1
2
3
4
5
<audio controls="controls">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

  • control 属性供添加播放、暂停和音量控件。

  • 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

  • audio 元素允许使用多个 source 元素. source 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

  1. 引入多媒体标签
1
2
<!--多媒体引入标签-->
<embed src="music/1.mp3"></embed>
  1. HTML5中其他标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!--figure规定独立的流内容（图像、图表、照片、代码等等）-->
<figure>
	<img src="img/蜡笔小新比大象.gif" />
	<!--定义图像标题-->
    <figcaption>蜡笔小新</figcaption>
</figure>
		
<!--展示文章细节标签-->
<details>
	<!--默认文字-->
	<summary>请选择</summary>
	<!--选项-->
	<p>01</p>
	<!--mark 着重突出的内容-->
	<p><mark>02</mark></p>
	<p>03</p>
	<p>04</p>
</details>
		
<!--刻度标签
	max：规定的最大值
	min：规定的最小值
	value：当前的值
	low：自己定的最小值
	high：自己定义的最大值
		-->
<meter max="100" min="0" value="60" low="20" high="80"></meter>
		
<!--进度条标签-->
<progress max="100" value="20"></progress>
		
<br />
		
<!--<datalist> 标签规定了 <input> 元素可选的选项列表-->
<input type="text" list="city" />
<datalist id="city">
	<option value="01"></option>
	<option value="02"></option>
	<option value="03"></option>
	<option value="04"></option>
</datalist>
		
<!--画布标签-->
<canvas id="mycat"></canvas>
<!--javascript在画布中绘画正方形-->
<script>
	var ca=document.getElementById("mycat");
	var te=ca.getContext("2d");
	//背景颜色
	te.fillStyle="aqua";
	//绘制图形的大小,x坐标0，y坐标0，80宽，100高
	te.fillRect(0,0,80,100);
</script>

新增布局标签

标签作⽤
header定义⽂档的⻚眉
nav定义导航链接部分
footer定义⽂档或者节的⻚脚/底部
section定义⽂档中的节（section/段落）
aside定义其所处内容之外的内容/侧边
datalist定义选项列表，与input 配合使⽤该标签，两者通过id关联
fieldset可将表单内的相关元素打包/分组, 与legend 搭配使⽤
article定义⽂章

新增的input type属性值

这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示

类型示例含义效果
emai<input type="email">输⼊邮箱格式
tel<input type="tel">输⼊⼿机号
url<input type="url">输⼊url
number<input type="number">输⼊数字
search<input type="search">搜索框（体现语义化）
range<input type="range">⾃由拖动的滑块
time<input type="time">输⼊⼩时 分钟
date<input type="date">输⼊年 ⽉ ⽇
datetime<input type="datetime">输⼊ ⽇期 时间