H5基础知识

最新推荐文章于 2025-10-10 10:54:16 发布

原创最新推荐文章于 2025-10-10 10:54:16 发布 · 2.1k 阅读

30 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端基础知识

H5基础知识

0. HTML概念

HTML：超文本标记语言（Hyper Text Markup Language)。是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标记标签（markup tag)。

1. 标签语言化

目的：

方便代码的阅读和维护；
同时让浏览器或是爬虫可以很好地解析，从而更好分析其中的内容；
使用语义化标签会具有更好的搜索引擎优化。

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

1.1 HTML标签格式

html标签是由尖括号包围的关键字，如：<html>、<body>、<div>等；
html标签通常是成对出现，如<div> </div>，第一个是开始，第二个有斜线的是结束；
有些标签是单独呈现的，如：<br/>、<hr/>、<img>等；
标签里面带有若干属性，也有不带的。

标签语法：
<标签名属性1=“属性值1” 属性2=“属性值2”…>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…>

2. HTML文档结构

在这里插入图片描述

<!DOCTYPE html>：声明为html5文件，必须是html文档的第一行，在<html>标签之前；
<html></html>：文档开始和结束的标记，是HTML页面的根元素；
<head></head>：定义文档开头部分，包含文档元(meta)数据，配置信息等，是给浏览器看的；
<title></title>：定义了网页标题，在浏览器标题栏显示；
<body></body>：之间的内容是可见的网页主体内容。

2.1 head内常用标签

名字	描述
<title> 内容 </title>	定义网页标题
<style> 内容 </style>	定义内部样式
<script> 内容 </script>	定义JS代码或引入外部JS文件
<link/>（单标签）	引入外部样式表文件
<meta/>（单标签）	提供有关页面的元信息

meta标签：
<meta>标签永远位于head元素内部；元数据总是以名称/值的形式被成对传递的。
meta标签组成：

http-equiv属性：相当于http的文件头作用，向浏览器传回一些有用的信息，正确显示网页内容，与之对应的属性值content，content中的内容是各个参数的变量值；
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。

2.2 body常用标签

名字	描述
<b> 内容 </b> <strong> 内容 </strong>	加粗（XHTML推荐使用strong）
<i> 内容 </i>` <em>内容<em>	斜体（XHTML推荐使用em）
<u> 内容 </u>	下划线
<s> 内容 </s> `<del>内容</del>	删除（XHTML推荐使用del）
<p> 内容 </p>	段落标签
<h1> 内容 </h1>	作为标题使用，h1, h2…h5依据重要性递减
<div> 内容 < /div>	定义一个块级元素
<span> 内容 < /span>	定义内联（行内）元素
<img src=“图像URL”/>	插入图片

a标签

定义超链接：用于从一张页面链接到另一张页面(比如<a href=“http://www.baidu.com”>百度</a>)；
锚：用于从页面当前位置跳转至指定锚点，博客的目录经常用到(比如<a href="#top">内容</a> <h2><a name=“top”>内容</a></h2>)；
它最重要的属性是href，指示链接的目标。所有的浏览器都支持a标签。

2.2.1 列表

无序列表
里面只能包含li，没有顺序，布局中最常用。基本语法如下：

<ul type=“desc”>
<li>第一项</li>
<li>第二项</li>
</ul>

type属性	描述
disc	实心圆点（默认值）
circle	空心圆圈
square	实心方块
none	无样式

有序列表
里面只能包含li，有顺序，使用情况较少。基本语法如下：

<ol type=“1” start=“2”>
<li>第一项</li>
<li>第二项</li>
</ol>

type属性	描述
1	数字列表（默认值）
A	大写字母
a	小写字母
I	大写罗马
i	小写罗马

start是从数字几开始

3.自定义列表
定义列表常用于对术语或名词进行解释和描述，里面有2表兄弟，dt和dd。基本语法如下：

<dl>
     <dt>名词1</dt>
     <dd>名词1解释1</dd>
     <dd>名词1解释2</dd>
     … …
     <dt>名词2</dt>
     <dd>名词2解释1</dd>
     <dd>名词2解释2</dd>
     … …
</dl>

table标签：定义表格；
tr标签：定义行，必须嵌套在table标签中；
td标签：定义单元格，必须嵌套在tr标签中。

2.2.2 表格

创建表格的基本标签table、tr、td，缺一不可。基本语法如下：

<table>
     <tr>
      <td>单元格内的文字</td>
      … …
     </tr>
     … …
</table>

2.2.2.1 表格常用属性

属性名	作用	常用单位
border	设置表格的边框（默认值为0，无边框）	像素值（px）
cellspacing	设置单元格与单元格边框之间的空白间距	像素值
cellpadding	设置单元格内容与单元格边框之间的空白距	像素值
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

2.2.2.2 表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，如下所示：

<caption></caption>：用于定义表格标题；

caption标签必须紧随table标签之后。且只能对每个表格定义一个标题，通常这个标题会被居中于表格之上。

<thead></thead>：用于定义表格的头部；

必须位于table标签中，一般包含网页的logo和导航等头部信息。

3.<th></th>：用于定义表格的表头；

只需用表头标签th替代相应的单元格标签td即可。一般位于表格的一行或第一列，并且文本加粗剧中。

<tbody></tbody>：用于定义表格的主体。

必须位于table标签中，一般包含网页中除头部和底部之外的其他内容。

<tfoot></tfoot>：用于定义表格的页脚（脚注或表注）。

必须位于table标签中，与thead和tbody元素结合起来使用。

总结：thead元素用于对HTML表格中的表头内容进行分组，而tbody元素用于对HTML表格中的主体内容进行分组，tfoot元素用于组合HTML表格中的表注内容。

2.2.2.3 合并单元格

合并属性：

属性名	作用
rowspan	跨行合并
colspan	跨列合并

合并顺序： 遵循先上、后下、先左、后右的顺序。
合并步骤：

确定是跨行合并还是跨列合并；
找到目标单元格，写上合并方式和要合并的单元格数量；
删除多余的单元格（删除的个数=合并的个数-1）。

2.2.3 表单标签

作用：<from>标签用于定义表单区域，收集用户输入的数据，向服务器传输这些数据。
完整的表单通常由表单控件、提示信息、表单域3个部分构成。基本语法如下：
在这里插入图片描述

action属性：表单数据提交的地址；
method属性：表单发生提交操作的时候的请求方式，有get和post；
enctype属性：编码类型。

2.2.3.1 input控件

input标签是表单标签中最重要的标签。input标签是个单标签。
input标签在使用时，type、name、value这三个属性是最常用的。

type属性：规定input标签的类型；

type属性值	描述
button	生成按钮
radio	生成单选按钮
submit	生成提交按钮
text	生成文本框
file	生成浏览按钮
hidden	生成隐藏的输入字段
password	生成密码输入框
checkbox	生成复选框
image	生成图片形式的提交按钮
reset	生成重置按钮

name属性：定义input元素的名称。在进行前后端交互时，可以根据这个名称找到对应的标签，是前端和后端交互时非常重要的属性；
3.value属性：规定input元素的值，在获取表单数据时获取的就是value属性的值。

3. HTML5新增标签

3.1 新的语义和结构元素

属性名	描述
<nav>内容</nav>	定义导航链接
<article>内容</article>	定义文章标签
<figure>内容</figure>	定义媒介内容的分组
<dialog>内容</dialog>	定义对话框或窗口
<menu>内容</menu>	定义命令的列表或菜单
<progress>内容</progress>	进度条的标签

3.2 新多媒体元素

属性名	描述
<canvas>内容</canvas>	定义图形
<audio>内容</audio>	定义音频内容
<video>内容</video>	定义视频
<source>内容</source>	定义多媒体资源
<embed>内容</embed>	定义嵌入的内容
<track>内容</track>	为诸如video和audio元素之类的媒介规定外部文本轨道