week9 day1 HTML简介和常用标签
一、前端内容介绍
浏览器窗口输入网址回车发生了几件事：
-
浏览器朝服务端发送请求
-
服务端接受请求（请求百度网页）
-
服务端返回相应的响应（返回一个百度网页）
-
浏览器接收响应，按照特定的标准渲染后展示在浏览器上
浏览器可以充当很多服务端的客户端：百度、腾讯视频、优酷视频…
如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
-
浏览器很牛逼，能够自动识别不同的服务端做不同的处理
-
制定一个统一的标准（HTTP）。如果你想要让你写的服务端和客户端之间能够做正常的数据交互那么你就必须要制定一些规则
HTTP超文本传输协议：用来规定服务端和浏览器之间的数据交互格式。
（为什么要有HTTP？？？浏览器只有一个，但是需要兼容N多个服务端）
HTTP协议的四大特性：
- 基于请求相应
- 基于TCP/IP作用于应用层之上的协议
- 无状态
不保存用户信息。eg、一个人来了一起一千次，你都记不住，每次都当他如初见。由于HTTP协议是无状态的，所以后续出现了一些专门来记录用户状态的技术，比如：cookie、session、token- 无/短链接
请求来一次我响应一次，之后我们两个就没有链接和关系了
长链接：双方建立连接之后默认不断开 websocket（后面将项目的时候会讲）
请求数据格式（四部分。请求首行、请求头、\r\n、请求体）
- 请求首行（标识HTTP协议版本，当前请求方式）
- 请求头（一大堆key：value较键值对）
- \r\n（必须有）
- 请求体（并不是所有的请求方式都有get没有post，请求提交敏感数据存放的是post）
响应数据格式（同样四部分）
- 响应首行（标识HTTP协议版本，响应状态码）
- 响应头（一大堆key：value键值对）
- \r\n
- 响应体（返回给浏览器展示给用户看的数据）
响应状态码
用一些简单的数字来表示一些复杂的状态或者描述性信息
eg、404：请求资源不存在
- 1xx：服务端已经成功接收到了你的数据正在处理。你可以继续提交
- 2xx：服务端成功响应了你的数据（200 OK请求成功）
- 3xx：重定向（当你在访问一个需要登陆之后才能看到的页面，你会发现自动跳转到了登陆页面）
- 4xx：请求错误。404请求资源不存在；403当前请求不合法或者不符合资源的条件
- 5xx：服务器内部错误（500）
请求方式：
- get
朝服务端要数据。eg、输入网址获取对应的内容- post
朝服务端提交数据。eg、用户登录，输入用户名和密码之后，提交到服务端后端做身份校验
URL：统一资源定位符（大白话：网址）
二、HTML简介
2.1 HTML简介
用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件（即网页文件）内容下载到本地，然后打开显示的过程。
而文本文件的文档内容只有空格和换行两种组织方式，如此，文本文件在打开显示时，显示的效果将会非常非常非常的单一，为了让显示的效果不那么单调，我们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部分内容，然后为内容打上不同的标记，比如什么是标题，什么是段落，然后存放硬盘里，等下次打开时，word会识别之前的标记，然后按照预先编排好的结果显示出来。
站在显示文本内容的角度去看，浏览器与word的原理一样，我们可以将浏览器当成一个网页版的只读word，浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为HTML，HTML全称是超文本标记语言（HyperText Markup Language）。“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签。
2.2 HTML发展史
超文本标记语言（第一版）：在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准），后来陆续由w3c制定标准
IETF简介
IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等
W3C简介
W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。
Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人
目前最常用的两种文档类型是 xhtml 1.0 和 html5，pc端两种都可以，而且html5是向下兼容的。
-
xhtml1.0文档类型创建的快捷方式 html:xt + tab
<!--文档示范--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>xhtml1.0文档类型</title> </head> <body> </body> </html> -
html5文档类型创建的快捷方式： html:5 + tab 或者 ! + tab
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html5文档类型</title> </head> <body> </body> </html> -
HTML5和XTML的区别
#1、XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起，img必须要加alt属性(对图片的描述) 等等; #2、HTML5是HTML的下一个版本所以除了非常宽松容错性强（可以选择性遵守xhtml制定的文档编写规范）以外,还增加许多新的特性
三、HTML标签与文档结构
3.1 HTML标签与文档结构
一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容，而HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，所以HTML部分是整个前端的基础，我们学习HTML主要就是学习的HTML标签。
-
那什么是标签呢？
#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签， #2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。 #3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/> -
HTML中的标签存放于文本文件中，需要按照下述固定的文档结构组织：
<!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
| 标签代码 | 标签名 | 作用 |
|---|---|---|
<!DOCTYPE HTML> | 文档声明 | 必须写在HTML文档的第一行，位于标签之前，表明该文档是HTML5文档。 |
<html></html> | 根标签 | 所有的网页标签都在中。HTML的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析,不定义也没什么影响。根据 W3C 推荐标准，您应该通过 标签中的 lang 属性对每张页面 中的主要语言进行声明，比如： |
<head></head> | 头部标签 | 用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义 |
<body>和</body> | 展示网页内容的标签 | 之间的内容是网页的主要内容，最终会在浏览器中显示出来。 |
- 标签之间的关系
- 并列（兄弟/平级）head与body
- 嵌套（父子/上下级）html内有head和body
3.2 HTML标签详细语法与注意点
标签的语法：
<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>
标签注意事项：
1、记号/标签是不会在浏览器中显示出来的，只是对内容做标记。
2、标签只是用来做记号而不负责控制样式：虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，HTML的作用只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一种解耦合的思想
3. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。
4. HTML中有部分标签是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>
3.3 HTML中标签分类
单从是否可以嵌套子标签的角度来分，标签分为两类：
-
容器类标签
容器类标签可以简单理解为能嵌套其他所有标签的标签。
常见的容器类型标签：h系列 <ul><li></li></ul> <ol><li></li></ol> <dl> <dt></dt> <dd></dd> </dl> <dic></div> -
文本类标签
文本级的标签对应容器类标签，只能嵌套文字/图片/超链接的标签。p span strong em ins del
3.4 HTML注释
无论我们学习什么编程语言，一定要重视的就是注释，HTML中注释的格式:
<!--这里是注释的内容-->
注意： 注释中可以直接使用回车换行。
并且我们习惯用注释的标签把HTML代码包裹起来。如：
<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
HTML注释的注意事项：
- HTML注释不支持嵌套
- HTML注释不能写在HTML标签中
四、head内常用标签
- meta相关
| 标签 | 意义 |
|---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部样式表 |
<script></script> | 定义JS代码或引入外部JS文件 |
<link/> | 引入外部样式表文件或网站图标 |
<meta/> | 定义网页原信息 |
Meta标签介绍：
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
# 1 指定字符集
<meta charset='utf-8'>
# 2 页面描述
<meta name='Description' content='这是个学习网站'>
# 3 关键字：有助于搜索引擎SEC优化，再怎么优化也敌不过竞价排名
<meta name='Keywords' content='网易，邮箱，游戏，新闻'>
# 4 3秒后跳转
<meta http-equiv='refresh' content='3,https://www.baidu.com'>
# 5 3秒刷新
<meta http-equiv='refresh' content='3'>
- 非meta标签
# 1 标题 <title>百度一下，你就知道</title> # 2 网站的图标 <link rel="icon" href="https://www.baidu.com/favicon.ico"> # 3 定义内部样式 <style></style> # 4 引入外部css样式文件 <link rel='stylesheet' href='mystyle.css'> # 5 定义JavaScript代码或引入JavaScript文件 <script src='hello.js'></script>
五、body内常用标签
5.1 HTML语义化
body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的。
虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情，而且在布局的时候多使用语义化的标签，会方便搜索引擎在爬取网页文件时更好地解析文档结构，从而进行收录。
对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，都是用来修改样式的
# 1 <br> 换行
111
<br>
222
333
# 2 <hr> 分割线
# 3 <font> 修改文字大小，颜色
<font color="red" size="10px">我是哈哈哈</font>
# 4 <strong> 定义重要强调的文字 原：<b>
<strong>论颜值，我秒杀宇宙</strong>
# 5 <ins> 定义插入的文字 原：<u>
# 6 <em> 定义强调的文字 原：<i>
# 7 <del> 定于被删除的文字 原：<s>
div和span标签都是没有语义的标签，在css中讲解
-
dic用来标记一块内容，没有具体的语义
-
span用来标记一行中的一小段内容，也没有具体的语义
5.2 字符实体
#1、在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理
#2、字符实体指的是
在HTML中，有的字符是被HTML保留的比如<>。有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体，如下
| 内容 | 代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版权 | © |
| 注册 | ® |
5.3 h 系列标签
语义：标记内容为一个标题，全称headline
h 系列标签从h1-h6共6个，标记内容为1-6级标题，h1用作主标题（代表最重要的），其实是 h2
虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon才华无敌</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>没有七级标题</h7>
没有七级标题
</body>
</html>
注意：在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑，搜索引擎会使用标题将网页的结构和内容编制索引）,比如www.163.com。
5.4 p 标签
语义：标记内容为一个段落，全称paragraph
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon无敌</title>
</head>
<body>
<h1>Egon</h1>
<p>论颜值，鹤立鸡群</p>
<p>论才华，天下无敌</p>
</body>
</html>
5.5 img 标签
语义：标记一个图片，全称image
# 1 用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容"/>
#2、注意
2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 alt="图片加载失败时显示的内容" 为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。
2.4 title = "鼠标悬停到图片上时显示的内容"
2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形
那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可
只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形
5.6 a 标签
语义：标记一个内容为超链接，全称anchor，锚
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
#2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="template/aaa.html">锤你胸口</a>
2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆，
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容"
-
假链接
1. 什么是假链接？ 就是点击之后不会跳转的链接 2. 假链接存在的意义？ 在企业开发早期，其他页面还没有写出来，那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替 3. 假链接的定义格式 1. href='#'：会自动跳转到页面顶部 2. href='javascript'不会跳转到顶部 -
页面内锚点
- 要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到的目标位置
- 如何为HTML中的标签绑定一个独一无二的身份证号码呢？
在HTML中每一个标签都有一个名称叫做id的属性。这个属性就是用来给标签指定一个独一无二的身份证号码的 - 所以想实现通过a标签跳转到指定的位置，分为两步
第一步给目标位置的标签添加一个id属性，然后指定一个独一无二的值<h id='独一无二'></h>
第二步告诉标签a你需要跳转到的目标标签对应的id是多少<a href='#独一无二'>链接的名字</a> - a标签除了可以跳转到当前页面，还可以跳转到其他页面的指定位置
-
跳到首页
# 1 跳转到首页 <a href="">刷新页面，回到顶部，人类感觉不出来区别</a> <a href='#'>回到顶部</a> # 2 注意点： 通过我们的a标签跳转到指定的位置，是没有过度动画的 是直接一下子就跳转到了指定位置,比如京东主页 如果跳到首页需要过渡动画，则不用a标签做，比如天猫主页
<!--
<a href="">刷新页面，回到顶部</a> 刷新页面，人类感觉不出来区别
<a href="#">回到顶部</a>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p id="sb1">alex是个大SB</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p id="sb2">wxx是个大SB</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<p>我上山是虎，我下海是龙</p>
<a href="#sb1">找第一个SB</a>
<br>
<a href="#sb2">找第一个SB</a>
<br>
<a href="#">不刷新，跳回首页</a>
<br>
<a href="">刷新，跳回首页</a>
</body>
</html>
页面锚点+跳回首页练习
5.7 列表标签
语义：标记一堆数据是一个整体/列表
html中列表标签分为三种
-
无序列表（列表标签中使用最多的一种，非常重要）：unordered list
#1、作用： 制作导航条、商品列表、新闻列表等 #2、组合使用ul>li <ul> <li>秒杀</li> <li>优惠券</li> <li>PLUS会员</li> <li>闪购</li> <li>拍卖</li> <li>京东服饰</li> <li>京东超市</li> <li>生鲜</li> <li>全球购</li> <li>京东金融</li> </ul> #3、ul标签的属性type（这属于列表的样式，所以了解即可） type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识 可以通过css直接去掉小圆点 <style type="text/css"> ul { list-style: none; } </style> #4、注意 ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签无序列表的练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>物品清单</h1> <ul> <li> <h2>蔬菜</h2> <ul> <li>西红柿</li> <li>花瓜</li> <li>芹菜</li> </ul> </li> <li> <h2>水果</h2> <ul> <li>香蕉</li> <li>菠萝</li> <li>火龙果</li> </ul> </li> </ul> </body> </html> 无序列表练习 -
有序列表（极少使用）
<h1>智商排名</h1> <ol> <li>Egon</li> <li>刘清正</li> <li>武佩奇</li> <li>alex</li> <li>元昊</li> </ol> <!--有序列表能干的事，完全可以用无序列表取代--> <h1>智商排名</h1> <ul style="list-style: none"> <li>1. Egon</li> <li>2. 刘清正</li> <li>3. 武佩奇</li> <li>4. alex</li> <li>5. 元昊</li> </ul> -
自定义列表（也会经常使用）
-
作用分析
选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
无序列表：内容是并列的,没有先后顺序
有序列表：内容是有先后顺序的
自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框 -
自定义列表也是一个组合标签：dl>dt+dd
dl:defination list，自定义列表
dt：defination title，自定义标题
dd：defination description，自定义描述 -
注意: 3.1 dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签 3.2 一个dt可以可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd
<dl> <dt>自定义标题1<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> <dt>自定义标题2<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> <dt>自定义标题3<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> </dl><dl> <dt><h5>购物流程</h5></dt> <dd>购物流程</dd> <dd>会员介绍</dd> <dd>生活旅行</dd> <dt><h5>配送方式</h5></dt> <dd>上门自提</dd> <dd>211限时达</dd> <dd>配送服务查询</dd> <dt><h5>支付方式</h5></dt> <dd>货到付款</dd> <dd>在线支付</dd> <dd>分期付款</dd> </dl> -
5.8 table 标签
语义：标记一段数据为表格
5.8.1 表格基础
# 1 作用
表格标签是一种数据的展示方式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
# 2 格式
<table>
<th></th>
<tr>
<td></td>
</tr>
</table>
tr代表表格中的一行数据；td代表表格中的一个普通单元格；th代表表头
# 3 注意点
表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性为0，所以看不到边框
<table border="1px" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white" >
<td>Egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>ALex</td>
<td>male</td>
<td>73</td>
</tr>
<tr bgcolor="white">
<td>Wxx</td>
<td>female</td>
<td>84</td>
</tr>
</table>
小练习
5.8.2 表格属性
表格属性（了解）
-
宽度和高度
可以给table和td设置width和height属性-
默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高
-
如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度
-
-
水平对齐和垂直对齐
水平对齐align可以给table、tr、td标签设置
垂直对齐valign只能给tr、td标签设置----------------------水平对齐-----------------------
取值
align=“left”
align=“center”
align=“right”2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
强调：table只能设置水平方向2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
-----------------------垂直对齐------------------------
取值
valign=“top”
valign=“center”
valign=“bottom”2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐 -
外边距和内边距
只能给table设置3.1 外边距：单元格与单元格之间的间隔，cellspacing=“3px”，默认值为2px
3.2 内边距：单元格边框与文字之间的距离:cellpadding=“200px”
三种方式细线表格
-
方式一
在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px"> <tr bgcolor="white"> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table> -
方式二
细线表格的制作方式：
1、给table标签设置bgcolor
2、给tr标签设置bgcolor
3、给table标签设置cellspacing=“1px”注意：
table、tr、td标签都支持bgcolor属性<table width="200px" height="200px" bgcolor="black" cellspacing="1px"> <tr bgcolor="white"> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table> -
方式三（style=“border-collapse: collapse;border: 1px solid red”）
<table border="1px" style="border-collapse: collapse;border: 1px solid red"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr> <td>alex</td> <td>female</td> <td>19</td> </tr> </table>
5.8.3 表格的结构
为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：
-
表格的标题:caption
特点:相对于表格宽度自动居中对齐
注意:
1.1 该标签一定要写在table标签里，否则无效
1.2 caption一定要紧跟在table标签内的第一个 -
表格的表头信息:thead
特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字 -
表格的主体信息:tbody
注意：
3.1 如果没有添加tbody，浏览器会自动添加
3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着
表格的高度变化而变化 -
表尾信息:tfoot
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">
<caption>学员信息统计</caption>
<thead>
<tr bgcolor="white">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
5.8.4 单元格合并
-
水平向上的单元格colspan
可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待<td colspan="2"></td> -
垂直向上的单元格rowspan
可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
注意注意注意:
-
由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格
-
一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
5.8.5 传统布局
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
-
定义表格宽高，将border、cellpadding、cellspacing全部设置为0
-
单元格里面嵌套表格
-
单元格中的元素和嵌套的表格用align和valign设置对齐方式
-
通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
-
快速制作用于演示的html页面
-
商业推广EDM制作(广告邮件)
5.8.6 练习
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon无敌</title>
<base target="_blank">
<style>
</style>
</head>
<body>
<table border="0" cellspacing="1" bgcolor="#D7A7EE" width="500px" height="200px">
<tr bgcolor="white">
<td colspan="3" align="center">星期一菜谱</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">素菜</td>
<td>情操茄子</td>
<td>花椒扁豆</td>
</tr>
<tr bgcolor="white">
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">荤菜</td>
<td>油焖大虾</td>
<td>海参鱼翅</td>
</tr>
<tr bgcolor="white">
<td>
红烧肉<img src="hsr.jpeg" alt="">
</td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon无敌</title>
<base target="_blank">
</head>
<body>
<table border="0" cellspacing="1" bgcolor="blue" width="500px" height="200px">
<caption>课程表</caption>
<tr bgcolor="white" align="center">
<td>项目</td>
<td colspan="6">上课</td>
<td align="center">休息</td>
</tr>
<tr bgcolor="white" align="center">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr bgcolor="white" align="center">
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</td>
</tr>
<tr bgcolor="white" align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr bgcolor="white" align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr bgcolor="white" align="center">
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
</tr>
<tr bgcolor="white" align="center">
<td rowspan="2">下午</td>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr bgcolor="white" align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
5.9 form 标签
语义：标记表单
-
什么是表单？
表单就是专门用来接收前端用户数据（用户输入或者采集用户信息）发送给服务端的工具。 -
表单的格式
<form> <表单元素> </form>
# 补充知识
在form内还可以添加一种标签
<fieldset>添加边框
<legend>注册页面</legend>
表单控件......
</fieldset>
练习：
<html>
<head>
<title>表单练习</title>
<meta charset="utf-8"/>
</head>
<body>
# 控制用户提交的后端路径（给哪个服务器提交数据）
1. 什么都不写 默认就是朝当前页面提交所在的URL提交数据
2. 写全路径:https:www.baidu.com 朝百度服务端提交
3. 只写路径后缀action='/index/'自动识别出当前服务器的ip和port拼接到前面 host:port/index/
<form action="http://www.baidu.com">
<fieldset>
<legend>注册页面</legend>
# 通过label的id可以点击文本进入输入框
<p><label for='d1'>
账号：<input type="text" id='d1' placeholder="请输入你的用户名" name="user"></label>
</p>
<p>
密码：<input type="password" placeholder="请输入你的密码" name="password">
</p>
<p>
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="none">保密
</p>
<p>
<!--注意点：单选框or复选框都需要指定相同的name值-->
爱好：
<input type="checkbox" name="sport" value="basketball">篮球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" checked="checked" name="sport" value="crazy">足浴
</p>
<p>
简介：
<textarea name="" id="" cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日：
<input type="date" name="birth">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
电话：
<input type="number" name="phone">
</p>
<p>前女友：
<select name="前女友">
<option value="1">新垣结衣</option>
<option value="3">古墓丽影</option>
<option value="2">ggg</option>
</select>
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</p>
</fieldset>
</form>
</body>
</html>
练习
# 练习2:改变input type=file的内容
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function () {
$('#my-img').click(function () {
$('#img-upload').click();
});
})
</script>
<style>
#img-upload {
display: none;
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="user">用户名
<input type="text" name="pwd">密码
<div>
<img id="my-img" src="aaa/a.jpeg" alt="" width="100px">
<input id="img-upload" type="file" name="上传头像">
</div>
<input type="submit" value="提交">
</form>
</body>
</html>
练习2:改变input type=file的内容
form表单提交文件需要注意：
<method>必须是Post<enctype='multipart/form-data'>
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
