HTML入门知识汇总

31 阅读17分钟

1、网页的组成

文字、图片、图标、音频、视频和超链接

2、网页的本质

前端程序员的编写的前端代码,主要包括html、css 和 JavaScript

3、网页的渲染

通过浏览器对前端代码进行解析和渲染,转换成用户看到的网页。

4、认识五大浏览器

浏览器是网页显示运行的平台,是前端开发的必备利器。

最常见的五大浏览器有:Chrome、Firefox、IE、Safari、Opera,其中Chrome市场份额占据了70%,是全球使用用户最多的浏览器。

浏览器是靠渲染引擎(浏览器内核)对前端代码进行解析渲染的,不同的浏览器,其内在的渲染引擎也是不同的。

浏览器内核备注
Chrome/OperaBlink
FirefoxGecko火狐浏览器内核
IETrident猎豹、360、百度
SafariWebkit苹果浏览器内核

渲染引擎不同,解析相同代码时的速度、性能、效果也是不同的

5、为什么需要Web标准

不同浏览器的内核不同,对于相同代码解析的效果会存在差异,如果用户想看一个网页,结果用不同的浏览器打开效果不同,就会很差的用户体验。

为了让不同的浏览器按照相同的标准显示结果,于是就有了Web标准。

Web标准总分为三个构成:

构成语言备注
结构HTML页面原色和内容,骨骼框架的作用
表现CSS网页元素的外观、位置、大小、颜色等页面样式,衣服一样的存在
行为JavaScript定义行为交互

Pasted image 20230413153105.png

6、HTML初体验

HTML中文叫做超文本标记语言(Hyper Text Markup Language),是前端程序员和浏览器交流的语言规范。 任何人交流的语言需要遵守一定的语法规范,这些规范包括文字(单词)、主语、谓语、宾语、标点符号等等,这样才能保证交流顺畅。

程序员和浏览器交流也存在这样的语法规范,这种语言就叫做HTML。我们说的网页,说的就是遵守html语言规范的文件。

新建一个文本,后缀改为.html,这样就能创建一个html文件,浏览器就能识别解析这样后缀的文件。

6.1 、网页结构

网页就类似一篇文章,每一页文章都有固定的结构,比如标题、正文、落款等等,编写网页也是存在固定结构的,这些结构是使用html元素来定义的。

它的最外层由html标签包裹,html里面分为head和body两个分部,head中包含title、meta、script等元素,body中包含h、p、strong等标签元素。

一个最简单的网页结构如下:

Pasted image 20230413155102.png

6.2 、常见的开发工具

直接用记事本编写代码效率太低且容易出错,推荐使用前端开发工具提高编写速度、提升开发效率

常见的前端开发工具有:VSCode 、WebStorm、Sublime、DreamWeaver、HBuilder

首推VSCode

Pasted image 20230413163505.png

6.3 、VSCode的使用

创建文件/文件夹

新建一个文件夹作为代码的存储位置,也可以将已有文件夹直接拖入到软件中打开。

红色线框是新建文件,绿色线框是新建文件夹

Pasted image 20230413163816.png

新建文件, 文件名 + “.html”的后缀,即可创建html文件

Pasted image 20230413164053.png

常用快捷键

! + Tab(或回车键):快速生成html结构

Pasted image 20230413164244.png

标签首字母 + Tab:生成标签结构

	<body>
	    <h1>Hello HTML</h1>
	</body>

F5:调试,在浏览器中打开HTML文件

Pasted image 20230413165336.png

7、HTML注释和标签

7.1 、注释的作用

注释是为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码。

浏览器在执行代码时会忽略所有的注释。

VSCode注释快捷键:ctrl + /, 再按一次取消注释

<!-- 这是注释 -->
<h1>Hello HTML</h1>

7.2、标签的分类

定义html结构的元素,叫做html标签,标签分为双标签单标签

双标签有开始、有结束、有包裹内容:<双标签开始>包括内容</双标签结束>

单标签只有一部分组成:<单标签>

举个例子:

<!-- 这是双标签 -->
<h1>Hello HTML</h1>
<!-- 这是单标签 -->
<br>

除此之外,标签也可以根据是否独占一行的特性,分为行标签(inline)块标签(block)

行标签又叫内联标签,它的特征是标签在浏览器窗口中并排,不支持宽高的设置。

与之相反,块标签在浏览器窗口中独占一行,并且支持宽高的设置。

这两种分类方式,一种是根据书写方式分类,另外一种是根据标签的特征分类。二者不存在绝对的对应关系。

7.3、标签的关系

标签与标签之间存在两种关系:父子关系和兄弟关系

父子关系的标签,它们相互嵌套,里面的标签是外面标签的子元素

	<!-- 父子关系 -->
    <h1>
        <h2>
            <h3></h3>
        </h2>
    </h1>

兄弟关系的标签,它们相互并列,标签之间不存在嵌套,它们是平级关系

    <!-- 兄弟关系 -->
    <h1></h1>
    <h1></h1>
    <h2></h2>

Pasted image 20230413171734.png

标签之间的关系,有几个注意的点:

  1. html是所有标签的父标签;
  2. 有些标签是不能嵌套的,比如head 和 body
  3. 单标签不能嵌套任何标签

8、排版标签

8.1、标题标签

h系列标签是html的标题标签,标题标签的主要作用是用来突出显示文章的主题,爬虫在抓取网页时,会根据标题标签来判断网页内容的重要性程度,也叫权重。h1的权重最高,h2其次,以此类推

<h1>第一重要</h1>
<h2>第二重要</h2>
<h3>第三重要</h3>
<h4>第四重要</h4>
<h5>第五重要</h5>
<h6>第六重要</h6>

Pasted image 20230413173936.png

从上面可以到,标题标签有以下几个特征:

  1. 文字加粗
  2. 从h1 -> h6,文字依次变小
  3. 属于块标签,独占一行

8.2、段落标签

段落标签p用于文章的内容显示,它的书写方式如下:


<p>何当共剪西窗烛</p>
<p>却话巴山夜雨时</p>

Pasted image 20230413175549.png

p标签属于块标签,标签与标签之间存在间隙。

8.3、换行标签和水平线标签

换行标签br的主要作用是让文字强制换行显示,,它是单标签

<p>何当共剪西窗烛</p>
<p>却话巴山 <br> 夜雨时</p>

Pasted image 20230413180014.png

水平线标签hr是用来分割不同主题内容,它在浏览器窗口显示为一条浅灰色的水平线,它属于单标签、块标签。

<h6>第六重要</h6>
<hr>
 <p>何当共剪西窗烛</p>

Pasted image 20230413180333.png

9、文本格式化标签

文本格式化标签,它主要是用于给文字加粗、下划线、倾斜删除线等效果。

在html中有四组文本格式化标签,它们分别是:

标签备注
b、strong加粗
u、ins下划线
i、em倾斜
s、del删除线

后一组标签(strong、ins、em、del)和前一组标签(b、u、i、s)相比,它们具有突出重要性、强调语境的作用,实际使用过程中,二者不会做太多区别,经常可以混用。

<b>加粗</b><strong>加粗</strong>
<u>下划线</u><ins>下划线</ins>
<i>倾斜</i><em>倾斜</em>
<s>删除线</s><del>删除线</del>

Pasted image 20230413181840.png

文本格式化标签属于双标签、行标签

有些非前端开发者可能记不住这么多html标签,他们可能一两个标签用到底,比如p标签加大加粗字体当标题来用,div标签当段落标签使用......

实际开发过程中,虽然标签的使用并没有严格的规定,但是开发者最好遵循标签的语义化规则,正确使用合适的标签。

比如,写标题就使用h系列标签;写段落就用p标签;需要强调重点内容就是用strong等文本格式化标签。这样做的好处在于:对人来说好理解、也方便记忆;对机器来说也有利于机器解析,对搜索引擎优化(SEO)有很大的帮助。

10、媒体标签

10.1、图标标签img

图片标签是用来在网页中加入图片,它的基础写法是:

<img src="" alt="">

img标签属于单标签、行标签,它的常见属性有:

标签备注
src图片路径
alt图片加载失败时显示的文本
title鼠标悬停时显示的文本
width设置图片宽度
height设置图片高度

属性与属性之间没有前后顺序之分,但必须用空格隔开

src 属性用来添加图片的路径,这里的路径分为绝对路径和相对路径,接下来详细讲解二者的区别。

比如,像下图一样定义了图片的src 和 alt属性,就可以在浏览器中加载处tu.png这张图片

Pasted image 20230413190944.png

先看一下src的属性值,它表示的是:查找当前目录下的imgs文件夹下的tu.png这张图片。

如果图片加载失败,就会显示alt的属性值“桌面截图”。

Pasted image 20230413224457.png

需要注意的是:width、height属性如果只设置其中的一个,另外一个属性会根据图片原来的宽高比等比缩放;如果两个属性都设置了,但宽高比和原始比例不一致,就回到导致图片变形。

  <img src="./imgs/tu.png" alt="桌面截图" title="我是提示文本" width="200" height="200">

src属性涉及到一个绝对路径和相对路径的概念,接下来重点解释。

10.2、绝对路径和相对路径

绝对路径

绝对路径就是文件的真正存在的路径,是指从硬盘的根目录(盘符)开始,进行一级一级目录指向文件。

举个例子:tu.png这张图片,它所在的硬盘盘符是M盘,它的绝对路径就是M:/TenYearsFront/FrontCode/imgs/tu.png

Pasted image 20230413185510.png 我们在代码中直接写绝对路径,img标签也可以找到这张图片。

Pasted image 20230413185942.png

另外,我们经常上网看到的图片网络地址,通常是“域名 + 目录 + 图片名”的格式,这也是一种绝对路径,只不过它是将硬盘符和一个域名绑定了。

Pasted image 20230413225843.png

相对路径

知道了绝对路径,再来说说相对路径!

顾名思义,相对路径是指以当前文件所在目录作为参考路径,去寻找目标资源的路径表示方法。

相对路径需要记住三种路径查找表示:

  • ../ 表示当前文件所在目录的上一级目录
  • ./ 表示当前文件所在目录,通常也可以省略不写
  • / 表示当前站点的根目录(域名映射的硬盘目录)

一开始就是使用的相对路径来查找图片的路径,这也是在开发中最常用的方法。

绝对路径如果省略盘符,就变成了相对路径的表示方法,这样也可以查找到图片。

Pasted image 20230413190853.png

10.3、音频标签audio

 <audio src="./resources/music.mp3" controls></audio>

Pasted image 20230413231446.png

audio 标签的常见属性有以下几种:

标签备注
src音频路径
controls显示播放控件
autoplay自动播放(部分浏览器不支持)
loop循环播放

目前,audio标签支持三种格式的音频文件:MP3、Wav、Ogg

10.4、视频标签 video


<video src="./resources/video.mp4" controls muted autoplay loop></video>

video常见的属性有:

标签备注
src视频路径
controls显示播放控件
autoplay自动播放(Chrome需要配合muted实现静音播放)
loop循环播放

video标签支持的格式有:MP4、WebM、Ogg

11、超链接标签


<a href="" target=""></a>

a标签又叫做超链接,它的主要功能是完成页面的跳转。

href属性填写跳转地址,这个地址既可以是网络地址,也可以是本地路径地址,当然也可以是#空链接

target属性表示目标网页打开的方式,它有四个值:

target取值描述
_self在当前窗口跳转,default
_blank_在新窗口跳转
_parent在父窗口中打开页面,不常用
_top在窗口主体中打开页面,不常用

12、列表标签

在网页中按照行展示关联性的内容,比如说新闻列表、热榜、排行榜等等

列表分为有序列表、无序列表和自定义列表

12.1、无序列表

网页中表示一组无顺序之分的列表,列表的每一项默认显示圆点标识

<ul>
	<li>内容1</li>
	<li>内容2</li>
	<li>...</li>
</ul>

Pasted image 20230414153841.png

注意:

  1. ul标签只能包含li标签
  2. li标签可以包含任何内容

12.2、 有序列表

网页中表示一组有顺序之分的列表,列表的每一项默认显示序号标识符


<ol>
	<li>100</li>
	<li>90</li>
	<li>80</li>
</ol>

![[Pasted image 20230414154100.png]]

Pasted image 20230414154100.png 注意:

  1. ol标签只能包含li标签
  2. li标签可以包含任何内容

12.3 、自定义列表

通常在网页底部导航栏中会使用自定义列表实现

  • dl标签表示自定义列表的整体,只能包裹dt、dd标签
  • dt标签表示自定义列表的主题
  • dd标签表示自定义列表的每一项内容,默认显示缩进效果
<dl>
       <dt>标题1</dt>
       <dd>内容1-1</dd>
       <dd>内容1-2</dd>
</dl>

![[Pasted image 20230414154431.png]]

Pasted image 20230414154431.png

13、表格标签

13.1、基本标签

表格在网页中会以“行+列”的方式整齐展示数据,它主要由三个标签组成:table、 tr、td,它们之间的嵌套关系是:table > tr > td。

表格标签说明
table它是表格的最外层标签,包裹多个tr
tr行标签,包裹多个td
td单元格标签,包裹内容
 <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>城市</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>芜湖</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>54</td>
            <td>纽约</td>
        </tr>
    </table>

Pasted image 20230414155917.png

13.2、表格属性

常见的表格属性如下:

表格标签说明
border设置表格边框宽度,默认为0
width设置表格宽度
height设置表格高度

比如:

 <table border="2" width="500" height="800"> </table>

表格属性在实际项目开发中并不常用,通常会使用css来控制表格的外观样式

13.3、标题和表头

表格通常包含标题和表头,虽然并非一定要使用。

标题/表头说明
caption放在table内,表示表格标题,默认居中显示
th放在第一个tr标签内,表示表头,默认加粗居中显示

表格标题caption用于table内部,表头th通常位于第一个tr标签内。

它们会以居中、加粗的形式显示。

<table border="1" width="500" height="300">
        <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>芜湖</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>54</td>
            <td>纽约</td>
        </tr>
    </table>

Pasted image 20230414161146.png

13.4、结构标签

表格的结构标签主要是为了将表格内部的内容分组,使语义更加明晰。它分为thead、tbody、tfoot,通常用于包裹tr标签。

和标题表头标签一样,它也可以省略不用(这是常态)

结构标签说明
thead表格头部
tbody表格主体
tfoot表格底部
    <table border="1" width="500" height="300">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>小红</td>
                <td>25</td>
                <td>芜湖</td>
            </tr>
            <tr>
                <td>小李</td>
                <td>54</td>
                <td>纽约</td>
            </tr>
       </tbody>
       <tfoot>
            <tr>
                <td>姓名总结</td>
                <td>年龄总结</td>
                <td>城市总结</td>
            </tr>
       </tfoot>
    </table>

Pasted image 20230414162631.png

13.5、合并单元格

合并单元格要遵循以下步骤:

  1. 明确合并哪几个单元格;
  2. 左上原则:==上下合并保留最上,删除其他;左右合并保留最左,删除其他==;
  3. 给保留的单元格设置rowspan 或 colspan 属性
属性说明
rowspan跨行合并单元格
colspan跨列合并单元格

注意:只有在统一结构标签内的单元格才能合并!

<table border="1" width="500" height="300">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>小红</td>
                <td rowspan="2">25</td>
                <td>芜湖</td>
            </tr>
            <tr>
                <td>小李</td>
                <td>纽约</td>
            </tr>
       </tbody>
       <tfoot>
            <tr>
                <td colspan="3">姓名总结</td>
            </tr>
       </tfoot>
    </table>

Pasted image 20230414172053.png

14、表单标签

使用场景:提交、登录、注册

14.1、input系列标签

在网页中只要涉及用户输入信息的功能,就一定会使用到input系列标签,它的作用就是采集用户信息。

type

input通过设置不同type属性值,可以展示不同的效果,下面就是一些常用的type属性值:

标签名type属性值说明
inputtext单行文本框
inputpassword密码框
inputradio单选按钮
inputcheckbox多选按钮
inputfile文件选择
inputsubmit提交表单按钮
inputreset重置按钮
inputbutton普通按钮,需配合js添加功能
<form action="post">
        昵称:<input type="text"><br>
        密码:<input type="password"><br>
        性别: <input type="radio" name ="sex" value="男"><input type="radio" name="sex" value="女"><br>
        爱好:<input type="checkbox" name="like" > JavaScript  <input type="checkbox" name="like" > Java  <input type="checkbox" name="like" > html <br>    
        文件: <input type="file" name="file"> <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">
</form>

Pasted image 20230414174721.png placeholer

input标签还有一个==常用属性placeholder==,它表示占位符,通常用来提示用户输入信息,输入框获取

焦点时,placeholder的提示文本会自动清除。比如:

  昵称:<input type="text" placeholder="请输入用户名"><br>

Pasted image 20230414175315.png

单选和多选

当input标签的type值为radio或者checkbox值时,还需要再配合一个name属性值来使用.

它主要是用来分组。

以type = “radio”为例,只有name相同时,才能实现二选一的功能,通常还需要再配合checked属性使用,checked表示默认选择的意思。

radio/checkbox 属性说明
name分组,只有同一组的才能实现单选或多选
checked表示默认选择
  性别: 
  <input type="radio" name ="sex" value="男" checked> 男 
  <input type="radio" name="sex" value="女"><br>

Pasted image 20230414180252.png

多个文件上传

input文件上传功能,默认只能选择一个文件上传,如果要是线多文件上传,需要添加一个multiple属性。选择文件时,按住ctrl或者shift键,就能选择多个文件上传了。

file 属性说明
multiple多文件上传

文件: <input type="file" name="file" multiple> <br>

按钮

form表单常见的按钮有一下三种:

type 属性(input)说明
submit提交按钮,需要嵌套在form表单中才会有效
reset重置,清空表单所有输入内容,同样也需要配合form表单才会生效
button需要配合js才能生效
<form action="post">
       <input type="submit" value="提交">
       <input type="reset" value="重置">
       <input type="button" value="普通按钮">
       <button>普通按钮</button>
</form>

另外,button也可以作为双标签存在,配合type属性,它的作用等同于input按钮

标签名type属性值
buttonsubmit
buttonreset
buttonbutton
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

button按钮在chrome按钮中,默认是提交按钮;另外,由于是双标签,它很方便包裹其他如文字、图片等内容。

14.2、下拉菜单

在网页中提供多个选择项的下拉菜单表单控件。

标签说明
select下拉菜单的整体
option下拉项内容,默认选择添加selected属性

它们的嵌套关系是:select > option

<select name="city" id="city">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="guangzhou">广州</option>
</select>

Pasted image 20230414224644.png

14.3、文本域

输入多行文本时就需要使用文本域标签textarea,它的常见属性有:

属性说明
cols宽度
rows行数

上述属性在开发中并不经常使用,开发人员一般通过CSS样式来控制文本域的样式

文本域可以通过拖拽右下角改变大小。

<textarea cols="30" rows="10"></textarea>

Pasted image 20230414225705.png

14.4、label标签

label标签常用于将内容与表单标签绑定,这样点击label标签也能触发表单控件的响应。它有两种绑定方法:

第一种是,label和表单控件平级,label的for属性等于表单控件的id。

<form>
    性别:
    <input type="radio" name ="sex" id="man" value="男" checked> 
    <label for="man"></label>
    <label><input type="radio" name="sex" id="woman" value="女"> 
    <label for="woman"></label>
</form>

第二种是:label标签嵌套表单控件。这种方法比第一种要简单很多。

<form>
    性别:
    <label><input type="radio" name ="sex" value="男" checked></label>
    <label><input type="radio" name="sex" value="女"></label>
</form>

#timeline A second event!

15、布局标签

无语义标签:div、span

之前在文本格式化标签说道,html基本每个标签都是有语义的。这样对人来说好理解、也方便记忆;对机器来说也有利于机器解析,对搜索引擎优化(SEO)有很大的帮助。

但是也存在无语义化标签,它们就是div、span。

这两个标签最大作用就是用来写网页布局用的,div是块标签,独占一行,而span标签是行标签,可以并排显示,它们不带任何特殊的效果。

早期的网页,写布局是使用Table表格,之后才发展到用div + css的方式来写网页布局,你也可以理解为:div、span标签的语义就是编写网页布局。

有语义标签:header、nav、footer、aside、section、article

在HTML5新版本中,推出了一些有语义的布局标签供开发者使用,他们主要在==手机网页==中使用。主要如下:

布局标签语义
header网页头部
nav导航栏
footer网页底部
aside网页侧边栏
section网页区块
article网页文章
<header>网页头部</header>
<nav> 导航栏</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>

Pasted image 20230414232938.png

16、字符实体

在网页中展示特殊字符效果(比如空格、货币符号、数学公式等),这时就需要使用到字符实体。

&nbsp;&nbsp;

下面是一些常见字实体:

Pasted image 20230414233738.png