文章目录
前言
客户端（这里指一个浏览器）发送一个 http request（比如我想请求一个 index.html 的资源）到服务端，假设服务器端有这个资源，那服务端会给客户端一个 http response（其中响应中包括等等）。
浏览器端显示这个资源页面，需要用到一些前端技术比如 html、CCS、JavaScript 等
结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里。
表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服。
行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等。
1、HTML名词解释
HTML 是 Hyper Text Markup Language 的缩写。意思是『超文本标记语言』。
2、超文本
HTML 文件本质上是文本文件，而普通的文本文件只能显示字符。但是 HTML 技术则通过 HTML 标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
3、标记语言
说HTML是一种『标记语言』是因为它不是向Java这样的『编程语言』，因为它是由一系列『标签』组成的，是解释型语言，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
（浏览器是容错的）
4、HTML整体框架
4.1 html 标签
html 页面中由一对标签组成：<html> </html>
- <html> 称之为 开始标签
- </html>称之为 结束标签，html 前面的 / 表示结束
4.2 head 标签
head 标签为一对标签：<head> </head>
head 标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、meta标签等等。
title 标签为对标签，表示网页的标题：
- <title> 这里写标题 </title>
meta 标签是一个单标签，比如用 meta 来设置字符集的规范：
- <meta charset=“UTF-8”>
4.3 body 标签
body 标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到 body 标签内。
body 标签也是一对标签：
- <body> 中间是想展示到浏览器的各种页面 </body>
4.4 注释
注释的标准格式：
- <!-- 注释内容 -->
写在一行就是单行注释，写成多行就是多行注释。
4.5 HTML 代码示例
<html>
<head>
<title>这是我的第一个网页</title>
<meta charset="UTF-8">
</head>
<body>
HELLO WORLD!<br/>你好，HTML！
</body>
</html>
其中：
- <br/>是一个换行标签，你自己在 html 文件中打多少换行都没用，页面只能识别标签来换行。
- 单标签：开始标签和结束标签是同一个，斜杠放在单词后面。
4.6 HTML 语法规则
- 根标签有且只能有一个
- 无论是双标签还是单标签都必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值，值必须加引号，单引号或双引号均可
- 标签名不区分大小写但建议使用小写
5、HTML 常用标签
下面列出的是除了上述提到的三个必要的标签之外的其他常用标签：
| 标签名 | 单标签/双标签 | 功能 | 备注 |
|---|---|---|---|
| br | 单 | 换行 | |
| p | 双 | 段落 | |
| a | 双 | 超链接 | 可以设置 href、target 等属性 |
| img | 单 | 图片 | 开始标签中可以设置 src、width、height、alt 等属性 |
| h1~ h6 | 双 | 标题 | |
| ol | 双 | 有序列表 | 开始标签中可以设置 start、type 等属性，<li>列表的一项</li> |
| ul | 双 | 无序列表 | 可以设置 type 属性 |
| u/b/i | 双 | 下划线/加粗/斜体 | 可以嵌套但不能交叉嵌套 |
| sub/sup | 双 | 下标/上标 | |
| div/span | 双 | 换行块标记/不换行块标记 | 为了方便结合CSS对页面进行布局 |
5.1 各标签使用代码示例
<html>
<head>
<title>这是我的第一个网页</title>
<meta charset="UTF-8">
</head>
<body>
HELLO WORLD!<br/>你好，HTML！
<p>这里是一个段落</p>
<p>这里是第二个段落</p>
<img src="imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
<h1>标题一</h1>
<h2>标题一</h2>
<h3>标题一</h3>
<h4>标题一</h4>
<h5>标题一</h5>
<h6>标题一</h6>
武林高手排行榜:
<ol type="i" start="3">
<li>扫地僧</li>
<li>萧远山</li>
<li>慕容博</li>
<li>虚竹</li>
<li>阿紫</li>
</ol>
武林大会人员名单：
<ul type="circle">
<li>乔峰</li>
<li>阿朱</li>
<li>马夫人</li>
<li>白世镜</li>
</ul>
你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？
<br/>
水分子的化学式： H<sub>2</sub>O <br/>
一个圆的方程式： x<sup>2</sup>+y<sup>2</sup>=1 <br/>
5<10
10>5
5≤10
10≥5
<br/>
注册商标 ®
版权符号 ©
<span>赵又廷</span>，夺妻之仇。
<br/>
<a href="http://www.baidu.com" target="_top">百度一下</a>
</body>
</html>
5.2 网页展示
5.3 标签备注展开介绍
-
img 图片标签
- src 属性表示图片文件的路径
- width和height表示图片的大小
- alt表示图片的提示
-
路径的问题：
- 相对路径：相对于当前 demo01.html 这个文件的目录开始的（示例代码中使用的是相对路径）
- 绝对路径：从盘符开始写的路径（推荐使用）
-
列表标签:
- ol 有序列表（ordered list）
- start 表示从几号开始开始
- type 显示的类型：A a I i 1(deafult)
- ul 无序列表（unordered list）
- type 显示的类型：disc(default) , circle , square
- ol 有序列表（ordered list）
-
a 表示超链接
- href 链接的地址
- target:
- _self 在本窗口打开
- _blank 在一个新窗口打开
- _parent 在父窗口打开
- _top 在顶层窗口打开-
-
HTML中的实体（这个用到的时候直接去查百度就可以了）：
- 小于号 <
- 大于等于号 &ge
- 版权 ©
6、HTML 展示表格
6.1 常用标签和属性
-
表格标签 table
- 行 tr
- 列 td
- 表头列 th
-
table中有如下属性（虽然已经淘汰，但是最好了解一下）
- border：表格边框的粗细
- width：表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
-
tr中有一个属性：
- align -> center , left , right
-
td 的属性，用于合并单元格：
- rowspan : 行合并
- colspan : 列合并
6.2 代码示例
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
<tr align="center">
<td>乔峰</td>
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center">
<td>虚竹</td>
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center">
<td>扫地僧</td>
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
<hr/> <!-- 表示加一条线-->
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
</body>
</html>
6.3 网页展示
7、HTML 展示表单
7.1 常用标签和属性
-
表单 <form> … </form>
- action 属性表示一个可以正确接收表单数据的地址，这里还没有具体的服务器端环境，即还没和后台交互，所以用一个 html 浏览器来代替；
- method 属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。
-
name属性必须要在表单中的每一项进行指定，否则这个文本框的数据将来是不会发送给服务器的
-
input type=“text” 表示文本框
-
input type=“password” 表示密码框
-
input type=“radio” 表示单选按钮。需要注意的是：
- name 属性值保持一致，这样才会有互斥的效果，才能显示出单选的效果；
- 可以通过 checked 属性设置默认选中的项，checked=“checked”，当属性名和属性相同的时候，可以省略属性名。
-
input type=“checkbox” 表示复选框
- name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组。
-
select 表示下拉列表
- 每一个选项是 option，其中 value 属性是发送给服务器的值；
- selected 属性表示默认选中的项，这里的 selected 由于属性名和属性值相同可以省略属性名。
-
textarea 表示多行文本框（或者称之为文本域）
- 它的 value 值就是开始结束标签之间的内容；
- 可以设置占用多少行和多少列即 rows 和 cols 属性。
-
input type=“submit” 表示提交按钮
-
input type=“reset” 表示重置按钮
-
input type=“button” 表示普通按钮
7.2 代码示例
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<form action="demo04.html" method="post">
昵称：<input type="text" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/><!--checked="checked",当属性名和属性相同的时候，可以省略属性名-->
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
星座：<select name="star"><!--这里页面上看到的是汉字，其实发给服务器的是value值-->
<option value="1">白羊座</option>
<option value="2" selected>金牛座</option>
<option value="3">双子座</option>
<option value="4">天蝎座</option>
<option value="5">天秤座</option>
</select><br/>
备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
<input type="submit" value=" 注 册 "/>
<input type="reset" value="重置"/> <!--恢复到网页默认属性-->
<input type="button" value="这是一个普通按钮"/>
</form>
</body>
</html>
7.3 网页展示
填写一组信息并且点击“注册”按钮之后展示的新页面：
注意：
- 这里昵称输入文本框没有加 name 属性，填写一组信息并且注册，观察上面浏览器接收到的表单数据，是没有昵称这一项的；
- 这里点击“重置”按钮是恢复到网页默认属性；
- 对于星座 star ，这里页面上看到的是汉字，其实发给服务器的是定义的属性 value 值。
扫一扫
1705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
