本文详细介绍了HTML的基础知识，包括基本结构、编码规范、head标签、文档结构如标题、段落、换行、文本标签、超链接、图片、数据列表、表格、转义字符、form表单、框架网页和内嵌框架。强调了HTML5的语义化标签使用，并提供了丰富的实例代码。
资料来源：http://www.moretrue.cn/Home/Article/article/id/26.html
视频讲解：https://www.bilibili.com/video/BV1yt4y1q7v7
原文：https://bafanglvren.ink/archives/85/
文章目录
文章目录
1.html基本结构与编码规范
html5基本结构为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>
- 所有的标记都必须要有结束标记，单标记直接用/结束
- 所有标签的元素和属性的名字都必须使用小写，HTML5.0版本中，W3C明确规定，标签必须用小写格式。
- 所有的属性必须用引号""括起来
- html的标签选择应该从语义出发，而不是从外观出发
- html应该只负责网页的结构，尽量不负责外观。
2.head标签
title：网页标题
meta：辅助信息标记，给浏览器传递辅助信息
使用实例:
<!DOCTYPE html>
<html>
<head>
<!-- 网页编码 常用的有GBK，BIG5，utf-8-->
<meta charset="utf-8">
<!-- 搜索引擎会抓取title，直接取网站名即可 -->
<title>head标记</title>
<!-- 这两个mate元素对搜索引擎SEO有一定帮助 关键词与描述 -->
<meta name="keywords" content="web学习，web交流"/>
<meta name = "description" content="寻求更多web技术"/>
<!-- 与移动开发相关 -->
<!-- width=device-width表示尺寸为设备尺寸 ，initial-scale表示初始缩放大小1 ，maximum-scale表示最大缩放是1，user-scalable=no表示禁止用户用手指缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
</body>
</html>
3.文档结构标签
3.1标题标签
<h1>到<h6>分别为6个可用标题，h1标题要尽量切合网页主题。
3.2段落与换行标签
<p>：段落与段落之间自动换行，不需要特意加换行标签
<br />：换行标签是单标签，没有结束标签
3.3div,span与hr标签
<div>:表示一个盒子/容器
<span>：没有特殊语义，表示同一个样式
<hr />：分隔线标签也是单标签，没有结束标签
实例:
<html>
<head>
<meta charset="utf-8">
<title>文档结构标记</title>
</head>
<!-- 可以通过标签来控制页面的表现，但是为了做到结构分离，表现一般由CSS完成，html只负责页面结构 -->
<body bgcolor="blanchedalmond">
<!-- font也是表现型标记，尽量不要使用 -->
<font color="blueviolet" size="6">文字</font>
<!-- 1 .常用的标签-标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 2 .常用的标签-段落(相对独立的内容)与换行 -->
<p>段落1</p>
<p>段落2</p>
第一行<br>
第二行
<!-- 3 . div与span -->
<!-- div:表示一个盒子/容器 -->
<!-- span:没用特定的语义，通常用于样式的应用 -->
<!-- 4 . hr 分隔线 (目前很少用)-->
<hr >
</body>
</html>
4.文本标签
4.1常用文本标签：
<b>：加粗
<strong>：强调
b和strong的区别就在于前者是的语义为与众不同，而strong表示强调，因此应该根据使用场景来选用。
<i>：斜体
<em>：次级强调
实例:
<html>
<head>
<meta charset="utf-8">
<title>文字标记</title>
</head>
<body>
<!-- 虽然加粗属于表现形式，但仍然为常用的html标签。 -->
<!-- 一般把b标签修饰的文字称为与众不同 -->
<!-- strong标签同理，认为属于强调标记 -->
正常文字
<br>
<b>独特文字</b>
<br>
<strong>强调文字</strong>
<br>
<!-- 认为i标签修饰的文字属于与众不同，em标签修饰的文字属于次强调 -->
<i>独特文字</i>
<br>
<em>次强调文字</em>
</body>
</html>
4.2其他文本标签
5.超链接标签
- 基本使用方法:
<a href="链接位置" title="链接描述" target="目标">链接文字</a>
- 邮件链接：
<a href="mailto:test@qq.com">发送邮件</a>
- 页面链接的锚点：
<a href="#top">回到顶部</a> <div id="top">顶部的链接</div>
- 给链接增加 鼠标提示：
<a title=“点击查看详细信息”>查看</a>
- 理解链接的不同打开方式:
<a href=“” target=“_top/_self/_blank”></a>
实例代码：
<html>
<head>
<meta charset="utf-8">
<title>超链接标记</title>
</head>
<body>
<!-- <a href="链接位置" title="链接描述" target="目标">链接文字</a> -->
<!-- target :_self对应在本窗口打开链接-->
<!-- target :_blank对应在新窗口打开链接 -->
<a href="https://bafanglvren.ink/" title="八方旅人" target="_blank">八方旅人的小站</a>
<!-- 学会使用邮件链接 -->
<!-- <a href="mailto:test@qq.com">发送邮件</a -->
<a href="mailto:918751972@qq.com">发送邮件</a>
</body>
</html>
演示效果:
6.图片标签
<img src="图片位置" alt="图片描述" width="宽度" height="高度" />
使用实例：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 尽量使用相对路径 -->
<!-- alt:当图片无法加载时给予的提示信息 -->
<!-- width/height:控制高度和宽度 因为文字的加载速度往往快于图片，为了保证网页排版正确，最好加上宽度和高度-->
<img src="images/1.jpg " alt="北欧风景" width="1000" height="1000">
<!-- 使用图片做链接 -->
<a href="https://bafanglvren.ink"><img src="images/2.jpg"alt="子弹" ></a>
</body>
</html>
拓展阅读:http://moretrue.cn/Home/Article/article/id/10.html
7.数据列表标签（有序表与无序表）
有序/无序列表，使用ul、ol、li组合标签
名词解释类列表，使用dl、dt、dd组合标签
<html>
<head>
<meta charset="utf-8">
<title>列表标记</title>
</head>
<body>
<!-- order list有序列表<ol></ol> -->
<!-- ul无序列表<ul></ul> -->
<!-- 列表可以嵌套使用 -->
<ol>
<li>北京</li>
<ol>
<li>海淀区</li>
<li>西城区</li>
</ol>
<li>巴塞罗那</li>
<li>北欧</li>
</ol>
<ul>
<li>北京</li>
<li>巴塞罗那</li>
<li>北欧</li>
<ul>
<li>挪威</li>
<li>瑞士</li>
</ul>
</ul>
<!-- 普通列表：dl、dt、dd -->
<dl>
<dt>Hello World</dt>
<dd>中文翻译：你好</dd>
<dd>法语翻译：Bonjour, le monde</dd>
</dl>
</body>
</html>
8.表格标签
8.1表格标签大体结构
- table-表格标签
- caption-表格标题
- thead-表格头信息
- tr-单行内容
- th-单个内容
- tr-单行内容
- tbody-表中主体内容
- tr-单行内容
- td-单个内容
- tr-单行内容
- tfoot-页码等统计信息
实例代码：
<!-- border表示表格边框类型,也属于网页表现，应使用CSS，不建议使用border-->
<!-- width:代表宽度 -->
<table border="1" width="50%">
<!-- 表格标题 -->
<caption>学生信息表</caption>
<!-- 一般把所有表头放在thead中 -->
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<!-- 其余内容放在tbody中 -->
<tbody>
<tr>
<td>01</td>
<td>李伟 </td>
<td>男</td>
</tr>
<tr>
<td>02</td>
<td>胡月</td>
<td>女</td>
</tr>
</tbody>
<!-- tfoot一般放置页码信息等 -->
<tfoot>
</tfoot>
</table>
显示为：
8.2表格合并
对td标签附加属性colspan/rowspan
水平合并(colspan=合并单元格数)
垂直合并（rowspan=合并的单元格数）
对上面的代码做出部分修改：
<tbody>
<tr>
<td>01</td>
<td>李伟 </td>
<!-- 添加了行合并，意为本行和下面一行(一共两行)合并 -->
<td rowspan="2">男</td>
</tr>
<tr>
<td>02</td>
<td>胡月</td>
<!-- 注释该行 <td>女</td> -->
</tr>
</tbody>
合并后:
9.转义字符
由于html的语法，某些字符无法直接显示，必须使用转义字符。
常用的转义字符有
10.form表单
- 表单标记
<form action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称"></form>
form元素将所有的表单包含起来，也相应于表单的作用域。
get和post提交方式的区别：get请求把表单的数据显式地放在URL中,并且对长度和数据值编码有所限制.post请求把表单数据放在HTTP请求体中,并且没有长度限制.
- 文本框
<input type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" disabled readonly required auotfocus />
- 密码框
<input type="password" name="控件名称" placeholder="提示信息"/>
- 单选按钮：同一组单选按钮使用同一命名
<input type="radio" name="控件名称" value="控件值" checked />
- 复选按钮
<input type="checkbox" name="控件名称" value="控件值" checked />
- 下拉列表
<select name="控件名称" multiple="multiple" size="数值"> <option value="控件值" selected>选项</option></select>
- 多行文本框
<textarea name="控件名称" cols="列数" rows="行数"></textarea>
- 隐藏控件
<input type="hidden" name="控件名称" value="控件值" />
- 普通按钮
<input type="button" value="按钮文字" /><button type="button">按钮文字</button>
10）发送按钮
<input type="submit" value="按钮文字" /><button type="submit">按钮文字</button>
11）重置按钮
<input type="reset" value="按钮文字"><button type="reset">按钮文字</button>
实例代码：
<html>
<head>
<meta charset="utf-8">
<title>表单标记</title>
</head>
<body>
<!-- action:指明表单信息发送到哪里处理 -->
<!-- method:发送方式post和get -->
<form action="do.php" method="post" name="f1">
<!-- 表单控件放置于form中 -->
<p>
<!-- 添加用户名输入框 -->
<!-- label for：向谁服务（id） -->
<label for="user">用户名</label>
<!-- 附加属性:readonly只读，用户不可输入-->
<!-- disable:disable :输入框不可见-->
<!-- required:必须输入内容才能提交 -->
<!-- autofocus:无需用户点击输入框自动聚集光标 -->
<!-- placeholder:相当于hint -->
<!-- name:value这对键值对发送给服务器 -->
<input type="text" name="username" id="user" required=""autofocus=""
placeholder="请输入用户名"/>
<!-- 添加密码输入框 -->
<label for="pw">密码</label>
<input type="password" name="password" id="pw" required="" placeholder="请输入密码"/>
<!-- 添加性别选择框(单选按钮)-->
<!-- name相同的选择框是一个组的，互斥的 -->
<p>性别:方法一，用lable标签分别指定for:id
<br>
<label for="male">男</label>
<input type="radio" name="sex" id="male"/>
<label for="female">女</label>
<input type="radio" name="sex" id="female"/>
</p>
<p>性别:方法二(常用)，直接将input标签写入label
<br>
<label >
<input type="radio" name="sex2">男
</label>
<label >
<input type="radio" name="sex2">女
</label>
</p>
<!-- 颜色选择 checked:表示默认选中-,多个checked只有最后一个有效!-->
<label><input type="radio" name="color" checked="">红</label>
<label><input type="radio" name="color" checked="">蓝</label>
<label><input type="radio" name="color">白</label>
</p>
<p>
<input type="submit"value="发送" />
<input type="submit" value="submit">
</p>
<!-- 添加多选按钮框 -->
<p>
<label><input type="checkbox" name="city" value="bj">北京</label>
<label><input type="checkbox" name="city">上海</label>
<label><input type="checkbox" name="city">广州</label>
</p>
<!-- 添加下拉列表控件 -->
<!-- 额外属性size:列表占据的位置数 -->
<!-- multiple:按住CTRL允许多选 -->
<p>
<label for="bloodtype">血型(可多选)</label>
<select name="bloodtype" id="bloodtype" size="3" multiple="">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
</select>
</p>
<!-- 添加留言框，实现多行输入 -->
<p>
<label for="msg">留言栏</label>
<textarea name="msg" id="msg" cols="30" rows="10" required="">
</textarea>
</p>
<p><input type="submit" value="发送" /></p>
<!-- 隐藏控件，用户不可见 -->
<p>
<input type="hidden" name="year" value="2021">
</p>
<!-- 按钮类 (发送/重置)-->
<input type="submit" value="发送" />
<button type="submit">发送</button>
<input type="reset" value="重置" />
<button type="reset">重置</button>
<!-- 自定义按钮 :可以自定义功能-->
<!-- 想要识别为字符串，使用单引号'' -->
<input type="button" value="自定义" onclick="alert('Hello World')"/>
<button type="button" onclick="alert('Hello Button')">自定义</button>
</form>
</body>
</html>
显示效果：
11.框架网页
现在已经使用较少，但一些小型页面仍然可以用框架网页方便地实现。
将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页
<frameset rows="" cols="">：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。
<frame name="" scr="" />：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。
实例代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="20%,60%,*">
<!-- 分成3个小窗口 -->
<!-- www.google.com 拒绝了我们的连接请求。 -->
<frame src="https://www.google.com" >
<frameset cols="30%,*">
<frame src="a03.html" >
<frame src="https://bafanglvren.ink" >
</frameset>
<frame src="https://www.baidu.com" >
</frameset>
</html>
显示效果：在一个网页内访问4个不同的网站
12.内嵌框架
与上面的框架网页不同，内嵌框架可以与body标签同时存在
<iframe>：可以在一个浏览器窗口种同时显式多个页面文档
<iframe src="url" width="宽度" height="高度"></iframe>
提示：可以把说明的文本放置在<iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
实例代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="https://bafanglvren.ink" width="500" height="800"></iframe>
</body>
</html>
显示效果
扩展阅读
转自http://moretrue.cn/Home/Article/article/id/26.html
html历史
书写规范
html5
拓展
扫一扫
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
