唐抉的个人博客

前端三件套之HTML（一）

前端 HTML
字数统计: 5.8k阅读时长: 23 min
2022/10/26

HTML简介

  • HTML是指超文本标记语言，是用来描述网页的一种语言。可以使用HTML来建立Web站点，HTML运行在浏览器上，有浏览器来解析。

  • HTML不是一种编程语言，而是一种标记语言，它有一套标记标签。

  • HTML使用标记标签来描述网页。

  • HTML文档包含了HTML标签及文本内容，HTML文档也叫做web页面。

  • HTML文档的后缀名包含.html（常用）、.htm。

HTML网页结构

一个可视化HTML页面结构实例如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是页面标题</title>    
</head>    
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

上述语句的含义如下：

  • <!DOCTYPE html>声明为HTML5文档，doctype声明是不区分大小写的。

  • <html>与</html>之间的文本用来描述网页。

  • <head>与</head>之间的文本用来描述文档的元数据(meta)。可以包含脚本、样式、meta信息以及其他更多的信息。

  • <meta>标签提供了HTML文档的元数据。元数据会被浏览器解析，但不会显示在客户端。对于中文网页需要使用<meta charset="utf-8">定义网页编码格式为utf-8，否则会出现乱码。

  • <title>与</title>之间的 文本描述文档的标题。(<head>中必须包含<title>)

  • <body>与</body>之间的文本是可见的页面内容。

  • <h1>与</h1>之间的文本被显示为一个大标题。

  • <p>与</p>之间的文本被显示为一个段落。

代码运行结果如下：

HTML标签

HTML标记标签通常被称为HTML标签。

  • HTML标签是由尖括号包围的关键词，如<html>。
  • HTML标签通常是成对出现的，如<b>和</b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。
  • 标签的具体格式为：<标签>内容</标签>。

web浏览器

web浏览器用于读取HTML文件，并将其作为网页显示。

web不会直接显示HTML标签，而是通过使用标签来决定如何向用户展现HTML页面的内容。

<!DOCTYPE>声明

<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。由于网络上文件的类型不一，因此需要正确的声明HTML版本，以便浏览器能够正确识别并显示网页内容。doctype声明不区分大小写。在html页面的头部声明字符为UTF-8可以解决浏览器中出现中文乱码的现象。

HTML基础

HTML标题

HTML标题是通过<h1>-<h6>标签来定义的。

h是英文header标题的缩写，有六个标题元素标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容：如<h1>代表主标题，<h2>代表二级子标题，<h3>代表三级子标题、<h4>、<h5>、<h6>的字体大小依次递减。

注意：

  • 应该只对每个页面使用一次<h1>主标题。所有其他标题位于层次结构中的下方。
  • 确保在层次结构中以正确的顺序使用标题。如不要使用<h3>来表示副标题后，使用<h2>来表示副副标题。
  • 在可用的六个标题级别中，保证每个页面中标题级别的使用不超过三个。具有许多标题类别的文档会变得难以操作并难以导航，在这种情况下，若可能的话把内容分散在多个页面上。
  • 浏览器会自动地在标题的前后添加空行。默认情况下，HTML会自动在块级元素前后添加一个额外的空行，如段落、标题元素前后。
  • 不要为了生成粗体或大号的文本而使用标题。

HTML中的空格

无论在HTML中使用多少空格（包括空格字符、换行等），当渲染代码时，HTML解释器会将连续出现的空格字符减少为一个单独的空格符。

在HTML中，每个嵌套的元素是以两个空格缩进的。

HTML图像

HTML图像是通过标签<img>来定义的。<img>标签有两个必需的属性：src和alt。。img元素是自关闭元素，不需要结束标记。

图像标签（<img>）和源属性（src）

<img>是空标签，它只包含属性，没有闭合标签。

使用img元素来在网站中添加图片，使用src属性来指向一个图片的具体地址，图像的名称和尺寸以属性的形式提供。定义图像的语法是

1
<img src="存储图片的位置" alt="some_text">

浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt属性

alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者所失去的信息。此时浏览器将显示替代性的文本而不是图像。

设置图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素：

1
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

设置图像边框

在<img>标签中使用border属性以像素为单位指定边框粗细。厚度为0时表示图片周围没有边框：

1
<img src="pulpit.jpg" alt="Pulpit rock" border="3">

设置图像对齐

默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中可以使用align属性设置图像的对齐方式：center（居中）或right（右侧）。

1
<img src="pulpit.jpg" alt="Pulpit rock" align="right">

HTML强调

HTML中强调一句话的某些词可以使用em元素来标记，浏览器默认风格为斜体：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <p>我<em>很高兴</em></p>  
</body>
</html>

除此之外，开可以使用<strong>元素来标记，浏览器默认风格为粗体：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <p>我<strong>很高兴</strong></p>
</body>
</html>

HTML注释

将注释插入HTML代码中，可以提高代码可读性。浏览器会忽略注释，也不会显示它们。其格式为：

1
<!--注释内容-->

条件注释

条件注释定义是由Internet Explorer浏览器执行的HTML标签。

1
2
3
<!--[if IE 8]>
  ....some HTML here....
<![endif]-->

HTML段落

HTML段落是通过标签<p>来定义的，经常被用来创建一个段落。

HTML换行

若希望在不产生新起点的情况下进行换行（新行），可以使用<br />标签。

在HTML中，<br />标签定义为一个换行符。可以简单的输入一个空行，而不是用来对内容进行拆分：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <p>这个<br>段落<br />演示了换行的效果</p> 
</body>
</html>

在HTML中，由于屏幕的大小、对窗口的调整都可能导致不同的结果，因此无法确定HTML被显示的效果。当显示页面时，浏览器会移动源代码中多余的空间和空行。所有连续的空间或空行都会被算作一个空格。

HTML水平线

<hr>标签在HTML页面中创建水平线。

hr元素用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
    <p>hr标签定义水平线：</p>
	<hr />
	<p>这是段落</p>
</body>
</html>

如何查看源代码

在浏览器中可以通过单击右键，然后选择"查看源文件"或"查看页面源代码"来打开一个包含页面HTML代码的窗口来查看源代码。

HTML元素

HTML标签和HTML元素通常都是描述相同的意思。但严格来讲，一个HTML元素包含了开始标签和结束标签。

HTML元素语法

  • HTMl元素以开始标签起始，以结束标签终止。
  • 元素的内容是开始标签与结束标签之间的内容。
  • 某些HTML元素具有空内容。
  • 空元素在开始标签中进行关闭，以开始标签的结束而结束。
  • 大多数HTML元素可拥有属性。

嵌套的HTML元素

HTML文档由嵌套的HTML元素构成，即一个HTML元素里可以包含其他HTML元素。例如下面的代码中包含了三个HTML元素：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <p>这是第一个段落。</p>    
</body>
</html>

HTML空元素

HTML空元素即为没有内容的HTML元素。

HTML空元素应该在开始标签中关闭。

HTML的一个空元素为<br>（用于定义换行），<br>元素是没有关闭标签的空元素。

HTML空元素的关闭方法是在剋是标签中添加斜杠，例如<br/>，HTML、XHTML和XML都接受这种方式。

在XHTML和XML以及未来版本的HTML中，所有元素都必须被关闭，即使是空元素。

使用小写标签

HTML标签对英文字母的大小写不敏感：<P>等同于<p>。

随着HTML4甚至是HTML5的普及，后续的网站都遵循HTML4的语法--使用小写。

HTML头部

HTML头部元素包含关于文档的概要信息，也被称为元信息。

<head>标签与<header>标签的不同

  • head标签用于定义文档头部，是所有头部元素的容器。<head>描述了文档的各种属性和信息

  • header标签定义文档的页眉（介绍信息）。

<head>元素

<head>元素包含了所有的头部标签元素。在<head>元素中可以插入脚本（scripts）、样式文件（CSS）以及各种meta信息。其描述了文档的各种属性和信息，其中包括文档的标题、在Web中的位置以及和其他文档的关系等。

可以添加在头部区域的元素标签为：<title>、<style>、<meta>、<link>、<script>、<noscript>和<base>。

<title>元素

<title>标签定义了不同文档的标题，其在HTML/XHTML中是必须的。

<title>元素

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<title>元素还可以在左侧显示logo等图片，显示时要将<link>标签放入<head>里：

1
2
3
4
5
6
7
<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
    <title>这是一个带图片的标签</title>    
    </head>    
</html>

<base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接规定默认地址或默认目标(target)：

1
2
3
4
5
6
<!doctype HTML>
<html>
<head>
    <base href="链接地址" target="_blank">    
</head>    
</html>

在HTML中，<base>标签没有结束标签，但在XHTML中，<base>标签必须被正确地关闭。

<link>元素

<link>标签定义了文档与外部资源之间的关系，通常用于链接到样式表：

1
2
3
4
5
6
<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="tips.css">   
</head>    
</html>

<style>元素

<style>标签定义了HTML文档的样式文件引用地址。在<style>元素中需要指定特定样式文件来渲染HTML文档：

1
2
3
4
5
6
7
8
9
10
<head>
<style type="text/css">
body{
    background-color:yellow;        
}
p{
    color:blue;        
}    
</style>    
</head>

<meta>元素

<meta>元素又称为元数据，其是关于数据的信息。<meta>标签始终位于head元素中。

<meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上，但对于机器是可读的。meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词）或其他Web服务。

针对搜索引擎的关键词

一些搜索引擎会用meta元素中用来描述页面内容的name和content属性来索引页面：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<!--meta元素定义页面的描述-->
<meta name="description" content="Free web tutorials on HTML,CSS,XML" />
<!--meta元素定义页面的关键词-->
<meta name="keywords" content="HTML,CSS,XML" />  
</head>    
</html>

<script>元素

<script>标签用于加载脚本文件

HTML属性

属性是为HTML元素提供的附加信息。

  • HTML元素可以设置属性
  • 属性可以在元素中添加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，如name="value"。

属性实例

HTML链接由<a>标签定义。链接的地址在href属性中指定：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <a href="链接的地址">这是一个链接使用了href属性</a> 
</body>
</html>

HTML属性常用引用属性值

属性值应该始终被包含在引号内，最常用的是双引号。在某些个别情况下，比方说属性值本身就含有双引号时，必须使用单引号。例如：name='John"ShotGun"Nelson'。

使用小写属性

属性和属性值对大小写不敏感。

但万维网联盟在其HTML4中推荐标准小写的属性/属性值。新版本的(X)HTML也要求使用小写属性。

HTML属性参考手册

下面列出了适用于大多数 HTML 元素的属性：

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

id属性

id属性可用于为HTML元素指定唯一的id，一个HTML文档中不能存在多个有相同id的元素。

使用id属性

id属性的值在HTML文档中必须是唯一的。其用于指向样式表中的特定样式声明，JavaS也可使用它来访问和操作拥有特定ID的元素。

id的语法是一个井号后面跟一个id名称，然后在花括号{}中定义CSS属性。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>
#tips{
    background-color:lightblue;
    color:black;
    padding: 40px;
    text-align: center;
}
</style>
</head>
<body>
<!--在HTML文档中插入ID-->
    <a id="tips">Useful Tips Section</a>    
</body>
</html>

注意：

  • id名称对大小写敏感
  • id必须包含至少一个字符，且不能包含空白字符（空格、制表符等）

Class与ID的差异

同一个类名可以由多个HTML元素使用，而一个id名称只能由页面中的一个HTML元素使用。

通过ID和链接实现HTML书签

HTML书签用于让读者跳转到网页的特定部分：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
    <!--创建一个来链接跳转到(id="tips")的部分-->
    <a href="#tips">Visit the Useful Tips Section</a>
    <br />
    <!--从另一个页面创建一个链接到(id="tips")的部分-->
    <a href="链接地址#tips">Visit the Useful Tips Section</a>
</body>
</html>

在JavaScript中使用id属性

JavaScript也可以使用id属性为特定元素执行某些任务，可以使用getElementById()方法访问拥有特定id的元素：

1
2
3
4
5
<script>
function displayResult(){
    document.getElementById("tips").innerHTML="Have a nice day!";
}    
</script>

HTML链接

HTML链接是通过标签<a>来定义的。其具体格式如下：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <a href="链接的地址">这是一个链接</a>
</body>
</html>

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或当前文档中的某个部分。

默认情况下，链接在浏览器中表现为以下形式：

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接时，链接显示为红色并带上下划线

若为这些超链接设置了CSS样式，展示样式会根据CSS的设定来显示。

HTML空链接

空链接即指当鼠标指向链接后，会变成手性，但单机后仍停留在当前页面。

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <a href="#">这是一个空链接</a>
</body>
</html>

target属性

使用Target属性，可以定义被链接的文档在何处显示（在新窗口打开，还是在原有的窗口中打开）。

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
    <a href="链接地址" target="">这是一个链接</a>
    <!--默认在原窗口打开，若将target属性设置为"_blank"，链接将在新窗口打开-->
</body>
</html>

注意：始终将正斜杠添加到子文件夹，如href="//www.baidu.com/html/"。若写成href="//www.baidu.com/html"，就会向服务器产生两次HTTP请求。

HTML文本格式化

HTML格式化标签

HTML使用标签<b>与<i>对输出的文本进行粗体或斜体的格式化，这些标签被称为格式化标签。

通常<strong>替换加粗标签<b>来使用，<em>替换<i>标签使用。

HTML 文本格式化标签

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

HTML "计算机输出" 标签

标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

HTML 引文, 引用, 及标签定义

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

HTML CSS

CSS定义如何显示HTML元素，用于渲染HTML元素标签的样式，用于控制Web页面的外观。样式存储在样式表中，通常放在<head>部分或存储在外部CSS文件中。目前的网页大都由前端三件套HTML+CSS+Javascript组成。其中，HTML是网页的结构，CSS是网页的样式，Javascript控制网页的行为。

CSS添加到HTML的方式

  • 内联样式：在HTML元素中使用“style”属性
  • 内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS
  • 外部引用：使用外部CSS文件

内联样式

当特殊的样式需要应用到个别元素时，可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <p style="color:blue;margin-left:20px;">Tips</p>    
</body>
</html>

CSS样式标签

标签 描述
background 定义元素的背景颜色
font-family 定义字体的样式
color 定义元素的颜色
font-size 定义字体的大小
text-align 指定文本的水平与垂直对齐方式

内部样式表

当单个文件需要特别样式时，可以使用内部样式表。在HTML文档头部<head>区域使用<style>元素来定义内部样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-color: yellow;
}
p{
    color: blue;
}
</style>
</head>
<body>
    <p>Tips</p>    
</body>
</html>

外部样式表

当样式需要被应用到很多页面时，可以使用外部样式表。通过只更改一个文件来改变整个站点的外观：

1
2
3
4
5
6
7
8
9
10
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tip.css">
<!--导入外部样式表的另一种方式-->    
<style>
    @import url("样式表路径")
</style>
    </head>    
</html>

link和@import之间的区别

  • link属于XHTML标签，而@import是CSS提供的一种方式
  • 当一个页面被加载时，link引用的CSS会同时被加载。而@import引用的CSS会等到页面全部下载完才被加载
  • @import是CSS2.1提出的，与老版本的浏览器不兼容，只能在IE5以上的浏览器被识别，link在任何地方都兼容
  • 当使用Javascript控制dom去改变样式时，只能使用link标签

已弃用的标签和属性

在HTML4中，原来支持定义HTML元素样式的标签和属性已被弃用。

不建议使用的标签有：<font>、<center>、<strike>。

不建议使用的属性有：color和bgcolor。

原文作者：唐抉

原文链接：http://tangmenjue.top/2022/10/26/%E5%89%8D%E7%AB%AF%E4%B8%89%E4%BB%B6%E5%A5%97%E4%B9%8BHTML%EF%BC%88%E4%B8%80%EF%BC%89/

发表日期：October 26th 2022, 5:07:08 pm

更新日期：October 26th 2022, 5:07:08 pm

版权声明： © 2020-2023 本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. HTML简介
    1. 1.1. HTML网页结构
    2. 1.2. HTML标签
    3. 1.3. web浏览器
      1. 1.3.1. <!DOCTYPE>声明
  2. 2. HTML基础
    1. 2.1. HTML标题
    2. 2.2. HTML中的空格
    3. 2.3. HTML图像
      1. 2.3.1. 图像标签（<img>）和源属性（src）
      2. 2.3.2. alt属性
      3. 2.3.3. 设置图像的高度与宽度
      4. 2.3.4. 设置图像边框
      5. 2.3.5. 设置图像对齐
    4. 2.4. HTML强调
    5. 2.5. HTML注释
      1. 2.5.1. 条件注释
    6. 2.6. HTML段落
      1. 2.6.1. HTML换行
    7. 2.7. HTML水平线
    8. 2.8. 如何查看源代码
  3. 3. HTML元素
    1. 3.1. HTML元素语法
    2. 3.2. 嵌套的HTML元素
    3. 3.3. HTML空元素
    4. 3.4. 使用小写标签
  4. 4. HTML头部
    1. 4.1. <head>标签与<header>标签的不同
    2. 4.2. <head>元素
    3. 4.3. <title>元素
    4. 4.4. <base>元素
    5. 4.5. <link>元素
    6. 4.6. <style>元素
    7. 4.7. <meta>元素
    8. 4.8. 针对搜索引擎的关键词
    9. 4.9. <script>元素
  5. 5. HTML属性
    1. 5.1. 属性实例
    2. 5.2. HTML属性常用引用属性值
    3. 5.3. 使用小写属性
    4. 5.4. HTML属性参考手册
  6. 6. id属性
    1. 6.1. 使用id属性
    2. 6.2. Class与ID的差异
    3. 6.3. 通过ID和链接实现HTML书签
    4. 6.4. 在JavaScript中使用id属性
  7. 7. HTML链接
    1. 7.1. HTML空链接
    2. 7.2. target属性
  8. 8. HTML文本格式化
    1. 8.1. HTML格式化标签
    2. 8.2. HTML 文本格式化标签
    3. 8.3. HTML "计算机输出" 标签
    4. 8.4. HTML 引文, 引用, 及标签定义
  9. 9. HTML CSS
    1. 9.1. CSS添加到HTML的方式
    2. 9.2. 内联样式
    3. 9.3. CSS样式标签
    4. 9.4. 内部样式表
    5. 9.5. 外部样式表
    6. 9.6. link和@import之间的区别
    7. 9.7. 已弃用的标签和属性
Total : 62
2023
2022
2020
CSS3 CentOS 7 Linux 网络管理 Docker 应用部署 数据库工具 Flask Web 后端 Web框架 Kubernetes 可视化 大屏设计 Lottie 数据库 PgSQL Vue Vue.js 前端 YAML Redis 闪退 Elasticsearch JavaScript python 企业微信 应用开发 异步IO CSS HTML 结构性思维 XAMPP 报错 设计模式
CSS3 Linux Docker 数据库工具 Web框架 大屏设计 操作系统 学习笔记 Kubernetes 可视化 数据库 Vue 前端 YAML edge JavaScript Elasticsearch Lottie 企业微信 python 前端框架 Redis 应用开发 异步IO XAMPP