文章目录

前言
1、HTML名词解释
2、超文本
3、标记语言
4、HTML整体框架
- 4.1 html 标签
- 4.2 head 标签
- 4.3 body 标签
- 4.4 注释
- 4.5 HTML 代码示例
- 4.6 HTML 语法规则
5、HTML 常用标签
- 5.1 各标签使用代码示例
- 5.2 网页展示
- 5.3 标签备注展开介绍
6、HTML 展示表格
- 6.1 常用标签和属性
- 6.2 代码示例
- 6.3 网页展示
7、HTML 展示表单
- 7.1 常用标签和属性
- 7.2 代码示例
- 7.3 网页展示

前言

客户端（这里指一个浏览器）发送一个 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&lt;1010&gt;55&le;1010&ge;5<br/>注册商标 &reg;版权符号 &copy;<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
a 表示超链接
- href 链接的地址
- target:
  - _self 在本窗口打开
  - _blank 在一个新窗口打开
  - _parent 在父窗口打开
  - _top 在顶层窗口打开-
HTML中的实体（这个用到的时候直接去查百度就可以了）：
- 小于号 &lt
- 大于等于号 &ge
- 版权 &copy

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 值。

（尚硅谷）JavaWeb新版教程01-HTML相关推荐

尚硅谷最新版JavaScript基础全套教程完整版（p79-p90）
尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) 一.函数的方法 1.call()和 apply()方法 -这两个方法都是函数对象方法,需要通过函数对象来调用 ...
尚硅谷Nginx新版升级教程，带你轻松掌握高并发系统架构
摘要:桃李春风一杯酒,江湖夜雨十年灯. "你说有没有一种可能, "你喜欢我,又不好意思说出口, "其实你可以直接说出来的, "我会让你知道什么叫心想事成.&qu ...
04 frameset-iframe【尚硅谷JavaWeb教程】
04 frameset-iframe[尚硅谷JavaWeb教程] JAVAWEB的学习笔记学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd ...
06 CSS-盒子模型【尚硅谷JavaWeb教程】
06 CSS-盒子模型[尚硅谷JavaWeb教程] JAVAWEB的学习笔记学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source ...
JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
目录前言 JavaScript(基础+高级)配套资料下载 JavaScript 基础学习地址学习笔记 day 05(P001-P006)[2016.11.22] day 06(P007-P ...
尚硅谷Docker实战教程-笔记02【安装docker、镜像加速器配置】
尚硅谷大数据技术-教程-学习路线-笔记汇总表[课程资料下载] 视频地址:尚硅谷Docker实战教程(docker教程天花板)_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01[理念简介 ...
尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
尚硅谷Redis6基础教程-秒杀案例中库存遗留问题
尚硅谷redis6基础教程中视频24-27的秒杀案例,使用Redis乐观锁解决了超卖问题,但是也产生了库存遗留问题.引入Lua脚本,解决了超卖和库存遗留.Lua脚本为什么解决了库存遗留问题???
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
（尚硅谷）JavaWeb新版教程09-QQZone项目总结
目录 1.日期和字符串之间的转化 1.1 JDK 8 之前的 Date 日期的格式转换 1.2 JDK 8之后 LocalDateTime 新日期的格式转换 1.3 Thymeleaf 中将 Date ...

（尚硅谷）JavaWeb新版教程01-HTML