【HTML】HTML基础_html width height-优快云博客

本文链接：https://blog.youkuaiyun.com/xueyinglys/article/details/125155323

本文详细介绍了Web标准，包括HTML、CSS和JS的作用，以及浏览器的工作原理，包括渲染引擎、JS引擎等组成部分。此外，讲解了HTML的结构、标签、属性，如文档声明、头标签内容、字体标签、超链接、图片标签、表格和表单等，并强调了SEO和浏览器兼容性的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web标准： 制作网页要遵循的规范

结构标准（HTML）：超文本标记语言，从语义的角度描述页面的结构，用于对网页元素进行整理和分类
表现标准（CSS）：层叠样式表，用于设置网页元素的版式、颜色、大小等外观样式
行为标准（JS）：定义网页的交互和行为

浏览器的组成：

渲染引擎（浏览器内核）：用来解析HTML与CSS，是浏览器兼容性问题出现的根本原因（谷歌的内核是Blink）
JS引擎（JS）：用于解析网页中的JS代码

浏览器本身不会执行JS代码，而是通过JS引擎来执行JS代码。JS引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机执行，所以JS为脚本语言，会逐行解释执行
浏览器工作原理

1、User Interface 用户界面，我们所看到的浏览器。
2、Browser engine 浏览器引擎，用来查询和操作渲染引擎。
3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS。
4、Networking 网络，负责发送网络请求。
5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码。
6、UI Backend UI后端，用来绘制类似组合框和弹出窗口。
7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage。

HTML

HTML 全称为 HyperText Markup Language，译为超文本标记语言。负责描述文档语义的语言

超文本

图片、音频、视频、动画、多媒体等内容超出了文本的限制，称为超文本
还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即超级链接文本

标记语言 ：HTML不是一种编程语言，是一种描述性的标记语言，是一套标记标签（网页是由网页元素组成的，这些元素是由HTML标签描述出来，然后通过浏览器解析就可以显式给用户看）
编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行的
HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

文档声明头：<!DOCTYPE _>
页面语言lang：<html lang="en">，en定义页面语言为英语，zh-CN：定义页面语言为中文
头标签head

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="Author" content="">
    <meta name="Keywords" content="厉害很厉害" />
    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
    <title>Document</title>
    <base href="/">
</head>
<body>

</body>
</html>

面试题：
问：网页的head标签里面，表示的是页面的配置，有什么配置？
答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
头标签内部的常见标签如下：

<title>：指定整个网页的标题，在浏览器最上方显示。有助于SEO搜索引擎优化
<base>：为页面上的所有链接规定默认地址或默认目标。base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
<meta>：提供有关页面的基本信息
<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
<link>：定义文档与外部资源的关系。

meta标签

字符集charset：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
视口viewport：width=device-width ：表示视口宽度等于屏幕宽度。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

定义关键词，提高搜索命中率，<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
定义页面描述，百度搜索结果能够显示这些语句，这个技术叫做SEO（搜索引擎优化）
3秒后自动跳到百度页面：<meta http-equiv="refresh" content="3;http://www.baidu.com">

<body>标签，该标签的属性有：

bgcolor：设置整个网页的背景颜色。
background：设置整个网页的背景图片。
text：设置网页中的文本颜色。
leftmargin：网页的左边距。IE浏览器默认是8个像素。
topmargin：网页的上边距。
rightmargin：网页的右边距。
bottommargin：网页的下边距。

link属性表示默认显示的颜色、alink属性表示鼠标点击但是还没有松开时的颜色、vlink属性表示点击完成之后显示的颜色。

HTML标签可以分为下面两种：

文本级标签：只能放文字、图片、表单元素（p、a、span、b、i、u、em）
容器级标签：div、h系列、li、dt、dd

排版标签

<h1>
<p>
<hr />
<br/>：换行
<div>
<span>
<center>:内容居中，htm5不建议使用
<pre>：预定义标签，告诉浏览器不要忽略空格和空行

字体标签

<front>、<br>、<u>、<sup>、<sub>
**特殊字符（转义字符）**
&nbsp：空格
&lt：小于
&gt：大于
&amp：符号&
&quot：双引号
&apos：单引号
&copy：版权@
&trade：商标TM
**下划线、中划线、斜体**
<u>：下划线
<s>或<del>：中划线（删除线）
<i>或<em>：斜体标记
粗体标签<b>或<strong>（已废弃）
粗体标签<b>或<strong>（已废弃）

超链接

链接到外部文件：<a href="02页面.html">点击进入另外一个文件</a>
锚链接：给超链接一个名字，在本页面或者其他页面的不同位置进行跳转

<a name="name1">顶部</a>
<pre>

</pre>
<a herf="#name1"></a>

邮件链接：<a href="mailto:xxx@163.com">点击进入我的邮箱</a>

超链接的属性

href：目标URL
title：悬停文本
name：设置锚点的名称
target：告诉浏览器用什么方式来打开目标页面
- _self：在同一个网页中显示（默认值）
- _blank：新开浏览器窗口打开
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

图片标签

能够插入的图片类型：jpg(jpeg)、gif、png、bmp等
不能往网页中插入的图片格式是：psd、ai等
<img src="图片的URL" />
img标签的属性

src属性：图片的引用地址
width、height 属性：在HTML5中，宽高单位是CSS像素，在HTML4中既可以是像素也可以是百分比，如果要想保证图片等比例缩放，请只设置width和height中其中一个
alt：当图片不可用，用alt内容代替图片显示
title：鼠标悬停时出现的提示性文本。（如果一幅图片需要小标题，使用 figure 或 figcaption 元素。）
align：图片和周围文字的相对位置，实现图文混排效果

图文标签

列表标签：<ul>、<ol>、<dl>
- 无序列表ul：type="disc(默认，实心原点) | square(实心方点) | circle(空心圆)"
- 有序列表ol：type="1(默认) | a | A | i | I" start="从几开始"
- 定义列表dl：<dt>(列表标题) <dd>(列表项)
表格标签：<table>
框架标签及内嵌框架：<iframe>
表单标签：<form>
多媒体标签
滚动字幕标签：<marquee>
表格标签table

<table>
	<tr>
		<td></td>
	</tr>
</table>

table的属性

border | width | heigth：像素为单位
style="border-collapse:collapse"：单元格的线和表格的边框线合并
bordercolor：表格的边框颜色
align：表格的水平对齐方式
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir=“rtl”，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor：表格的背景颜色
background：表格的背景图片。 背景图片的优先级大于背景颜色
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

tr 行的属性

dir：设置这一行单元格内容的排列方式
- ltr：从左到右，默认
- rtl：从右到左
- bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
- height：一行的高度
- align=“center”：一行的内容水平居中显示，取值：left、center、right
- valign=“center”：一行的内容垂直居中，取值：top、middle、bottom

td单元格属性

align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。

单元格的合并

colspan：横向合并
rowspan：纵向合并
<th>：加粗的单元格。相当于<td> + <b>,属性同<td>标签
caption标签：表格的标题。使用时和tr标签并列,属性：align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom 效果：

表格的<thead>标签、<tbody>标签、<tfoot>标签
这三个标签有与没有的区别：
1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

input：输入标签

<input type="text" />

type="属性值"
- text(默认)
- password
- radio：单选，name相同的按钮作为一组进行单选
- checkbox：name 属性值相同的按钮作为一组进行多选。
- checked：将单选按钮或多选按钮默认处于选中状态
- hidden：隐藏框
- button
- submit：点击按钮后这个表单会被提交到form标签的action属性中指定的页面
- rest：重置按钮，清空当前表单内容并设置为最初的默认值
- image：和submit功能一样
- file：文件选择框
value=“内容”：文本框中的默认内容
size=“50”：文本框中只能显示50个字符
readonly：文本框只读，不能编辑
disabled：同readonly

select：下拉列表标签
<select>标签属性

multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=“”，也可以写成multiple=“multiple”
size=“3”：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
selected：预选中

textarea：多行文本输入框
属性：
rows=“4”：指定文本区域的行数。
cols=“20”：指定文本区域的列数。
readonly：只读。