HTML基本标签归纳总结

1. HTML发展史

HTML是什么
- HyberText Markup Language
- 使用标签来描述页面的内容和结构
HTML 4.01, 1998
- 样式与内容分离，CSS支持
- Doctype（当前页面遵循什么版本）
Doctype的作用
- 指定html页面使用的标准和版本
- 浏览器根据doctype决定使用哪种渲染模式（不写是怪异模式）
渲染模式
- Quirks Mode 怪异模式（html4之前）
- Almost Standard Mode 准标准模式（针对严苛的版本）
- Standard Mode 标准模式
XHTML 1.0, 2000
- 用XML语法重新定义HTML
- 语法严格要求
XHTML 2.0
- 不兼容历史，去除样式标签，去除 img a，彻底修改form，开发者不欢迎浏览器不支持
HTML 5
- 2008年 html5草案发布
HTML 5设计思想
- 兼容已有内容
- 避免不必要的复杂性（例如doctype写法简洁化）
- 解决现实问题（本地存储定位等）
- 优雅降级（canvas里可以写html，根据浏览器支持决定与否解析，或者不支持canvas时图片代替）
- 尊重事实标准
- 用户》开发者》浏览器厂商》标准制定者》理论完美（从用户出发逐层完善）
HTML 5中的变化
- doctype meta
- 新增语义化标签和属性
- 去掉纯展示型标签
- canvas，video，audio，离线，本地存储，拖拽等
语法
- 标签不区分大小写，推荐小写
- 空标签可以不闭合，比如input是通过属性指定的，meta
- 属性不必引号，推荐双引号
- 某些属性可以省略，比如required，readonly

2. HTML中的文本标签

p标签，p会自动闭合，但推荐写闭合
h1 ~ h6

hr段落级别的话题切换（横线）

title
paragraphe of topic one

paragraphe of topic two
复制代码

列表

有序列表

university list

    THU
    PKU
    FDU


复制代码

无序列表

university list

    THU
    PKU
    FDU


复制代码

定义列表

霸王别姬

    导演：
    陈凯歌
    主演：
    张国荣
    张丰毅
    巩俐
    上映日期：
    1993-01-01



复制代码

引用


    paragraphe

My favourite color is golden , and blue 
复制代码

预格式化文本


第一行  空   格 
第二行
复制代码

代码
```
复制代码
```
figure
```
    
    xx表

复制代码
```

网页总体结构

强调
- strong：重要性、严重性和紧急性
- em：从一句话中突出某个词语
- b：将词语从视觉上和其他部分区分，比如一篇论文摘要中的关键词
- i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白

定义与缩写

定义：dfn
```
 HTML是blablabla 
复制代码
```
缩写：abbr
```
W3C
复制代码
```

上标和下标
```
E = MC²
CO₂
复制代码
```
mark
- 和用户当前行为相关的突出，比如在搜索结果中匹配到的词
- 一部分内容需要在后面引用时

插入和删除

原价：299元双11特价：999元
复制代码

换行控制
- 尽量避免，手机上可能会乱，br标签
- wbr标签模拟空格单词换行
div和span
- 实在找不到其它更符合语义的标签时使用
实体(Entity)字符

3. HTML链接

google
复制代码

www.example.com/post/2016/f…
- Scheme => http
- Host => www.example.com
- Path => post/2016/fe.html
- Query => print=1&color=no
- Hash => heading
省略协议
- 浏览器会根据当前页面的链接的协议补充
```
查看图片
复制代码
```
省略协议和Host
- 浏览器会根据当前页面的链接的协议和host补充
```
返回首页
复制代码
```
- 调试模式=>选中元素节点=>consol中输入0.href)
相对路径与绝对路径
- href="/a/b/c.html" => 绝对路径
- href="../../c.html" => 相对路径

页面内链接（锚点）

锚点
到test
0
0
0
0
0
0
test
回顶部
0
0
0
0
0
0
复制代码

链接目标

google(当前窗口)
google(新窗口)
google(abc)
baidu(abc)
复制代码

4. HTML图片

指定图片宽高
- 不指定宽高：原图大小显示
- 指定宽度：按比例缩放到指定宽度
- 指定高度：按比例缩放到指定高度
- 指定高宽：强制按指定宽高显示
常用图片格式
- jpg 照片，适合色彩丰富的图片
- png 色彩较少时使用，png24可以半透明
- gif 无法半透明，可以多帧做动画
- webp google出的图片压缩格式

5. HTML表格


    
        
            浏览器
            渲染引擎
            JS引擎
        
    
    
        
            Chrome
            Blink
            V8
        
        
            Opera
            Blink
            V8
        
        
            Firefox
            Gecko
            SpiderMonkey
        
        
            Edge
            EdgeHTML
            Chakra
        
    

复制代码

浏览器	渲染引擎	JS引擎
Chrome	Blink	V8
Opera	Blink	V8
Firefox	Gecko	SpiderMonkey
Edge	EdgeHTML	Chakra

合并行


    
        
            浏览器
            渲染引擎
            JS引擎
        
    
    
        
            Chrome
            Blink
            V8
        
        
            Opera
        
        
            Firefox
            Gecko
            SpiderMonkey
        
        
            Edge
            EdgeHTML
            Chakra
        
    

复制代码

浏览器	渲染引擎	JS引擎
Chrome	Blink	V8
Opera
Firefox	Gecko	SpiderMonkey
Edge	EdgeHTML	Chakra

表格说明
- caption是table的第一个元素
```
    
    

复制代码
```
列组（colgroup）
```
    
    
```

6. HTML表单

使用form获取让用户提供数据

GET请求:从服务器获取，安全，不会对服务器改动，每次操作返回结果相同，浏览器会缓存get请求，数据传输在url中用键值对拼接（一次性发送）

POST请求: 每次提交数据，会修改，浏览器不会缓存post请求，因为会提交改动，不会把数据放在路径中，会编码后放在http的body中（先发送head再body）

form表单中不写method默认是GET

URL编码
- 提交数据中有空格或者/以及+等，会进行转义，再传输会出现%20之类的转义字符
- 解码：js提供decodeURIComponent('a%2Bb&password=a+b') => a+b&password=a+b
HTTP method
- GRT/POST/HEAD/PUT/DELETE/OPTIONS
单行文本框
多行文本框
输入验证
```
    
    
    
```
type
- type= search/email/url/submit
- 作用：手机端键盘布局，以及验证
novalidate禁止原生验证
```
 
```

单选框 radio

 
    你最喜欢什么水果？
    
        苹果
        香蕉
        芒果

复选框 checkbox

 
    你最喜欢什么水果？
    
        苹果
        香蕉
        芒果

GET /echo?fruit=apple&fruit=banana&fruit=mango

label标签（提升可用性和易用性）

点击label也可以切换选中元素状态
label也可以与input关联，方便读屏软件识别要求输入内容
label通过for和id进行关联

select标签

提交数据：fruit=3
select可以多选，需要command，size是显示个数，不写默认显示一个

select分组

目的城市：

select分组效果.png

隐藏 hidden

希望数据提交但是不在页面上展示
GET/echo?fruit=banana&secret=1

 
    你最喜欢什么水果？
    
        苹果
        香蕉
        芒果

文件选择上传

multipart分割文件提交接收后再合成

POST /echo
------WebKitFormBounadryMTXE8T65X0       //分割标识+乱码（起始标识）
Content-Disposition: from-data; name="fullname"     //form-data表示form表单提交的数据， 第一个input里是fullname

aa                            //input框的值是aa 会空一行
------WebKitFormBounadryMTXE8T65X0       //第一段结束
Content-Disposition: from-data; name="resume"; filename="resume.txt"
Content-Type: text/plain          //文件上传格式

This is my resume.                  //文件正文上下会空行
   
------WebKitFormBounadryMTXE8T65X0       //第二段结束

input中加multiple属性可以多选上传
accept 接收文件格式设置

日期时间 date & time


       date:
       datetime-local: 
       month: 
       week: 
       time:

数字区间 number & range

颜色选择 color

   //以#xxxx输出

提交button

不指定type 提交 => GET/echo?fullname=xxx&fruit=xxx&fruit=yyy
不写type默认submit
type="button" 行为要js实现
type="reset" 清空到最初状态

form表单中回车默认提交

如果多个button 会默认触发第一个button的submit

disable/readonly状态
表单设计原则
- 帮助用户不出错
- 尽早提示错误
- 扩大选择、点击区域
- 控件较多时要分组
- 主要动作和次要动作区分

HTML基本标签归纳总结

1. HTML发展史

2. HTML中的文本标签

title

university list

university list

霸王别姬

3. HTML链接

锚点

4. HTML图片

5. HTML表格

6. HTML表单

你可能感兴趣的:(HTML基本标签归纳总结)