HTML5篇
快捷操作(持续更新ing)
-
修改VSC的快捷键设置,在左上角找到“文件”点开找到“首选项”,在其中找到“键盘快捷设置”。
-
代码自动对齐:beaut插件;写完一行按 tab+回车
-
!(英文模式下)+tab:快速显示文档信息(html文件才行)
4.“Ctrl”+“/”是快速注释
5.快速删除多个重复的元素,先用光标选中一个,然后ctrl+D,按一次选择一个
6.tab键该行内容往后缩进,shift+tab键该行内容想前缩进一格
1.HTML元素
元素/标签:
标签名称:不区分大小写
成对出现的:开始标签 内容 结束标签
单标签:空元素 <meta>、<br>、<br />、<img />、<hr>(分割线效果)
属性:开始标签,由属性名称key、值value
块级元素:
作用:主要用于结构的布局
独立占用一整行,宽度100%,高度由内容决定
例子:
:段落 margin-top/margin-bottom(起段落作用:可以另起一行)
<Div>:宽度100%(相当于一个装在内容的容器)
标题:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
行内元素:
<Span>、<img>、 <a>作用:主要用于内容的填充
会和其他行内元素共享同一行,宽度、高度都是由内容决定
嵌套关系:
(1)块级可以嵌套行内元素
(2)不推荐行内嵌套块级
(3)行内元素可以嵌套行内元素
(4)块级元素视情况嵌套块级元素:浏览器会自动改正H5语法的错误,因此有时会造成嵌套内容的缺少
例子:
→
不推荐这样交差嵌套:
<p>段<strong>落</p></strong>:会浪费浏览器的读取时间,使得网页打开时间变长
:分割线效果
:换行标签
段落,这是块级元素
行内元素,主要给CSS使用,加粗
段落块级嵌套行内段落
<span>行内<p>不推荐嵌套块级</p>元素</span>
<span>这是行内<strong>元</strong>素</span>(行内嵌套行内,可行)
<p>段落<p>段落</p>段落</p>(不建议)
2.HTML属性( Attributes)
属性写在开始标签内,属性名与属性值之间使用等于号(“=”)分割,属性与属性之间使用空格(“ ”)分开,属性名与属性名之间用分号隔开(“ ;”),属性值通常使用单引号或者双引号括起。
1.大多数元素都可以使用的属性
(常用)
id 唯一标识 (最好不要以数字开头)
class 标识一类元素
style 样式 (style =“color:颜色”是确定文本内容的颜色)
(style =“background-color:颜色”是确定文本背景的颜色)
title 描述信息
举例↓
效果图↓
鼠标光标放在段落上会显示名称
- 自己特有的
img(图片元素)包含的属性:src+图片的地址、alt+文字显示、width+宽度、height+高度
a 超链接: href文件的地址、target=_self 、target=_blank、 target=_parent、target= _top
举例↓
效果图↓:
(非有效地址故图面没有具体效果)
src的表示方法有三种情况:
1.本地绝对路径:
2.本地相对路径:(指代的文件在同一级目录内: <img src="./+文件名称>)(指代文件在上一级目录内: <img src="…/+文件名称>)
3.网络路径:
(2)超链接
格式:给链接起的名字
例子:
PS:target=”_self”:在标签页打开链接
Target=_blank:新建一个标签页打开链接
锚点的应用:
格式:href="#id"
举例↓
效果图→(点击“返回顶部”)
→页面只会自动跳转到“头部”
,并不会跳转到页面的“顶部”
图片具有超链接效果:
将标签插入标签中
3.自定义
3.HTML语法
1.空白
空格
<
<
“
"
&
&
>
‘
'
在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白
2.实体
在HTML中,某些字符是预留的。例如:不能使用小于号<和大于号>,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities),实体以“&”符开始,以“ ;”结尾。以下是常见的实体。
对数函数的字符实体,立方的字符实体
注释
注释会被浏览器忽略而不被解析,用户无法看到,注释的作用是让程序员表明代码的含义,方便以后再看的时候能看明白。
4.HTML标签
段落
例:
I am a paragraph, oh yes I
am.
标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
强调
意为强调,内容更为有用(体现:加粗)
加粗
意为强调,突出文章重点,倾斜效果
斜体
下划线
列表
(1)有序列表
子元素
- ,序号默认从1 开始
-
图示:
reversed:“反转”属性
图示:→
start:定义有序列表的开始序号,type:定义项目符号,
circle:空心圆 disc:实心圆
自定义设置序号:
→
(2)无序列表
子元素
- (*“数字”可以迅速生成几行)
-
(3)自定义列表
子元素
:标题子元素
- :列表项
表格(常用于做表格,例:简历)
(1)格式:
标签
(2)标题:
,;(3)表头(第一行):
,包含,/(加粗效果)。(标签可写可不写,此时系统会自动补全标签而,/包含于名下);表格行:
表示表格的行,可以包含,元素;(4)单元格:
表示表格用来包含数据的单元格。常用于表头。图示效果:
PS:
的子元素为,,孙子元素为,层级关系不可混淆。, (5)边框:
外边框:(边框属性默认不显示,除非把代码敲出来)(<border=”数字”>意为设置表格外边框的宽度)
内边框:(<cellspacing=”数字”>意为设置表格内边框及单元格之间的宽度)
效果→
例子2:
效果→
标签:修改单元格中内容物距离边框的距离。
标签:对齐效果(<align=“center”>:水平对齐效果)
合并单元格:
标签:跨列合并(<colspan=”数字”>意为设置表格内合并单元格的数量)
效果→
标签:跨行合并(<rowspan=”数字”>意为设置表格内合并单元格的数量)
效果→
5.HTML新增标签
标签:类似于 标签,但语义更明显一些:一般指网页头部信息。(通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含搜索表单或logo。)举例↓
举例↓
标签:代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,也可以嵌套使用。(可以是一篇 博客或者报刊中的文章,一篇论坛帖子,一段用户评论或者独立的插件,或其他任和独立的内容。) 标签:功能类似于将HTML的内容分为一个个的章节,每一对 标签是一个章节,相比 标签语义更明确一些。举例↓
标签:用来在文档中呈现联系信息。(包括文档作者或文档维护者名字,他 们的网站链接,电子邮箱,真实地址,电话号码,以及跟文档相关的联系人的所 有联系信息。)标签:是一种元素的组合,带有可选标题,用来表示网页上一块独立内容,将其从网页上移除后不会对网页上的其他内容产生任何影响,figure元素所表示的内容可以是图片,统计图或代码示例,也可以是音频插件,视频插件,统计表格等。figcaption元素表示figure元素的标题,它从属于figure元素,必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素,但是允许放置多个其他元素。(常用于带有说明的图片,例如电商网站的某个带有价格和说明的商品展示板块儿) 举例↓
效果图↓
标签:一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字,也可以放置表单,插件或对于一个统计图提供的详细数据表格。open:标签的属性值。当该属性值为true时,该元素内部的子元素应该被展开显示;当该属性的值为false时,其内部的子元素应该被收缩起来不显示。默认值为false。
标签:的子元素/子标签。用鼠标单击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素,浏览器会提供默认文字(详细信息)以供单击。(相当于的标题)举例↓
效果→
效果→
效果→
HTML5篇
快捷操作(持续更新ing)
-
修改VSC的快捷键设置,在左上角找到“文件”点开找到“首选项”,在其中找到“键盘快捷设置”。
-
代码自动对齐:beaut插件;写完一行按 tab+回车
-
!(英文模式下)+tab:快速显示文档信息(html文件才行)
4.“Ctrl”+“/”是快速注释
5.快速删除多个重复的元素,先用光标选中一个,然后ctrl+D,按一次选择一个
6.tab键该行内容往后缩进,shift+tab键该行内容想前缩进一格
1.HTML元素
元素/标签:
标签名称:不区分大小写
成对出现的:开始标签 内容 结束标签
单标签:空元素 、
、
、、
(分割线效果)属性:开始标签,由属性名称key、值value
块级元素:
作用:主要用于结构的布局
独立占用一整行,宽度100%,高度由内容决定
例子:
:段落 margin-top/margin-bottom(起段落作用:可以另起一行)
:宽度100%(相当于一个装在内容的容器)标题:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
行内元素:
、、 作用:主要用于内容的填充
会和其他行内元素共享同一行,宽度、高度都是由内容决定
嵌套关系:
(1)块级可以嵌套行内元素
(2)不推荐行内嵌套块级
(3)行内元素可以嵌套行内元素
(4)块级元素视情况嵌套块级元素:浏览器会自动改正H5语法的错误,因此有时会造成嵌套内容的缺少
例子:
→
不推荐这样交差嵌套:
段落
:会浪费浏览器的读取时间,使得网页打开时间变长
:分割线效果
:换行标签段落,这是块级元素
行内元素,主要给CSS使用,加粗
段落块级嵌套行内段落
行内
不推荐嵌套块级
元素这是行内元素(行内嵌套行内,可行)
段落
段落
段落(不建议)容器1容器2容器1结束2.HTML属性( Attributes)
属性写在开始标签内,属性名与属性值之间使用等于号(“=”)分割,属性与属性之间使用空格(“ ”)分开,属性名与属性名之间用分号隔开(“ ;”),属性值通常使用单引号或者双引号括起。
1.大多数元素都可以使用的属性
(常用)id 唯一标识 (最好不要以数字开头)
class 标识一类元素
style 样式 (style =“color:颜色”是确定文本内容的颜色)
(style =“background-color:颜色”是确定文本背景的颜色)
title 描述信息
举例↓
效果图↓
鼠标光标放在段落上会显示名称
- 自己特有的
img(图片元素)包含的属性:src+图片的地址、alt+文字显示、width+宽度、height+高度
a 超链接: href文件的地址、target=_self 、target=_blank、 target=_parent、target= _top
举例↓
效果图↓:
(非有效地址故图面没有具体效果)
src的表示方法有三种情况:
1.本地绝对路径:
2.本地相对路径:
(指代的文件在同一级目录内: <img src="./+文件名称>)(指代文件在上一级目录内: <img src="…/+文件名称>)
3.网络路径:
(2)超链接
格式:给链接起的名字
例子:
PS:target=”_self”:在标签页打开链接
Target=_blank:新建一个标签页打开链接
锚点的应用:
格式:href="#id"
举例↓
效果图→(点击“返回顶部”)
→页面只会自动跳转到“头部”
,并不会跳转到页面的“顶部”
图片具有超链接效果:
将标签插入标签中
3.自定义
3.HTML语法
1.空白
空格
<
<
“
"
&
&
>
‘
'
在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白
2.实体
在HTML中,某些字符是预留的。例如:不能使用小于号<和大于号>,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities),实体以“&”符开始,以“ ;”结尾。以下是常见的实体。
对数函数的字符实体,立方的字符实体
注释
注释会被浏览器忽略而不被解析,用户无法看到,注释的作用是让程序员表明代码的含义,方便以后再看的时候能看明白。
4.HTML标签
段落
例:
I am a paragraph, oh yes I
am.标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
强调
意为强调,内容更为有用(体现:加粗)
加粗
意为强调,突出文章重点,倾斜效果
斜体
下划线
列表
(1)有序列表
子元素
- ,序号默认从1 开始
-
图示:
reversed:“反转”属性
图示:→
start:定义有序列表的开始序号,type:定义项目符号,
circle:空心圆 disc:实心圆
自定义设置序号:
→
(2)无序列表
子元素
- (*“数字”可以迅速生成几行)
-
(3)自定义列表
子元素
:标题子元素
- :列表项
表格(常用于做表格,例:简历)
(1)格式:
标签
(2)标题:
,;(3)表头(第一行):
,包含,/(加粗效果)。(标签可写可不写,此时系统会自动补全标签而,/包含于名下);表格行:
表示表格的行,可以包含,元素;(4)单元格:
表示表格用来包含数据的单元格。常用于表头。图示效果:
PS:
的子元素为,,孙子元素为,层级关系不可混淆。, (5)边框:
外边框:(边框属性默认不显示,除非把代码敲出来)(<border=”数字”>意为设置表格外边框的宽度)
内边框:(<cellspacing=”数字”>意为设置表格内边框及单元格之间的宽度)
效果→
例子2:
效果→
标签:修改单元格中内容物距离边框的距离。
标签:对齐效果(<align=“center”>:水平对齐效果)
合并单元格:
标签:跨列合并(<colspan=”数字”>意为设置表格内合并单元格的数量)
效果→
标签:跨行合并(<rowspan=”数字”>意为设置表格内合并单元格的数量)
效果→
5.HTML新增标签
标签:类似于 标签,但语义更明显一些:一般指网页头部信息。(通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含搜索表单或logo。)举例↓
举例↓
标签:代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,也可以嵌套使用。(可以是一篇 博客或者报刊中的文章,一篇论坛帖子,一段用户评论或者独立的插件,或其他任和独立的内容。) 标签:功能类似于将HTML的内容分为一个个的章节,每一对 标签是一个章节,相比 标签语义更明确一些。举例↓
标签:用来在文档中呈现联系信息。(包括文档作者或文档维护者名字,他 们的网站链接,电子邮箱,真实地址,电话号码,以及跟文档相关的联系人的所 有联系信息。)标签:是一种元素的组合,带有可选标题,用来表示网页上一块独立内容,将其从网页上移除后不会对网页上的其他内容产生任何影响,figure元素所表示的内容可以是图片,统计图或代码示例,也可以是音频插件,视频插件,统计表格等。figcaption元素表示figure元素的标题,它从属于figure元素,必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素,但是允许放置多个其他元素。(常用于带有说明的图片,例如电商网站的某个带有价格和说明的商品展示板块儿) 举例↓
效果图↓
标签:一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字,也可以放置表单,插件或对于一个统计图提供的详细数据表格。open:标签的属性值。当该属性值为true时,该元素内部的子元素应该被展开显示;当该属性的值为false时,其内部的子元素应该被收缩起来不显示。默认值为false。
标签:的子元素/子标签。用鼠标单击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素,浏览器会提供默认文字(详细信息)以供单击。(相当于的标题)举例↓
效果→
效果→
效果→