HTML笔记
HTML : 超文本标记语言 Hypertext Markup Language 用来定义文档内容结构 ，W3C:万维网联盟-----技术标准机构
CSS ：层叠样式表（Cascading Style Sheets) 外观
最新的一个版本 html5
元素通过<>识别，尖括号里面的是元素的名称， 这样就创建了一个标记，标记通常成对出现
单标记（空标记）只有开始（打开）标记没有结束（关闭）标签
单标记中 <标记名称 属性> 和 <标记名称 属性/>（自闭合）两种写法都是一样的
属性书写在 开始标记里面 属性 = “属性值”
样式css引入
外部样式表(外联）：<link>
内部样式表（内联）：<style>
内嵌样式 ：通过style属性
导入样式 已经不再使用: @important
１.1 认识网页
组成：文字，图片，按钮，搜索框，视频。。。元素（html标签）组成的。
总结：
网页其实就是由html标签组成的。
１.2 网页标准
☞ 结构标准：（骨骼）
html ->搭建网页结构
☞ 表现标准：
css->美化网页
☞行为标准：
javascript
１.3 浏览器
☞作用：
浏览网页
内核（渲染引擎）： 将网页中的标签信息转化为我们人眼能够识别的图文信息。
１.4 服务器（了解）
１.5 HTML类型（重点）
☞超文本：在网页中能够实现页面跳转的文字（超链接）
☞标记： 指的是在网页中的html标签
☞html结构介绍：
目前我们是按照html5结构去设计网页的
之前： html4
xhtml（扩展）
<!Doctype html>
<html>
<head>
<title>网页标题</title>
</head>
<body></body>
</html>
☞详细介绍结构中的标签
✔Doctype标签：告诉浏览器当前文档的类型。
如果不设置Doctype那么浏览器在显示过程中可能会出现一种怪异模式。
✔html标签：结构中的根标签
✔head标签： 可以设置网页样式;可以设置网页标题；设置网页关键字，网页描述信息，js代码编写。。。。
✔title标签：设置网页标题
✔body标签： 指的是网页的主体（我们看到的所有信息）
☞html版本介绍：
.strict.dtd : 严格模式（标准模式）
.transitional.dtd: 过渡模式
.loose.dtd: 过渡模式（松散模式）
１.6 Html标签（重点）
☞标签写法分类
✔双标签： 有开始和结束标签
例如： head body title
✔单标签： 只有开始没有结束
例如： meta , hr,br...
☞标签与标签之间关系的分类
✔并列关系：（兄弟）
✔包含关系（嵌套关系）：（父子）
1.7标签（单标签 双标签）
单标签
✔横线标签 <hr>
✔设置网页编码 <meta charset="UTF-8">
✔换行标签 <br>
✔注释标签 <!-- 内容 --> 或者 ctrl+/ 注释不要嵌套，容易出问题，也无意义
双标签
✔ 标题标签
注意：
✔ 标题标签只有从h1-h6
✔ 在当前网页中最好一号标题出现一次
✔段落标签 <p></p>
✔格式化标签（突出显示信息）
◆文字加粗 <strong></strong> 或者 <b></b>
◆文字斜体 <em></em> 或者 <i></i>
◆文字下划线 <ins></ins> 或者 <u></u>
◆删除线标签 <del> </del> 或者 <s></s>
◆设置文字颜色或者大小
总结
color属性： 设置文字颜色
size 属性： 设置文字大小，不需要带单位
其他双标签（了解）
☞ div
☞ span
总结：
◆使用场景是在网页布局过程中使用该标签
◆该标签属于没有语义的标签
1.8块标记和行内标记
元素模式分类及模式转化
☞按照标签的显示方式分类
✔块级元素
✔行内元素
✔行内块元素（替换元素）
块级元素
☞ div,h1-h6，p,ul,ol,dl,li,dd...
☞特点：
✔如果一个块级元素默认没有设置宽度，那么该元素的宽度与其父元素的宽度一样。（宽度和高度不能继承）
✔所有的块级元素都要独占一行显示
✔可以直接设置宽度和
行内元素
☞ a,span,font,strong,del.....
☞特点：
✔行内元素不能直接设置宽度和高度
✔行内元素都在一行上显示。
行内元素不能设置上下内外边距
行内块元素
☞ img,input..
☞特点：
✔可以设置宽度和高度
✔元素可以在一行上显示
注意：上图中img图片是和红色的div在一行上显示，由于div高度要高，img，div都处于一行当中的下方对齐显示
元素的转换方式（模式转换）
☞转换为块级元素
display: block;
☞转行内块元素
display: inline-block;
注意：
行内块元素不能转换为块级元素或者行内元素。
☞转行内元素
display: inline;
行内块元素特征主要体现在排版上共占一行横向排列，自身又可以设置宽高内外边距
１.9 图片标签（重点）
☞<img>
☞相关属性：
src=””: 通过该属性设置图片的相对路径或绝对路径，用来向浏览器展示所要显示的图片
与css外联一样
title=“”：设置鼠标悬停到图片上的文字提示
alt=””: 设置图片描述信息（注意：该属性并不是给用户展示的，为搜索引擎提供服务）
设置宽度
height:设置高度
总结：
◆图片标签也属于多媒体标签的一部分
◆多媒体标签有自己的缩放比例关系
图片的格式：
１.10 路径（重点）
☞绝对路径：
凡是带有磁盘目录或者网站地址的路径
☞相对路径：
◆相对路径必须保证在同一个根目录下
◆没有磁盘目录或者网站地址的路径
✔如果当前页面（html）和要访问的资源（图片），在同一个文件夹中， src=”直接设置图片名称即可”
✔如果当前页面（html）和要访问的资源（图片），不在同一个文件夹中，如果页面在图片的上一级目录中，src=”文件夹名称/+图片名称”;
✔如果当前页面（html）和要访问的资源（图片），不在同一个文件夹中，如果页面在图片的下一级目录中，src=”../图片名称”;
１.11 超链接a（掌握）
☞ 作用：实现页面跳转
a标签:
<a href="" target = ""{_self ,在当前页面打开 ；_blank,从新页面打开}></a>
☞属性介绍：
1. target = ""{_self ,在当前页面打开（默认） ；_blank,从新页面打开}
一般常用_blank从新页面打开
注意：在head标签中添加base标签，在base标签中设置target属性为_blank;
title: 设置鼠标悬停到超链接上的文字提示
2. href = " 链接地址“
1.页面路径 2. 网址 href = "http://网址“ 3. 锚点
☞超链接在本页面内部跳转 锚链接
◆直接设置href的值为=”#”
◆锚链接
3.mailto:邮件地址
如果要使用 mailto:邮件地址 要求客户端要有邮箱软件，否则不会打开邮箱
当给a标签设置模式转化并设置背景图片时，a标签内的文字是搜索引擎需要的图片描述，下边是几种使a内文字不可见的方法：
-
font-size:0 2. grba() 透明 3. 设置 text-indent 和 overflow:hiddeen
１.14 多媒体标签（h5）
☞音频
☞视频
☞视频标签
<video></video>
属性：
src: 设置视频的路径
controls： 显示控制栏
loop： 设置视频循环播放
autoplay：自动播放
或者如下的写法：
☞音频标签
总结：
◆音频标签的用法及属性与视频标签一样
１.2 Meta
☞<meta charset="UTF-8">
◆charset 字符集
◆UTF-8 属于字符集中的一种编码格式
unicode
gb2312
gbk
big5
作用： 设置网页编码 -->防止网页乱码
☞设置网页关键字
<meta name="keywords" content="日用百货,葫芦娃,男装,女装">
总结：
◆设置网页关键字属于网页优化的一部分
◆网页关键字是为搜索引擎提供服务的
☞ 设置网页描述信息
<meta name="description" content=“”>
总结：
◆设置网页描述信息
◆ 该标签是为搜索引擎提供服务的
☞实现网页重定向
<meta http-equiv="refresh" content="几秒跳转数字;网址">
１.9 表单控件（了解）
◆如果要将表单数据进行提交，那么表单控件必须放到表单域中
<input type="email" name="em"> 验证邮箱格式控件
☞输入框：
✔属性：
autofocus： 设置控件自动获取焦点
required： 设置控件为必须填写
placeholder： 占位符（提示信息）
name:设置当前控件的名称
maxlength：设置当前控件最大输入字符长度
value：设置当前控件的默认值
id: 设置当前控件唯一标识
☞密码输入框:
属性与文本输入框的属性一致。
☞单选控件
注意：
◆如果该标签要实现单选效果，需要设置相同的name属性值
◆设置默认选中项，设置checked属性
☞下拉列表：
设置默认选中项：
selected
设置多选效果：
multiple
其他设置方式：
☞复选框（多选控件）
通过checked属性设置默认选中项
☞文本域
☞分组控件
☞按钮：
◇表单提交按钮
◇普通按钮（该按钮和js配合使用）
注意： 该按钮不能进行数据提交
◇表单重置按钮
将表单控件中的值还原到默认值。
◇图片提交按钮（可以进行数据提交）
☞required 必填项
☞autocomplete 自动完成
可以设置on 或者off
☞自动获取焦点
autofocus
☞关闭验证：novalidate
１.11 新增的表单元素
1.12 iframe
在实际中不推荐使用，如果公司内部使用可以用
p标签
语义化标签
空格 在html文档中 多个空格或者 enter换行 都只显示一个空格
注意：p 标签内不要有任何块标签
h1 ~ h6 标题
加粗 ：strong 重要文本 b突出文本
斜体 ： em i
小字： small 标签中的文字要小一些 表示一些细则一类的内容
比如：合同小字网站版权声明等
span 跨越多个字符
表示作品引用：
blockquote 整段的引用 （块引用）（这是一个块标记）
cite 对参考文献的引用（比如作品名字）
q 小段引用的文本（行内引用）浏览器会默认加引号
abbr 缩写显示 title ：全称
sup (上标)和 sub(下标):
二的二次方 ：2<sup>2</sup>
del表示删除：标签中的内容会自动添加删除线
ins表示插入的内容，会自动添加下划线
pre 是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门表示代码 但是不会保存格式
一般情况下 code和pre 会配合使用
href 和src 区别
href是Hyertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script ，iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。（有不对的地方，请留言）
１.1 特殊标记（了解）
１.2 标签语义化（了解）
概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
作用：让网页结构更合理，对于搜索引擎比较友好。
如何实现标签语义化： 在写网页的过程中，多使用有语义的标签。
１.10 伪元素
伪元素和伪元素选择器没有任何关系
☞ ::before
☞ ::after
总结：
✔伪元素必须设置content属性
✔伪元素属于行内元素
伪元素中不能再创建伪元素
一般是要将伪元素依附于某个html标签，如果没有写标签，则默认为*
不是真正的html标签，但是可以做出来一个标签的样子，这就是伪元素
１.3 语义标签（h5中的标签）（理解）
☞<header></header>
☞ <article></article>
☞ <aside></aside>
☞ <footer></footer>
☞ <section></section>
☞ <nav></nav>
注意：
◆以上语义标签与div的用法一模一样。
◆以上标签与div 相比，只体现了语义性。
◆由于以上新标签存在兼容性，所以推荐使用div标签。
１.4 列表
☞无序列表
注意： 列表项li中可以放任何的标签或内容
☞有序列表
☞自定义列表
自定义列表使用场景：
１.6 Link标签介绍
该标签放在head标签中
作用：
◆ 设置网页标题图标
◆引用外部样式表
１.7 表格标签
1.71表格基本的结构
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
属性：
border: 0默认值
设置宽度
height: 设置高度
align: 设置对齐方式 left | right | center
注意：
◆如果将align属性设置给table标签，只能让该白去整体居中显示，内容不会居中显示
◆如果要内容居中显示，则将该属性设置给td或者tr.
cellspacing:设置td(单元格)之间的距离。 默认值是2
cellpadding:设置内容与td边框之间的距离
注意：cellpadding该属性可以改变表格大小。
bgcolor：设置背景颜色
注意：
◆所有的标签默认都是在浏览器的左上角开始显示
◆标签中的所有内容（文字，图片）默认在标签的左上角显示
☞表格中的标签：
<caption>这是表格标题</caption>
◆设置表格中的表头
注意：
th与td的用法一样。
一般情况下，不用写 tbody thead tfoot ,浏览器会自动添加，同时有些浏览器不支持这些标签可能报错
table{
border-collapse: collapse; 为表格设置合并边框模型
}
１.8 表格的基础结构（了解）
１.9 表格中单元格合并
☞ 横向列合并
colspan： 合并几列就设置对应的数字
☞ 纵向跨行合并
rowspan：跨行合并
☞横向合并
colspan=“数字”
注意：
合并完单元格后要记得将多出的列删掉
☞纵向合并
rowspan=“数字”
注意：
合并完单元格后要记得将多出的列删掉
１.10 表单
☞如果希望将表单控件当中的数据进行提交，则必须将表单控件写到表单域中
☞作用：收集用户填写的信息
☞组成：
◆表单域
◆提示信息
◆表单控件（重点）
☞表单域中的属性：
action：处理表单数据的一个后台程序（1.php）
method：提交数据的方式
get| post
总结：
◆get提交数据的时候，会将数据显示到地址栏中（不安全）
◆post提交数据，通过后台提交（安全）
１.11 表单控件（重点）
VScode 快捷键：
Ctrl + alt + f 代码格式化
ctrl + d 选择多个相同标签