HTML总结
1.基本概念
HTML
Hyper Text Markup Language 超文本标记语言
网页和网站:
网站有N个网页组成
网页中包含:文字，图片，视频，音频，链接，程序...
网页的内容由HTML技术实现
网页的后缀通常都是.html
浏览器和渲染引擎
常见的浏览器:谷歌，火狐，IE, Safari, 欧朋
不同的浏览器有不同的内核 (渲染引擎) ,开始仅了解即可
网页三层结构
结构层:使用HTML技术实现(给网页提供内容)
样式层:给网页提供样式(布局,美化)
交互层:使用JS实现,JS是前端程序员最需要掌握的核心技术
开发工具
推荐使用Vs Code工具,好处:体积小,速度快,插件多...
快捷键有:
shift+alt+⬇ => 复制上一行
tab => 向后移动代码
!+tab => html的基本骨架(!必须是英文的!)
div.wraper+tab => 生成一个带名字的div
鼠标中键+向下拽 => 同时选中多行
键盘的del键 => 删除文件
F2 => 重命名 shift+alt+f => 格式化代码
ctrl+f => 查找内容并替换内容
标签,属性,元素
标签:标签都是使用<>包起来，分单标签和双标签，分男标签，女标签和人妖标签
标签与标签之间有关系，分兄弟关系和父子关系
属性:写在开始标签中，以xxx= "xxx"这种形式出现，一个标签中可以有N个属性
属性也分两类:公有属性，特有属性
1.公有属性: class, id, title, style
2.元素:标签+属性+标签之间的内容
2.HTML的基本骨架
文档声明
HTML5的文档声明 告诉浏览器，以什么样的标准来解析我们写的代码
html元素
是一个网页的根元素，只有这一个
lang属性:指定网页的语言,zh-CN表示中文
head元素
网页的头部:基本上在对网页的设置，都会在head实现
title属性:指定网页的标题
meta属性:charset="utf-8” 如果不指定，会出现乱码
body元素
网页的主要内容都是写在body中
3.常用标签
h系列-标题标签
h1->h6逐级递减
p标签，段落标签
浏览器会自动适用换行
换行标签
<br>强制换行 单标签
文本格式化标签
加粗<strong></strong>或者<b></b>
倾斜<em></em>或者<i></i>
删除线<del></del>或者<s></s>
下划线<ins></ins>或者<u></u>
无语义标签
<div></div>和<span></span>
图片标签<img>
属性
src:图片的路径(来源)
alt:当图片加载错误时显示的文字
title:当鼠标悬停在图片上显示的文字
width:图片的宽度
height:图片的高度
border:图片的边框
属性的特点
1.属性之间部分先后顺序
2.属性名与属性值之间以键值对的形式存在
3.属性名与属性值之间以等号分隔属性值要以引号包裹
路径和连接
路径
相对路径和绝对路径
相对路径的使用方法: 在同一个文件夹直接找名字
向上一级用../
./可以不写
/表示下一级
连接标签<a></a>
外部链接<a href="http://www.qq.com"> </a> 写完整的 协议 域名 网址
内部链接<a href="index.html"> </a> 直接写文件名即可
属性
href:指定跳转的页面
title:鼠标悬停显示的文字
窗口的打开方式 target:_self(默认会覆盖原来的窗口),_blank(会以新的窗口打开)
#:会阻止页面跳转但是会刷新页面
锚点
链接使用#,目标标签id值与连接#号后面一致
注释与特殊字符
<!--注释--> 编辑器使用Ctrl+/快捷键
4.列表类标签
无序列表 <ul><li></li></ul>
有序列表 <ol><li></li></ol>
自定义列表 <dl><li></li></dl>
5.表格类标签
标签
<table></table>表格
<tr></tr>行
<td></td>单元格
<th></th>表头 加粗 加黑 自动居中
<caption></caption>表格的标题 写在内部 显示外部 居中
<thead></thead>结构头
<tbody></tbody>结构体
<tfoot></tfoot>结构底
属性
width:宽度
height:高度
cellspacing:单元格与单元格之间的距离
cellspadding:单元格与内容之间的距离
注意:当给表格设置居中整个表格会居中(文字不会居中) 当指定tr或者td文字居中align:left/center/right
colspan:列合并
rowspan:行合并
6.表单类标签
input属性
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→文本框。
name属性
1.发送后台...
2.name的标识对于单选按钮只能选择一个
value属性
文本框默认显示的文字
checked属性
可以写一个属性也可以属性名=属性值 checked: 默认选中
label用法
1.<label>请输入<input type="text"> <input type= "text"></label>
2.<label for="a">请输入</label> <input type= "text" id="a">
textarea
文本域: textarea:用户留言
下拉列表
<select>
<option>请选择</option>
<option>苹果</option>
<option selected>香蕉</option>
<option>橘子</option>
</select>
selected:下拉列表的默认选中
form表单
主要的作用:是收集用户信息 发送后台
action: 提交后台的地址
method="get/post” 提交（传输) 后台的方式
name="”告诉服务器 由哪个表单提交过来的
form属性
1.form通常作为表单元素的父元素，将整个表单作为一个整体来进行操作\
2.对整个表单进行重置 或 对整个表单的数据进行提交\
3.action属性：用于提交表单数据的请求URL\
4.method属性：请求方法（get和post），默认是get\
5.target属性：在什么地方打开URL（参考a元素的target）
