前端Web开发HTML5+CSS3+移动web课程（19/198）

关于HTML

HTML是英文HyperText MarkupLanguage的缩写，即超文本标记语言（或超文本标签语言）是用于描述网页文档的一种标记语言。

  1. HTML的含义
    最初设计 HTML的目的是为了能把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成一个整体。另外也是为了能让所有的用户都能得到一致的信息，不会因为用户的硬件、软件、语言、地理位置等而有任何差别。此后，所有的软件供应商都按照这一语言规范编写解释器，从而使数据呈现一致。
  2. HTML的历史
版本发表日期
HTML3.2W3C REC：1996.4
HTML4W3C REC：1997.12
HTML4.01W3C REC：1999.12
HTML5W3C REC：2014.12定稿
到目前为止，我们所接触的大部分浏览器都支持HTML5，这也是我们学习它的原因之一

HTML的书写规范与基本骨架

语法结构

  1. 一个HTML文件是由一系列的元素和标记（也称标签）组成的，元素指的是从开始标记（stag）到结束标记（end tag）的所有代码。元素的内容是开始标记与结束标记之间的内容。
  2. HTML用标记来规定元素的属性和它在文档中的功能，标记最基本的格式是：<标记>内容</标记>,使用时必须用尖括号<>括起来，通常成对出现，以开头无斜杠的标记开始，以有斜杠的标记结束，这种标记称为双标记。还有一些标记被称为单标记，即只需单独使用<标记>就能完整地表达意思。
  3. 标记与标记之间的关系有：嵌套关系、并列关系
    • 嵌套关系（父子关系）：如下所示代码中的<HTML>与<HEAD>
    • 并列关系（兄弟关系）：如下所示代码中的<BODY>与<HEAD>
<HTML>
	<HEAD>
	...
	</HEAD>
	<BODY>
	...
	</BODY>
</HTML>

基本骨架

<HTML>
	<HEAD>
	...
	</HEAD>
	<BODY>
	...
	</BODY>
</HTML>
  • <HTML>标记表示该文档是HTML文档 。
  • <HEAD>标记表示文档头部信息，一般包括标题和主题信息，也可以嵌入文件标题、编码方式等属性，该部分不会显示在页面正文中。
  • <BODY>标记表示网页主体信息，是显示在页面的主要部分，包括文字、表格、图片等各类信息。

这三部分组成了HTML文件的基本骨架，是必不可少的部分。

HTML的常用标记

标题标签

标题标签（双标签）<h1>~<h6>：

  • 显示特点：独占一行、文字加粗、字号随数字增大而减小
  • 代码示例
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

需要注意的是：<h1>一级标签在一篇文档中只能使用一次

段落标签

段落标签（双标签）<p>：

  • 显示特点：独占一行、段落间有间隙
  • 代码示例
<p>这是单独的一段</p>

换行标签

换行标签（单标签）<br>：

  • 由于HTML不能识别换行键，那么换行就需要用标签来实现
  • 代码示例
第一行文字<br>
第二行文字

水平线标签

水平线标签（单标签）<hr>：

  • 显示特点：分隔页面的水平直线
  • 代码示例
水平线上方内容
<hr>
水平线下方内容

文本格式化标签

对文本格式进行修改的标签：

标签名（双标签）效果
strong / b加粗
em / i倾斜
ins / u下划线
del / s删除线

图像标签

图像标签（单标签）<img>：

  • 图像标签有很多属性，其中必写属性为src，用来指定图像位置和名称
  • 代码示例
<img src="1.jpg">

关于图像标签属性

属性作用说明
alt替换文本图片无法显示时显示的文字
title提示文本鼠标悬停在图片上时显示的文字
width图片宽度值为数字，没有单位
height图片高度值为数字，没有单位
属性间通过空格隔开

超链接标签

超链接标签（双标签）<a>：

  • 标签的必须属性值href，用来定位跳转地址
  • 属性traget="_blank"，表示在新窗口打开页面
  • 代码示例
<a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>

音频标签

音频标签（双标签）<audio>：

  • 必须属性src，用来指定URL
  • 代码示例
<audio src="2333.MP3">音频</audio>

关于音频属性

属性作用说明
src音频URL支持格式：MP3、Ogg、Wav
controls显示控制面板
loop循环播放
autoplay自动播放浏览器一般禁用此功能

视频标签

视频标签（双标签）<video>：

  • 必须属性src，用来指定URL
  • 代码示例
<video src="123.MP4">视频</video>

关于视频属性

属性作用说明
src视频URL支持格式：MP4、Ogg、WebM
controls显示控制面板
loop循环播放
muted静音播放
autoplay自动播放浏览器支持静音自动播放

列表标签

无序列表

无序列表（双标签）：

  • <ul>嵌套<li>,ul是无序列表，li是列表条目
  • ul标签内只能包含li，li标签里可以有任何内容
  • 代码示例
<ul>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	...
</ul>

有序列表

有序列表（双标签）：

  • 布局排列整齐的，需要规定顺序的区域
  • <ol>嵌套<li>,ol是有序列表，li是列表条目
  • ol标签内只能包含li，li标签里可以有任何内容
  • 代码示例
<ol>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	...
</ol>

定义列表

定义列表（双标签）：

  • dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述／详情
  • dl里面只能包含dt和dd,dt和dd里面可以包含任何内容
  • 代码示例
<dl>
	<dt>列表标题</dt>
	<dd>列表的描述／详情</dd>
	...
</dl>

表格标签

表格

表格标签（双标签）：

  • table嵌套tr，tr嵌套th/td
  • 关于表格标签
标签名说明
table表格
tr行
th表头单元格
td内容单元格
  • 在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
  • 代码示例
<table border="1">
	<tr>
		<th>语文</th>
		<th>数学</th>
	</tr>
	<tr>
		<td>98</td>
		<td>100</td>
	</tr>
</table>

合并单元格

合并单元格的步骤：

  1. 明确合并的目标
  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
    • 跨行合并，保留最上单元格，添加属性 rowspan
    • 跨列合并，保留最左单元格，添加属性 colspan
  3. 删除其他单元格

一周学习总结

想要丰富多彩的页面，各种标签是实现的基础。

  • 重点记忆：基本骨架，标签语法
  • 功能记忆：各种标签的代码和用法
  • 代码检查：养成写一点检查一点的习惯，保证代码准确和修改及时
# 前端 # html5 # css3
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区