Web
万维网，基于互联网。
三大部分：HTML+CSS+JavaScript（+HTTP协议）
注意：TCP/IP协议只负责数据的传输，细节内容是通过HTTP协议进行制定协商的
1.HTML
<!DOCTYPE html> //首先是文档版本声明,此时是HTML 5
<html> //html标签
<head> //头部标签
<meta charset="utf-8"> //设置字符编码
<title>标题</title> //标题标签，不可缺
</head>
<body> //主体标签
</body>
</html>
(1)文本标签
1)<h1></h1>至<h6></h6> //标题标签
2)<strong></strong> //强调字体以加粗展示
<em></em> //强调字体以斜体展示
3)<b></b> //粗体
<i></i> //斜体
4)<del></del> //删除效果
5)<pre></pre> //以文本内容的原样展示，有空格则会显示空格
6)<sub></sub> //下标
<sup></sup> //上标
(2)超链接标签
<!--<a>标签---超链接标签
示例:
<a href="http://www.baidu.com" target="_blank" title="点击可跳转百度">点我</a>
属性:
href属性:规定链接指向的页面的url；
取值范围:
绝对URL:指向网络的一个固定的链接地址；
代码示例:<a href="http://www.baidu.com">百度链接</a>
相对URL:指向相对于当前页面的网页；
代码示例:<a href="../../index.html">首页</a>
相对目录的编写方式（建议开发时使用）：
“.”代表当前所在的目录；
“..”代表上一层目录；
“/”代表根目录
title属性:鼠标移动上去时显示的文字；
target属性:规定在何处打开链接文档；
取值范围：
_blank:在新窗口打开被链接文档；
_self:在相同的框架中打开被链接文档；
_parent:在父框架中打开被链接文档；
_top:在整个窗口中打开被链接文档；
frameset:在指定的框架中打开被链接文档；
锚点:英文名anchor，又叫命名锚记，是网页内的超级链接，可以迅速定位当前网页的某一个位置。
代码示例:
<a href="#jump">点我看看</a>
<p id="jump">我是该区域的相应内容</p>
举例:–>
<body>
<a href="http://www.baidu.com" target="_blank" title="点击可跳转百度">此处为可点击的超链接</a><br>
<a href="#jump">可点击查看详情</a>
<div style="height: 15.625rem;">高度为250px</div>
<p id="jump">此处为超链接跳转的页面内容</p>
</body>
(3)格式排版标签
1.块级元素
div标签:一般配合css对网页内大块区域进行布局。
<body>
<div>div1</div>
<div>div2</div>
2.内联元素
span标签:用来对非特殊显示文本进行样式渲染。
<span>span1</span>
<span>span2</span>
3.有序列表系列：用来表示一组有序的、内容相似的的数据信息,自带顺序编号。
ol标签:有序列表
li标签:有序列表项
type属性:规定列表的项目符号的类型。
取值范围:A、a、1、i、Ι
示例3:–>
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ol>
4.无序列表系列:用来表示一组无序的、内容相似的的数据信息，一般导航栏都是用无序列表实现。
ul标签:无序列表
li标签:无序列表项
type属性:
取值范围: circle(空心圆)、disc(实心圆)、square(正方形)
示例4:–>
<ul>
<li>西红柿</li>
<li>白菜</li>
<li>茄子</li>
</ul>
5.自定义列表系列：用来表示一组无序的、内容相似的、具备标题的数据信息。
dl标签:自定义列表
dt标签:自定义标题
dd标签:自定义内容
示例5:–>
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dt>蔬菜</dt>
<dd>西红柿</dd>
<dd>茄子</dd>
</dl>
(4)图片标签
1.img图片标签:用来在页面中插入图片。
特殊属性说明:
src属性:图片所在的相对或绝对位置。
align属性:设置文本中的图像的对齐方式。
取值范围:
center、left、right、bottom、middle等
alt属性:用来为图像定义预备的可替换的文本。
示例1:-->
<img src="https://scpic.chinaz.net/files/pic/pic9/202106/hpic4067.jpg" width="100px" height="75px">
- map标签 将一个目标区域划分为若干个子区域，并声明每个区域的超链接位置。
area元素:用来定义图像映射中的区域，嵌套在 map中元素内部。
shape:用于描述区域的形状。取值（ rect\poly\circle\default ） 矩形\多边形\圆形，default指的是还没有被定义的区域。
coords:子区域的坐标。
href:规定子区域的超链接位置。
target:规定在何处打开链接文档。
alt:图片不显示的文字提示。
示例2:–>
<img src="../img/图片1.png" usemap="#Map" />
<map name="Map">
<area shape="circle" coords="64,36,19" href="cat.html"alt="眼睛" />
<area shape="rect" coords="35,87,59,126" href="cat1.html" alt="鼻子" />
</map>
-
hr标签:被水平线分隔的标题和段落
特性属性说明:
width:定义水平线的宽度。
size:定义水平线的高度。
align:设置水平线的对齐方式。
color:设置水平线的颜色。示例3:–>
<hr width="1000px" height="85px" align="bottom" color="aqua">
(5)表单类元素标签
form标签：浏览器端输入项容器，提交时会提交form表单内所有用于输入的子标签内容。
表单的作用：在动态网页技术中，主要用于用户与服务器的交互。
form标签私有属性说明：
1.action属性:设定处理表单数据提交的服务器url地址。action=“mailto：liwu001@126.com”。
2.method属性:设定数据传送到服务器的方式，常用的取值(默认值post)
get请求:声明本次请求的目的是从服务器获取数据。
post请求：声明本次请求的目的是向服务器传送数据。
get与post的区别:
目的不同
提交方式不同（一个在请求头，一个在请求体）
提交数据长度不同:
get：不超过255个字符
post：默认为不受限制。
安全性：
get：信息显示在浏览器地址栏。安全性低
3.name 属性：规定表单的名称。
4.target属性:规定在何处打开 action URL。
5.enctype属性：规定在发送到服务器之前应该如何对表单数据进行编码。
application/x-www-form-urlencoded:在发送前编码所有字符（默认）
multipart/form-data :不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain:空格转换为 “+” 加号，但不对特殊字符编码。
其中label标签可帮助表单添加文本，如：<label for="所需修饰的标签的id"></label>
例如：
<label for="p1">密 码:</label>
<input type="password" name="密码" id="p1" />
代码示例:–>
<body>
<form action="prac表单.html" method="get" >
<span><h3>欢迎进入本系统</h3></span>
<hr width="250px" color="dimgray"align="left" >
<label for="t1">用户名:</label><input type="text" name="文本" id="t1" /><br>
<hr width="210px" color="white" align="left">
<label for="p1">密 码:</label><input type="password" name="密码" id="p1" /><br>
<hr width="210px" color="white" align="left">
<input type="button" name="确定" id="b1" value="确定"/>
<input type="submit" id="s1" name="提交" />
<input type="reset" name="重置" id="r1" />
<br>
<br>
</form>
</body>
(6)表格
table标签
网页中的表格:以多行、多列来显示信息的方式。在网页中使用如下标签显示（由于表格会生成更多额外代码，因此在管理端页面使用较多）。
table标签：表格标签
thead标签：表头单元格，在此列可以定义表头，表头可以限定表体的宽度。（包含th标签）
th标签：表头中的单元格
tbody标签：表格的主体
tr标签：表格中的行
td标签：标准单元格
特殊属性说明：
border(边框)属性：border=“number”
background(背景)属性： background =“背景图片”
bgcolor(背景颜色)属性：bgcolor = “颜色”
width、height属性：width= “300”height=“200”
align:
表格的位置由table元素的align属性决定，可选值包括left、center、right。
valign:表格内文字的位置是由的align和valign决定的，valign可选值包括top、middle、bottom。 cellpadding(填充)属性:设置单元格边框与内容之间的距离
cellspacing(间距)属性:设置单元格之间的距离。
表格的合并：
colspan属性:跨列合并单元格(colspan = “number”)
rowspan属性:跨行合并单元格(rowspan =“number”)
设置tr的基本属性：
1、表格行align属性：
设置行内容的水平对齐方式，属性值有left、center、right
2、表格行valign属性：
设置行内容的垂直对齐方式，属性值有top、middle、bottom
示例:–>
<body>
<table border="1" cellspacing="1" cellpadding="1" background="https://scpic.chinaz.net/files/pic/pic9/202106/hpic4067.jpg"
width="250px" height="150px" >
<thead>
<tr>
<th align="center">姓名</th>
<th align="center">年龄</th>
</tr>
</thead>
<tbody>
<!-- 第行的第一列和第二列 -->
<tr>
<!-- 两行对应一列 -->
<td rowspan="2" align="center">张三</td>
<td align="center">12</td>
</tr>
<tr>
<td align="center">赵六</td>
</tr>
<tr>
<!--两列对应一行 -->
<td colspan="2" align="center" >李四</td>
</tr>
<tr>
<td align="center">王五</td>
<td align="center">32</td>
</tr>
</tbody>
</table>
</body>
(7)iframe框架
iframe标签：该标签用于引入在当前网页上引入其他网页资源（非同源也可
特殊属性说明：
align:规定如何根据周围的元素来对齐此框架,有：
Left
Right
Top
Middle
bottom
src:规定在iframe中显示的文档的URL
frameBorder:1 0
scrolling:规定是否在iframe中显示滚动条
Yes
No
auto
Width/height:定义iframe的宽度/高度
Pixels/%
iframe的优点：
切换子页面时不需要刷新父页面，提高请求速度。
示例:–>
<body>
<iframe src="6.表格.html" width="850px" height="400px" frameborder="1" scrolling="yes" align="left"></iframe>
</body>
(8)frame框架
1.框架结构标签frameset:
框架结构标签frameset，定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
2.重要事项：不能与 frameset标签一起使用 body 标签
3. 标签定义 frameset 中的一个特定的窗口（框架）,frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。
noresize:noresize 无法调整框架的大小。
scrolling:规定是否在框架中显示滚动条。
yes
no
auto
src:url,规定在框架中显示的文档的 URL。
name:规定框架的名称。
注意:在 HTML 5 中不支持 frameset 标签。
示例:–>
<frameset cols="50%,50%">
<frame src="1.文本标签.html" >
<frameset rows="25%,25%,25%,25%">
<frame src="2.超链接.html" >
<frame src="3.格式排版标签.html" >
<frame src="4.图片标签.html" >
<frame src="5.表单类元素标签.html" >
</frameset>
</frameset>
(9)视频
1. 标签是 HTML 5 中的新标签。
示例1:–>
<embed src="../img/ChatClient.swf" quality="high" bgcolor="#eeeeee"
width="100%" height="500px" name="ChatClient" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
2.video标签
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。
注释:Internet Explorer 8 以及更早的版本不支持 标签。
属性:
autoplay:如果出现该属性，则视频在就绪后马上播放。
controls:如果出现该属性，则向用户显示控件，比如播放按钮；
height:设置视频播放器的高度。
loop:如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted:规定视频的音频输出应该被静音。
poster:规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload:如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src:要播放的视频的 URL。
width:设置视频播放器的宽度。
示例2:–>
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
3.audio标签
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。
注释:Internet Explorer 8 以及更早的版本不支持 标签。
属性:
autoplay:如果出现该属性，则音频在就绪后马上播放。
controls:如果出现该属性，则向用户显示控件，比如播放按钮。
loop:如果出现该属性，则每当音频结束时重新开始播放。
muted:规定视频输出应该被静音。
preload:如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src:要播放的音频的 URL。
示例3:–>
<audio src="" >
当前浏览器不支持audio
</audio>
附：第一篇帖子，再接再厉~
扫一扫
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
