NAF's Land

# 基本标签

HTML 是由一个又一个元素构成的文件，这些元素叫做标签。

创建一个文件就可以清晰看见整个文件的结构。

# 创建第一个网页

以VSCode为例，在编辑器中打开一个文件夹，创建一个后缀名为html的文件；

在文本第一行输入html:5（可以看到有语法提示），回车，即可得到一个最基础的html文件。

# 结构

< !DOCTYPE>对文档类型进行说明，帮助浏览器正确地显示网页。 web世界中有很多类型的文档，浏览器只有明确了文档的类型，才能更准确地显示文档。所以我们应该文每一个文档增加< !DOCTYPE>进行文档类型说明。< !DOCTYPE>位于< html>标签之前。

所有的HTML文件都有两个主要结构：头部head和主体body 。通常将文档的描述信息放在头部，而将文档的主题信息（浏览器上显示的信息）放在主体。

标题是HTML文档头部最重要的信息。 每个文档都应该有一个标题，可以让游客看到网页的标题就知道该网页的主要内容是什么。

文档标题放在文档头部的<title>与</title>之间。

最后，线上HTML文档的完整结构：

!DOCTYPE

html

  • head
    • meta
    • title
  • body

# 认识HTML骨架

image-20201230155526443

标签是由：小于号+中间字符+大于号组成的代码(注意:代码里所有字符都由英文字符组成)

标签的形式

  • 单标签(形单影只) 比如meta标签
  • 双标签(成双成对) 比如html标签

HTML叫做“超文本标记语言”，超文本标记就是标签,这些标签都有不同的功能.

TIP

如果有/(斜杠)的为该标签的结束标签,没有的就为开始标签；

在HTML4时代，单标签必须写一个结尾的反斜杠，例如<meta charset="UTF-8"/> HTML5不用写。

# 文档类型声明DTD

  • HTML文件第一行必须是DTD (Document Type Definition文档类型声明)
  • 不写DTD会引发浏览器的一些兼容问题

# 网页的字符集

image-20201230161520255

image-20201230161416640

UTF-8和gb2312

image-20201230161704191

TIP

无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签:

image-20201230162507312

Live Server插件不支持gb2312 (gbk) 字符集，只支持UTF-8字符集

# 网页的title

image-20201230162949455

title标签用来设置网页的标题，文字会显示在浏览器的标签栏上

TIP

title也是搜索引擎收录网站时显示的标题,为了吸引用户点击,合理设置title是必要的.

SEO (Search Engine Optimization, 搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,让网站在搜索引擎的结果中内占据领先地位，获得品牌收益

网页关键词和页面描述

使用meta标签设置网页关键词和描述，name属性非常关键,用来设置meta的具体功能。

# 注释标签

  • 用法：形如 <!-- 我是一段注释 --> 注释标签中的内容不会被浏览器解析，有利于提高开发者代码的可读性。

# html 根标签

网页中的所有内容全部放在html标签内部;

网页根标签 lang是language的缩写，代表是该网页属于哪一个国家或是地区的网页;不能写多个.

如果是中文网站写中文,如果写英文,因为一些插件,会识别你这为英文网站并且提示你是否要翻译

# head 头部标签

header是网页的头部标签,head里面的内容不会直接出现在网页中；

作用:

主要是帮助游览器和搜索引擎去解析网页.

# title 标题标签

title中的内容会显示在游览器的标题栏,游览器会根据title判断网页的主要内容

方便用户通过搜索网页的名字找到相应的网站.

title标签的内容会作为搜索结果的超链接上的文字显示

网页的名字,当把文档加入用户的收藏夹或书签列表时，标题标签的内容将成为该文档链接的默认名称

**注意:**尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的title标题中不要设置相同的内容。

# meta标签 单标签

meta标签被称为网页的元数据

作用告诉浏览器和搜索引擎基本数据。

# meta charset="utf-8"

作用:网页文字的编码格式,避免乱码问题。

# meta name="keywords" content="关键字信息"

name属性指定网页的数据名称；

content属性指定数据的内容；

表示网页的关键字信息。

# meta name="description" content="网页的描述信息"

描述信息被搜索引擎采用后,作为页面的摘要去显示

网站的描述会显示在搜索引擎的搜索结果中

# body 存放网页内容

body是html的子元素,表现网页的主题部分.所有可见部分都应该放在body里面

# div(DIVision) 划分区域标签

div是布局中最常用的标签，因为其本身没有语义，没有权重；

布局时，div 就像一个个的盒子，把内容装进盒子然后放到合适的位置上；

虽然一切元素都可以由 div 标签实现，但是出于语义化不建议这么做。

# h标签正文中的标题

h标签通常用于文章的大小标题.

h1~h6 表示了由大到小六个不同等级的标题，自带权重；

书写规范的标签有利于搜索引擎的收录。

# ul（ Unordered List) li (list-item) 无序列表标签

内容相似、结构相仿、布局接近使用无序列表.

使用li表示列表项

ul 标签子层级里只能写li标签；

用ul标签划分出很多相同大区域,li划分大区域里面单个相似的区域；

是非常常见的排版标签，比如商品列表，页面导航等场合都可以使用 ul + li 的组合实现。

# ol（ ordered lists ）li (list-item) 有序列表标签

也是划分内容相似、结构相仿、布局接近的区域

但是每个区域的内容是有先后顺序关系的，通过序号可以了然看到项目的层级情况。

# p(paragraph)标签 段落标签

作用：在页面上划分文字段落的区域。

# span标签 划分文字区域

作用:

​在网页圈出内容进行单独处理

如果一段文字某几个文字变需要变色和加背景颜色,那这些特殊的文字就用span去包裹.

# strong b标签 强调标注

作用:

用于强调作用的标签，会对内部的文字添加一些特殊样式进行标注,如文本加粗;

# em i都为斜体标签

em不仅能使文本变成斜体,而且还能够强调

i标签由于虽然也是斜体，现在更加广泛应用于图标样式。

# a标签

a标签定义超链接， 用于跳转到某一链接。

链接:a 标签最重要的属性是 href 属性，它指示跳转的地址。

​ 属性:

​ href 指定跳转的目标路径

​ 1.值可以是一个外部网站的地址

​ 2.值也可以写一个内部的地址

**锚点:**href="#ID名" 跳转到页面的指定位置, 只需讲 href属性设置为 #目标元素id的属性值

在开发中可以将#作为超链接的路径的占位符使用,会跳转页面的顶部

可以使用javascript:;来作为href的属性,此时点击这个超链接什么也不会发生.

target属性 用来指定超链接的打开方式

target="_self" 默认值 在当前窗口打开。

target="__blank" 在新窗口打开；

# img标签

用于向当前页面引入一个外部图片

属性

src="图片地址" src是sourse的缩写，表示我们需要显示的图片文件所在的位置

alt图片描述 图片无法加载出来显示 搜索引擎会根据alt内容来识别图片,如果不写不会被搜索引擎收录

title鼠标悬停会出现文字提示

# video 视频标签

src=“视频地址”: 表示我们需要显示的视频文件所在的位置

支持格式

MP4 WebM Ogg

属性:

​ controls 是否允许用户控制播放暂停

​ autoplay 自动播放 打开页面时候自动播放,目前大部分游览器都不会对音乐自动播放

​ loop 循环播放

# audio标签 音频标签

src=“视频地址”: 表示我们需要显示的视频文件所在的位置

默认情况下不允许用户自己控制播放停止

属性:

​ controls 是否允许用户控制播放暂停

​ autoplay 自动播放 打开页面时候自动播放,目前大部分游览器都不会对音乐自动播放

​ loop 循环播放

支持格式:

wav、mp3、ogg

# 特殊字符

因为网页编写的多个空格默认情况下会自动被游览器解析为一个空格

在html有些时候我们不能直接书写一些特殊符号.

比如:多个连续的空格,字母两侧的大于号和小于号

如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符);

实体的语法:

&实体的名字

  • 空格; &nbsp;
  • 小于号: &lt;
  • 大于号: &gt;

# 常用块级和行内元素

块元素(block element)

div h ol ul li p pre

行内元素 (inline elemnet)

a b strong em i span video audio img

块级元素独占一行,在网页中一般使用块元素进行页面的布局

行内元素并列一行,主要用来包裹文字

一般情况下我们在块级元素可以包裹任何类型的标签,行内元素只能包裹行内元素

# HTML标签语义化

HTML标签语义化就是用正确的标签做正确的事情，让标签有自己的含义。

作用：让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；

<p>文字</p>
<span>文字</span>
<!-- 此时都是写了一行文字,而p标签的含义为段落,span标签则没有独特的含义。 -->
1
2
3

TIP

  • 除单标签以外，标签严格封闭，也就是说标签总是成对出现（开始标签和结束标签）;
  • HTML文件不需要编译，直接使用浏览器打开即可解析效果。因为在浏览器内部内置了解析引擎;
  • 通过link标签可以链接外部资源文件。
Last Updated: 9/22/2022, 2:18:13 PM

← 01-CSS →

Bathroom Mirror / You're Coming Right?
Justin Hurwitz