HTML基础学习笔记
一、HTML
1.html 是超文本标记语言，不是一种编程语言，而是一种标记语言。
2.超文本： ①可以加入图片、声音、动画、多媒体等内容（超越了文本限制） ②可以从一个文件跳转到另一个文件（超级链接文本）
二、常用浏览器
1.IE、火狐、谷歌(必备)、Safari、Opera
2.浏览器内核：IE：Trident 火狐：Gecko Safari：Webkit（国产浏览器一般也用）、 谷歌＆Opera：Blink(是Webkit的分支)
三、Web标准
1.Web标准的构成（面试重点）
- 结构（structure）：用于对网页元素进行整理和分类，→HTML（结构最重要）
- 表现（presentation）：设置网页元素的版式、颜色、 大小等外观样式→CSS
- 行为（behavior）：网页模型的定义及交互的编写→JavaScript
四、HTML基本标签
- 学习路线：语法规范→基本结构标签→开发工具→常用标签→注释和特殊字符
1.语法规范：
①尖括号 < >
②成对出现：双标签，特殊的是单个出现：单标签 eg：
<br />
2.标签关系：
包含关系（父子关系）、并列关系（兄弟关系）
3.基本结构标签：
<html></html> HTML标签、根标签
<head></head>文档的头部，在里面必须要设置的标签是title
<title></title>文档的标题
<body></body>文档的主体
五、VSCode的使用（免费）
1.快捷键
- Ctrl+N新建文件
- Ctrl + + 字号放大 + - 字号放小
- Ctrl+S 保存
- ！按Tab
- Alt +B 用默认浏览器查看（或者右击）
文档类型声明：告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>：当前页面采用HTML5版本
lang="zh-CN"：语言种类 en英文 zh-CN中文（推荐）
charset:字符集 UTF-8万国码
六、HTML常用标签
1.标题标签
<h1>~<h6>：每个标题独占一行
2.段落标签
<p> </p> 标签之间的内容是一段
3.换行标签（单）
<br />
4.文本格式化标签
加粗：<strong></strong> 或者<b></b>
倾斜：<em></em> 或者<i></i>
删除线：<del></del> 或者<s></s>
下划线：<ins></ins> 或者<u></u>
5.布局标签
<div></div> 大盒子，自己独占一行。
<span></span>小盒子，一行可以多个。
6.图像标签（单）
<img src=""/>
属性：alt： 值：文本；替换文本，图像不能显示的文字
title 值：文本；提示文本，鼠标放到图像上，显示的文字
width 值：像素；宽；只改一个另一个会等比缩放
height值：像素；高
border值：像素；设置图像的边框粗细
src：如果在同一级，直接输入图片名字
目录文件夹：目录文件夹下一般放 页面html 和 文件夹images 等等...
根目录：打开目录文件夹的第一层就是根目录
路径：相对路径＆绝对路径
① 相对路径：图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 举例 |
| 同一级路径 | | eg：<img src="lala.png"> |
| 下一级路径 | / |eg:<img src="images/lala.png"> |
| 上一级路径 | ../ | eg:<img src="../lala.png"> |
② 绝对路径：通常从盘符开始的路径
eg： D:\web\images\lala.png （不推荐，每个人电脑不一样容易乱）
eg: http://www.xxx.xx/images/lala.png（完整网络地址 ）
7.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本or图像</a>
target：_self为默认值，_blank为在新窗口中打开
- 链接类型：
外部链接：href="<http://www.baidu.com>"
内部链接：href="index.html"
空链接：href="#"
下载链接：如果href里面地址是一个文件(.exe)或者压缩包(.zip)，会下载这个文件，herf="xxx.zip"
锚点链接：点击链接，可以快速定位到页面的某个位置
①. 链接文本中 herf="#名字" eg: <a herf="#two">第2集<a>
②. 目标位置标签上，添加一个属性 id=刚才的名字 eg: <h3 id=two>第2集介绍<h3>
8.注释标签
<!--注释部分--> 快捷键 ctrl + /
9.特殊字符
空格： ； 小于号：<； 大于号：>； & ： &；
￥：¥； ©：©； 注册商标：®； 摄氏度：°；
±：±； ×：×； ÷：÷； 平方：²；
立方：³；
10.表格标签（显示数据）
<table>
<thead>
<tr><th>表头</th><th>表头</th>---</tr>
</thead>
<tbody>
<tr> <td>单元格</td><td>单元格</td> --- </tr>
---
</tbody>
</table>
表格：<table></table>
表格头部区域：<thead></thead>（放在table标签中）
表格主体：<tbody></tbody>（放在table标签中）
表头：<th></th>
行：<tr></tr>
单元格：<td></td>
属性→值→描述（属性写在table标签里面）
align left、center、right 规定表格相对周围元素的对齐方式
border 1或者"" 规定表格表格单元是否拥有边框，默认为"",表示没有
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1px
cellspacing 像素值 规定单元格之间的空白，默认2px
width 像素值或百分比 规定表格的宽度
练习：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿圣诞老人</title>
</head>
<body>
<table align="center" cellpadding="5" cellspacing="0" width="600px" border="1">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↓</td>
<td>345</td>
<td>123</td>
<td>
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
<a href="https://image.baidu.com/" target="_blank">图片</a>
<a href="https://baike.baidu.com/" target="_blank">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>西游记</td>
<td>↑</td>
<td>123</td>
<td>456</td>
<td>
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
<a href="https://image.baidu.com/" target="_blank">图片</a>
<a href="https://baike.baidu.com/" target="_blank">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-
合并单元格
① 跨行合并：rowspan="合并单元格的个数"
② 跨列合并：colapan="合并单元格的个数"
③ 目标单元格：
跨行 最上侧单元格为目标单元格，写合并代码 跨列 最左侧单元格为目标单元格，写合并代码 例：<td colspann="2"></td>
*合并结束后，删除多余单元格*
11.列表标签（布局）
-
无序列表（重要）
知识点：
<ul>表示无序列表</ul>
<li>表示列表项</li>
语法：
<ul>
<li>项1</li>
<li>项2</li>
<li>项3</li>
------
</ul>
注意：
没有顺序；
<ul></ul>里面只能放<li></li>标签，其他不允许；
<li></li>相当于一个容器，可以放其他的，比如p；
列表前面的样式可以用css去掉。
-
有序列表（理解）
知识点：
<ol>有序列表</ol>
<li>表示列表项</li>
语法：
<ol>
<li>项1</li>
<li>项2</li>
<li>项3</li>
------
</ol>
注意：
有顺序；
<ol></ol>里面只能放<li></li>标签，其他不允许；
<li></li>相当于一个容器，可以放其他的，比如p。
列表前面的样式可以用css去掉。
-
自定义列表（重要）
使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
知识点： <dl>定义描述列表</dl> <dt>定义项目/名字</dt> <dd>定义每一个项目/名字</dd> 语法： <dl> <dt>名词1</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> </dl> 注意： <dl></dl>里面只能放<dt>、<dd>标签，其他不允许； <dt>和<dd>个数没有限制，经常一个<dt>对应多个<dd>； <dt>和<dd>里面可以放任何标签。
12.表单标签
目的：收集用户信息
组成：由表单域、表单控件（也称表单元素：可以输入内容的或者是按钮）、提示信息3个部分组成。
-
表单域
知识点：
用于定义表单域，可以把它范围内的表单元素信息提交给服务器。语法：
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>属性：
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址 method get / post 用于设置表单数据的提交方式 name 名称 用于指定表单的名称，以区分同一个页面中的多个表单区域
-
表单控件
① input（单） ：输入表单元素
<input type="属性值"/>
<input> type属性：
| button | 定义可点击按钮（多数情况下用于通过JavaScript启动脚本）(eg：提交发送验证码)
| checkbox | 定义复选框 （多选多，也可以选一个eg：爱好）
| file | 定义输入字段和"浏览"按钮，供文件上传（eg：上传头像/上传文件）
| hidden | 定义隐藏的输入字段
| image | 定义图像形式的提交按钮
| password | 定义密码字段，该字段中的字符被掩码（密码用 ）
| radio | 定义单选按钮（多选一eg：性别）
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器(form标签里面action="xxx.xxx"定义的服务器)
| text | 定义单行的输入字段，用户在其中输文本，默认宽度为20个字符（文本eg：用户名）
<input>其他属性：
| 属性 | 属性值 | 描述
| name | 由用户自定义 | 定义input元素的名称（单选按钮、多选按钮name值必须相同）
| value | 由用户自定义 | 规定input元素的值（预写值，填了会送到后台，按钮必写）
| checked | checked | 规定此input元素首次加载时应当被选中（针对单选按钮、复选按钮）
| maxlength | 正整数 | 规定输入字段中的字符的最大长度
提示：单选按钮必须有相同的名字name，才可以实现多选一；单选按钮多选按钮名字都必须相同。
② select：下拉表单元素
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
---
</select>
提示：<select>至少包含一对<option>，在<option>中定义一个属性selected="selected"时，当前项即为默认选中项。
③textarea：文本域元素
使用场景：用户输入内容较多时，(eg：留言版、评论)
语法：
<textarea row="3" cols="20">
文本内容
</textarea>
属性：cols="每行中的字符数"，rows="显示的行数"，实际通常用css来改变。
-
提示信息
13. label标签
解释：<label>标签为input元素定义标注（标签）。
使用场景：用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，增加用户体验。
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
for和id必须相同
