- A+
HTML简述
前言1- HTML基础目标
1. PC端网站布局
目标：能根据psd原型图，用HTML+CSS 布局出 符合W3C规范的静态网页.
推荐黑马品优购项目：网站首页、列表页、详情页、登录页、 注册页等等...
前言2- 认识WEB
1. 认识网页
网页主要由文字、图像和超链接等元素构成。除了这些元素，网页中还可以包含音频、视频以及Flash等。
我们后面的任务就是要把这部分网页元素用代码写出来
2. 浏览器
浏览器是网页显示、运行代码的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
1、常见浏览器内核（了解）
浏览器内核（Rendering Engine），中文翻译为 排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核。
浏览器内核包括两部分，渲染引擎和 js引擎；
渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面；
JS 引擎 是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎；
主流内核分为以下几个：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、 |
| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。 |
| chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | Presto | Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。 |
2、拓展阅读
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的
3. Web标准（重点）
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C 万维网联盟 是国际最著名的标准化组织，类似于现实世界中的联合国。
1、为什么要遵循WEB标准呢？
由于浏览器的内核不同，他们渲染或者排版的模式就有些许差异，解析的效果显示的就会有所差别。
通过Web标准展现统一的内容；
2、Web 标准构成
三项技术： 结构<HTML>——表现<CSS>——行为<JavaScript>
| 三项技术 | 含义 | 功能 |
|---|---|---|
| 1.结构-HTML | 超文本标记语言 | 核心规范，用来描述页面的结构，使页面以怎样的方式排版； 例如标题、段落表格等，相当于人的骨架（简单） |
| 2.表现-CSS | 层叠样式表 | 用来调整页面中元素的样式，以怎样的方式来表现页面，页面中所有能看见的东西都是css； 例如颜色、字体大小等，相当于人的皮肤衣服（内容多） |
| 3.行为-JavaScript | 动态支持脚本代码 | 用来响应用户操作，是动态的； 例如点一个链接出现什么，相当于人的动作（难，面试考点） |
代码的最佳体验：结构样式行为相分离，模块化的概念；
HTML结构是基础，要先搭建结构，在设计样式；
前言3-代码工具
常用工具：
-
Dreamweaver——普通青年
-
SublimeText——文艺青年 轻量级，打开速度超快
-
WebStorm
-
HBuilder
-
VScode
前言4-查文档
经常查阅文档是一个非常好的学习习惯。
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
1. 初识 HTML
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
网页是由网页元素组成的 ， 这些元素利用HTML标签描述出来，然后通过浏览器解析，就可以显示给用户了
所谓 超文本，有2层含义：
1. 超越文本限制：因为它可以加入图片、声音、动画、多媒体等内容
2. 超级链接文本：可以从一个文件跳转到另一个文件，与世界各地主机的文件连接
1.1 HTML骨架格式
<!--HTML骨架标签：--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Title</title> </head> <body> </body> </html>
1、<!DOCTYPE html>
文档类型声明，不属于HTML标签；声明当前网页是一个HTML文档；并且是以HTML5版本规范来显示的；写在网页最上面；
2、<html lang="en">
HTML的根标签，lang是属性，告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示，也可改为其他语言显示网页，zh-CN定义语言为中文；
一个页面中有且只有一个根标签,网页中的所有内容都应该写在html根标签中；
3、<head> </head>
head头标签，用来提供有关内容和标记信息的，该标签中的内容，不会在网页中直接显示，而是面向浏览器的，用来帮助浏览器解析页面；
4、<meta charset="UTF-8">
meta标签 是用来告诉浏览器网页所采用的编码字符集 编码方式，这条语句表示这个网页是以UTF-8编码格式存在的，不加的话会乱码；
meta标签用来设置网页的一些元数据，比如网页的字符集、关键字和简介等；
5、<title>
网页的标题标签，用来影响网页在搜索引擎的排名，搜索引擎在检索页面时，会首先检索title标签中的内容，所以它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名；
默认会显示在浏览器的标题栏中，很重要，有 head 标签就有 title 标签；
6、<body>
HTML主体标签，用来设置网页的主体内容，网页中所有用户可见的内容都应该写在body中，是面向客户的；
1.2 HTML的语法规范
1.21 标签结构
-
HTML标签是由一组尖括号包围的关键词，通常是成对出现的，如
<html> </html> -
第1个是开始标签，第2个是结束标签；
-
有些特殊的标签是单标签（空元素），如
<br />； -
一组完整的标签称为元素；
1.22 标签属性
1、 作用：属性是用来为HTML元素(标签)提供附加信息的，总是设置在开始标签或自结束标签中；
2、语法：属性总是以名值对的形式出现，属性名=“属性值” 如:
<标签名 属性1="属性值1"> 内容 </标签名> <p color="red">
一个标签中可以同时设置多个属性，属性之间需要用空格隔开 如:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> <p color="red" font-size="16px">
3、常见属性：id 属性、 class 属性和 title 属性。
1.23 进制
1、编码：依据一定的规则将字符转换为二进制编码的过程；
2、解码：依据一定的规则将二进制编码转换为字符的过程；
3、字符集：编码和解码的规则；规定了如何将文本转换为二进制编码；
常见的字符集 ASCII、ANSI（自动保存）、GBK（中文）、GB2312（浏览器默认）、UTF-8（通用）；
4、乱 码：产生的原因是编码和解码采用的字符集不同；
例如：浏览器默认GB2312，文件保存格式是UTF-8编码，所以需要改成UTF-8编码；
5、解 决：HTML5中使用 meta 标签，<meta charset = "UTF-8"/>,
直接告诉浏览器 以UTF-8格式的 字符集 去编码；
1.24 meta标签
meta标签用于设置网页的元始数据，如字符集，关键字，简介等，是一个自结束标签；
1、设置页面的 字符集
meta标签的charset属性用来告诉浏览器，网页所采用的 编码字符集方式，这个网页是以UTF-8编码格式打开的，不加的话会乱码；
<meta charset = "UTF-8">
2、设置网页的 关键字
name的值是对content的一个描述；keywords告诉你content里的是一个关键字；
<meta name = "keywords" content="html，css，java">
3、设置网页的 描 述
搜素引擎在检索页面时，会检索页面中的关键字和描述，但是不会影响网页的排名；
<meta name = "description" content="发布信息">
4、设置网页的 重定向，5秒刷新频率
<meta http-equiv="refresh" content="秒数; url= 绝对路径/目标路径" />
1.3 HTML标签关系
1.嵌套关系 <head> <title> </title> </head> 2.并列关系（兄弟） <head></head> <body></body>
1.4 文本单位
长度单位：像素px、百分比%、em；
1、像素（px）:
网页中使用最多的单位，一个像素相当于屏幕上的一个小色块，多个色块构成了屏幕；不同显示器的像素大小也不相同：显示效果越好越清晰，像素越小；但像素点不能直接被看见；手机的像素好，但手机和电脑像素不一样大小；为了适应，手机像素默认*2；
2、百分比（%）：
百分比也可以用来表示大小，它是相对父元素来说的，若父元素是16px大小，则100%就是16px；浏览器根据父元素的宽度和高度计算值；
优点：当父元素属性发生变化时，子元素属性也会按照比例变化；
在创建一个自适应页面（流失布局）时，经常使用百分比作为单位；
3、em：
和百分比类似，它是相对于当前元素的字体大小来计算的；1em=1font-size；
字体大小改变时，em也随之改变；设置字体相关样式时，使用em；
.box { width: 300px; height: 300px; background-color: red; } .box1 { font-size: 20px; width: 2em; // 40px height: 50%; // 300*50% background-color: yellow; }
1.5 实体
1、作用：HTML中预留了一些字符，在网页中是不能直接使用的；
例如：< >（小于大于号），浏览器会将其解析为HTML标签，所以需要用其他转义字符表示，这就出现了实体；
2、语法：&实体名；
例：a < b> c== a<b>c
a < b > c
2. HTML标签
2.1 HTML常见标签
| 标签名 | 定义 | 说明 |
|---|---|---|
<h1></h6> |
标题标签 | [ head ] -默认加粗 有字号 独占一行，重要性递减；对搜索引擎来说，h1的重要性仅次于title，影响网页在搜索引擎的排名，一个页面只能写一个h1； |
<p></p> |
段落标签 | [ paragraph ] -默认自动换行，段和落之间保有空隙； |
<br /> |
换行标签 | [ break ] -在HTML中字符之间写再多的空格，浏览器也会当成一个空格解析，所以用br；br标签是一个自结束标签； |
<hr /> |
水平线标签 | 一条分割线 |
<div></div> |
div标签 | [division] 的缩写 分割， 分区的意思，用来布局的；独占一行 |
<span></span> |
span标签 | [span] 跨度，跨距；范围，用来布局的，一行上可以放多个span |
* 块元素和内联元素
—— 块级元素竖着写；
—— 行内元素横着写；
<div>和<span>是没有语义的，他们就是一个盒子，用来装内容；
① <div>块元素：
1、作用：块元素主要为网页进行布局，网页的模板；
2、语法：
<div style="backage-color:red; width:200px;"> </div>
3、常见的块元素：<h1> <p> <div>
4、特点：
（1）<div>元素用来定义文档中的分区或节；
（2）浏览器会自动根据 div 所标记区域的前后自动放置一个换行符，无论内容多少，都独占一行，纵向排列；
（3）div 标签没与任何语义，就是一个纯粹的盒子，并且不会为他里面的元素设置任何的默认样式；
② <span>内联元素：
1、作用：内联元素主要为文本设置样式；
2、常见内联元素：<span> <a> <img> <iframe>
3、特点：
（1）<span>元素用来定义文档中的 一行中的一部分，又称行内元素，小盒子：
（2）内联元素只占自身的大小，不会独占一行，一行可以放多个，横向排列；
（3）span标签没有任何语义，专门用来选中文字，然后为文字设置样式；
③ 块元素和内联元素关系：
1、一般只使用块元素包含内联元素，而不用内联元素包含块元素；
2、<a>超链接元素 可以 包含任意元素，除了他本身，不能嵌套；
段落元素<p>不可以包含任何其他块元素，会提早结束循环；
<body> <div>我是一个div标签我一个人单独占一行</div> <div>我是一个div标签我一个人单独占一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body>
2.2 文本格式化标签
-
标签的语义化：就是指标签的含义；突出重要性, 比普通文字更重要；
-
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性;
-
作用：在网页中为文字设置粗体、斜体或下划线等效果，使文字以特殊的方式显示；
| 语义 | 标签 | 说明（更推荐） |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> |
<strong> |
| 斜体 | <em></em>或者<i></i> |
<em> |
| 删除线 | <del></del>或者<s></s> |
<del> |
| 下划线 | <ins></ins>或者<u></u> |
<ins>类似填空题 |
| 引号“” | <q> |
短引用（行内引用span） |
| 长引用“” | <blockquote> |
长引用（块级引用div） |
| 参考 | <cite> |
参考内容，斜体 |
| 预格式 | <pre> |
保存原格式，怎么写怎么显示;元素中的文本会保留空格和换行符 |
| 语义化 | <code> |
表示代码，一般结合pre使用 |
| 小字体 | <small> |
版权声明及合同中的小字 |
| 上标 | <sup> |
<p>2<sup>2</sup></p> |
| 下标 | <sub> |
<p>H<sub>2</sub>O</p> |
| 对齐方式 | <align> |
<p align="center"></p>, <align>是开始标签（属性名），center是属性值；其值可以是： left,center,right; |
2.3 <img>图像标签
2.31<img>格式
1、作用：向页面引入外部图片；
2、语法：[image]
<img src ="图片URL" / alt="">
3、属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性，指定图像的路径与文件名 |
| alt | 文本 | 替换文本，图像不能显示时显示的文字，备用 |
| title | 文本 | 提示文本，鼠标放到图像上，显示提示文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像的边框粗细，一般用css设置 |
2.32 URL路径
1、相对路径：以正在编写代码的文件所在位置为参考基础，而建立出的目录路径；
这里指图片相对于HTML页面的位置；
2、绝对路径：指以web根目录为参考起点直接到达目标位置，通常是从盘符开始的路径；
如：“D:webimglogo.png”（磁盘查找，反斜杠；）或是完整的网络地址"https://www.sina.com.cn/"。
3、相对路径是从代码所在文件出发去寻找目标文件的，这里的上一级、下一级是图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件与HTML文件位于同一级 如 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 如 |
2.33 常见图片格式
1、JPG : 支持的颜色较多，可压缩，不支持透明色，一般保存照片等颜色丰富的图片；
2、GIF : 支持的颜色较少（不清晰），只支持简单透明（横着竖着，圆形不可以），支持动态图，图片颜色单一或是动态图可以使用GIF;
3、PNG : 支持的颜色多，并且支持复杂的透明，支持颜色复杂的透明图片；
图片的使用原则：
（1）效果一致，使用小的；
（2）效果不一致，使用效果好的；
2.34、图片质量问题
一、PNG24图片格式问题
1、问题：IE6中对图片格式PNG24支持度不高，如果使用，会导致效果无法正常显示；
2、解决：
-
-
-
使用png8代替png24，利用ps操作，文件存储为web格式，但清晰度下降；
-
利用javascript解决，需要向页面中引入一个外部的js文件，写一个js代码处理这个问题；
-
-
① 引入js方法：在<body>标签的最后引入外部js文件，相当于link；
<script type="text/javascript" src="script.js"> </script>
② 然后要再创建一个新的<script>标签：并编写js代码；
<script type="text/javascript> DO-belatedPNG.fix("div");修复 </script>
二、hack浏览器版本问题
css hack 实际是一个特殊的代码，只有部分浏览器能识别；所以用来为一些浏览器设置特殊代码；
方式一：
-
若只想在一些如IE6等特殊的浏览器执行，IE10及以上不支持，可以用css hack来解决；
-
但css hack不推荐使用，它等同于bug，后期不好维护；
-
条件hack，只对IE浏览器有效，其它都视为注释；IE10及以上不支持；
以下内容只会出现在IE6，后面跟的是版本；
<!-- [if IE 6]--> <p></p> <!-- [endif]-->
以下内容只会出现在IE9以下 浏览器；
<!-- [if lte IE 6]-->
方式二：
-
在样式前面添加下划线 —，则该样式只有IE6及以下浏览器可以实现；
① 问题：
在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍——IE6的双边距问题：
② 解决：
通过添加display：inline 样式来解决IE6的双边距问题，虽然对于一个浮动元素来说设置行内块元素没有任何意义，但可以解决双边距问题；
.box1 { width: 100px; height: 100px; float: left; display: inline; background-color: red; margin-left: 100px; }
2.35 嵌入图片和创建分区响应图
一、嵌入图片：
1、作用：向超链接内加入<img>元素，使得点击图片可以跳转超链接；
2、语法：
<a href="#" target="_blank"> <img src="URL路径" alt="备注""> </a>
3、问题：点图片边边也会进入超链接，有误差，未解决防触碰问题；
4、解决：创建分区响应图（难点）；
二、分区响应图：
1、作用：一张具有多个小图形的图片，创建分区响应图之后，通过点击某张图像上的不同区域 ，可以让浏览器进入不同的URL里（类似精灵图+定位）；
2、语法：
<img src="" usemap=" #id"> // 先在网页中出现一张图片，创建锚点，测得链接图片的四个边缘的coords值； <map name="id名"> <area href="url地址" shape="" coords=""/> // 不加coords值，就不转链接； </map>
3、属性：
| 属性 | 作用 |
|---|---|
<map> |
客户端分区响应图的关键元素 |
<area> |
各自代表标着图像上可以被点击的一块区域，可以有多个； |
<area>可选值：shape / coords 起共同作用：
<area>可选值 |
|
|---|---|
| shape | rect（矩形）/circle（圆形) /poly（多边形）/dafault（默认) |
| coords | 标明用户可以点击的各个图像区域，标明各个边缘的值 |
注意：
-
在制作分区响应图时，不需要使用
<a>标签创建超链接； -
图像定位可以使用js代码，或者image型input定位；
-
使用rect矩形进行一个导航，解决了防误触问题；
例1：矩形图，四周防误触：
<form> <img src="pic.png" usemap="map1"> <form> <input type="image" src="pic.png"> </form> <map name="map1"> <area href="pic.png" shape="rect" coords="38,62,15,30" target="_blank"> </area> </map> </form>
2.4 <a>超链接标签
1、作用：用于进行页面间的跳转，链接目标可以是一个网页、也可以是相同网页的不同位置、还可以是图片、电子邮件地址或者应用程序。
2、语法：[anchor]
<a href="跳转目标url" target="目标窗口的弹出方式">文本或图像</a>
3、属性
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的URL地址，（必须属性） |
| target | 用于指定链接页面的打开方式，self是默认值，blank在新窗口打开 |
4、链接页面的打开方式：
当前页面打开/新建页面打开/内联框架中打开
5、链接的分类：
| 链接分类 | 语法 | 作用 |
|---|---|---|
| 外部链接 | <a href="http://www.baidu.com"></a> |
跳转到外部网页 |
| 内部链接 | < a href="index.html">首页</a > |
网站内部网页间的相互链接 |
| 下载链接 | < a href="index.file/zip"></a > |
href的属性值是文件或压缩包，会下载这个文件 |
| 网页元素链接 | < a href="#">文本/图片</a > |
给文本图像表格音频等网页元素添加超链接，也叫空链接 |
| 锚点链接 | < a href="#锚点名"></a > |
快速定位到页面中的某个位置 |
2.41 锚点定位 （难点）
通过创建锚点链接，用户能够快速定位到目标内容。
（1）创建锚点链接分为两步：
1.首先在需要的位置创建一个锚点`<a href="#id名"> </a>`（锚点#是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置）;
2.然后通过“锚点名” `<p id="id名"`>，在指定位置和锚点建立链接。
（2）# 的占位作用：
创建超连接时，地址当时不确定，可以用 # 占位，译为空链接；若将超链接地址设置为#，点击超链接后，会自动跳转到当前页面顶部；
2.42 id属性
1、作用：id属性在HTML中的任一标签内都可以设置，但每个id属性在同一个页面中只能有一个，该属性作为标签的唯一标识；想去哪 就在#号后面写上哪个id名；
2、语法示例：
<body> <a href="#bottom">去底部</a> 友情链接：<a href="#">1</a>|<a href="#">2</a><br /> <a href="#" id="bottom">回到顶部</a>| <a href="mailto:aaa@aaa.com">联系我们</a> </body>
2.5 内联框架<iframe>
1、作用：可以在一个页面中引入另一个外部页面，是小框架的形式；
2、语法：<iframe src="URL路径" name="tom"> </iframe>
3、属性：src/width/height/name/scrolling（滚动条可选：yes/no/auto）
4、应用场景：内联框架不推荐使用，因为里面的内容不会被搜索引擎搜到；但若只在公司内部运行，可以使用（ajax旧版的隐藏帧技术中会被使用）；
2.6 框架集<frameset>
1、作用：可以在一个页面引入其他多个外部页面；
2、语法：<frameset cols="30%,40%">
3、属性：<frameset>必须选择一个属性，并且需要在属性中指定每一部分所占的大小；
| 属性 | 作用 |
|---|---|
| rows | 指定框架集中所有框架按行排列 |
| cols | 指定框架集中所有框架按列排列 |
4、应用场景：使用<frameset>创建框架集时，就不能有<body>标签，二者选其一；
这个标签意味着页面中不能有自己的内容，只能引入其他页面；
<frameset>中可以嵌套本身，并且使用<frame>子标签指定要引入的页面，引入几个页面写几个<frame>；
5、缺点：引入多个页面后，每单独加载一个页面，浏览器就重新发送一次请求，引入几个页面就发送几次请求，若非要用一个，选<frameset>而不是<iframe>，H5中推荐使用框架器；
2.7 base 标签
1、base 可以设置整体链接的打开状态
2、base 写到 <head> </head> 之间
3、把所有的连接 都默认添加 target="_blank"
语法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <base target="_blank"> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.sina.com">新浪</a> <a href="http://www.sohu.com">搜狐</a> <a href="http://www.163.com">网易</a> </body> </html>
3.<table>表格
3.1、表格格式
1、作用：最初创建表格是为了以表格的形式 显示数据；后来变成布局工具；
但从css出现后，表格用来表示格式 化的数据；
2、语法：
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
3、结构：
表格的三元素 <table> <tr> <td> 表格-行-单元格，内嵌关系；
| 标签名 | 定义 | 说明 |
|---|---|---|
<table></table> |
表格标签 | 定义表格，就是一个四方的盒子，可以嵌套 |
<tr></tr> |
表格行 | 行标签要再table标签内部才有意义，几行嵌套几个 |
<td></td> |
表格单元格 | 单元格标签里面可以放任何东西，写在tr里，相当于列 |
<th></th> |
表头单元格 | 位于表格的第一行或第一列，也是单元格，默认居中加粗 |
<caption></caption> |
表格标题标签 | 表格的标题，紧随 table 标签之后，居中且显示于表格之上， |
| clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
4、属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对于周围元素的对齐方式 |
| border | 1或“ ” | 规定表格单元是否设置边框，默认没有 |
| cellpadding | 像素值 | 规定单元边沿与内容间的空白，默认1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2px |
| width | 像素值或百分比 | 规定表格的宽度 |
平时开发的我们这三个参数 border cellpadding cellspacing 为 0
案例1：小说排行榜
思路：
1、先制作表格的结构：
-
第一行里面是 th 表头单元格
-
第二行开始里面是 td 普通单元格
-
单元格里面可以放任何元素,文字链接图片等
2、后书写表格属性：
-
用到宽度高度边框cellpadding 和 cellspacing
-
表格浏览器中对齐 align
案例：
<body> <table border="1" cellspacing="0" width="500" height="249" align="center"> <caption> <h3>小说排行榜</h3> </caption> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td> <img src="images/up.jpg"> </td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="images/guichuideng.jpg">图片</a> <a href="baike.html">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td> <img src="images/down.jpg"> </td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td> <img src="images/up.jpg"> </td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>1</td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>1</td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>1</td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>1</td> <td>356</td> <td>3560</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> </table>
View Code
3.2、长表格
1、作用：用作比较复杂的表格布局，便于分清表格结构；
2、标签：
| 标签 | 作用 |
|---|---|
<thead> |
定义表格头部，存放标题； |
<tbody> |
定义表格主体，存放数据； |
<tfoot> |
定义表格底部，存放脚注； |
-
以上三个都是
<table>的子标签，<tr>需写在这些标签中； -
可以将
<tfoot>写到<thead>下面，编写时方便更改；
注意：
-
如果表格中没有写
<tbody>，浏览器会自动在表格中添加<tbody>；并把所有的tr都放在<tbody>中，所以注意tr并不是<table>的子元素，而是<tbody>的子元素；所以通过table > tr无法选中行，需要 tbody > tr; -
表格的列数以td最多的那行为准；表格可以嵌套，可以在td中再嵌套；
-
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素；
3.3、合并单元格
1、合并单元格三部曲:
-
先确定是跨行还是跨列合并 rowspan / colspan;
-
找到目标单元格，写上合并方式 = 合并的单元格数量。比如：
<td colspan="2"></td>; -
删除多余的单元格。
2、合并单元格顺序：先上 后下 先左 后右 的顺序 ;
3.4、表格样式
| 表格样式 | 属性 | 说明 |
|---|---|---|
| border-spacing | 边框间距 | 如table和td默认有一个距离 |
| border-collapse | 表格相邻边框合并 | 可选值collapse/separate 边框合并/不合并，合并后间距自动失效 |
| vertical-align | 文本垂直对齐 | 四个方向可选值 |
| color | 表格颜色 | |
| padding | 表格间距 |
3.5、应用场景
1、表格隔行变色：
tr：nth-child（even）{ background-color: #bfa; }
2、鼠标移入变色：
tr：hover { background-color: #ff0; }
3、边框：
td,th { border：1px solid black； }
4. 列表
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景，列表可以分为三大类：无序列表、有序列表和自定义列表。
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> |
无序列表 | 里面只能包含<li>，没有顺序，使用较多，<li>里面可以包含任何标签 |
<ol></ol> |
有序列表 | 里面只能包含<li>，有顺序，使用较少，<li>里面可以包含任何标签 |
<dl></dl> |
自定义列表 | 里面只能包含<dt>和<dd>，<dt>和<dd>里面可以包含任何标签 |
4.1 无序列表 ul
1、无序列表的各个列表项之间没有顺序级别之分，是并列的。
2、应用场景：简洁的小标题，常用于导航栏nav；
3、基本语法：
<ul type=''> // 通过设置`<ul>` 的type 属性改变列表符号的表现形式 <li>列表项1</li> // li 表示列表项,相当于一个容器，可容纳所有元素 <li>列表项2</li> <li>列表项3</li> ...... </ul>
4、type属性可选值：
（1）disc（实心圆）（2）circle（空心圆）（3）square（实心方框）
注意：
-
项目列表一般都不使用默认的实心圆标记！因为他在不同浏览器显示效果不一样，所以一般都用css先进行删除实心圆；
-
项目符号删除：
<head>的<style>标签里设置ul {list-style:none} -
如果需要设置项目符号，可以采用为
<li>设置背景图片的方式来设置； -
<ul>和<li>都是块元素，列表之间可以相互嵌套；
4.2 有序列表 ol
1、有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，使用有序符号作为项目符号；
2、基本语法：
<ol type=""> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ol>
所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。
3、type属性可选值：
（1）默认值，是阿拉伯数字；<ol type="1">
（2）A/a I/i作为序号；英文字母或罗马数字等编号表示<ol type="A/a/I/i">
（3）reversed（降序）
4.3 自定义列表
1、作用：常用于对术语或名词进行解释和描述，列表项前没有任何项目符号。
2、使用场景：上面一个小标题，下面很多围绕小标题进行说明的，常用于网页底部 联系方式；
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
3、基本语法：
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>
5. 表单
作用：
-
现实中的表单是用来提交信息的，如申请表、简历等；
-
网页中表单的作用就是将用户信息收集然后提交给服务器的；比如：百度的搜索框、注册页面、登录这些操作都需要提交表单；
-
在搜索框填入关键字，点击搜索，关键字会提交到百度服务器，服务器根据用户输入的关键字检索，返回相应信息；
<form>创建的仅是一个空的表单，还需要填入不同的表单项才可完整，一个表单中可以包含多个表单项；而我们提交表单时是提交到action属性对应的地址，若想提交到服务器创建name属性；
5.1 表单结构
HTML 中，一个完整的表单通常由 表单域、表单控件（也称为表单元素）和 提示信息3个部分构成；
| 表单结构 | 说明 |
|---|---|
表单域<form> |
相当于一个容器，用来容纳所有的表单控件和提示信息，处理程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器 |
| 表单控件 | 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等 |
| 提示信息 | 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作 |
5.2 表单域<form>
1、作用：表单域是指包含表单元素的区域，在表单域中可以定义各种表单元素；
2、目的：在 HTML 标签中， <form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。
<form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form>
3、常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
5.3 表单控件（表单元素）
表单控件就是允许用户在表单中输入或者选择的内容控件，分为以下几类：
-
<input>输入表单元素； -
<select>下拉表单元素； -
<textarea>文本域元素
这三组表单元素都应该包含在<form>表单域里面,并且有 name 属性。
1、<input>输入表单控件
语法：
<input type="属性值" />
作用：
`<input>`标签用于收集用户信息，根据不同的 type 属性值来指定不同的控件类型，
输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
| 属性 | 说明 | 作用 |
|---|---|---|
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
（1）type属性
| 属性值 | 作用 |
|---|---|
| text | 定义单行输入字段，用户可以在其中输入文本，默认20个字符 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| submit | 定义提交按钮，将表单数据发送到服务器 |
| button | 定义可点击按钮，不提交，（多数情况下，用于js启动脚本） |
| reset | 定义重置按钮，清除表单所有数据 |
| password | 定义密码字段，该字段中的字符被掩码 |
| hidden | 定义隐藏的输入字段 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| image | 定义图像形式的提交按钮 |
-
文本框：
<input type="text" />
这是一个内联元素，使用<input>创建一个文本框，点回车提交；那么需添加回车按钮；目前只提交到了地址action的url，并非服务器，若想提交到服务器，需要添加一个name属性，表示提交内容的名字；也可以指定value属性值，该值将会作为文本框的默认值显示；
-
提交按钮：
<input type="submit" />
可以将input表单中的信息提交给服务器；使用input创建一个提交按钮，按钮文字默认，value属性可以指定提交按钮上的文字；
用户提交的信息会附在url地址的后边，以查询字符串的形式发送给服务器；url地址？查询字符串
（2）name属性
用户名:<input type="text" name=“username” />
-
name 属性 是每个表单元素都有的属性值,主要给后台人员使用；
-
name属性是当前 input 元素的名字，后台可以通过 name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单；
-
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性；
-
设置复选框或多选时，需要设置相同的name值；
（3）value属性
用户名:<input type="text" name="username" value="请输入用户名"> value 默认的文本值，占位；
（4）checked属性
-
主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
-
如果希望在单选按钮或者多选框中设置默认选中，check="checked"
性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
（5）maxlength 属性
是用户可以在表单元素输入的最大字符数, 一般较少使用.
案例：表单
<form action="url" method="POST" name="form1"> <!-- text 文本框，可以在里面输入任何文字 --> 用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <!-- password 密码框 用户看不见输入的密码 想提交到服务器就写name--> 密码：<input type="password" name="pwd"> <!-- radio 单选按钮 可以实现多选一 --> <!-- 像这种直接需要用户选择，而不需要填写内容的表单项，还必需指定一个value属性，最终提交给服务器,想要提交服务器必须写name属性 --> 性别：男<input type="radio" name="sex" value="nan" /> 女 <input type="radio" name="sex" value="nv" /> <!-- checkbox 复选框，可以实现多选 要有相同的name属性值--> 爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉吃饭<input type="checkbox" name="hobby" value="睡觉吃饭"> <!-- submit 提交按钮，可以把表单域 form里面的表单元素 里面的值 提交给服务器 --> <input type="submit" value="免费注册"> <!-- reset 重置按钮，还原表单元素初始的默认状态 --> <input type="reset" value="重新填写"> <!-- button 普通按钮，后期结合js 搭配使用 --> <input type="button" value="获取短信验证码"> <!-- 文件域 使用场景 上传文件使用 --> 上传头像：<input type="file"> </form>
（6）button 标签
-
除了使用
<input type="submit" />也可以使用 button 标签创建按钮；更推荐使用； -
因为既有开始又有结束，成对出现，更加灵活，可以在中间添加图片；
-
button 按钮只能作为点击的按钮，不会提交到服务器；
<button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button>
案例：注册页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- type text 是一个文本框 --> 用户名： <input type="text" value="请输入用户名" name="username" /> <br /> 昵称： <input type="text" value="请输入昵称" name="nicheng" /> <br /> <!-- type text 是一个密码框 --> 密码： <input type="password" name="pwd" /> <br /> 性别： 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" checked="checked" /> 未知 <input type="radio" name="sex" /> <br /> 爱好: 睡觉 <input type="checkbox" name="hobby" checked="checked" /> 爬山 <input type="checkbox" name="hobby" /> 篮球 <input type="checkbox" name="hobby" /> 足球 <input type="checkbox" name="hobby" /> <br /> <!-- 普通按钮需要些value值 --> <input type="button" value="获取短信验证码" /> <input type="submit" value="提交所填" /> <input type="reset" value="重置所填" /> <!-- 图片提交按钮 里面必须包含 src 属性 --> <input type="image" src="images/btn.png" /> <br /> 上传头像: <!-- 文件域 上传文件用的--> <input type="file" /> </body> </html>
View Code
2、<select>表单控件
页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>下拉列表；
<select name=''> <option value=''>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
-
<select>创建下拉列表时需要使用<option>标签创建列表项，<select>中至少包含一对<option>； -
在
<option>中定义 selected =“ selected " 时，当前项即为默认选中项； -
下拉列表的name属性指定给
<select>，value属性指定给<option>； -
当为下拉列表添加一个multiple="multiple"则下拉列表变成一个多选的下拉列表；
3、<textarea>表单控件
当用户输入内容较多的情况下，<textarea>标签用于定义多行文本输入控件。可以输入更多的文字，该控件常见于留言板，评论。
<textarea rows="3" cols="20"> 文本内容 </textarea> <textarea name="info">文本域，多行文本框如自我介绍；
属性： cols=“每行中的字符数” ，rows=“显示的行数”，
我们在实际开发中不会使用，都是用 CSS 来改变大小。
5.4 表单信息 <label>标签
1、概念： <label>标签是html中专门对表单中的input元素设置提示文字（用户名）或标注信息的。
2、目的：label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
3、作用：用于绑定一个表单元素, 当点击label标签里面的文字的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？
1、第一种用法就是用label直接包括input表单；
适合单个表单；
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
2、第二种用法 for 属性规定 label 与哪个表单元素绑定；
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
指定一个for属性，for属性需要指定一个表单项的id值，当点击 <label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上，用来增加用户体验。
<label>标签的 for 属性应当与相关元素的 id 属性相同。
