互联网的三大基石

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">输⼊ ⽇期 时间