初一开源

# 基本标签

# 创建第一个网页

方法一

  1. 创建一个空文件夹,在VScode编辑器中打开这个文件夹
  2. 按ctrl + N快捷键新建文件，保存格式必须要手动填写html"后缀

方法二

  1. 在文件夹中直接点击鼠标右键"新建文本文件"
  2. 将. txt格式文件改为. html文件

TIP

网页虽然是花花绿绿的，但是html文件本身是纯文本的

# HTML 骨架的生成

输入! (英文模式下输入的感叹号) ,按tab键，即可自动生成HTML5的骨架

如果骨架没有生成，就说明你没有将网页保存，或者网页保存格式不是. htm1后缀

TIP

可以将输入法属性设置里调整为中文时使用英文标点

注意要打开电脑的显示文件拓展名

# 网页的浏览方法

方法一

  • 直接在文件夹中双击网页图标，即可查看网页

方法二

  • 下载open in brower插件可以打开网页
  • 给VSCode安装Live Server插件,故名思议,这个插件可以让“实时热更新”网页， 自动刷新网页

image-20201230154739874

image-20201230155115743

image-20201230155026813

TIP

使用with live server这种方法必须注意:网页必须存放在文件夹中，且VSCode已经打开这个文件夹

Chrome浏览器非常适合开发，所以要将Chrome浏览器设置为默认的浏览器哦

杀毒软件、管家通常会阻止这个操作

请妥善设置杀毒软件相关设置

# 认识HTML骨架

image-20201230155526443

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

标签的形式

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

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

TIP

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

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

标签即元素,元素即标签.

# 文档类型声明DTD

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

HTML5:< !DOCTYPE html>

HTML4.01严格版:< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/ /EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01过渡版:< !DOCTYPE HTML PUBLIC'//W3C//DTD HTML 4.01 Transitional/ /EN" "http://www.w3. org/TR/html4/lose. dtd">

HTML4.01框架版:< !DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3. org/TR/htm14/frameset.dtd">

W3C组织

W3C (The World Wide Web Consortium, 万维网联合会)是万维网的主要国际标准组织。该联盟成立于1994年，负责制定Web标准，主要是HTML和CSS。

image-20201230160701169

image-20201230161040017

image-20201230161158180

# 网页的字符集

image-20201230161520255

image-20201230161416640

UTF-8和gb2312

image-20201230161704191

TIP

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

image-20201230162507312

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

# 网页的title

image-20201230162949455

title的用途

image-20201230163634963

image-20201230163412697

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

TIP

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

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

网页关键词和页面描述

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

image-20201230165308708

# 注释标签

  • 用法:代码的作用，含义，意图写在四个减号中间,内容不会被浏览器解析;

  • 让别人更能明白这段代码你写的是什么内容,有什么作用

# html 根标签

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

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

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

# head 头部标签

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

作用:

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

# title 标题标签

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

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

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

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

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

# meta标签 单标签

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

::: danger元数据就是一些与生俱来的底层数据,类比于相当于人的DNA. :::

元数据就是一些与生俱来的底层数据,类比于相当于人的DNA.

TIP

我是谁我在那

元数据就是一些与生俱来的底层数据,类比于相当于人的DNA.

作用告诉游览器和搜索引擎基本数据`

# meta charset="utf-8"

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

游览器不知道网页文件的编码集的话就会导致乱码

(计算机不认识中文,我们也可能不认识法语),写上utf-8就是支持中文的万国码.

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。

如果一个网页要显示很多国家的语言就开发出了utf-8,在开发中我们使用的字符集都是utf-8.

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

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

content属性指定数据的内容

表示网页的关键字信息

可以同时指定多个关键字没有限制,关键字之间用,隔开

例如: 京东网站 content写网上购物,网上商城,家电,家居,母婴,图书,可以根据这些关键字找到网站

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

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

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

# body存放用户看到的所有内容

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

可以存放包含文字,图片,视频,音频.整个网页就这四类资源

# div(DIVision) 划分区域标签

Div标签本身没有什么特别之处,没有语义，没有权重,

div标签最大功劳的是替代了以前table标签布局,

正因为没有语义我们可以利用idv在网页内容中划分出多个矩形区域,存放不一样的内容.

一个个div就像一个个集装箱,我们去用这些集装箱去各式各样的物品,也就是我们去装我们的标签,来达到页面的位置布局.

目前来说div还是我们主要的布局元素

# h标签正文中的标题

H标签的重要性仅次于页面Title,文章会有标题,如首页的logo上可以加H1标签,包含最重要的关键词.

h1标签自带的权重使得网页的蜘蛛爬虫认为它最重要.

一个页面最多一个h1标签,就像你生命中最重要的女人一个.

更小的标题可以使用h3标签,没有明确的个数限制,但是要和h2有一定的比例关系,一个h2对应三个h3.就像一个公司最上面一个总裁,两三个副总裁,后面还有各个部门和职员一样.

h分出的区域和div分出的区域用户看起来没有任何区别,

标签写的更加符合规范时是给搜索引擎看的,搜索引擎只会收录一些比较重要的标签

div京东和h1京东,h1写的京东肯定会被收录

大量使用H标签反而会适得其反,使得主题不能突出,搜索引擎爬虫就不能正确的爬出你想要它爬出的内容.最终网站排名反而不好.

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

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

使用li表示列表项

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

如果你想添加p,div等标签,你在li里面添加一万个都没关系.

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

布局之前先做结构也是去用好标签,标签使用正确网络布局才可能正确.

属性:type

  1. 无序列表的符号,不建议去使用,但凡是样式的表现效果请使用css去实现.
  2. 值:默认disc：实体圆、circle：空心圆、square：实体方块
  3. 仅做了解
<!-- 无序列表默认属性type的值是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>


    <!-- 这些都是通过type来定义的，circle是定义一个空心圆 -->
        <ul type="circle">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>

    <!-- square定义实体方块 -->
        <ul type="square">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

但是每个区域的内容是有先后关系的

属性:type

  1. 无序列表的符号,不建议去使用,但凡是样式的表现效果请使用css去实现.
  2. 值:1、A、a、l、i、start.
  3. 仅做了解
	<!-- 有序列表默认是数字往下计数的 -->
        <ol>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
  

<!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->
        <ol type="A">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- 定义a，就是安装小写字母开始计数的 -->
        <ol type="a">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- 定义I，就是按照大写罗马数字计数的 -->
        <ol type="I">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- 定义i，就是按照大写罗马数字计数的 -->
        <ol type="i">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    

<!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。-->
        <ol start="3">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# dl （ definition list) > dt + dd自定义列表标签

<dl>/*Definition List 定义列表*/
	<dt>我是标题</dt>/*Definition Term 定义项*/
     <dd>我是正文，我必须长长长长长长长长长</dd>/*Definition Description 定义描述*/
</dl>
1
2
3
4

内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域

从语义上来讲DT是名称,是标题,DD是解释,是内容.

dt和dd标签是同级的,都放于dl标签之内,dt和dd不能相互嵌套.

必须结合dl标签去使用dd,dt标签,不能单独使用dt,dd标签.

ps:列表之间可以相互嵌套

# p(paragraph)标签 段落标签

作用:在网页上划分出一个专门存放大段文字的区域.

# span标签 划分文字区域

作用:

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

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

# strong b标签 重要文字标注

作用:

​ 网页内容中的某段文字中间标注出特别重要的文字,会对相应的文字进行加粗处理.

b标签只是规定文本加粗,是一个表现效果的标签

strong还有除了文本加粗强调文字的作用.能让搜索引擎觉得里面的字很重要.

# em i都为斜体标签

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

b标签只是规定文本变斜,是一个表现效果的标签

但是i标签现在没有被淘汰,广泛应用于小图标上.(iconfont)

# blockquote 标签 用于大段引用文字展示

主要去划分区域展示引用的古典,名人名言.

# a标签

**a标签定义超链接，**用于从一张页面链接到另一张页面。

链接:a 标签最重要的属性是 href 属性，它指示链接的目标。

​ 属性:

​ href 指定跳转的目标路径

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

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

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

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

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

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

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

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

# img标签

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

属性

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

width/height 图片的宽高, (单位是像素) 最好写图片原始尺寸.

​ -宽度和高度如果只修改一个,另一个会等比例缩放

​ **注意:**一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大

​ 但是在移动端,经常需要对图片的缩放(一般是大图缩小)

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

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

常见的图片格式

jpeg(jpg)

​ ---支持的颜色丰富,不支持透明效果,不支持动图

​ ---一般用来显示照片

gif

​ ----支持的颜色比较少,支持简单透明,支持动图

​ ---颜色单一的图片,动图

png

​ ---支持的颜色丰富

​ ---复杂透明的图片(专为网页而生的)

webp

​ ---这是谷歌专门推出来表现网页中的图片的一种格式

​ ---它具备所有图片的优点,而且文件还特别小

​ ---缺点:兼容性不好

base64

​ ---将图片使用base64进行编码,这样可以直接将图片直接转换为字符.通过字符的形 式引入图片

​ ---一般都是一些需要和网页一起加载的图片才会使用base64

**原则: **效果一样,用小的

​ 效果不一样,用效果好的,同样考虑下图片大小

# video 视频标签

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

支持格式

MP4 WebM Ogg

属性:

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

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

​ loop 循环播放

# audio标签 音频标签

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

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

属性:

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

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

​ loop 循环播放

支持格式:

wav、mp3、ogg

# pre标签

完全按照你的书写格式还原

# 其他标签

s del删除线

u ins 下划线

big文字变大115% small文字变小85%

hr 水平分割线 br换行

sub规定下标 sup规定上标

<p>  2h+o=h<sub>2</sub>o  </p>
<p>  3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>   </p>
1
2

# 特殊的字符

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

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

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

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

实体的语法:

&实体的名字

  • 空格; &nbsp;
  • 小于号: &lt; less than
  • 大于号: &gt; greater than
  • 版权符号 &copy;

# 常用块级和行内元素

块元素(block element)

div h ol ul li dl dt dd p blockquote pre

行内元素 (inline elemnet)

a b strong em i span video audio img

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

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

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

特殊:

p元素不能放任何的块级元素.

a标签可以放块级元素

# HTML标签语义化

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

作用:

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

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

# 代码规范:tab来缩进代码

正确嵌套,元素嵌套就是一颗种族树,最上面是曾祖父,下面是所有的孩子和孙子.

子层级代码相对父层级代码缩进一个tab.

开始标签和结束标签发生换行请保证在竖直位置对齐.

注意:我们一定要严格要求我们书写规范.

在企业面试时面试官第一眼看的是代码格式.这是工程师的第一要求,也是工程师的自我修养.

← 表单元素 →