一、初始HTML
1、HTML简介
HTML全称为HyperText Mark-up Language，超文本标签语言，标签也称作标记或者元素
第一款浏览器MOSIAC
第一款商用的浏览器是netscape（网景）的navigator（导航者）
W3C制定了web的相关规定
2、运行环境和开发环境
开发环境只需要一个记事本即可
运行环境只需要有浏览器即可
3、标签的语法结构
<标签 属性="属性值"> 内容部分或称区域 </标签结束>标签大多成对出现，有开始<>和结束</>。（自标签除外）
标签内可以有属性，有属性必有值。（布尔类型属性除外如muted）
开始和结束标签之间包含的内容被称为区域。
标签不区分大小写。
4、页面的分类
静态页面：是指不修改网页源码的前提下，无论何时何地去访问都会得到同样的结果。
动态页面：网站会根据信息做出的实时反馈。例如注册，论坛等等。
二、常用标签
1、head中常用标签
meta标签：它的charset属性用来设置页面的编码方式（常见编码有GBK,UTF-8,BIG,bg2312）；它的name属性可以有keyword、description，这两个属性可以影响到网页的排名。
title标签：它用来定义页面的主体，影响选项卡显示的内容。
2、body中的常用标签
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- meta是一个自结束标签 -->
<!-- charset是meta的一个属性，它决定了网页的编码-->
<meta charset="UTF-8">
<meta name="keywords" content="学习；交友；游戏">
<meta name="description" content="这是同学相互学习交友的前台程序">
<title>只因你太美</title>
<style type="text/css">
span{
/* 将标签设置为行内标签的大小默认是内容部分的宽高，无法通过其他属性设置 */
/* display:inline; */
/* 将标签设置为块标签，它独占一行内容 */
/* display:block; */
/* 将标签设置为行内块标签，默认还是内容部分的宽高，但是可以同时width，height属性设置标签的大小 */
display: inline-block;
}
</style>
</head>
<body>
<!-- 标签的内容也被称为区域 -->
<header>
<b>这是一段加粗加黑的文字</b>
<strong>这也是一段加黑加粗的文字</strong>
<i>这是一段斜体文字</i>
<em>这也是一段斜体文字</em>
<u>这是下划线标签</u>
<del>这是中划线标签</del>
</header>
<section>
<!-- div默认是块标签 -->
<div style="border:1px; solid black">这是div块标签
<p>001</p>
<div>这是一个字div</div>
</div>
<span style="border:1px; solid green">这是span行内标签</span>
<!-- p标签是块标签 -->
<p style="border:1px; solid red">这是段落标签</p>
<!-- 格式化标签 -->
<pre>
锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。
</pre>
<!-- sub是下标标签 -->
0<sub>2</sub>
<!-- sup是上标标签 -->
9<sup>2</sup>=81
</section>
<!-- hr是分割线标签 -->
<hr>
<h1 style="display: inline;">这是h1</h1>
<h2>这是h2 </h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
</body>
</html>3、特殊符号
特殊字符 | 转义码 |
空格 | & nbsp； |
< | & lt； |
> | & gt； |
￥ | & yen； |
" | & quot； |
© | & copy； |
® | & reg； |
± | & plusmn； |
‰ | & permil； |
÷ | & divide； |
4、语义化标签
标签名称 | 作用 |
header | 定义页面的顶部（页眉）的内容 |
article | 主要是用来表示文章内容的 |
section | 对于网站或者应用程序页面上的内容进行分块 |
nav | 用于页面导航的连接组 |
aside | 当前页面或文章的附属信息部分 |
footer | 上层父级内容区块或是一个根区块的脚注 |
hgroup | hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组 |
address | address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站连接、电子邮件、真实地址、电话号码等 |
figure | 网页上的一块独立元素，在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题 |
figcaption | figure元素块中的标题 |
details | details元素主要用来列表一些关键的元素，在details中，我们是用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息” |
summary | 作为details元素的标题 |
mark | 标注或者高亮一些我们需要的关键词 |
progress | 表示当前的完成进度情况 |
meter | meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值 |
cite | 表示作品或文章中的标题 |
small | HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等 |
canvas | 画布标签，用来在页面上画图案 |
5、多媒体标签
图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--图片格式都有哪些
jgp：现在多为无损格式，并且它是不支持透明通道。1760万色
png：无损格式，并且它支持透明通道
bmp：无损，支持透明，体积大
gif：动图，只支持256色
-->
<!-- src填写资源路径，它是单词source的缩写 -->
<!-- 第一种填写路径的方式：使用绝对路径 -->
<img src="C:\Users\lenovo\Desktop\HBuilderProjects\picture/jeige.jpg" alt="">
<!-- 第二种填写路径的方式：相对路径 -->
<!-- alt属性的作用是当图片无法正常显示的时候，会显示alt中的错误提醒 -->
<!-- title本身是这张图片的名称，悬停鼠标于图像之上，稍作停留可以看到title提示，如果没有alt属性，name描述文字会显示title内容 -->
<!-- width是大多数标签都具有的属性，它用来控制标签的宽度，可以是具体的数值，也可以是比例值，控制高度的属性叫做height，跟width类似 -->
<img src="./jige.jpg" alt="该图片无法正常显示" title="鸡你太美" width="100%" height="">
<!-- 第三种填写路径的方式：网络路径 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F17%2F20200517150133_zPHhh.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681484202&t=1e2e4e218f719c4b2697dabcb7ffc092">
</body>
</html>音视频标签
<!ODCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- video的第一个属性controls显示控制界面 -->
<!-- autoplay自动播放，但必须在静音muted开启的情况下才能自动播放 -->
<!-- loop是用来控制循环播放的属性 -->
<vedio src="day1.mp4" controls="controls" autoplay="autoplay" muted width="800" height="450"></vedio>
<auido src="./歌.mp3" autoplay="autoplay" controls="controls" muted="muted" loop></audio>
</body>
</html>6、表格标签
由table、tr、td三个标签构成，同时可以使用语义化标签thead、tbody、tfoot进行规划。
表格语义化标签及其属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- cellspacing是控制单元格的间距 -->
<!-- cellpadding是控制单元格的内边距 -->
<!-- 颜色构成按照RGB顺序写在一个16进制的数字 0xFF00FF -->
<table border="1" cellspacing=0 cellpadding=0 width=300 background="./jege.webp" bgcolor="#ccc">
<!-- thead tbody tfoot无论怎样颠倒，页面中首先会显示的是thead，其次tbody，再次tfoot -->
<tbody>
<tr>
<td>蔡徐坤</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>坤坤</td>
<td>男</td>
<td>18</td>
</tr>
</tfoot>
<thead>
<-- tr表示定义一个表格行时table row的缩写 -->
<tr>
<!-- td表示定义一个单元格，是table data的缩写 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
</table>
</body>
</html>表格的嵌套
表格的嵌套一般多用于进行布局，将网页进行格式化处理，通常结合表格的合并，每一格显示不同的模块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>表格的嵌套</title>
</head>
<body>
<table border="1" width=300 cellpadding=0>
<tr>
<td width=150></td>
<td>
<table border="1" width=100>
<tr>
<td>&ndsp;</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>表格的合并
行合并：rowspan属性用于进行表格的行合并
列合并：colspan属性用于进行表格的列合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的合并</title>
</head>
<body>
<table border="1" width=500 align="right">
<tr align="right">
<!-- td表示定义一个单元格，是table data的缩写 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="right">
<td rowspan="2">蔡徐坤</td>
<td rowspan="2">男</td>
<!-- <td>20</td> -->
</tr>
<tr align="right">
<!-- <td>坤坤</td> -->
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>7、超链接
a标签超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签超链接</title>
</head>
<body>
<!-- href是所需要跳转的网页链接 -->
<!-- target属性为_blank的时候，跳转的网页会新建选项卡 -->
<a href="https://blog.csdn.net/weixin_71169037?type=blog" target="_blank">跳转到我的主页</a>
</body>
</html>锚链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接</title>
</head>
<body>
<a id="top" href="#bottom">调到底部</a>
<div style="background-color: aqua; width: 1000px; height: 5000px"></div>
<a id="bottom" href="#top">回到顶部</a>
</body>
</html>图片链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片链接</title>
</head>
<body>
<!-- <img>是一个自结束标签 -->
<img src="jige.webp" alt="">
</body>
</html>热区超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热区超链接</title>
</head>
<body>
<img src="images/china.jpg" usemap="#Map">
<map name="Map">
<area shape="rect" coords="456,251,485,319" href="shanxi.html">
<area shape="circle" coords="402,299,23" href="shanxi.html">
<area shape="poly" coords="400,365,446,268,446,381" href="shanxi.html">
</map>
</body>
</html>8、列表标签
①有序列表
扩展知识：emmet命令，可以高效地书写前端代码
li*9{我是子项$}[style="border:!px solid red"]type有三种类型：数字、字母、罗马数字
start是开始的序号
reversed用来控制列表倒序输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ol type="I" start="20" reversed="reversed">
<li>我是子项1</li>
<li>我是子项2</li>
<li>我是子项3</li>
<li>我是子项4</li>
<li>我是子项5</li>
<li>我是子项6</li>
<li>我是子项7</li>
<li>我是子项8</li>
<li>我是子项9</li>
</ol>
</body>
</html>②无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<ul type="square">
<li>我是子项1</li>
<li>我是子项2</li>
<li>我是子项3</li>
<li>我是子项4</li>
<li>我是子项5</li>
</ul>
</body>
</html>③数据列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据列表</title>
</head>
<body>
<dl>
<dt>社会新闻</dt>
<dt>老李家狗丢了</dt>
<dt>坤坤决定退出娱乐圈</dt>
</dl>
</body>
</html>9、表单标签
①表单标签form
action：向服务器提交数据的接口。
method：决定表单提交数据的方式。（post/get）
post和get的区别：
get会将表单中的数据拼接在url中，post会将数据存储在request body包中。
get会被浏览器的历史记录保存，post不会保存。
get的安全性较低，post相对来说比较安全。
get的数据长度受限于url的长度，最初只能录入2k，但是随着时代发展，各家浏览器对这个上限要求是不同的可能又很多，post没有上限，是因为所有上传的数据存在请求包中。
enctype：
application/x-www-form-urlencoded：使用url编码方式处理数据。
multipart/form-data：一般用于上传带文件的包体。
text/plain：就是纯文本内容。
②input标签、select标签、textarea
name和value属性：决定数据提交的键值的格式，name属性不可或缺，如果没有name属性，标签将成为一个无意义的摆设。
require：强制要求输入内容，否则无法提交。
checkbox：多选框。
radio：单选框，name相同的一组radio标签才具有单选效果。
file：用于上传文件。
image：实际上图像按钮。
hidden：隐藏域。
multiple属性：用来将单选列表修改为多选列表。、
textarea：文本域，可以进行多行文本的编辑，cols表示有多少列，rows表示有多少行。
reset：用来重置表单中填写的数据。
button：当button在form标签内，默认可以有提交功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input标签、select标签、textarea</title>
</head>
<body>
<form method="get" action="#" enctype="text/plain">
用户名：<input type="text" name="username" placeholder="请输入用户名" required><br>
密码：<input type="password" name="password"><br>
爱好：<input type="checkbox" name="sing">唱
<input type="checkbox" name="jump">跳
<input type="checkbox" name="rap">rap
<input type="checkbox" name="basketball">篮球<br>
爱好：<input type="radio" name="fav" value="lol">lol
<input type="radio" name="fav" value="dota">dota
<input type="radio" name="fav" value="wzry">王者荣耀<br>
<input type="file" name="file" id=""><br>
<input type="image" src="jige.webp">
<input type="hidden" name="hidden" value="广州/11:05/1.1.1.1">
<select name="所在地" id="" multiple>
<option>广州</option>
<option>深圳</option>
<option>西安</option>
<option>北京</option>
</select>
<textarea name="用户意见" id="" cols="10" rows="10"></textarea>
<input type="reset" name="" id="">
<input type="submit">
<button>commit</button>
<!-- html5自后推出的标签 -->
<br><input type="color" name="" id="">
<br><input type="date" name="" id="">
<br><input type="datetime-local">
<br><input type="email"/>
<br><input type="range" min="1" max="200" name="age">
<br><input type="number" name="number" id="">
</form>
</body>
</html>
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
