点击蓝字 · 关注我
第一节传送门：
首发！Web GIS-前端基础第一讲HTML
写在前面
大家好，上节课一经发布就获得了各路小伙伴们的支持和赞誉，阅读量突破了1000，点赞数和在看数都突破了100，在这里首先感谢大家的支持！会继续更新更好的作品！
经过第一节HTML课程的学习，相信大家已经掌握了HTML中的一些基础标签的使用方法，能够建立简单的表格，能够设置简单的文字和图片，能够建立跳转的超链接等等。有了上一节的基础，在这一节我们将会加入更多有关HTML的内容，没错，这是第二节，也是HTML的最后一节课。
学习过这节课后，大家将会了解和掌握HTML中最常用的标签及属性的使用方法，能够制作简单的网页来表达自己的想法和需求，对于在后续GIS开发过程中展示某时空位置的属性信息已经足够，本节课十分重要，在每个视频后会附上代码，在最后也会把笔记发给大家。最后利用20分钟左右的时间给大家做一个案例教程，制作一个简单的个人网页，以此作为HTML课程的结尾。
本次学习大概使用2小时。
本节目录
01
列表与表单
02
文本格式与颜色格式
03
常用字符实体及网页布局
04
十分钟快速制作静态网页
课程视频
01
列表与表单
列表与表单
示例代码：有序列表、无序列表和自定义列表
<ul> <li> 锅包肉 li> <li> 小鸡炖蘑菇 li> ul> <ol> <li>锅包肉li> <li>小鸡炖蘑菇li> ol> <dl> <dt> <dd>*锅包肉dd> <dd>*小鸡炖蘑菇dd> dt> dl><form> 账号：<input type="text" name="name"> 密码：<input type="password" name="password"> form> <form> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 form> <form> <input type="checkbox" name="jiaotonggongju" value="bike">自行车 <input type="checkbox" name="jiaotonggongju" value="car">私家车 form> <form name="input" action=""> 用户名：<input type="text" name="username"> <input type="submit" value="submit"> form> 地区：<br> <select> <option value="BJ">北京option> <option value="TJ">天津option> <option value="HEB">哈尔滨option> <option value="JN">济南option> select>02
文本格式与颜色格式
视频二：文本格式与颜色格式
示例代码：文本格式与颜色格式
<p> <b>加粗效果b> <i>斜体字i> 100<sup>2sup> 100<sub>2sub> 我今天想<del>吃肯德基，但是没有钱，我最终选择del>吃白菜 p> <p> <font style="font-size:100px;font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'; color: rgba(255,0,0,1.00);">我想吃白菜font> p>
十六进制颜色设置一览表
十六进制与RGB颜色设置一览表
示例代码：设置背景色
<body bgcolor="#D77EED">body>03
常用字符实体及网页布局
视频三：常用字符实体及(表格)网页布局
常用字符实体编码一览表
示例代码：用表格定义网页布局
<html><head><meta charset="utf-8"><title>表格定义布局title>head><body> <table width="500px" border="0"> <tr> <td colspan="2" style="background-color: antiquewhite; text-align: center;"><h1>网页的标题h1>td> tr> <tr> <td style="background-color: aquamarine; width: 100px; vertical-align: top;text-align: center;"> <b>菜单1b><br> <b>菜单2b><br> <b>菜单3b><br> <b>菜单4b><br> td> <td style="background-color: beige;height: 200px; width: 400px;vertical-align: top;"> 这里是内容 td> tr> <tr> <td colspan="2" style="background-color: burlywood; text-align: center;">版权所有，盗版必究td> tr> table> body>html>
成果图1
视频四：用div标签定义网页布局
示例代码：用div定义网页布局
<html><head><meta charset="utf-8"><title>div设置网页布局title>head><body> <div id="container" style="width: 500px;"> <div id="header" style="background-color: antiquewhite;"> <h1 style="margin-bottom: 0; text-align: center">网页标题h1> div> <div id="menu" style="background-color: cyan; height: 200px; width: 100px; float: left;"> <p style="text-align: center;"> <b>菜单1b><br> <b>菜单2b><br> <b>菜单3b><br> <b>菜单4b><br> <b>菜单5b><br> p> div> <div id="content" style="background-color: aquamarine; height: 200px; width: 400px; float: left;"> 这里是内容 div> <div id="footer" style="background-color: darkorange; text-align: center; clear: both;"> <p>版权所有，盗版必究p> div> div>body>html>
成果图1
04
十分钟快速制作静态网页
视频五：十分钟快速制作个人网页
设计样式图
示例代码：制作个人网页
<html><head><meta charset="utf-8"><title>张三的个人主页title> <style> body{ text-align: center; } #container{ margin: 0 auto; } #menu{ margin: -20px auto; text-align: left; } a{ text-decoration: none; } td{ padding: 0 55px 0 55px; } #main{ margin: 20px auto; } #rescent{ margin: 20px auto; } li{ text-align: left; } #story{ text-align: left; text-indent: 2em; } #liuyan{ position: absolute; margin: auto auto auto -623px; } #link{ margin: auto; position: relative; }style> head> <body> <div id="container" style="width: 1200px"> <div id="header" style="background-color: antiquewhite;"> <h1>张三的个人主页h1> div> <div id="menu" style="background-color: azure;height: auto; width: auto; float: left;"> <table cellspacing="20px;"> <tr> <td><a href="#" style="color: #000000;">首页a>td> <td><a href="#" style="color: #000000;">说说a>td> <td><a href="#" style="color: #000000;">相册a>td> <td><a href="#" style="color: #000000;">留言档a>td> <td><a href="#" style="color: #000000;">音乐a>td> <td><a href="#" style="color: #000000;">我的资料a>td> <td><a href="#" style="color: #000000;">其他a>td> tr> table> div> <div id="main" style="height: auto; width: auto; float: left;"> <img src="shuaizhao.jpg" style="width: auto; height: 415px;"> div> <div id="rescent" style="background-color: #000000; width: 570px; float: left;"> <p><font style="color: aliceblue;font-size: 16px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif';"><b>最近动态b>font>p> <div id="data" style="background-color: beige;width: 570px; height: 362px;"> <p align="center"> <ul> <li><b>拍摄时间：b>2021年1月22日li> ul> <ul> <li><b>拍摄地点：b>哈尔滨市道外区红旗大街999号li> ul> <ul> <li><b>天气情况：b>多云转晴，气温较低li> ul> <ul> <li><b>关键词：b>严寒 忧伤 休闲li> ul> p> <p> <b>详细介绍b> p> <p id="story"> 最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。 p> <p> <font style="font-size: 12px;"><b>最后更新：b>2021年1月22日13:58font> p> div> <div id="liuyan" style="background-color: coral; float: left;"> <b>给我留言b> <div id="input"> <textarea rows="8" cols="94" placeholder="在这里写相对我说的话...">textarea> div> <input type="submit" value="提交"> div> <div id="link" style="background-color: greenyellow; width: 570px; height: auto; float: left;"> <b>与我联系b> <div> <table align="center"> <tr> <td><img src="personwx.jpg" style="width: 120; height: 120px;">td> <td><img src="wxgzh.jpg" style="width: 120; height: 120px;">td> tr> <tr> <td><font style="font-size: 12px;">个人微信font>td> <td><font style="font-size: 12px;">@寰寰家公众号font>td> tr> table> div> div> div> body>html>
成果图
课程PPT
本节笔记
列表：
- 无序列表
- 列表的每一项
- 有序列表
- 列表的每一项
-
自定义列表
-
自定义列表的内容项
表单：
表单 从属性定义表单的类型
定义表单区域单选属性类型
复选框属性类型
提交按钮属性类型
下拉列表
字体
font-size font-color
颜色设置：
RGB颜色组成
rgba(255,0,0,)红 0-255 a代表不透明度
十六进制符号表示 #FF0000
十六进制0-10 A B C D E F
字符实体
&+名称/编码
"引号 "
不间断空格
-
自定义列表的内容项
布局设计图
标签 盒子模型
嵌套格式 更注重整体的框架
5个div框架
十分钟快速制作个人主页步骤总结
简单的布局设置
网页布局设计图
创作的代码
<html><head><meta charset="utf-8"><title>张三的个人主页title> <style> body{ text-align: center; } #container{ margin: 0 auto; } #menu{ margin: -20px auto; text-align: left; } a{ text-decoration: none; } td{ padding: 0 55px 0 55px; } #main{ margin: 20px auto; } #rescent{ margin: 20px auto; } li{ text-align: left; } #story{ text-align: left; text-indent: 2em; } #liuyan{ position: absolute; margin: auto auto auto -623px; } #link{ margin: auto; position: relative; }style> head> <body> <div id="container" style="width: 1200px"> <div id="header" style="background-color: antiquewhite;"> <h1>张三的个人主页h1> div> <div id="menu" style="background-color: azure;height: auto; width: auto; float: left;"> <table cellspacing="20px;"> <tr> <td><a href="#" style="color: #000000;">首页a>td> <td><a href="#" style="color: #000000;">说说a>td> <td><a href="#" style="color: #000000;">相册a>td> <td><a href="#" style="color: #000000;">留言档a>td> <td><a href="#" style="color: #000000;">音乐a>td> <td><a href="#" style="color: #000000;">我的资料a>td> <td><a href="#" style="color: #000000;">其他a>td> tr> table> div> <div id="main" style="height: auto; width: auto; float: left;"> <img src="shuaizhao.jpg" style="width: auto; height: 415px;"> div> <div id="rescent" style="background-color: #000000; width: 570px; float: left;"> <p><font style="color: aliceblue;font-size: 16px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif';"><b>最近动态b>font>p> <div id="data" style="background-color: beige;width: 570px; height: 362px;"> <p align="center"> <ul> <li><b>拍摄时间：b>2021年1月22日li> ul> <ul> <li><b>拍摄地点：b>哈尔滨市道外区红旗大街999号li> ul> <ul> <li><b>天气情况：b>多云转晴，气温较低li> ul> <ul> <li><b>关键词：b>严寒 忧伤 休闲li> ul> p> <p> <b>详细介绍b> p> <p id="story"> 最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。最近天气严寒，在家静待多时，不如放松心情出去走走，随手抓拍两张，内心更多的是寒冬的忧伤。 p> <p> <font style="font-size: 12px;"><b>最后更新：b>2021年1月22日13:58font> p> div> <div id="liuyan" style="background-color: coral; float: left;"> <b>给我留言b> <div id="input"> <textarea rows="8" cols="94" placeholder="在这里写相对我说的话...">textarea> div> <input type="submit" value="提交"> div> <div id="link" style="background-color: greenyellow; width: 570px; height: auto; float: left;"> <b>与我联系b> <div> <table align="center"> <tr> <td><img src="personwx.jpg" style="width: 120; height: 120px;">td> <td><img src="wxgzh.jpg" style="width: 120; height: 120px;">td> tr> <tr> <td><font style="font-size: 12px;">个人微信font>td> <td><font style="font-size: 12px;">@寰寰家公众号font>td> tr> table> div> div> div> body>html>成果示例
个人主页成果图
小练习
仿照上面的案例，制作一个个人静态网页，要求整体布局完整，使用HTML且不引用外部CSS文件。
如果觉得有用，望您分享~感激不尽！
您的支持是我更新的最大动力！
寰寰家
微信号｜HuanHuanheart
个人微信｜LIESMARS-WHU
只把最好的干货带给你，做有深度的公众号！
创作不易，望您分享，让更多的人认识和了解GIS！
感激不尽！
求分享
求点赞
求在看
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
