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="width:;height:;"

 

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) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

 

span 无意义的行内元素

a 超级链接

默认样式

color

text-decoration

cursor

默认事件（js - dom） 点击事件

href

url

相对路径

绝对路径

锚点

 

target

_self 当前页打开

_blank 新建选项卡打开

img

src 图片地址

url http://

相对路径

绝对路径 file://从根目录开始

alt 图片找不到的时候显示的文本

 

<img src="" >

 

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控件