前言
Html概述
Html是一种标记语言，它使用标记标签来描述页面
Html标签
1.html分位单标签和双标签
单标签 <br>
双标签 <html> </html>2.html标签的关系
1.包含：
<head>
<title> </title>
</head>
2.并列：
<head> </head>
<body> </body>3.骨架标签
| 标签 | 含义 | 小猪佩奇 |
|---|---|---|
| < html > | 根标签 | 全身 |
| < head > | 头部 | 头 |
| < title > | 标题 | 眼睛 |
| < body > | 内容 | 躯干 |
编译器 VS code
快捷键
| 快捷键 | 作用 |
|---|---|
| Ctrl + N | 新建 |
| Ctrl + S | 保存 |
| Ctrl + “+” / “-“ | 字体增大/缩小 |
| “ ! “ | 创建骨架 |
| Alt + B | 在默认的浏览器编译 |
插件
1. Chinese 翻译中文
2. Open in Browser 在浏览器中打开
3. Auto Rename Tag 改“前面的标签”时更改“后面的标签”<!DOCTYPE>和lang以及字符集的作用
<!DOCTYPE>
告诉浏览器使用哪种Html显示网页
注意：
1.要在< html >标签前面
2.不属于< html >标签它是文档声明标签lang
当前文档显示语言（告诉人们是什么语言的网站）
注意:
1.en ：英文 zh-CN ： 中文
2.英文中可以有中文，中文中可以有英文< Charset >字符集
utf-8 万国码 （不会写乱码）标题标签 (head缩写) < h1 >-< h6 >
<h1>我是一级标题</h1>
特点：
1.文字变大变粗
2.一个标题独占一行段落标签 (Paragraph缩写) < p >
<p>我是第一段落</p>换行标签 (break缩写) < br/ >
注意：
1.单标签
2.之间的空隙比段落间小文本格式化标签 (用前面的)
1.粗体 <strong> </strong> 或 <b> </b>
2.斜体 <em> </em> 或 <i> </i>
3.删除线 <del> </del> 或 <s> </s>
4.下划线 <ins> </ins> 或 <u> </u>< div >和< span >标签 (没有语意)
< div > < /div > (division缩写)
一个人独占一行（是个大盒子）< span > 标签 （span缩写）
一行可以放多个span（是个小盒子）图示
图像标签 (image缩写) < img >
<img src="图像url" />属性：
1. src 是<img>的必须属性指向文件的路径和文件名
2. alt 替代文本 当文字不能显示时，用文字替换
3. title 提示文本 鼠标放在图像时，显示的文字
4. width 图片的宽
5. heigh 图片的高
（一般宽/高只改一个）
6. border 边框粗细路径
目录文件夹：普通文件夹，有Html、图像等
根目录：最外的一层文件夹
1. 相对路径：图片相对Html页面的位置
1. 同一级: 直接写文件名
2. 下一级: 图像目录/文件名
3. 上一级: ../文件名
2. 绝对路径 (少用)
1. 电脑中
2. 网络中
3. 符号
1.绝对路径：\
2.相对路径：/超链接标签 (anchor缩写) < a >
<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>属性：
herf 用于链接目标的url地址
target 用于链接页面的打开方式
1. _self为默认值
2. _blank为在新窗口打开分类
1. 外部链接：以"http:// + 网址 " 开头
2. 内部链接：直接链接内部页面
3. 空链接：<a herf="#"> 空链接 </a>
4. 下载链接：<a herf="xxx.zip/zip/rar(等压缩包形式)> </a>
5. 网页元素链接："元素"代替"文字"
6. 锚点链接（重点）：点击链接到页面的某个位置
1. 在 herf 属性中，设置属性值为#名字
（如： <a herf="#two"> 第二集 </a> ）
2. 找到目标位置标签，添加id=名字
（如： <h3 id="two"> 第二季介绍 <h3> ) 注释
1. "<!--"开头
"-->"结束
2. 快捷键：Ctrl + "/"特殊字符
空格:
"<": <
"<": >表格标签
<table> -------> 定义单元格的标签
<tr> -------> 行
<td> 单元格内的文字 </td> -------> 单元格
......
</tr>
......
</table>
表头单元格
<table>
<tr>
<th> 表头 </th> （加粗+居中）
<td> 表格内容 </td>
<td> 表格内容 </td>
<td> 表格内容 </td>
</tr>
......
</table>表格属性 （不常用，之后用css，写在table中）
1. align--对齐 left center right
左 中心 右
2. border--边框 1 或 0
有 无（默认）
3. cellpadding--内容和边框的距离
4. cellspacing--单元格和单元格的距离
5. width--设置宽度
6. height--设置高度表格结构标签
1.头部区域 <thead> (一定要有<tr>标签)
2.主体区域 <tbody>
注：都在<table>标签中合并单元格
方式：
1. 跨行 rowspan = "合并单元格的个数"
2. 跨列 colspan = "合并单元格的个数"
目标单元格：
跨行：最上侧
跨列：最左侧 
步骤：
1. 先确定 跨行 或 跨列
2. 找到目标单元格，写合并方式
（如： <td colspan ="2"> </td>）
3. 删除多的单元格列表标签 （用于布局页面）
无序列表 （重点）
1. <ul> 中只放 <li>
2. <li> 中可以放任何元素
<ul>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
注：拥有自己的样式属性，之后用css改有序列表
1. <or> 中只放 <li>
2. <li> 中可以放任何元素
<or>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</or>
注：拥有自己的样式属性，之后用css改自定义列表 （重点）
<dl>
<dt> 大哥 </dt>
<dt> 小弟 </dt> -----> 小弟用于解释大哥
<dt> 小弟 </dt>
</dl>
注：
1. 一个 <dt> 可以对应多个 <dd>
2. <dt> 与 <dd> 的个数都无限制
注意：
何时用自定义列表，何时用无序列表
a. 使用自定义列表
b. 使用无序列表
2.格式
无序列表：
<ul>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>自定义列表：
<dl>
<dt>.....</dt>
<dt>.....</dt>
<dt>..... </dt>
</dl>表单标签
表单域 < form >
把区域中的表单元素送给服务器
<form action="url地址" methon="提交方式" name="表单名称">
[ get / post ] [指定表单的名称]
各种表单控件
</from>表单元素
< input > 输入
<input type="属性值" />
注：1.单标签 2.不同属性值对应不同的控件属性值：
1. text-文本框 用户可以在里面输入任何文字
2. password-密码框 用户看不见输入的密码
3. radio-单选按钮 可以实现多选一
4. checkbox-复选框 可以实现多选
5. submi-提交按钮 把表单form里面的表单元素里面的值提交给后台服务器
6. reset-重置按钮 可以还原表单元素初始的默认状态
7. botton-普通按钮 后期可以结合js搭配使用
8. file-文件域 选择文件按钮，上传文件时使用注意：
1. name-表单元素名字，多个单选按钮拥有相同名字时，可以实现单选一
（单选框和复选框，选项的name的值要相同）
2. value-表单元素的值
（只能在text中显示，只能后台人员使用）
3. checked-打开时默认选中：checked="checked"
（单选框和复选框中设置）
4. maxlength-输出字符字数最大值< label >标签 （为< input >元素定义标签）
自动将光标撞到或者选择到对应的元素上
<label for="sex" > 男 </label>
<input type="radio" name="sex" id="sex">< select > 下拉表单元素
<select>
<option> </option>
<option> </option>
</select>注意：
- < select > 中至少包含一对 < option >
- 在 < option > 中定义 checked=”checked” 时，当前项则为默认选择项
< textarea > 文本域
定义多行文本输入
<textarea rows="可以显示的行数" role="可以显示的行数">本文参考：
2019年黑马程序员前端入门视频教程 HTML5+CSS3