HTML
Part 1
03.网页
什么是网页
网页是构成网站的基本元素
HTML文件
什么是HTML
超文本标记语言
超越了文本限制，超级链接文本
网页的形成
04.常用游览器及其内核
IE、火狐、谷歌、Safari、Opera
游览器内核（渲染引擎）：
Trident、Gecko、Webkit、Blink
05.web标准
由W3C万维网联盟制定
为什么需要Web标准
Web标准的构成
结构、表现（外观）、行为（交互）
HTML、CSS、JavaScript
06~08.HTML
标签
语法规范：
基本语法概述
双标签<html> </html>
单标签<br />
标签关系
包含关系和并列关系
<html>
<head></head>
<body></body>
</html>基本结构标签：
第一个HTML网页
<html>（根标签）
<head>
<title>网页标题</title>
</head>
<body>
主体部分
</body>
</html>09.VSCode工具的使用
创建文件.html
生成骨架(!)
游览器游览
插件：
Chinese(Simplified)
Auto Rename Tag帮助重命名标签
OneDark Pro颜色主题
格式化代码（系统自带）
Open in browser（游览器预览）
Live Server（实时游览）（推荐）
Vscode-icons（设置文件图标）
Easy LESS（编辑less文件）
会了吧
快捷键：
快速复制一行：shift+alt+下（上）箭头
选定多个相同的单词：ctrl+d
添加多个光标：ctrl+alt+上（下）箭头
全局替换某些单词：ctrl+h
快速定位到某一行：ctrl+g
选择某个区块：shift+alt 然后拖动鼠标
放大缩小整个编辑器界面：ctrl+ +/-
自定义快捷键： 管理->键盘快捷方式
10.DOCTYPE和lang以及字符集的作用
VSCode工具生成骨架标签新增代码
<!DOCTYPE>标签
<!DOCTYPE html>文档类型声明标签
lang语言
<html lang="zh-CN">用来定义当前文档显示语言
charset字符集
<meta charset="UTF-8">以便计算机能够识别和存储各种文字
11~29.HTML常用标签
标签语义：让页面结构更清晰
标题标签：<h1>~<h6>（从大到小）
<h1>我是一级标题</h>（h是head缩写）
段落标签和换行标签
<p>我是一个段落标签</p><br />（break缩写，强制换行）
体育新闻案例
文本格式化标签
粗体：
我是<strong>加粗</strong>的文字;我是<b>加粗</b>的文字.
斜体：
我是<em>倾斜</em>的文字;我是<i>倾斜</i>的文字.
删除线：
我是<del>倾斜</del>的文字;我是<s>倾斜</s>的文字.
下划线：
我是<ins>倾斜</ins>的文字;我是<u>倾斜</u>的文字.
div和span标签
无语义，是盒子，装内容
div（division缩写）分割、分区；一个占一行；大盒子.
span跨度、跨距；一行可多个；小盒子.
图像标签和路径
图像标签
<img src="图像URL"/>（单标签）src是必须属性，用于指定图像文件的路径和文件名
alt 替换文本，图像显示不出来时用文字替换
title提示文本，鼠标放到图像上提示文字
<img src="图像名字" alt="图像有名字" title="图像有名字的"/>
width设置图像宽度
height设置图像高度
border设定边框粗细
图像标签注意点
属性写在标签名后面
属性无顺序，空格分开
采取键值对的格式，key="value"
目录文件夹和根目录
目录文件夹：和网站相关的素材都在里面
根目录：打开目录文件夹的第一层
打开文件夹：方便管理
路径
相对路径：以引用文件所在位置为参考，而建立出的目录路径。
简单说就是图片相对于HTML页面的位置
同一级：
<img src="baidu.gif"/>下一级：
<img src="images/baidu.gif"/>（/)上一级：
<img src="../baidu.gif"/>（../)
绝对路径：电脑中的位置或完整的网络地址。
超链接标签<a>
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
target="_self"当前窗口打开页面（默认）
target="_blank"另外启动一个窗口打开
链接分类
外部链接http://开头
内部链接：网站内部页面相互链接
空链接：
<a href="#"></a>下载链接：href里的地址是一个文件或压缩包，会下载这个文件
网页元素链接：
<a href="http://www.baidu.com"><img src="img.jpg"/></a>锚点链接：快速定位
#名字 eg.<a href="#two">第2集</a>id属性=刚才的名字 eg.<h3 id="two">第2集介绍</h3>
注释标签和特殊字符
<!--注释--> 快捷键ctrl+/
特殊字符：
空格
小于号<
大于号>
……
综合案例
Part 2
02~08表格标签
表格标签基本使用
表格的主要作用：展示数据
表格的基本用法：
<table>
<tr>（一行）
<td>单元格内文字</td>（单元格标签）
…
</tr>
</table>表头单元格标签<th>（table head缩写）
换<td>的位置，一个一格
文字加粗居中显示
表格相关属性（了解）
CSS会使用
感受外观形态
align 对齐 值：left、center、right
border边框 1或""
cellpadding像素值 规定单元边沿与其内容间的空白，默认1像素
cellspacing像素值 规定单元格间的空白，默认2像素
width像素值或百分比
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249"></table>
小说排行榜案例
表格结构标签
<thead>表格的头部区域
<tbody>表格的主体区域
<table>
<thead>…</thead>
<tbody>…</tbody>
</table>合并单元格
方式
跨行：rowspan="合并单元格的个数"
跨列：colspan="合并单元格的个数"
<td colspan="2"></td>
目标单元格
跨行：最上侧
跨列：最左侧
步骤
先确定跨行还是跨列
找目标单元格，写上合并方式
删除多余单元格
表格总结
表格的相关标签
表格的相关属性
合并单元格
09~12列表标签
作用：布局
无序列表（重点）
<ul>
<li>…</li>
……
<ul>无顺序，并列
只能嵌套<li>
<li>可以容纳所有元素
有序列表
<ol>
<li>…</li>
<ol>只能嵌套<li>
<li>相当于容器
有序列表会带有自己的样式属性，当实际会用CSS去掉
自定义列表（重点）
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
<dl>只能包含<dt><dd>
一般一个<dt>对应多个<dd>，并列的
列表总结
无序、有序、自定义
13~30表单标签
表单使用场景以及分类
现实中、网页中
为什么需要表单：收集用户信息
表单的组成
表单域
包含表单元素的区域
<form>会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式"（值：get/post） name="表单域名称">
各种表单元素控件
</form>表单控件（表单元素）
input输入表单元素
<input>输入 包含type属性（展示不同形态）
<input type="属性值" />
type属性值取值：
text文本框 用户可以往里面输入任何文字
用户名：<input type="text">
password密码框 看不见输入
密码：<input type="password">
radio单选按钮 可以实现多选
性别： 男<input type="radio">女<input type="radio">
checkbox复选框 可以实现多选
爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">
submit提交按钮
<input type="submit" （不改值显示的是“提交”）value="免费注册">
reset重置按钮
<input type="reset"（不改值显示”重置“）value="重新填写">
button按钮 定义可点击按钮，多数情况通过JavaScript启动脚本
<input type="button" value="获取短信验证码">
file文件域 上传文件
上传头像：<input type="file">
image定义图像形式的提交按钮
除type外，<input>标签的其他属性
name表单元素的名字 单选按钮里必须有相同名字，才能实现多选一
性别： 男<input type="radio" name="sex">女<input type="radio" name="sex">
value值 显示文字。给后台看。
checked默认选择 checked="checked"，主要针对于单选按钮和复选框
maxlength正整数 规定输入字段中的字符的最大长度
<label>标签本身不属于表单，但经常搭配使用
作用：绑定一个表单元素，点击<label>标签内文本，游览器自动跳转对应的表单元素上，增加体验。
<label for="nan">男</label>
<input type="radio" name="sex" id="nan"/><label>标签的for属性与相关元素的id属性相同
select下拉表单元素
使用场景：多个选项，节约空间，下拉列表
<select>语法
<select>
<option>选项1</option>
…
</select>至少包含一对<option>
在<option>中定义selected="selected"时，默认选中。
textarea文本域元素
使用场景：输入内容多的情况，比如简介、留言、反馈
<textarea rows="3" cols="20">文本内容</textarea>
rows、cols实际开发不会用，都用CSS来改变大小。
提示信息
综合案例-注册页面
查阅文档
推荐网站：
百度：http://www.baidu.com
W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/