H5全栈开发-web前端-HTML标签思维导图模板

01-回顾

标签概念回顾

标签作用

不同的标签表示不同的语义

让别人知道, 描述的内容代表什么含义

段落

图片

视频

音频

...

标签的格式

单标签

<标签名称属性名1="值1" 属性名2="值2">

中间不会包裹其他内容

img

br

hr

双标签

<开始标签属性名1="值1" 属性名2="值2"> 内容 </结束标签>

中间会包裹其他内容

学习地址

http://www.w3school.com.cn/

注意

标签有很多很多

但, 常用就那么十几个

有限的精力, 产生最大的价值

结构标签回顾

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

02-css和js标签

css标签

css代码

</style>

js标签

js代码

</script>

03-注释

概念

用于辅助标记某一段代码的注解

一般内容为, 某一段代码的含义

不会被浏览器渲染

作用

用于程序员之间沟通

自己理清代码思路

案例

参考网易首页

格式

html注释

例如

js注释

//

/* 注释内容 */

css注释

/* 注释内容 */

快捷键

Ctrl + /

注释一行或者多行

Ctrl+Shift+/

注释选中部分

逗比注释

佛祖

羊驼

皮卡丘

赛亚人

胜利

注意

不要乱加, 会增加文件大小, 网络传输慢

真正发布项目时

为了降低文件大小, 提高网络传输速度和响应速度

方案

代码精简

去除注释

代码混淆

一般针对于js, 不让别人追踪业务逻辑

代码压缩

...

04-常用内容标签目录

含义

全部都是放在body标签内部

用于描述内容语义, 展示给用户看的

标签目录

h1-h6系列

p

hr

br

img

a

detail + summary

marquee

ul + li

ol + li

dl + dt +dd

table + tr + td 表格系列

form + input 表单系列

HTML5新增

HTML5废弃

标签掌握

标签语义

标签效果

标签应用场景

标签书写格式

标签常用属性

很多属性已经不建议使用或者弃用

规律

凡是控制标签

外观

颜色

尺寸

粗细

位置

对齐

布局

一律被弃用

标签注意事项

05-基础标签

h1-h6系列

语义

描述文本的重要程度

1级标题

2级标题

...

6级标题

表示该文本比较重要

重要性从1到6递减

效果

分支主题

语法格式

双标签

...

应用场景

h1

此标签最重要

搜索引擎可以通过它快速识别网页主题

为了避免SEO误解, 一个界面只设定一个

logo

文章主题

https://news.163.com/19/0721/19/EKKQ0HKK000189FH.html

h2

仅次于h1

用于突出栏目分类

不要超过10个

h3

文章分类或者产品分类

h4

产品名称, 或者文章名称

案例

参考京东

参考腾讯

参考淘宝

参考网易

常用属性

align

含义

对齐方式

取值

left

center

right

justify

不建议使用

只要是设计位置尺寸, 外观样式的控制

全部都是CSS干的事

千万别通过HTML搞

注意事项

1. 标签默认独占一行

后期可以通过css修改

2. 如果仅仅是调整字体大小和尺寸, 请使用css控制

h系列代表语义

字体效果属于附加

3. 不仅仅修饰文本, 也可以修饰其他标签: a

p

语义

表示描述的内容是一个段落

效果

分支主题

各个段落会新开一行

具体行数, 受浏览器影响

书写格式

双标签

应用场景

描述一小段文本

商品简介

人物简介

...

常用属性

align

含义

对齐方式

取值

left

center

right

justify

不建议使用

注意事项

1. 独占一行

2. 浏览器忽略了源代码中的排版

（省略了多余的空格和换行）

补充

hr

语义

标签在 HTML 页面中创建一条水平线

水平分隔线（horizontal rule）可以在视觉上将文档分隔

效果

分支主题

书写格式

单标签

<hr>

<hr/>

应用场景

一般分离文章的标题和内容

也有直接设置上下边框来实现

分支主题

用处较少

常用属性

align

规定 hr 元素的对齐方式

取值

center

left

right

size

规定 hr 元素的高度（厚度）

取值

pixels

width

规定 hr 元素的宽度

取值

pixels

%

注意事项

1. 独占一行

2. / 是否需要添加

HTML中不需要加

XHTML中需要加

经验

按IDE的提示来

br

语义

可插入一个简单的换行符

和段落p的效果区别

p, 会在临近段落留够垂直间距

br, 就是简单的换行

效果

分支主题

应用场景

多在长篇内容介绍中出现

文章详情

商品详情

书写格式

单标签

<br>

<br/>

常用属性

无

注意事项

1. 段落内文字想换行, 需要使用br

2. 注意和段落效果的区别

img

语义

向网页中嵌入一幅图像

从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像

本地图片

静态图片

gif动图

远程图片

静态图片

gif动图

效果

分支主题

书写格式

单标签

应用场景

所有需要展示图片的地方

商品图片

人物图片

各种介绍图片

常用属性

src

文件的路径

alt

当图片加载不出来时的替代文本

SEO会收录图片信息

title

鼠标悬停时显示的内容

height

定义图像的高度。

单位为Pixels

width

定义图像的宽度度。

单位为Pixels或%

align

规定如何根据周围的文本来排列图像。

取值

top

bottom

middle

border

定义图像周围的边框

单位为Pixels

hspace

定义图像左侧和右侧的空白。

单位为Pixels

vspace

定义图像顶部和底部的空白。

单位为Pixels

注意事项

1. 不独占一行

2. 路径

相对路径

不需要写盘符,直接从当前工程开始找指定的文件

image/itlike.png

绝对路径

需要写盘符,从指定盘符路径加载文件

d:/HtmlProject/image/itlike.png

企业开发中, 几乎不会使用此方式

不利于移植

./

表示当前路径

../

表示上一级

3. alt一定要加, 为了SEO优化

a

语义

定义超链接，点击后跳转到另一个链接

可以修饰文字, 也可以修饰图片

效果

图示

书写格式

<a href="超链接URL">超链接内容</a>

文本

图片

应用场景

没有超链接的网页是没有灵魂的

站内链接

站外链接

外链

常用属性

target

单独通过target属性设置

_self

原窗口

_blank

新窗口

可以设置全局的打开方式base标签进行设置

分支主题

设置完毕后, 全局的a标签都是使用该种方式打开

如果想要另一种方式,则要单独设置对应的a标签

href

规定链接指向的页面的 URL。

假链接

开发初期, 没有链接可写

替代

#

会回到界面顶部

无动画效果

返回顶部一般都是这么做

jd

淘宝

javascript:

没有反应

注意

如果有target指明新窗口, # 效果也会跳转

download

规定被下载的超链接目标。

例如一个图片文件

默认是打开

设置了之后, 就可以下载

例如

兼容

chrome

Firefox

注意事项

1. 不会独占一行

2. 锚点跳转

跳转到同一个界面内的不同位置

不会重新发送请求获取数据

应用场景

方案

06-基础补充

details-summary

语义

摘要和详情

应用场景

比较少

书写格式

</details>

marquee

语义

跑马灯效果

效果

内容循环滚动

应用场景

书写格式

常用属性

behavior

alternate：表示在两端之间来回滚动。

scroll：表示由一端滚动到另一端，会重复。

slide：表示由一端滚动到另一端，不会重复。

bgcolor

活动字幕的背景颜色

direction

活动字幕的滚动方向

取值

up

down

left

right

height

高度

width

宽度

loop

循环次数

loop=-1表示一直滚动下去

scrollamount

活动字幕的滚动速度，单位pixels

scrolldelay

活动字幕滚动两次之间的延迟时间，单位毫秒

字符实体

在HTML中, 有的字符, 是代表特殊含义, 不能直接显示出来

空格

分支主题

<

>

版权符号

@copy

07-高级标签

列表标签

语义

让一堆相关数据整齐的排列

效果

原始效果

分支主题

结合CSS

分支主题

应用场景

导航

菜单

轮播

...

书写格式

分类

无序列表

没有先后之分

例如

中国所有城市

店铺所有商品

格式

<ul> 定义无序列表。 <li> 定义列表的项目。

分支主题

有序列表

有先后之分

例如

排行榜

格式

<ol> 定义有序列表。 <li> 定义列表的项目。

分支主题

定义列表

其次

格式

<dl> 定义定义列表。 <dt> 定义定义列表中的项目。 <dd> 定义定义列表中项目的描述。

分支主题

应用

网站尾部

京东尾部

分支主题

常用属性

ul

type

规定列表的项目符号的类型

取值

disc

square

circle

ol

type

规定在列表中使用的标记类型

取值

1

A

a

I

i

start

规定有序列表的起始值

reversed

H5新增

规定列表顺序为降序

取值

reversed

注意事项

1. 独占一行

2. ul 和 li 成对出现

3. 多级列表可以嵌套

4. li 里面可以包括其他元素!

img

小案例展示

css

html

表格标签

语义

定义一个类似于excel的表格

一个表格

表头

行

列

先指定行, 在行内部指定列

效果

分支主题

应用场景

曾经的表格布局

2004.sina.com.cn

展示关系型数据

http://www.w3school.com.cn/html/html_tables.asp

书写格式

简单版

<tr>

</tr>

<tr>

<td>Python</td>

</tr>

</table>

完整复杂版

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

</tbody>

</table>

常用属性

table

border

边框宽度

cellpadding

单元边沿与其内容之间的空白

cellspacing

单元格之间的空白

width

表格的宽度

align

表格的对齐方式

bgColor

背景色

background

背景图片

tr

align

表格行的内容对齐方式

取值

right

left

center

justify

char

valign

表格行中内容的垂直对齐方式

取值

top

middle

bottom

baseline

td

height

单元格的高度

align

单元格内容水平对齐方式

取值

right

left

center

justify

char

valign

单元格内容的垂直对齐方式

取值

top

middle

bottom

baseline

colspan

单元格可横跨的列数

rowspan

单元格可横跨的行数

注意事项

1. 表格整体独占一行

2. 表格的格式, 如果是复杂版的, 一定要写完整

案例

制作课程表

分支主题

参考代码

emmet快捷

tr>td{$@8}*8

css补充

border-collapse:collapse

表单标签

语义

定义供用户输入的 HTML 表单

如同生活中的快递单

给定字段

用户按字段填写信息

用于收集用户信息

效果

分支主题

应用场景

用户注册

百度搜: "注册账号"

用户登录

地址填写

...

一个完整表单的结构

组成

表单域

提示标签

表单控件

图示

分支主题

概念解释

提示标签

给用户提示文本, 告诉用户这个填写的内容代表含义

表单控件

采集用户信息的控件

类型

文本框

密码框

单选框

复选框

...

表单域

限定表单控件的从属关系

区分多个表单

提交时, 会提交整个表单域内部的得所有表单控件

案例

模拟百度搜索

表单控件

<input /> 系列

单标签

通过type属性来指明不同类型

输入字段

text

普通文本框

password

密码框

radio

单选按钮

checkbox

复选框

hidden

隐藏域

file

文件

按钮

reset

重置

submit

提交

普通样式

image

提交

图片样式

button

按钮

关联js代码

自定义行为

快捷输入

input:type值

tab

textarea

双标签

语义

多行文本输入框

格式

</textarea>

属性

cols

rows

readonly

disabled

css

resize

none

是否可以修改大小

select + option

双标签

语义

下拉框选项

格式

</optgroup>

属性

select

name

multiple

是否允许多选

size

下拉列表可见的条目

option

value

selected

外边框

<form>

身高：<input type="text" >

体重：<input type="text" >

</fieldset>

</form>

08-HTML5新增和废弃

HTML5新增

表单

datalist

结合input使用

例

</datalist>

input

type

email

url

number

属性

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔

value number 规定默认值

range

属性

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔

value number 规定默认值

color

Date pickers (date, month, week, time, datetime-local)

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

video

语义

展示视频

属性

src

url 要播放的视频的 URL。

autoplay

如果出现该属性，则视频在就绪后马上播放。

autoplay

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

controls

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

loop

muted

规定视频的音频输出应该被静音。

muted

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

preload

如果使用 "autoplay"，则忽略该属性。

width

pixels 设置视频播放器的宽度。

height

设置视频播放器的高度。

poster

URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

注意

解决视频格式适配问题

因为视频数据格式, 至今各个浏览器都无法统一

http://www.w3school.com.cn/html5/html_5_video.asp

所以, 为了兼容各个浏览器都能播放数据

你的浏览器不支持video标签

</video>

补充

embed

引入外部插件

优酷视频

案例

audio

语义

展示音频

属性

src

autoplay

controls

loop

muted

preload

HTML废弃

font

i

italic

倾斜

场景

一般用于css 钩子来用

小图标

替代

em

语义: 强调

b

bold

加粗

替代

strong

语义: 更强调

s

strikethrough

删除线

替代

del

语义: 删除

u

underline

下划线

替代

ins

语义: 插入

09-布局常用标签

div

无实际语义, 代表是一块区域; 结合CSS, 对网页结构进行划分布局

自带效果

独占一行

可改变宽高尺寸

span

无实际语义, 一般是结合CSS, 控制同一行内的某一小段样式

自带效果

没有独占一行

不能改变宽高尺寸