HTML笔记
HTML : 超文本标记语言 Hypertext Markup Language 用来定义文档内容结构 ，W3C:万维网联盟-----技术标准机构
CSS ：层叠样式表（Cascading Style Sheets) 外观
最新的一个版本 html5
元素通过<>识别，尖括号里面的是元素的名称， 这样就创建了一个标记，标记通常成对出现
单标记（空标记）只有开始（打开）标记没有结束（关闭）标签
单标记中 <标记名称 属性> 和 <标记名称 属性/>（自闭合）两种写法都是一样的
属性书写在 开始标记里面 属性 = “属性值”
外部样式表(外联）：<link>
内部样式表（内联）：<style>
内嵌样式 ：通过style属性
导入样式 已经不再使用: @important
组成：文字，图片，按钮，搜索框，视频。。。元素（html标签）组成的。
总结：
网页其实就是由html标签组成的。
? 结构标准：（骨骼）
html ->搭建网页结构
? 表现标准：
css->美化网页
?行为标准：
javascript
?作用：
浏览网页
内核（渲染引擎）： 将网页中的标签信息转化为我们人眼能够识别的图文信息。
?超文本：在网页中能够实现页面跳转的文字（超链接）
?标记： 指的是在网页中的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: 过渡模式（松散模式）
?标签写法分类
?双标签： 有开始和结束标签
例如： head body title
?单标签： 只有开始没有结束
例如： meta , hr,br...
?标签与标签之间关系的分类
?并列关系：（兄弟）
?包含关系（嵌套关系）：（父子）
?横线标签 <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
总结：
◆使用场景是在网页布局过程中使用该标签
◆该标签属于没有语义的标签
?按照标签的显示方式分类
?块级元素
?行内元素
?行内块元素（替换元素）
? 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;
行内块元素特征主要体现在排版上共占一行横向排列，自身又可以设置宽高内外边距
?<img>
?相关属性：
src=””: 通过该属性设置图片的相对路径或绝对路径，用来向浏览器展示所要显示的图片
与css外联一样
title=“”：设置鼠标悬停到图片上的文字提示
alt=””: 设置图片描述信息（注意：该属性并不是给用户展示的，为搜索引擎提供服务）
width: 设置宽度
height:设置高度
总结：
◆图片标签也属于多媒体标签的一部分
◆多媒体标签有自己的缩放比例关系
图片的格式：
?绝对路径：
凡是带有磁盘目录或者网站地址的路径
?相对路径：
◆相对路径必须保证在同一个根目录下
◆没有磁盘目录或者网站地址的路径
?如果当前页面（html）和要访问的资源（图片），在同一个文件夹中， src=”直接设置图片名称即可”
?如果当前页面（html）和要访问的资源（图片），不在同一个文件夹中，如果页面在图片的上一级目录中，src=”文件夹名称/+图片名称”;
?如果当前页面（html）和要访问的资源（图片），不在同一个文件夹中，如果页面在图片的下一级目录中，src=”../图片名称”;
? 作用：实现页面跳转
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
?音频
?视频
?视频标签
<video></video>
属性：
src: 设置视频的路径
controls： 显示控制栏
loop： 设置视频循环播放
autoplay：自动播放
或者如下的写法：
?音频标签
总结：
◆音频标签的用法及属性与视频标签一样
?<meta charset="UTF-8">
◆charset 字符集
◆UTF-8 属于字符集中的一种编码格式
unicode
gb2312
gbk
big5
作用： 设置网页编码 -->防止网页乱码
?设置网页关键字
<meta name="keywords" content="日用百货,葫芦娃,男装,女装">
总结：
◆设置网页关键字属于网页优化的一部分
◆网页关键字是为搜索引擎提供服务的
? 设置网页描述信息
<meta name="description" content=“”>
总结：
◆设置网页描述信息
◆ 该标签是为搜索引擎提供服务的
?实现网页重定向
<meta http-equiv="refresh" content="几秒跳转数字;网址">
◆如果要将表单数据进行提交，那么表单控件必须放到表单域中
<input type="email" name="em"> 验证邮箱格式控件
?属性：
autofocus： 设置控件自动获取焦点
required： 设置控件为必须填写
placeholder： 占位符（提示信息）
name:设置当前控件的名称
maxlength：设置当前控件最大输入字符长度
value：设置当前控件的默认值
id: 设置当前控件唯一标识
?密码输入框:
属性与文本输入框的属性一致。
?单选控件
注意：
◆如果该标签要实现单选效果，需要设置相同的name属性值
◆设置默认选中项，设置checked属性
?下拉列表：
设置默认选中项：
selected
设置多选效果：
multiple
其他设置方式：
?复选框（多选控件）
通过checked属性设置默认选中项
?文本域
?分组控件
?按钮：
◇表单提交按钮
◇普通按钮（该按钮和js配合使用）
注意： 该按钮不能进行数据提交
◇表单重置按钮
将表单控件中的值还原到默认值。
◇图片提交按钮（可以进行数据提交）
?required 必填项
?autocomplete 自动完成
可以设置on 或者off
?自动获取焦点
autofocus
?关闭验证：novalidate
在实际中不推荐使用，如果公司内部使用可以用
语义化标签
空格 在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是Hyertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script ，iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。（有不对的地方，请留言）
概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
作用：让网页结构更合理，对于搜索引擎比较友好。
如何实现标签语义化： 在写网页的过程中，多使用有语义的标签。
伪元素和伪元素选择器没有任何关系
? ::before
? ::after
总结：
?伪元素必须设置content属性
?伪元素属于行内元素
伪元素中不能再创建伪元素
一般是要将伪元素依附于某个html标签，如果没有写标签，则默认为*
不是真正的html标签，但是可以做出来一个标签的样子，这就是伪元素
?<header></header>
? <article></article>
? <aside></aside>
? <footer></footer>
? <section></section>
? <nav></nav>
注意：
◆以上语义标签与div的用法一模一样。
◆以上标签与div 相比，只体现了语义性。
◆由于以上新标签存在兼容性，所以推荐使用div标签。
?无序列表
注意： 列表项li中可以放任何的标签或内容
?有序列表
?自定义列表
自定义列表使用场景：
该标签放在head标签中
作用：
◆ 设置网页标题图标
◆引用外部样式表
1.71表格基本的结构
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
属性：
border: 0默认值
width: 设置宽度
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; 为表格设置合并边框模型
}
? 横向列合并
colspan： 合并几列就设置对应的数字
? 纵向跨行合并
rowspan：跨行合并
?横向合并
colspan=“数字”
注意：
合并完单元格后要记得将多出的列删掉
?纵向合并
rowspan=“数字”
注意：
合并完单元格后要记得将多出的列删掉
?如果希望将表单控件当中的数据进行提交，则必须将表单控件写到表单域中
?作用：收集用户填写的信息
?组成：
◆表单域
◆提示信息
◆表单控件（重点）
?表单域中的属性：
action：处理表单数据的一个后台程序（1.php）
method：提交数据的方式
get| post
总结：
◆get提交数据的时候，会将数据显示到地址栏中（不安全）
◆post提交数据，通过后台提交（安全）
Ctrl + alt + f 代码格式化
ctrl + d 选择多个相同标签
原文：https://www.cnblogs.com/yangwenlong/p/12456547.html