HTML总结
1.基本概念
网页和网站
1.网站有N个网页组成 2.网页中包含文字，图片，视频，超链接，音频，程序 3.网页内容是由HTML技术实现 4.浏览器中的网页的后缀都是html
网页三层结构
1.结构层：用html技术实现 2.样式层：用css实现，主要是页面布局美化，让网页变得更加流畅。 3.交互层：主要用js实现，实现页面交互，动画等。
浏览器和渲染引擎
1.五个常见浏览器：ie（edge），火狐，谷歌，欧朋，safari 2.渲染引擎
-Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
-Gecko（ 壁虎） ：Mozilla Firefox
-Presto（急板乐曲）-> Blink （眨眼）：Opera
-Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
-Webkit -> Blink ：Google Chrome
开发工具
开发工具：vscode,WebStorm,Sublime Text,HBuilder,IntelliJ IDEA
标签，属性，元素
标签：用<>包起来,标签包括男标签（块级标签:独占一行），女标签（行内标签:并排显示）和人妖标签（行内块标签）。
标签还可以分为单标签(hr,br...)和双标签(p,div,style...) 属性：属性是由属性名和属性值组成，并且属性写在标签里,其中id叫属性，app叫做属性值，hello wold叫做内容。
<div id="app">hello world</div>元素：element 标签 + 属性 + 标签之间的内容
<p title="xixi"><span>我是一个孤独的span</span></p>
<!-- 元素之间的关系：
父子关系：标签中嵌套标签 -->
<p title="xixi"><span>我是一个孤独的span</span></p>
<!-- 兄弟关系：并排 -->
<span>我是span1</span>
<span>我是span1</span>
2.HTML基本骨架
文档声明：
<!DOCTYPE html>告诉浏览器用HTML5解析 。
<html lang="en">其中lang=“en”表示HTML网页的语言是英文，html表示根标签 。<head>网页的头部，其中包含网页的标题，标题图片，引用外部样式css和js，设置网页编码集。
<meta charset="UTF-8">
<title>Document</title>
<body>网页的主体部分，所有的网页代码都写在其中。
3.常用标签
- 标题标签:一般用于网页，文章，新闻的标题，可以分为一到六级，逐级递减。
<h1>我是一个大标题</h1>
<h2>我是一个h2标签</h2>
<h3>我是一个h3标签</h3>
<h4>我是一个h4标签</h4>
<h5>我是一个h5标签</h5>
<h6>我是一个h6标签</h6>
- p标签：男标签独立成行，标签中可以加文字，段落。
- hr标签和br标签：前者是可以添加一个水平线，后者则是分行标签。
- 文本格式化标签：
<strong></stronjiag> <b></b>
<!-- 斜体 -->
<em></em> <i></i>
<!-- 下划线 -->
<del></del> <s> </s>
<!-- 删除线 -->
<ins></ins> <u></u>
- div标签：盒子标签，配合css可以完成对于页面的布局。
- span标签：女标签，并排显示，主要用于页面的开发，span和div一样都是无语义的。
- img标签：图片标签，主要是表示网页的前景图。
属性：
src:图片的路径（来源)
alt:当图片加载错误时显示的文字
title:当鼠标悬停在图片上显示的文字
width:图片的宽度
height:图片的高度
border:图片的边框
属性特点: 1.属性之间部分先后顺序
⒉属性名与属性值之间以键值对的形式存在
3.属性名与属性值之间以等号分隔属性值要以引号包裹;
- 路径和连接：
路径：相对路径和绝对路径。
相对路径：表示从自己位置寻找，../向上一级，./同一文件夹，/向下
绝对路径：从根目录开始寻找（盘符）或者网上图片的图片路径。 链接标签：<a></a>可以链接外部和内部，外部的话加入链接的网址，内部则是链接内部的html页面，直接写网页名。
属性：href:指定跳转的页面title:鼠标悬停显示的文字。 target: _self(默认会覆盖原来的窗口)_blank(会以新的窗口打开)窗口的打开方式。
#︰会阻止页面跳转但是会刷新页面。 锚点： 链接使用#
目标标签id值与连接#号后面一致
- 快捷键
shift + alt + 向下箭头 => 复制上一行
tab => 向后移动代码
shift + tab => 向前移动代码
! + tab => html基本骨架 !是英文的!
div.wraper + tab => 生成一个带名字的div
鼠标中键 + 向下拽 => 同时选中多行
键盘上的del键 => 删除文件
F2 => 重命名
shift + alt + f => 格式化代码
4.列表元素
- 列表介绍
列表类标签：
1，基本上所有的网页，都有所谓的列表标签
2，列表标签不是一标签，是一组标签
3，无序列表，有序列表，自定义列表
4，无序列表是指列表项与列表项之间没有顺序
5，有序列表是指列表项与列表项之间有顺序
6，自定义列表，自定义列表主要是对某个名字，事件，时间进行解释说明的
- 无序列表
1）不是一个标签，是一组标签 ul + li
2）ul是无序列表 li是无序列表中的列表项
3）order是订单，有序的意思 unordered是无序的意思 list列表的意思
4）li list-item list-item是列表项的意思
5）ul中只能放li元素
6) ul 中有一个type属性，用来指定列表项前面的标识样式
- 有序列表
1）是一组标签 ol+li
2）ol 是有序列列表的意思 ordered list
3）li 是list item的意思 列表项
4）列表项与列表项之间是有顺序的
5）ol只能放li li里面可以放任何内容
- 自定义列表
1）definition 自定义的意思 list 是列表的意思 dl
2）对一个事件，时间点，名词等解释说明
3）是一组标签 dl + dt + dd
4）dt definition term/title
5）dd definition description description是描述的意思 >6）dt和dd中可以包含任何内容
5.表格元素
在网页中, 对于某些内容的展示使用表格元素更为合适和方便
- 相关属性
1.border, width, height。实际开发时针对于样式效果推荐用CSS设置
2.border-collapse CSS属性是用来决定表格的边框是分开的还是合并的
3.table { border-collapse: collapse; } 合并单元格的边框
4.colspan合并列， rowspan合并行
- 表格标题和表头单元格标签
1.在表格中表示整体大标题和一列小标题
2.caption定义表格大标题，caption标签书写在table标签内部
3.th定义表头单元格， th标签书写在tr标签内部（用于替换td标签）
- 表格的结构标签
1.场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
2.thead表示表格头部， tbody表示表格主体， tfoot表示表格底部
3.表格结构标签内部用于包裹tr标签
4.表格的结构标签可以省略
6.表单元素
主要用于网页的登录界面，注册界面
- input属性
1.text:文本框
2.password:密码框
3.radio:单选按钮
4.checkbox:复选框
5.button:普通按钮
6.reset:重置按钮需要配合form表单才有作用
7.submit:提交按钮
8.image属性src
9.file文件按钮上传图片
- input中的type属性
1.text：文本输入框（明文输入） 场景：在网页中显示输入单行文本的表单控件, 可以使用placeholder，提示用户输入内容。
2.password：文本输入框（密文输入） 场景：在网页中显示输入密码的表单控件, 可以使用placeholder，提示用户输入内容。
3.radio：单选框 场景：在网页中显示多选一的单选表单控件，可以使用name实现多选一，可以使用checked表示默认选中。
4.checkbox：复选框 场景：在网页中显示多选多的多选表单控件，可以使用checked表示默认选中。
5.button：普通按钮 场景：在网页中显示不同功能的按钮表单控件。
6.reset：重置按钮 场景：点击之后，恢复表单默认值。
7.submit：提交表单数据给服务器 场景：提交按钮，点击后之后提交数据给后端服务器。
8.file：文件上传 场景：在网页中显示文件选择的表单控件，可以使用multiple表示多文件选择。
9.注意点：type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
- input其他属性
1.readonly：只读
2.disabled：禁用
3.checked：默认被选中，只有当type为radio或checkbox时可用
4.autofocus：当页面加载时，自动聚焦
5.name：名字，在提交数据给服务器时，可用于区分数据类型，当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义后端接收到数据的格式是：name的属性值 = value的属性值
6.value：取值 用户输入的内容，提交之后会发送给后端服务器
- button元素使用
1.场景：在网页中显示用户点击的按钮
2.button的type的取值，可以是button,submit,reset
3.谷歌浏览器中button默认是提交按钮
4.button标签是双标签，更便于包裹其他内容：文字、图片等
- label元素
1.场景：常用于绑定内容与表单标签的关系,主要聚焦
2.使用方式一：label for id
3.使用方式二：label包裹整个元素
- select下拉菜单元素
1.场景：在网页中提供多个选择项的下拉菜单表单控件
2.select标签：下拉菜单的整体, option标签：下拉菜单的每一项
3.selected：下拉菜单的默认选中
- textarea文本域元素
1.场景：在网页中提供可输入多行文本的表单控件
2.cols：规定了文本域内可见宽度
3.rows：规定了文本域内可见行数
4.右下角可以拖拽改变大小
5.禁止缩放：resize: none;
6.水平缩放：resize: horizontal;
7.垂直缩放：resize: vertical;
8.水平垂直缩放：resize: both;
- form表单
1.form通常作为表单元素的父元素，将整个表单作为一个整体来进行操作
2.对整个表单进行重置 或 对整个表单的数据进行提交
3.action属性：用于提交表单数据的请求URL
4.method属性：请求方法（get和post），默认是get
5.target属性：在什么地方打开URL（参考a元素的target）
