实现效果
学习目标
第一部分
- 知道网页的基本组成
- 可以说出什么是HTML
- Web标准的三大组成部分
第二部分
- 知道标签的书写规范
- 能写出 HTML 骨架标签
- 能写出超链接标签
- 能写出图片标签并说出 alt 和 title 的区别
- 知道相对路径的三种形式
第三部分
- 能写表格
- 能写无序表格
- 能写3~4个常用 input 表单类型
- 能写下拉列表表单
- 能使用表单元素实现注册页面
- 能查阅W3C文档
网页
什么是网页
- 网页是网站中的一页，一般都是HTML 格式的文件，由文字、图片、链接等等组成，通过浏览器来阅读，
- 网站是在因特网某些规则下使用HTML等制作用于展示需要展示内容的网页集合
什么是HTML
- HTML 是一种超文本标记语言
- Hyper Text Markup Language
- 标记语言是一套标记标签
- 超文本指
- 可以加入图片、声音、多媒体等内容（超越文本限制）
- 可以从一个文件跳转另一个文件，与世界各地主机的文件连接
Web标准
- Web标准是由W3C 组织和其他标准化组织指定的一系列标准的结合
- W3C：万维网联盟
为什么需要Web标准
- 让 Web 的发展前景更加广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 降低网站维护成本
- 提高页面浏览速度
Web标准的构成
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类 |
| 表现 | 表现用于设置网页元素的板式、颜色、大小等外观样式 |
| 行为 | 行为是只网页模型的定义和交互的编写 |
HTML 语法规范
语法规范
- HTML 标签由尖括号包围关键字的形式
- HTML 标签通常是成对出现，称之为双标签（第一个标签为开始标签，第二个标签是结束标签）
- HTML 标签也存在一些特殊的单个标签，称之为单标签
标签的关系
- 标签的关系可以分为
- 包含
- 并列
HTML 基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| </html | HTML标签 | 页面中最大的标签，称之为：根标签 |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 | |
| 文档的主体 | 元素包含文档的所有内容 |
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个HTML网页</title>
</head>
<body>
</body>
</html>
文档类型声明标签
<!DOCTYPE html>
- 作用
- 让浏览器知道应该使用什么HTML版本来显示网页
- 上诉的就是使用 HTML5
- 注意
- 不是一个HTML标签，而是一个文档类型声明标签
语言种类
<html lang="en">
- 作用
- 定义当前文档显示的语言
- 常用种类
- en 定义语言为英语
- zh-CN 定义语言为中文
- 注
- 定义成某种语言不代表不能使用其他语言
字符集
<meta charset="UTF-8">
- 字符集（Character Set）是多个字符的集合，便于计算机能识别和存储各种文字
- 在标签内，可以通过标签的charset属性来规定 HTML 文档应该使用哪种字符编码
HTML 常用标签
标签语义
- 目的：使界面结构更清晰
标题标签
- 目的：使网页根据语义化
- 分类：HTML提供了6个网页标签，即<h1>~<h6>
段落和换行标签
-
段落标签
- 目的：将文字有条理的显示出来，从而进行分段处理
- How：
标签定义段落，将网页分为若干个段落
- Paragraph 的首字母，意为“段落”
-
换行标签
- 目的：让某段文本强制换行显示
- How：
- break 的首字母，意为“换行”
- 特点
是一个单标签
标签只是简单的开始新的一行，与上一行之间不会有垂直距离，而段落标签会插入一些
-
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题、段落和换行标签</title>
</head>
<body>
<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>
<p>我是一个段落标签</p>
<p>我是另外一个段落标签</p>
普普通通的一句话
<br>
又是普普通通的一句话，但是与上一句之间没有行间距
<p>这样又有行间距了</p>
</body>
</html>
- 效果图
文本格式化标签
- 目的：当文本需要加粗、换成斜体或需要下划线效果的时候使用
- 种类
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | 推荐使用 标签，语义强烈 |
| 倾斜 | 或者 | 推荐使用 标签，语义强烈 |
| 删除线 | 推荐使用 |
|
| 下划线 | 或者 | 推荐使用 标签，语义强烈 |
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>我是加粗的文字</strong>
<b>我也是加粗的文字</b>
<!-- 换行也可以这样写 -->
<br>
<em>我是倾斜的文字</em>
<i>我也是倾斜的文字</i>
<br>
<del>我是带有删除线的文字</del>
<s>我也是带有删除线的文字</s>
<br>
<ins>我是带有下划线的文字</ins>
<u>我也是！</u>
</body>
</html>
- 效果图
div 和 span 标签
- 含义
- 没有具体的语义，就是一个盒子，用来布局的
- division 的缩写，译为分割、分区
- span 译为跨度、跨距
- 特点
- div 标签用来布局，一行就只能放一个div
- span 标签用来布局，一行能放多个span 标签
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div和span标签</title>
</head>
<body>
<div>一行只能有一个div标签</div>
<div>只能有一个哦</div>
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
