【干货】新中地GIS开发夏令营文档（2）HTML快速上手
第二章: 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的常用属性
示例
