第二章: HTML快速上手
1.HTML 是什么
HTML(Hyper Text Markup Language): 超文本标记语言 ●超文本: a超越文本: 不仅仅只有文本, 还有多媒体文件, 如: image 图片, audio 音频, video 视频 b超链接: 可以从一个页面跳到另一个页面 ●标记语言: 带有固定的格式, 只是用来标记某种含义, 不是编程语言
举例
所以, HTML 在设计的时候或多或少会参考报纸的一些理念.
2.HTML文档的结构
HTML 有自己固定的基本格式
示例
图解
3.HTML文档的组成
HTML 文档由一系列的 元素 elements 组成, 在元素中包含 属性（Attribute）
1) 元素
示例
2) 属性
元素中可以包含属性(键值对)
示例
4.元素的分类
HTML 的元素分为两类
-
双标签元素
-
单标签元素
1) 双标签元素
在 HTML 中, 绝大部分元素(99%)都是双标签元素, 即有开始, 有结束, 在标签内部可以包含内容
比如: <body>我是主体</body>
2) 单标签元素
极少部分(常见就几个)元素不包含任何内容, 叫做空元素, 也叫单标签元素
比如: <img /> <br />
5 元素的关系
针对双标签元素, 主要存在两种关系
-
嵌套关系(父子关系)
-
并列关系(兄弟关系)
-
嵌套关系
2.并列关系
6 常用的HTML元素
HTML文档由元素组成, 认识 HTML 其实就是学习 HTML 中的元素.
常见的 HTML 元素, 大致分为
-
文本相关元素
-
超文本相关元素
-
布局相关元素
-
表单元素
-
表格元素
1) 文本相关元素
标题元素 h
这里有六个标题元素 —— h1~h6
每个元素代表文档中不同级别的内容;
-
h1 表示主标题（the main heading）
-
h2 表示二级子标题（subheadings）
-
h3 表示三级子标题（sub-subheadings）
其基本语法格式如下：
段落元素 p
语法
练习
有这样一段文本, 请按照语义添加合适的元素, 使用网页的结构更清晰
2) 超文本相关元素
超文本主要包括两层含义:
-
超越普通文本, 如多媒体: 图片(img 元素), 音频(audio 元素), 视频(video 元素)
-
超链接, a 元素
超链接元素 a
正是因为超链接元素的存在, 将世界上所有的网页联系在一起, 使互联网成为一个互相联系的网络
作用
超链接可以使我们的文档跳转到任何其他的文档（或其他资源 resource）
语法
基本结构
-
http://blog.brojie.cn/web/html/index.html
-
http://127.0.0.1:5500/01_体验html.html
-
示例
图片元素 img
图片元素允许我们将图片放到网页中, 这样我们的网页就变得漂亮起来
语法
示例
3) 列表元素
列表元素按使用频率可以细分为
-
无序列表(ul: unordered list)
-
有序列表(ol: ordered list)
-
描述列表(dl: description list)
无序列表 ul
表示列表项之间是没有先后顺序的
示例
emmet: ul>li*3>lorem1
有序列表 ol
表示列表项之间是存在先后顺序的
示例
emmet: ol>li{第$项}*3
4) 表单
基本介绍
生活中的表单
在生活中, 比如我们去银行申请信用卡, 我们需要填写一张申请表
4) 表单
基本介绍
生活中的表单
在生活中, 比如我们去银行申请信用卡, 我们需要填写一张申请表
在我们申请email的时候, 我们需要填写用户名, 密码这些信息
像这些申请单在程序里就是以表单的形式的存在的
表单的作用
目的是为了收集用户的信息, 传递给服务器, 在服务器中存储
语法
常用属性：
input元素
语法
<input type=”属性值” value=”你好”>
-
input 输入的意思
-
input是单标签元素
-
type属性设置不同的属性值用来指定不同的控件类型
-
除了type属性还有别的属性
textarea元素
语法
select元素
语法
5) 表格
基本介绍
为了更方便人们的阅读, 对于一些数据以表格的形式展现效果会更好, 比如
还有: 成绩表, 工资表, 人员名单表, 商品清单表等等…
在程序中, 我们使用table来表示
语法
-
table用于定义一个表格标签。
-
tr(table row) 用于定义表格中的行，必须嵌套在 table中
-
th(table head)用于定义表格中的表头, 必须嵌套在tr中
-
td(table data) 用于定义表格中的单元格，必须嵌套在tr中
table的常用属性
示例