2020-08-10

HTML5篇

快捷操作（持续更新ing）

1. 修改VSC的快捷键设置，在左上角找到“文件”点开找到“首选项”，在其中找到“键盘快捷设置”。

2. 代码自动对齐：beaut插件；写完一行按 tab+回车

3. ！（英文模式下）+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>（不建议）

容器1

容器2

容器1结束

2.HTML属性（ Attributes）

属性写在开始标签内，属性名与属性值之间使用等于号（“=”）分割，属性与属性之间使用空格（“ ”）分开，属性名与属性名之间用分号隔开（“ ；”），属性值通常使用单引号或者双引号括起。

1.大多数元素都可以使用的属性
（常用）

id 唯一标识 （最好不要以数字开头）

class 标识一类元素

style 样式 （style =“color：颜色”是确定文本内容的颜色）

（style =“background-color：颜色”是确定文本背景的颜色）

title 描述信息

举例↓

效果图↓

鼠标光标放在段落上会显示名称

2. 自己特有的

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）

  1. 修改VSC的快捷键设置，在左上角找到“文件”点开找到“首选项”，在其中找到“键盘快捷设置”。

  2. 代码自动对齐：beaut插件；写完一行按 tab+回车

  3. ！（英文模式下）+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 描述信息

  举例↓

  效果图↓

  鼠标光标放在段落上会显示名称

  2. 自己特有的

  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元素，浏览器会提供默认文字(详细信息)以供单击。（相当于的标题）

  举例↓

  效果→

  效果→

  效果→