1、html【超文本标记语言】 类似于快递上的地址，快递公司根据不同的地址发送目的地
1. 普通文本与超文本
普通文本
纯字符
超文本
字符，图片，超链接，视频，音频
<h1>hello world</h1>
<p>段落</p>
<video src="a.mp4"></video>
<a href="http://www.baidu.com">百度一下</a>
2. 浏览器由上而下解析html文件，会将标签自动进行转换，变成浏览器页面元素显示
2、开发环境
编辑器
vscode、sublime
浏览器
firefox、chrome、IE
服务器
3、B/S架构【浏览器/服务器模式】
B Browser浏览器
S Server服务器
手机、电脑的浏览器 <--> 各类网站(服务器) <--> 数据库(java/python/nodejs)
演示资源库
4、html网页
1. 编写hello world
2. 结构
doctype 声明部分
html Html的根元素，用来包含html文档的所有元素
head 不会显示到浏览器视口中
title 显示在浏览器选项卡的标题
meta 用于设置元信息，配置
charset=utf-8
编码
编辑器 UTF-8
解码
浏览器
程序员 编写
浏览器 解析
body
网页主体
3. 基本语法
1) 注释 ctrl + /
<!--注释-->
2) 元素组成
开始标签、内容(文本或者子标签)、结束标签
<div>hello world</div>
<div>
<span>hello world</span>
</div>
3) 属性
在开始标签中可以添加属性
<div 属性名=属性值 属性名=属性值>
属性名不区分大小写
<div id="one"></div>
<div ID="one"></div>
1. 核心属性【绝大多数标签都可以应用的属性】
id 文档内部的唯一标识
class 类
<div class="first one">one</div>
<div class="first two">two</div>
<div class="first three">three</div>
title 描述
style 样式，取值为css规则
css规则,键值对，键值之间通过冒号分割，规则之间通过分号分割
<div id='one' style="color:#333;backgroud:#ededed"></div>
2. 特有属性【某些标签特有的】
a
href
target
img
alt
src
4) 元素分类
1. 块级元素
作用：作为页面框架，或者容器。是页面的主体
特性：
1) 独占一行空间
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=";height:;"
块级元素：table/thead/tbody/caption/tr/form
div 无意义的块元素
h1~h3 标题
font-size
font-weight
margin
p 段落
margin
html
body
margin
ul、li 无序列表，列表项
ul
margin
padding
list-style
li
ol、li 有序列表，列表项
ol
margin
padding
list-style
dl、dt、dd 有序列表
dl
margin
dd
margin
H5新增的块元素（语义化标签）
header(头)
nav
article（主体）
section (部分)
footer（脚）
video
audio
2. 行内元素
作用：点缀网页，填充内容
特性：
1) 与其他行内元素共享一行空间
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素
行内元素：th/td/input
span 无意义的行内元素
a 超级链接
默认样式
color
text-decoration
cursor
默认事件（js - dom） 点击事件
href
url
相对路径
绝对路径
锚点
target
_self 当前页打开
_blank 新建选项卡打开
img
src 图片地址
url http://
相对路径
绝对路径 file://从根目录开始
alt 图片找不到的时候显示的文本
<img src="" alt="">
strong
bold
b
em
i
sub
sup
...
3. 功能元素 （行内元素）
1) 表格
table
【属性】border、width、、、、
caption 表格标题
thead 表头部分
tr
th/td
tbody 表格主体部分【不可以省略】
tr
td/th
【属性】colspan、rowspan、width、align
td/th中可以放任意子元素
tfoot 表底部分
tr
td
【注意】：每一行中的列数应该是相等
案例：个人计划表
作业：制作个人简历、课表
2) 表单（前后台交互）
用户 -> 表单 -> 后台 -> 数据库
注册页面
登录页面
搜索框
<form action="">
input
select
textarea
</form>
form
action 后台接口地址
method 请求方式
get
参数拼接在url后面，通过?来分割
传递参数较少
post
参数存放在请求体中，安全
传递参数更多
enctype 编码方式
1. enctype='application/x-www-form-urlencoded'
浏览器就会将参数转换为【查询字符串 qs】格式
username=tom&password=123321&
2. multipart/form-data
当有附件在表单中的时候，enctype务必设置为这种格式
input
name: 作为参数中的key
value: 作为参数中的value,在按钮中务必指定value值
type:
text 单行文本框
password 密码框
submit 提交按钮
radio 单选按钮
checkbox 复选按钮
file 附件选择器
checked 单值属性 默认选择
placeholder 提示语
select
option
标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本
<option value="sx">山西</option>
textarea
多行文本域
placeholder 提示语
第三方库
日期插件
地址选择器地址
附件上传
富文本
3) H5新增
标签
progress 进度条
output 表示用户动作产生的结果
datalist 表示其他控件可用的值
属性
type
date 日期
datetime-local 日期时间控件
time 时间控件
number 数字控件（只能输入数字）
range 范围控件（通过控制条可以调整取值）
search 搜索控件
tel 电话控件
url 地址控件
color 颜色控件
email email控件