HTML基础教程

前端

1. HTML

一个最基本的Html框架：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<!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="123" />
    <meta name="Description" content="123456" />
    <title>Document</title>
</head>
<body>
  
</body>
</html>

标准的div+css页面，只会用到种类很少的标签：div、p、h1、span、a、img、ul、ol、dl、input、i等

1.1 头标签head

head标签表示的是页面的配置，有字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等

文档声明头：<!DOCTYPE html >，DocType Declaration，简称DTD,DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
页面语言lang：<html lang=“en” >，指定页面的语言类型，en、zh-CN。
meta标签：提供相关页面的元信息（meta-information）

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!--必要，网页标题-->
<title>轻笑Chuckle</title>
<!--必要，网页的编码方式,文件格式要与其声明相符-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--视口viewport，适配移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网页关键词，SEO用-->
<meta name="Keywords" content="轻笑,Chuckle" />
<!--网页描述-->
<meta name="Description" content="漫天倾尘,风中轻笑" />
<!--网页作者-->
<meta name="Author" content="轻笑Chuckle">
<!--3s后跳转百度-->
<meta http-equiv="refresh" content="3;http://www.baidu.com">
<!--指定基础的路径，a链接以此为基准-->
<base href="/">

1.2 body标签

div、section、article、aside、header、footer
p
span、em、strong
表格元素：table、thead、tbody、tr、td
列表元素：ul、ol、dl、dt、dd
a
表单元素：form、input、select、textarea、button

HTML标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

1.3 排版标签

<h1>标题使用<h1>至<h6>标签定义,有align属性(对齐方式)：left、center、right。
<p>段落标签，单独成段，分割网页。有align属性。
<hr/>水平分割线线标签。
<br/>
<div>可以把标签中的内容分割为独立的区块。必须单独占据一行,DIV+CSS来实现各种样式,div标签负责布局、结构、分块，css负责样式
<span>和div的作用一致，但不换行
<center>让元素居中，H5中不使用
<pre>预格式化，让文本不空格和空行，几乎用不着

1.4 字体标签

特殊字符（转义字符），需要时百度， 空格,<小于号<,>大于号>，等
<u>下划线,<s>或<del>中划线,<i>或<em>斜体
弃用:<b> <strong>粗体，<font>字体标签
<sup>上标，<sub>下标

1.5 超链接a

一个文本级标签

外部链接:<a href=“02页面.html”>点击进入另外一个文件</a>href超文本地址
锚链接:

01
02
03
04
05
06
07
08
<!--设置锚点，必须是a标签-->
<!--name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的-->
<a name="a1" id="a1">a1点</a>
<!--触发锚点-->
<a href="#a1">去a1点</a>
<!--跳转到a.html页面的a1锚点中去-->
<a href="a.html#a1">去a1</a>
###

通常p包裹a

超链接属性

01
02
03
04
05
06
07
href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
 _self：在同一个网页中显示（默认值）
 _blank：在新的窗口中打开。
 _top：在顶级窗口中显示

1.6 图片标签

<img src=“图片的URL” />src中写图片路径

标签属性：

width、height
在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比
可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行等比缩放
alt：当图片无法显示时，代替图片的文本
title：鼠标悬停时出现的文本
align属性，默认bottom

1.6.1相对路径

01
02
03
04
05
06
<!-- 当前目录中的图片 -->
<img src="img.jpg">
<img src="./img.jpg">
<!-- 上一级目录中的图片 -->
<img src="../img.jpg">
<!-- ../要么不写，要么就写在开头 -->

1.6.2 绝对路径

01
02
<img src="C:\img.jpg">C盘图片
<img src="http://img.baidu.com/head.png">网络路径

1.7 列表标签

无序列表<ul>,type=”属性值”;disc(实心原点，默认)，square(实心方点)，circle(空心圆)
有序列表<ol>,type=”属性值”;1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始
<ul>、<ol>里放<li>,li是容器级
定义列表<al>,没有属性,子元素<dt>、<dd>

例１

01
02
03
04
05
06
07
08
09
10
11
12
13
<dl>
    <dt>第一条</dt>
    <dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
    <dd>我会让你明白，我从不说空话</dd>
    <dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>
        
    <dt>第二条</dt>
    <dd>良辰最喜欢对那些自认能力出众的人出手</dd>
    <dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
    <dd>你只要记住，我叫叶良辰</dd>
    <dd>不介意陪你玩玩</dd>
    <dd>良辰必有重谢</dd>
</dl>

第一条: 你若是觉得你有实力和我玩，良辰不介意奉陪到底; 我会让你明白，我从不说空话; 我是本地的，我有一百种方式让你呆不下去；而你，无可奈何
第二条: 良辰最喜欢对那些自认能力出众的人出手; 你可以继续我行我素，不过，你的日子不会很舒心; 你只要记住，我叫叶良辰; 不介意陪你玩玩; 良辰必有重谢

例2

01
02
03
04
05
06
07
08
<dl>
    <dt>北京</dt>
    <dd>国家首都，政治文化中心</dd>
    <dt>上海</dt>
    <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
    <dt>广州</dt>
    <dd>中国南大门，有珠江</dd>
</dl>

北京
国家首都，政治文化中心
上海
魔都，有外滩、东方明珠塔、黄浦江
广州
中国南大门，有珠江

从语义上来说，dt表示名称，dd表示对其的描述，dt、dd都是容器级标签，想放什么都可以。用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

1.8 表格标签table

网页中表格由每行<tr>组成，每一行由一个个单元格<td>组成
<th>加粗的单元格。相当于<td> + <b>

01
02
03
04
05
06
07
08
<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

table属性

border 边框
style=”border-collapse:collapse;”单元格的线和表格的边框线合并（表格的两边框合并为一条）
width、height
bordercolor 表格的边框颜色
align 表格的水平对齐方式left right center，注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding 单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor 背景颜色，background 背景图片。背景图片的优先级大于背景颜色。
bordercolorlight 表格的上、左边框，以及单元格的右、下边框的颜色,bordercolordark 表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果
dir 公有属性，单元格内容的排列方式，取值ltr左到右，rtl从右到左

tr属性

dir 公有属性，单元格内容的排列方式，取值ltr左到右，rtl从右到左
bgcolor 设置这一行的单元格的背景色
height
align 一行的内容水平居中显示，取值：left、center、right
valign 一行的内容垂直居中，取值：top、middle、bottom

td属性

bgcolor 单元格的背景色，background 设置这个单元格的背景（图片）
height 单元格的高度
width 绝对值或者相对值(%)
align 内容的横向对齐方式，取值：left right center
valign 内容的纵向对齐方式。取值：top middle bottom

1.8.1 单元格的合并

colspan：横向往右合并
rowspan：纵向往下合并

例1

01
02
03
04
05
06
07
08
09
10
11
12
13
<table border="1">
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td>广东</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>19</td>
        <td colspan="2" align="right">广东</td>
    </tr>
</table>

张三	18	男	广东
小明	19	广东

例2

01
02
03
04
05
06
07
08
09
10
11
12
13
<table border="1">
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td rowspan="2">广东</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>19</td>
        <td>男</td>
    </tr>
</table>

张三	18	男	广东
小明	19	男	广东

thead、tbody、tfoot

表格优先按照thead、tbody、tfoot的顺序依次来显示内容（三个标签无需同时存在），如果不写，表格按代码从上到下的顺序来显示
当表格非常大内容非常多的时候，用thead、tbody、tfoot标签，数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
tr和tbody同级，按代码从上到下的顺序来显示

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="1">
    <tbody>
        <tr>
            <td>二</td>
            <td>22</td>
            <td>男</td>
            <td>广州</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>四</td>
            <td>21</td>
            <td>男</td>
            <td>东莞</td>
        </tr>
    </tfoot>
    <tr>
        <td>三</td>
        <td>21</td>
        <td>男</td>
        <td>广州</td>
    </tr>
    <thead>
        <tr>
            <td>一</td>
            <td>23</td>
            <td>女</td>
            <td>深圳</td>
        </tr>
    </thead>
</table>

二	22	男	广州
四	21	男	东莞
三	21	男	广州
一	23	女	深圳

1.9 框架标签

框架标签用于在一个网页中显示多个页面（html）

<frameset>和<body>只能二选一。框架标签不能放在<body>标签里面，因为<body>标签代表的只是一个页面，而框架标签代表的是多个页面
框架的集合用<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame>
frameset和frame已经从 Web标准中删除，使用iframe代替

1.9.1 frameset

<frameset> 框架的集合,一个框架的集合可以包含多个框架或框架的集合

rows 水平分割，将框架分为上下部分
cols 垂直分割，将框架分为左右部分。
写法有两种：

绝对值写法：rows/cols=“200,*” *代表剩余的。包含了两个框架：一个占200个像素，另一个占剩下的部分。
相对值写法：rows/cols=“30%,*” *代表剩余的。包含了两个框架：一个占30%，另一个占70%。

如果想将框架分成很多个，在属性值里用多个逗号隔开。

01
02
03
04
05
06
07
<frameset rows="20%,*">
    <frame src="1.html"></frame> 
    <frameset cols="30%,*">
        <frame src="1.html"></frame> 
        <frame src="1.html"></frame> 
    </frameset>      
</frameset>

1.9.1 frame

<frame>是<frameset>的子标签，一个框架显示一个页面。

scrolling=”no” 是否要滚动条,默认值是true。
noresize 不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的,用了这个属性值，框架大小将固定。
bordercolor 框架边框颜色,仅IE生效
frameborder=”0”或“1” 隐藏或显示边框（框架线）。
name 框架名字，用于框架内的超链

1.10 内嵌框架
内嵌框架用<iframe>表示。<iframe>写在<body>中，在其中嵌入html页面

iframe的属性

src=”” 嵌入html页面的路径
height,width
scrolling=”no” 是否需要滚动条。默认值是true。
name 名称

例

01
02
03
<a href="" target="myframe">默认显示空白页面</a><br>
<a href="../about" target="myframe">关于页面</a><br>
<iframe src="" width="100%" height="225" name="myframe"></iframe>

默认显示空白页面

 关于页面

1.11 表单标签

表单标签用<form>表示，收集用户信息，用于与服务器的交互。

form属性

name，id 表单的名称，JS来操作或控制表单时使用
action 指定表单数据的处理程序
method 表单数据的提交方式，一般取值：get(默认)和post

1.11.1 input输入标签

<input>是一个输入标签，用于接收用户输入或选择

input属性

type=”属性值” 文本类型
text 文本框，默认
password 密码框
radio 单选按钮
checkbox 多选按钮，name属性值相同的按钮作为一组进行选择，但id必须唯一。
hidden 隐藏框，在表单中包含不希望用户看见的信息
button 普通按钮，结合js代码进行使用。
submit 提交按钮，提交当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字，点击按钮后，整个表单就会被提交到form标签的action属性中指定的那个页面中去
reset 重置按钮，清空当前表单的内容，并设置为最初的默认值
image 图片按钮，和submit提交按钮的功能完全一致，图片按钮可以显示图片。
file 文件选择框，配合JS对文件进行限制和检查
checked 将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type=”radio”或者type=checkbox时，可用此属性
value=”内容” 文本框里的默认内容（已经被填好了的）
size=”50” 表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符
readonly 文本框只读
disabled 文本框只读

例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<form action="" method="post" onreset="return myReset()">
    <label>用户名:</label>
    <input class="inputCss" type="text" name="userName" value="chuckle" readonly><br>
    <label>密码:</label>
    <input class="inputCss" type="password" name="password" placeholder="请输入密码"><br>
    <label>性别:</label>
    <input type="radio" name="sex" value="男" >男
    <input type="radio" name="sex" value="女" checked>女<br>
    <label>爱好:</label>
    <input type="checkbox" name="hobby" value="唱" checked>唱
    <input type="checkbox" name="hobby" value="跳" >跳
    <input type="checkbox" name="hobby" value="rap" checked>rap
    <input type="checkbox" name="hobby" value="篮球" >篮球<br>
    <label>生日:</label>
    <input type="datetime-local" class="inputCss"><br>
    <label>头像:</label>
    <input type="file" class="inputCss"><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>

1.11.2 select下拉列表

<select>列表中每一选项为<option>

select、option的属性

<select>的属性:

multiple 多选(ctrl加左键点击)
size=”3” 属性值大于1，则列表为滚动视图，默认属性值为1，即下拉视图。
<option>的属性:

selected 预选中

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form>
    <select>
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option>大学</option>
        <option selected="">研究生</option>
    </select>
    <select size="3">
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option>大学</option>
        <option>研究生</option>
    </select>
    <select multiple="">
        <option>小学</option>
        <option>初中</option>
        <option selected="">高中</option>
        <option selected="">大学</option>
        <option>研究生</option>
    </select>
</form>

1.11.3 textarea多行文本框

<textarea>不会省略空格和换行

textarea的属性

rows=”4” 文本框行数
cols=”20” 文本框列数
readonly 文本框只读

例

01
02
03
04
05
<form>
    <textarea rows="4" cols="20">112233445566</textarea>
    <textarea rows="4" cols="10">   99999   </textarea>
    <textarea readonly rows="4" cols="15">   99999   </textarea>
</form>

1.11.4 fieldset表单分组

<fieldset>子标签<legend>定义组的标题

fieldset的属性

disabled 表单仍然显示，但是禁用
form=”另一个表单的id” 让此fieldset也属于该表单一部分
name fieldset的名称

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<form id="form1">
    <fieldset>
        <legend>账号信息</legend>
        姓名：<input value="张三" ><br>
        密码：<input type="password" value="pwd" size="30"><br>
    </fieldset>
</form>
<fieldset form="form1">
    <legend>其他信息</legend>
    性别：<input type="radio" name="gender" value="male" checked="">男
        <input type="radio" name="gender" value="female" >女<br>
    爱好：<input type="checkbox" name="love" value="eat">吃饭
        <input type="checkbox" name="love" value="sleep">睡觉
        <input type="checkbox" name="love" value="bat">打豆豆
</fieldset>

其他信息性别：男女
爱好：吃饭睡觉打豆豆

1.11.5 label

label使其中文字内容与<input>绑定，点击文字也能选择选项等

fieldset的属性

for=”[id]” label要绑定的input的id

01
02
03
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
<input type="checkbox" id="none" /><label for="none">隐藏性别</label>

男
女
隐藏性别

2 HTML5

HTML5是新一代开发Web富客户端应用程序整体解决方案。包括：HTML5,CSS3，Javascript API在内的一套技术组合。富客户端具有很强的交互性和体验。

2.1 新增的语义标签

相较于使用class="header"给网页做语义化处理，HTML5本身提供了一些语义化的标签。强调了HTML的职责是描述一块内容是什么（或其意义）。

常见的HTML结构：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<!-- 头部 -->
<div class="header">
    <ul class="nav"></ul>
</div>

<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <div class="article"></div>
    <!-- 侧边栏 -->
    <div class="aside"></div>
</div>

<!-- 底部 -->
<div class="footer">

</div>

HTML5 结构

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!-- 头部 -->
<header>
    <ul class="nav"></ul>
</header>

<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <article></article>
    <!-- 侧边栏 -->
    <aside></aside>
</div>

<!-- 底部 -->
<footer>

</footer>

HTML5语义标签

email 只能输入email格式，自带格式验证
tel 手机号码
url 只能输入url格式
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期

例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<form action="">
    <fieldset>
        <legend>表单类型</legend>
        email: <input type="email" name="email" required>
        color: <input type="color" name="color">
        url: <input type="url" name='url'>
        number: <input type="number" step="3" name="number">
        range: <input type="range" name="range" value="100">
        search: <input type="search" name="search">
        tel: <input type="tel" name="tel">
        time: <input type="time" name="time">
        date: <input type="date" name="date">
        datetime: <input type="datetime">
        week: <input type="week" name="week">
        month: <input type="month" name="month">
        datetime-local: <input type="datetime-local" name="datetime-local">
        <input type="submit">
    </fieldset>
</form>

2.3 新表单标签

<datalist> 数据列表,用于数据自动提示

例

01
02
03
04
05
06
<input type="text" list="myData">
<datalist id="myData">
    <option>本科</option>
    <option>研究生</option>
    <option>不明</option>
</datalist>

<keygen> 用于验证用户，本质是密钥对生成器，当提交表单时，会生成两个键：一个公钥，一个私钥，私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

2.4 新表单属性

placeholder 占位符（提示文字）
autofocus 自动获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成（填充的）on开启（默认）off取消。效果是会记住之前的提交，可以快速选择
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭默认的验证功能（只能加给form）
required 表示必填项
pattern 自定义正则，验证表单。

例

01
02
03
04
05
06
07
08
09
10
11
<form action="" autocomplete="on">
    <fieldset>
        <legend>表单属性</legend>
        用户名：<input type="text" placeholder="例如：chuckle" name="userName" required/>
        电话：<input type="tel" pattern="1\d{10}"/>
        <input type="file" multiple>
        <input type="file" name="file" multiple/>
        <input type="submit"/>
    </fieldset>
</form>

2.5 表单事件

oninput() 用户输入内容时触发，可用于输入字数统计。
oninvalid() 验证不通过时触发

2.6 audio音频标签

audio的属性

autoplay 自动播放
controls 控制条
loop 循环播放
preload 预加载，设置autoplay此属性失效

例

01
<audio src="../music/songs/3.mp3" controls loop></audio>

2.7 video视频标签

video视频标签

autoplay 自动播放
controls 控制条
loop 循环播放
preload 预加载，设置autoplay此属性失效
width、height

01
02
03
04
05
06
07
<video src="video/movie.mp4" controls  autoplay ></video>
<video controls autoplay>
  <source src="video/movie.mp4"/>
  <source src="video/movie.ogg"/>
  <source src="video/movie.webm"/>
  抱歉，不支持此视频
</video>

抱歉，不支持此视频

如果觉得文章对你有用，请随意赞赏

前端

HTML基础教程

https://blog.nanweb.cn/archives/html%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B

作者

G-O_D-

发布于

2023-02-17

更新于

2023-11-19

许可协议

CC BY 4.0

HTML基础教程

1. HTML

1.1 头标签head

1.2 body标签

HTML标签分为两种：

1.3 排版标签

1.4 字体标签

1.5 超链接a

通常p包裹a

超链接属性

1.6 图片标签

标签属性：

1.6.1相对路径

1.6.2 绝对路径

1.7 列表标签

例１

例2

1.8 表格标签table

table属性

tr属性

td属性

1.8.1 单元格的合并

例1

例2

thead、tbody、tfoot

1.9 框架标签

框架标签用于在一个网页中显示多个页面（html）

1.9.1 frameset

1.9.1 frame

iframe的属性

例

1.11 表单标签

form属性

1.11.1 input输入标签

input属性

例

1.11.2 select下拉列表

select、option的属性

1.11.3 textarea多行文本框

textarea的属性

例

1.11.4 fieldset表单分组

fieldset的属性

1.11.5 label

fieldset的属性

2 HTML5

2.1 新增的语义标签

HTML5语义标签

例

2.3 新表单标签

例

2.4 新表单属性

例

2.5 表单事件

2.6 audio音频标签

audio的属性

例

2.7 video视频标签

video视频标签

作者

发布于

更新于

许可协议

评论