本文介绍了WebGIS学习的基础，重点讲解了HTML5和CSS3在构建网页时的作用。HTML5包括结构（如HTML）、表现（CSS）和行为（JavaScript）三个方面。文章详细阐述了文档类型声明、语言种类、字符集以及常用HTML标签如段落、换行、文本格式化、图像、超链接、特殊字符、表格、列表和表单的相关知识，强调了这些元素在网页开发中的重要性。
webgis学习笔记——html5+css3
html基础学习
web标准
web标准的构成：主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。 |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript |
网页开发工具
1.文档类型声明：<!DOCTYPE>文档类型声明，作用据说告诉浏览器使用哪个HTML版本来显示网页。
<!DOCTYPE html>
意思：当前页面采取的是HTML5版本来显示网页
2. lang语言种类
用来定义当前文档显示的语言
(1) en定义语言为英语（英文网页）
(2) zh-CN定义语言为中文（中文网页）
3.字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
在标签内，可以通过标签的charset属性来规定文档应该使用哪种字符编码。
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家小用到的字符。
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码。
html常用标签
1. 段落标签<p></p>
2. 换行标签<br/>
（是break的缩写），标签语义：强制换行
特点：
（1.）是单个标签
（2.）标签只是简单地开始新的一行，跟段落不一样，段落间插入一些垂直的间距。
3. 文本格式化标签
有粗体、斜体、下划线 等。语义：突出重要性！
- 加粗：
<strong></strong>或者<b></b>（推荐使用<strong></strong>） - 倾斜：
<em></em>或者<i></i>（推荐使用<em></em>） - 删除线：
<del></del>或者<s></s>（推荐使用<del></del>） - 下划线：
<ins></ins>或者<u></u>（推荐使用<ins></ins>）
4. <div>和<span>标签
两者没有语义，就是一个盒子，用来装内容，用来布局网页。
（div是division的缩写，表示分割、分区；span意为跨度、跨距）
特点：
1、<div>标签用来布局，现在一行只能放一个<div>，大盒子。
2、<span>标签用来布局，一行可以放多个<span>，小盒子。
5. 图像标签和图像路径
1、图片标签
在html中，<img>标签用于定义html页面中的图像
<img src="图像URL"/>
src是<img>的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是这个图像标签的特性。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图片不能显示的文字 |
| title | 文本 | 提示文字。鼠标放到图像上，显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
2、路径
（1）相对路径
eg：相对于HTML页面的路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如<img src="baidu.gif" | |
| 下一级路径 | / | 图像文件位于HTML文件同一级，如<img src="images/baidu.gif" |
| 上一级路径 | …/ | 图像文件位于HTML文件同一级，如<img src="../baidu.gif" |
（2）绝对路径
绝对路径：是指目录下的绝对路径，直接到达的目标位置，通常从盘符开始的路径。
eg："D:\web\img.png"或者完整的网络地址：“http://www.itcast.cn/images/logo.gif”。
6. 超链接标签
在html标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
1、链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
单词anchor的缩写，意为：锚。
其属性作用：
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，具有超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值（当前窗口打开页面），_blank为在新窗口中打开方式。 |
2、链接分类
（1）外部链接：eg<a href="http://www.baidu.com">百度</a>
（2）内部链接：网页内部之间的相互链接，直接链接内部页面名称即可，eg:<a href="index;html">首页</a>
（3）空链接：如果当时没有确定链接目标时，<a href="#">守夜</a>
（4）下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。eg：<a href="img.zip">下载文件</a>
（5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。eg：<a href="http://www.baidu.com><img src="img.jpg"/></a>
（6）锚点链接：当我们点链接，可以快速定位到页面中的某个位置。
- 在链接文本中的href属性中，设置属性值为#名字的形式，如
<a href="#two">第二季</a> - 找到目标位置标签，里面添加一个id属性=刚才的名字，如：
<h3 id="two">第二季介绍</h3>
7、特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| x | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
8. 表格标签
1、表格的主要作用
表格主要用于显示、展示数据，它让数据显示的非常完整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。
2、表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
（1）<table></table>是用于定义表格标签。
（2）<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
（3）<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
（4）字母td指表格数据（table data），即数据单元格的内容。
3、表头单元格标签
一般表头单元格位于表格的第一列或第一行，表头单元格里面的文本内容加粗居中显示。
其中<th></th>标签表示html表格的表头部分（table head）
4、表格属性
这部分属性一般不常用，通过css来设置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对于周围元素对齐方式 |
| border | 1或"" | 规定是否有边框，默认""无边框 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白 |
| cellspacing | 像素值 | 规定单元格之间的空白 |
| width | 像素值或百分比 | 规定表格的宽度 |
5、表格结构标签
分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域，这样可以更好的愤青表格结构。
（1）<thead></thead>：用于定义表格头部，<thead>内部必须拥有<tr>标签。一般是位于第一行。
（2）<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
6、合并单元格
合并单元格的方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码） - 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三步曲：
（1）先确定跨行还是跨列合并。
（2）找到目标单元格，写上合并的单元格数量。比如：<td colspan="2"></td>。
（3）删除多余的单元格。
9. 列表标签
1、无序列表
<ul>标签表示HTML页面中项目无序列表，一般以项目符号呈现列表项，列表项以<li>标签定义。
语法：
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
...
</ul>
（1）无序列表的各个列表项之间没有顺序级别之分，是并列的。
（2）<ul></ul>中只能嵌套<li></li>标签，直接在<ul></ul>中输入其他标签或者文字的做法是不被允许的。
（3）<li>与</li>之间相当于一个容器，可以容纳所有元素。
（4）无序列表会带有自己样式的属性，但在实际使用中，我们会使用css来设置。
2、有序列表
<ol>标签表示HTML页面中项目有序列表，列表顺序以数字来显示，列表项以<li>标签定义。
语法：
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
...
</ul>
（1）<ol></ol>中只能嵌套<li></li>标签，直接在<ol></ol>中输入其他标签或者文字的做法是不被允许的。
（2）<li>与</li>之间相当于一个容器，可以容纳所有元素。
（3）有序列表会带有自己样式的属性，但在实际使用中，我们会使用css来设置。
3、自定义列表
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起用。
语法：
<dl>
<dt>列表1</dt>
<dd>列表2</dd>
<dd>列表3</dd>
...
</dl>
（1）<dl></dl>里面只能包含<dt>和<dd>。
（2）<dt>和<dd>个数没有限制，通常一个<dt>对应多个<dd>。
10. 表单标签
1、表单组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3部分构成。
2、表单域
是一个包含表元素的区域。
在HTML标签中，<form>标签用于表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用的属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单名称，以区分同一个页面中的多个表单域 |
3、表单元素
（1）<input>表单元素
在表单元素中<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input type="属性值" />
<input>标签为单标签- type属性设置的不同属性值用来指定不同的控件类型。
type属性的属性值及其描述：
| 属性值 | 描述 |
|---|---|
| button | 定义可点按钮（多数情况下，通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图形形式的提交按钮 |
| password | 定义密码字段。该字段中的字符被掩码 |
| radio | 定义单选按钮（单选按钮必须有相同的name，才能实现多选一） |
| reset | 定义重置按钮 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。 |
除type之外，<input>的其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称，主要作用是区别不同的表单。 |
| value | 由用户自定义 | 定义input元素值 |
| checked | checked | 规定此input元素首次加载时应当被选中。（默认勾选） |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
（1）name和value是每个表单元素都有的属性值，主要给后台人员使用。
（2）name表单元素的名字，要求单选框和复选框要有相同的name值。
（3）checked属性主要针对于单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素。
（4）maxlength是用户可以在表单中输入的最大字符数，一般少用。
eg：
<form>
用户名：<input type="text" name="user" value="请输入名字"><br>
密码：<input type="password" name="pwd"><br>
性别：男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio"name=sex value="女"><br>
爱好：打篮球<input type="checkbox" name="hobby" value="打篮球" checked="checked"> 跳舞<input type="checkbox" name="hobby" value="跳舞" checked="checked">唱歌<input type="checkbox"name="hobby" value="唱歌" checked="checked">
</form>
4、<label>标签
<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：
<label for="sexx">男</label>
<input type="radio" name="sex" id="sexx">
核心：<label>标签的for属性应当与相关元素的id属性相同。
4、select下拉表单元素
使用场景：在页面中，日过有多个选项让用户选择，并且想要节约页面空间，可以使用<selecr>标签定义下拉列表。
语法：
<form>
<select>
<option>..</option>
<option>..</option>
<option>..</option>
...
</select>
</form>
（1）<select>中至少有一对<option>。
（2）在<option>中定义selected="selected"时，当前项即为默认选中项。
5、<textarea>文本域表单元素
使用场景：当用户输入较多内容的情况下，可以用此标签。
在表单元素中<textarea>可以定义多行文本输入的控件，可以输入更多文字。该控件常见于留言板，评论。
语法：
<textarea rows="3" cols="20">
文本内容
</textarea>
（1）通过<textarea>标签创建多行文本输入
（2）cols和rows不会使用，用css来改变大小。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
