目录
特殊字符：
含义：
超文本标记语言
超文本：超越文本限制，超级链接文本
超文本标记语言简单来说，就是描述网页的语言
作用：
构建页面结构
创建：
快速创建html文件：
vscode软件（我常用的软件）：
第一种方法：文件--新建文件---选择语言----HTML
第二种方法：点击左侧的下图图标---输入文件名称.html---回车
命名规范：
- 不用中文命名
- 不包含空格和特殊字符
- 可以使用纯英文的小写字母，数字，下划线的结合
- 首页一般用index命名
- 文件名称要规范，不可使用中文拼音
- 可以使用驼峰命名法 例如userName
标准结构：
<!DOCTYPE html>---- 给浏览器声明文档类型是HTML结构，使用html5语法
<!-- 以下是基本结构 -->
<html lang="en"> ----根标签，此页面使用英文语言
常见的语言类型：
lang='en'指定html语言种类
en 英文
ZH——CN 中文
fr 法文
<head>------文档头部
<meta charset="UTF-8"> 给浏览器声明使用的编码方式。默认是utf-8
常见的编码方式：
GB2312：简体中文
BIG5 ：繁体中文（港澳台地区）
GBK ：全部中文字符（中国全部地区）
UTF—8 ：全世界所有国家要用的字符------最常用的方法
注意：如果编码方式不是utf-8，请一定要写明编码方式，否则浏览器无法正确解读，页面会出现乱码问题
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 用户使用ie8及以上浏览器使用edge浏览（IE适配）
<meta http-equiv="refresh" content="10;"> 配置网页自动刷新，跳转页面
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 针对移动端页面进行简单配置
<meta name="keywords" content="逗号或者斜杠分开,最多12字符">
</meta> 配置网页关键字，利于搜索引擎
<meta name="description" content="最多80字的网站描述">
</meta> 配置网页描述信息
<meta name="robots" content="">
</meta> 针对搜索引擎爬虫的配置
content：
index 允许搜索爬虫索引此页面
noindex 不允许搜索爬虫索引此页面
follow 允许搜索爬虫跟随此页面上的链接
nofollow 不允许搜索爬虫跟随此页面上的链接
all 等价于index，follow
none 等价于noindex，nofollow
noarchive(nocache) 搜索引擎不缓存此页面
<meta name="author" content="作者姓名">
</meta> 配置网页的作者
<meta name="generator" content="网页生成工具">
</meta> 配置网页的生成工具
<meta name="copyright" content="版权信息">
</meta> 配置定义网页的版权信息
<title>Document</title>-----文档标题
</head>
<body>
文档主体
</body>
</html>如何快速生成标准结构：输入html：5或者！------回车
内容(标签)：
标签分类：
双标签：
简单来说，就是<> </> l两个括号
单标签：
简单来说，就是</> 一个括号
语义化标签：
含义：根据标签的名字就可以知道标签的作用
优点：
1 代码的可读性强清晰直观，利于后期开发人员的项目交接阅读
2 有利于搜索引擎的优化（简称：SEO）
3 有利于方便设备解析代码（例如屏幕阅读器的应用）
常见的标签：
h标签，p标签
块级元素：
含义：独占一行的元素
常见的标签：div标签，p标签，h标签，address标签，blockquote标签
使用规则：（h,p除外）可以嵌套行内元素，块级元素
行内元素：
含义：不会独占一行的元素
常见的标签：span标签，input标签，
使用规则：可以嵌套行内元素，不能嵌套块级元素
文本标签：
含义：针对文本内容的标签
常见的标签：em标签，strong标签，span标签
不常用的：cite标签(作品标题)，dfn标签(专属名称)，del标签(删除划线)，ins标签(插入划线)，sub标签（文字下标），sup标签(文字上标)，code标签(代码显示)，samp标签(输出文本)，kbd标签(键盘文本)，abbr标签(缩小，和title搭配使用)，bdo标签(改变文本方向和dir搭配使用)，var标签(标记变量，可以和code标签使用)，small标签(附属细则)，b标签(文本加粗)，i标签(字体图标)，u标签(反差文本)，q标签(短引用)，blockquote标签(长引用)，address标签(地址)
标签详情：
字体标签：
标题标签：
<h1>1</h1> ---显示的字体最大
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>----显示的字体较小
注意：1-6 字体大小：由大逐渐变小
一个页面一般只使用一个h1标签
h标签不可以嵌套h标签
h标签的展示效果可以通过css修改
常用的标签：h1,h2,h3 文字加粗（加粗，强调作用）
<b>123</b>
<strong>456</strong>
文字斜线
<i>123</i>
<em>456</em>
删除线
<s>123</s>
<del>456</del> 不常用
下划线
<u>123</u>
<ins>456</ins> 不常用
段落标签
<p>12345678910</p>
注意：p标签不可以嵌套p标签，div标签，h标签
水平标签(分割线-实线)
<hr>
换行标签
你好，惠特米勒<br>
显示代码原格式：
<pre></pre>
图像标签：
图像标签：
作用：引用图片
<img src="图片来源/图片路径" alt="图片不显示时的替代文本" title="鼠标悬停时显示的内容" width="图片宽度" height="图片高度">
属性：
src 图片的路径,可以是本地图片路径，或者是网络图片路径
路径：
绝对路径：
本地绝对路径：相对于本地电脑的文件路径(不推荐使用，局限性比较大)
网络绝对路径：可以在浏览器上查看的文件路径
相对路径：相对当前文件位置获取的文件路径
同级位置：./
上一级位置：../
下一级位置：/
alt 图片在不加载成功后展示的文本内容；有利于搜索引擎的优化
tilte 鼠标悬停的时候显示的文本提示信息
width 图片显示的宽度
height 图片显示的高度
onerror 图片加载失败后处理函数
例子：
<img src="http://123.com/image/name.png" onerror="this.src = defaultImage" />
图片常见的格式：
jpg：
含义：一种有损的压缩格式（肉眼不易观察的细节容易丢失）
优点：颜色丰富，占用空间小
缺点：不支持透明背景，不支持动态图片
png：
含义：一种无损的压缩格式，更高质量的图片
优点：颜色丰富，占用空间大，支持透明背景
缺点：不支持动态图片
bmp：
含义：不进行压缩的图片格式，保存图片更多细节
优点：颜色丰富，保留细节更多，占用空间极大，
缺点：不支持透明背景，不支持动态图片
gif：
含义：仅支持256种颜色，色彩呈现不是很完整
优点：支持简单的透明背景，支持动态图片
缺点：支持的颜色比较少，透明背景呈现度不如png
webp：
含义：谷歌推出的图片格式，专门用来在网页中呈现图片
优点：拥有以上几种格式的优点
缺点：兼容性不好，使用时需要处理兼容问题
base64：
含义：特殊的文本内容,需要使用浏览器打开
生成：通过一些图片转base64格式的工具或者网站
优点：可以直接使用，不用发送请求
缺点：文本信息不可以修改；文本信息过长vscode不支持提示信息
链接标签：
链接标签：
作用：跳转到某个页面
<a href="链接地址，具有超链接属性" target="目标窗口弹出方式"> 文本或者图像</a>
属性：
href 跳转的路径(支持相对路径和绝对路径)
参数：
tel 调用打电话功能
mailto 调用发送邮件功能
sms 调用发送短信功能
target 跳转的方式
常用的方式：
self 默认值，在当前页面打开
blank 在新窗口打开
download 下载此文件
锚点：
含义：点击某段文字可以跳转到文本相关位置
特殊使用：
<a name=""></a> 刷新页面
<a name="#"></a> 返回本页面的顶部
<a name="javascript:脚本内容;"></a> 书写js脚本，脚本内容为空不进行任何操作
例子：
点击跳转 <a href="#href"></a>
跳转位置
1 <a name="href"></a>
2 <div id ="href"></div> 推荐使用
注意：a标签不可以嵌套a标签容器标签：
div标签：
作用：可以装载许多标签，通常用于构建结构
<div>是一个容器，用来装结构</div>
注意：最常用的标签
span标签
作用：在一行内显示的内容
<span>一行只能放一个span</span>多行文本框：
textarea控件：文本框
作用：可以输入许多的文字内容
属性：name 名称
id ID名
cols 文本域的宽度，基本不用
rows 文本域的高度，基本不用
<textarea name="" id="" cols="30" rows="10"></textarea>下拉菜单：
select下拉菜单：
option中想要默认选中：selected=“selected”；
<select name="" id="">
<option value="">选项1</option> 推荐书写value
<option value="">选项2</option>
</select>框架标签：
<iframe src="" frameborder="0" width="600" height ="300"></iframe>
属性：
src 引用的路径(支持本地路径和网络路径)
frameborder 边框
0 无边框
1 有边框
width 宽度
height 高度
使用：
<a href="url" target="iframe"></a>
<form action="###" target="iframe">
</form>
<iframe name="iframe" frameborder="0" width="600" height="300"></iframe>
列表：
列表：容器里装载着结构，样式一致的文字或图表的一种形式
如何快捷生成列表：列表类型（ul）+li*想要的列表数量+回车
作用：使数据清晰明了
无序列表：没有顺序的列表，每项前面有小圆点
<ul>
<li></li>
</ul>
常见的应用：
导航栏
有序列表：有顺序的列表，前面标注着数字
<ol>
<li></li>
</ol>
常见的应用：
榜单显示
定义列表：自定义列表，自己决定列表展示
<dl>
<dt></dt>
<dd></dd>
</dl>
注意：
1.ul/ol标签内不要使用除了li以外的其他元素，如果需要使用，可以使用li嵌套使用
2.li标签不要单独使用
3.ul内嵌套ul时，不要嵌套过多
表格：
table表格：
作用：用来展示数据，可以让数据显示整齐规范
属性：
table标签：
border 外边框 取值：0无边框 1有边框
width 宽度
height 高度（无法设置表头，表脚高度）
align 网页中水平对齐方式 取值：方位名词
cellspacing 单元格及边框之间空白间距
cellpadding 单元格内容及边框间空白边距
caption表格标题
表头：thead(同tr.tbody,tfoot)
height 高度
align 文字对齐方式
center 居中对齐
left 向左对齐
right 向右对齐
valign 垂直对齐方式
top 向上对齐
bottom 向下对齐
th 表头单元格
align
valign
width
height
rowspan 跨行合并
colspan 跨列合并
主体：tbody
td(同th)
表脚：tfoot
<table>-- 表格标签
<caption>表格标题</caption>-----表格标题：居中显示在表格上，跟随table标签移动
<thead>
<th>表头</th>--- 表头单元格：位于表格的第一行或者第一列，并且文本加粗居中
</thead>
<tbody>
<tr>--表格行标签
<td>1</td> ---表格列标签
</tr>
</tbody>
<tfoot>
<tr>--表格行标签
<td>1</td> ---表格列标签
</tr>
</tfoot>---表格脚注
</table>表单：
form表单：
作用：收集用户信息，可与用户交互
构成：表单控件，提示信息，表单域
form:
action 提交地址
target 提交后是否打开新页面
_self 默认值，当前页面打开
_blank 在新页面打开
method 提交方式(get.post)
input控件：
属性：
type：
text 文本框
password 密码框
radio 单选框(必填name,value属性)
checkbox 复选框(必填name,value属性)
button 普通按钮
submit 提交按钮(使用时不要添加name属性)，默认值
reset 重置按钮
image 图像形式提交按钮（必须有src属性）
file 文件域（上传文件）
hidden 隐藏域（一定程度防止批量注册形为）
name 名称
value 默认文本值
size 显示宽度（取正整数）
checked 默认选中
maxlength 控制最大字符数（取正整数）
disabled 禁止使用
<form action="地址" method="提交方式" name="表单名称">
<input type="text">
//文字和form绑定使用：
1 <label for=“name”>姓名</label><input type="text" id=“name”>
2 <label>姓名<input type="text" id=“name”></label>
//控件分类：
<fieldset>
<legend> 提示信息</legend>
form内容
</fieldset>
</form>引入文件：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> //引入图标
<link rel="stylesheet" href=""> //引入css文件
<script src=""></script> //引入js文件特殊字符：
空格
< 小于号
> 大于号
& 和号
¥ 人民币
© 版权
® 注册商标
° 摄氏度
± 正负号
× 乘号
÷ 除号
² 平方根2
³ 立方根3全局属性：
常用的
1. id：head标签，html标签，script标签，style标签，title标签，不能使用
2. class:
3. style:
4. dir: ltr 左向右,rtl右向左，auto 居中
5.title：
6.lang：head标签，html标签，script标签，style标签，title标签，不能使用
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
