HTML 笔记
Web前端介绍
什么是网页
网页是基于浏览器的应用程序，是数据展示的载体.
网页的组成
- 浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
- 服务器
- 存储数据
- 处理并响应请求
- 协议
- 规范数据在传输过程中的打包方式
开发前的准备
- 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
- 调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
- 开发工具：不限，选用个人习惯的即可（VSCode、EditPlus、PyCharm等）。
HTML语法介绍
HTML介绍
超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容
标签
标签也称为标记或元素，用于在网页中标记内容
语法：标签使用 <> 为标志，在 <> 内部写标签名和标签属性
- 注释语法：
<!-- 此处为注释 -->标签名不区分大小写，推荐小写表示
分类：
- 双标签：成对出现，包含开始标签和结束标签。例：
<html>
<!-- 内容或其他标签 -->
</html>- 单标签：只有开始标签，没有结束标签，可以手动添加 “/” 表示闭合。例：
<br>
或者 <br/>标签属性：
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
<meta charset="utf-8">- 同一个标签中可以添加若干组标签属性，使用空格间隔。例：
<a href="http://www.tmooc.cn" target="_blank">达内慕课网</a>使用
创建网页文件，使用.html 或.htm 作为文件后缀
添加网页的基本结构
<!doctype html>
<html>
<head>
<title>网页标题</title>
<meta charset="utf-8">
</head>
<body>
网页主体内容
</body>
</html>专业的开发工具支持 HTML 代码补全功能，如 VSCode 中，创建好 HTML 页面以后可以输入英文感叹号 (!) 然后按 tab 键补全页面基本结构 (不同的开发工具补全的基本结构有细微的差别，可以忽略)。
标签嵌套
在双标签中书写其他标签，称为标签嵌套
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
- 平级结构互为兄弟元素
常用标签介绍
基本结构解析
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
<head>
<!-- 设置网页标题，显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->body中常用标签
文本标签
- 标题标签：自带加粗效果，从 h1 到 h6 字体大小逐级递减
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>- 段落标签：
<p>段落文本</p>- 普通文本标签：
<span>行分区标签，用于对特殊文本特殊处理</span>- 格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
<br>- 字符实体：
某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
例：
使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用 在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"￥"- 容器标签
常用于页面结构划分，结合 CSS 实现网页布局
<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>- 图片与超链接标签
图片标签 <img src="">：用于在网页中插入一张图片。
- 属性 src 用于给出图片的 URL，必填。
- 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
- 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
- 属性 alt 用于设置图片加载失败后的提示文本
语法：
<img src="" width="" height="" title="" alt="">超链接标签：用户可以点击超链接实现跳转至其他页面
- 属性 href 用于设置目标文件的 URL，必填。
- 属性 target 用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本 (取 "_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>常用结构标签
列表标签
- 有序列表（ordered list）默认使用阿拉伯数字标识每条数据
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>- 无序列表（unordered list）默认使用实心圆点标识列表项
<ul>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ul>表格标签
- 表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构如下
<!-- 创建表格标签 -->
<table>
<!-- 创建行标签 -->
<tr>
<!-- 行中创建单元格以显示数据 -->
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
</tr>
<tr>
<td>迪丽热巴</td>
<td>20</td>
<td>002</td>
</tr>
</table>单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整
- 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入中
<table border="1px" width="300px" height="300px">
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>- 表单标签
表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素 form 负责提交数据给服务器，表单控件负责收集数据。
- 表单使用
| 属性名 | 取值 |
| ------- | -------------------------------------------------------------------------------------------------------------------------------- |
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式，默认为 get 方式，可以设置为 post |
| enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为 post, 编码类型为 "multipart/form-data" |
例如：
<form action="" method="" enctype="">
<!--此处为表单控件-->
</form>- 表单控件使用（重点）
表单控件用于采集用户信息，可设置以下标签属性
表单控件用于采集用户信息，常用控件如下：
<input type="text"> 文本框
<input type="password"> 密码框
<input type="radio"> 单选按钮
<input type="checkbox"> 复选框
<input type="file"> 文件上传
<input type="button"> 普通按钮
<input type="submit"> 提交按钮
<select></select> 下拉菜单
<option></option> 下拉菜单选项
<textarea></textarea> 文本域 本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-10-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号