HTML
html简介
HTML是用来描述网页的一种语言，被称为超文本标记语言！用HTML编写的文件，后缀以.html结尾 TML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字。
文件后缀：必须使用.html作为文件扩展名
输入法状态：所有代码符号（特别是尖括号<>）必须在英文状态下输入 标签规范：标签必须成对出现，如html /html
先输入！ 然后再按tab键可以快速生成html5文档
如下图是文档介绍
配置在head标签里面
文档浏览
<br/> 本地方式打开浏览插件
搜索open in browser和live server
单击install 安装
重启vscode
**本地方式浏览 **地址栏：file://
例如：
file:///E:/hello/about.html
服务器的方式浏览 地址栏：
http://127.0.0.1:5500或者http://localhost:5500http://www.scnew.com.cn例如：http://127.0.0.1:5500/about.html或者http://localhost:5500/about.html
127.0.0.1是指当前电脑本地IP localhost 是 127.0.0.1的别名
基础标签
body标签
身体 是写代码的地方
<body></body>外边距 8px 宽度是可视宽度 高度是内容的高度body里面写代码自带8像素
标题标签
h1标题/h1有默认的上下边距 宽度自适应容器 高度是内容高度 不同的标题级别字号不同
大部分搜索引擎规定一个页面只能一个标题1
一共有6级标签
标题标签
这样写
title标题/title
单双标签
段落标签
p段落/p有默认的上下边距
p标签不能包裹标题标签
p标签不能包含块级块级
br是换行符
注释快捷键ctrl+/
效果如下图：
链接
链接
没有盒型数据，因为它是行内元素 默认颜色是蓝色加下划线
锚点链接，可以看成是空链接
也有返回顶部的功能
如下是a标签的常用用法
红框里面是没有点击链接的颜色
图像
图像 <img src="img/1.jpg"> 图像的宽高是图片自身的宽高 图像是单标签
网站中最多的元素 网站中最多的元素毋庸置疑，一定是图片，<img>标签定义HTML页面中的图像。
注意：<img>是单标签，不需要进行闭合操作
属性： 1.src：路径 (图片地址与名字) 2.alt：规定图像的替代文本 3.width：规定图像的宽度 4.height：规定图像的高度 5.title：鼠标悬停在图片上给予提示
图片路径
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
相对路径 两者相对关系，两者在同一路径下可以直接访问 1.子级关系：/ 2.父级关系：../ 3.同级关系：./
网络路径 具体的网络地址：http:/wenwiki.com/api/newworld/images/n1png
标签属性
html5规定标签名一律小写 htm5不区分大小写
属性定义注意事项： 1.属性名小写 2.属性值要用双引号包裹 3.属性名必须是字母开头，不能使用空格或者其 他除下划线、中横杠以外的特殊字符
公共属性 每一个标签都可以定义的属性：
1.id定义唯一标识 2.class定义类名 3.name定义名称 4.style定义行内样式 5.title定义划过气泡提示
文本标签
常用文本标签
特别提示 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇
有序列表
有序列表 有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
type属性
<ol>的属性type拥有的选项 1.1表示列表项目用数字标号（1,2,3.…） 2.a表示列表项目用小写字母标号(a,b,c…) 3.A表示列表项目用大写字母标号（A,B,C…） 4.ⅰ表示列表项目用小写罗马数字标号(，ii,ii.…) 5.表示列表项目用大写罗马数字标号(I,II,III.…)
有序列表嵌套 列表是可以进行嵌套（多次嵌套）的
有序标签效果
无序标签
无序列表实现 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记 无序列表始于<ul>标签。每个列表项始于标签。
type属性<ul>的属性type拥有的选项 1.disc默认实心圆 2.circle空心圆 3.square小方块 4.none不显示
无序列表嵌套 列表是可以进行嵌套的
常见应用场景 1.无序的列表效果 2.导航效果 导航效果
快捷键 快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)
表格标签
表格展示效果 表格在数据展示方面非常简单，并且表现优秀
表格组成与特点 行、列、单元格 单元格特点：同行等高、同列等宽。 表格标签 表格：<table> 行：<tr>单元格（列）：<td>
快捷键 快速生成表格结构：table>tr*2>td
表格属性 1.border:设置表格的边框 2.width:设置表格的宽度 3.height:设置表格的高度
合并单元格
单元格合并属性
水平合并：colspan 垂直合并：rowspan
挤掉
水平合并：保留左边，删除右边 垂直合并：保留上边，删除下边
先水平合并，在垂直合并
Form表单
表单元素
文本框 文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
密码框 密码字段通过标签<input type="password">来定义
温馨提示 密码字段字符不会明文显示，而是以星号或圆点替代
块元素和行内元素(内联元素)
HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种方式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型（embedded content,、交互型(interactive content)。元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的
内联元素和块级元素的区别
常见块级元素（换行，能够识别宽高） div、form、h1~h6、hr、p、table、ul、等 常见内联元素（行内元素）（换行，不识别宽高） a、b、em、i、span、strongs等
行内块级元素（特点：不换行、能够识别宽高） button、img、inputs等