文章目录
（1）HTML与XHTML有啥区别？？？
DOCTYPE文档及编码不同
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合
（2）strong和b、em和i标签的异同之处？？？
相同之处：
strong和b标签，表现形态都为文本加粗
em和i标签，表现形态都为斜体
不同之处：
strong和em具有语义化
b和i不具有语义化
一般在后期都再用strong和em，很少用b和i标签的
（使用css当然也可以做到加粗和斜体）
（语义化？？？语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的 HTML文档有助于提升你的网站对访客的易用性）
（3）引用标签
标明指出，会使html结构更具有语义化
blockquote标签：引用大段的段落结束
q标签：引用小段的短语解释
abbr标签：缩写和首字母缩略词
address标签：引用文档地址信息
cite标签：引用著作的标题
<p>
“死而后已”一句出自诸葛亮的《出师表》：
<p> <blockquote>"凡是如是,难以逆见，臣鞠躬尽瘁，死而后已"</blockquote> </p>
</p>
<p><abbr title="世界卫生组织">WHO</abbr> 成立于1984年</p>
（4）iframe嵌套页面
Iframe元素会创建一个包含另一个文档的内联框架（即：行内框架）
（一个页面可以嵌套多个，也可以嵌套一个）
把其他html网页嵌套到该网页的某一个位置
应用场景：数据传输、共享代码、局部刷新、第三方介入（广告）
（5）br和wbr标签
br标签标示换行操作
wbr标签标示软换行操作
（浏览器对单词的识别是一空格为基础的，当某一行容不下了，不会再单词中间分开，会以空格为基础进行分开）
如果单词较长，可以适当使用wbr
（6）pre和code标签
被pre标签包围的元素文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。
虽然code标签通常只是把文本变成等宽字体， 但它暗示着这段文本是源程序代码
pre和code经常会结合使用：（把html的基本格式显示在浏览器上）
（7）map与area标签
定义一个客户端图像映射。图像映射(image-map) 指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映
射中的区域。
href属性定义区域的URL
shape属性来定义区域的形状
coords属性定义热区的坐标
（img标签定义usemap=”#名字”映射，map标签使用该映射name=”名字”）
（在图片上加入可点击的链接区域，area可以设置区域的形状（））
例：
<img src="../img/map-area.jpg" alt="这是一张图片" usemap="#star">
<map name="star">
//shape设置为矩形coords设置坐标href设置链接网址（对于矩形，设置两个点就可以
//点的坐标是相对于图片的相对位置
<area shape="rect"coords="0 0 150 150" href="http://www.taobao.com" >
//设置为圆，只要圆心位置和半径大小 300 300是坐标点50是半径
<area shape="circ" coords="200 200 50" href="http://www.baidu.com" >
//多边形区域，多个点连起来的多边形，最后首尾会进行相连 -->
<area shape="poly"coords="点1坐标 点2坐标 点3坐标..." href="链接地址" >
</map>
（8）embed和object标签
embed和object都表示能够嵌入一些多媒体，
如flash动画、插件等。
基本使用没有太多区别，主要是为了兼容不同的浏览器而已
注意： object要配合param标签进行使用
//ebed的使用
<embed src="文件位置" type="">
//object的使用
<object data="" type="">
<param name="类型" value="文件位置">
</object>
(9)video与audio标签
video：嵌入视频文件
audio: 嵌入音频文件
（默认都是不显示的，要通过controls属性来显示）
（为了支持多个备选文件的兼容性，可以配合source标签）
（播放结束后，默认是停止，加上loop可以设置循环播放）
（默认是不自动播放的，autoplay属性可以设置自动播放）
<video src="视频地址" loop controls ></video>
<audio src="音频地址" loop controls></audio>
<video >
<source src="主方案音频"> //如果主方案有错误，就执行备选方案1
<source src="备选方案1">
<source src="备选方案2">
</video>
(10)文字注释与文字方法
ruby标签：文字注释（中文注音或者字符）
rt标签：字符的解释和发音
ruby和rt一般两个标签是配合使用的
<ruby>
涵<rt>hán</rt>发顺发顺丰第三方
</ruby>
bdo标签可以覆盖默认的文字方向(给dir属性设置值)
ltr值为从左到右
rtl值为从右到左
<p><bdo dir="ltr">123456789</bdo></p>
<p> <bdo dir="rtl">123456789</bdo></p>
（11）link标签的扩展（在head头部使用）
在第一部分我们知道link标签可以引入外部的文件（主要为css样式文件）
扩展：
<!-- 引入外部的css文件 -->
<link rel="stylesheet" href="引入外部的css文件">
<!-- 在标题栏引入图标(还要说明图片格式：x-icon、x-jpg、x-png) -->
<link rel="icon" type="/image/x-icon" href="图标地址">
<!-- 引入网站资源 dns-prefentch表示为dns解析-->
<link rel="dns-prefentch" href="网站资源">
（12）meta标签的扩展学习（在head头部使用）
在head头部设置网页编码等，经常见meta标签
mata主要是定义一些辅助信息，主要做页面优化和渲染等一些功能，主要是功能性的不会把效果显示在页面当中.
<!-- 描述美团网的一些信息，不显示在网页上，主要给计算机看的， -->
<meta name="de strip tion'content=”大连美团网精选大连美食餐厅，酒店预订，电影票，旅游景点，外卖订餐，大连团购信息，您可查询商家评价店铺信息。大连生活， 下载美团官方APP， 吃喝玩乐1折起。">
<!-- 网页的关键字，有利于搜索引擎的搜索 -->
<meta name="keywords" content="大连美食， 大连酒店， 大连团购">
<!-- 设置搜索引擎的内核 -->
<meta name="renderer" content="webkit">
<!-- ie浏览器使用更高的版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<!-- 每3秒进行刷新一次 -->
<meta http-equiv='refresh'content="3" >
<!-- 在设定的时间，网页内容进行缓存 -->
<meta http-equi="expires" content="Wed 20Jun 201922：33：00GMT">
（13）html5新语义化标签
1
header 页眉
footer 页脚
main 主体
hgroup 标题组合
nav 导航
这些标签的功能完全可以用div实现，但用div实现没有语义化,
用这些标签使计算机知道什么地方是是网页的什么位置，更有语义化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
页眉
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
导航
</nav>
</header>
<main>
主体
大部分内容都在这里面写
</main>
<footer>
页脚
</footer>
</body>
</html>
注：像header、footer、main一般在网页中只能出现一次
2
article 独立的内容
aside 辅助信息的内容
section 区域（和div相似）
figure 描述图像或视频（在图片下面的一段文字）
figcaption 描述图像或视频的标题部分
3
datalist 选项列表（输入框的list和该标签的id）
details/summary 文档细节/文档标题（默认是闭合状态加open改变默认值）
progress/meter 定义进度条/定义度量范围
time 定义日期或时间
mark 带有记号的文本
<input type="text" list="elems">
<datalist id="elems">
<option value="张三"></option>
<option value="李四"></option>
<option value="王五"></option>
<option value="赵六"></option>
</datalist>
<details>
<!-- 文档标题 -->
<summary>Html</summary>
<!-- 细节 -->
<p>是超文本标记语言</p>
<p>是用于创建网页的标准标记语言</p>
</details>
在details标签上加open可以改变为默认为打开状态
<!-- 进度条：进度的最小0,,最大10，当前8 -->
<progress min="0" max="10" value="8"></progress>
<!-- 度量条 -->
<meter min="0" max="100" value="35">zzzz</meter>
可以设置两个值low和hing的大小，value低于或者超过会有颜色变化
<p>
今天是<time title="2-14">情人节</time>，街上人很多
</p>
就是一个语义化，没有任何效果
<p>
今天是<mark>情人节</mark>，街上人很多
</p>
这些语义化标签虽然完全可以被div代替，
但他们每个标签都有每个标签的语义化，
对搜索引擎很有帮助，有利于力高访问量
（12）表格的扩展学习（css）
在第一部分已经学过table，tr，th，td等标签以及一些属性
表格的扩展：（css中的属性）
添加单线 border-collapse属性：选择collapse
隐藏空单元 empty-cells属性：选择hide（不会显示表格，及其边框）
斜线分类 border或者rotate都可以（一个单元格内的斜线）
列分组 colgroup或者col都可以（span属性写列的位置）
（13）表单扩展–美化控件（css）
在第一部分我们学过from，input，textarea，select，option，label等标签以及好多属性
美化表单控件：
1： label标签+checked 伪类
2： position（定位）+opacity（透明度）
label标签+checked 伪类
定位+透明度
（14）表单扩展
1、新的input控件（仍是给type属性赋值）
email： 电子邮件地址输入框（里面有自带的邮箱规则）
url： 网址输入框
number：数值输入框
range： 滑动条（可以控制最小值min最大值max当前值value）
date或者month或者week：日期控件
search：搜索框
color： 颜色控件
tel： 电话号码输入框(移动端会调起数字键盘）
time： 时间控件
2、新的表单属性：
autocomplete： 自动完成
（自动提示以前输入过的内容，加name属性）
默认是有提示的（on）
可以off关闭
autofocus：获取焦点
（光标自动在输入栏上）
默认是关闭的
可以通过off开启
required：内容不能为空
pattern：正则验证
（要符合自己根据正则表达式规定的输入格式）
3、数据的传输：
如何把表单中选着的内容提交到后台？？？
action：定义传输的位置
method:定义传输的方式
GET方式
POST方式
enctype:数据传输的类型
width=device-width,inital-scale=1.0 字符串类型
multipart/form-data 文件
name:传入的数据的键
（在传入的数据中都是以键（name）值（value）对形式存在，方面查询）
4、扩展标签
fieldset： 表单内元素分组
legend： 为fieldset元素定义标题
opt group：定义选项组
<fieldset>
<legend>登录</legend>
<p>
用户名 <input type="text">
</p>
<p>
密码 <input type="password">
</p>
</fieldset>
<select name="" id="">
<optgroup label="水果"></optgroup>
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">猕猴桃</option>
<optgroup label="蔬菜"></optgroup>
<option value="">黄瓜</option>
<option value="">白菜</option>
<option value="">茄子</option>
</select>
（15）BFC规范
1.介绍
FC即Formatting context(格式化上下文) 是W3CCSS 2.1规范中的一个概念。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC即Block Formatting Contexts(块级格式化上下文)，它属于上述（FC）中的其中一种规范。
具有BFC特性的元素可以看作是隔离了的独立容器， 容器里面的元素不会在布局上影响到容器外面的元素， 并且BFC具有普通容器所没有的一些特性。
还有IFC（内联级格式化上下文）
2.触发BFC的条件
浮动元素： float除none以外的值
绝对定位元素：position(absolute、fixed)
显示框类型（display）为inline-block、table-cells、flex
overflow（溢出隐藏）除了visible以外的值(hidden、auto、scroll）
3 能解决的问题
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题
4 怎么使用？？？？
在最外层的容器或者在外层在加个容器上加上可以触发BFC的一个条件，就会使该其成为一个独立的容器
有触发BFC条件的语句，可以认为整体是一个不会影响外界的容器
容器里面的元素不会在布局上影响到容器外面的元素
（就相当于整个容器大小以及位置是固定的（包括外边框），内部的元素怎么折腾都不会改变外面容器的大小，该容器也不会影响其他容器的布局）
5. 解决margin叠加问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 这俩容器之间的间距不会叠加，只会去最大的一个 ------产生了叠加问题*/
.div1{width: 100px;height: 100px;background-color: red;margin-bottom: 30px;}
.div2{width: 100px;height: 100px;background-color: blue;margin-top: 20px;}
/* 方法1：把间距要么全设置在上容器的下边框，要么把间距全设置在下面容器的上边框 */
/* 方法2：使用BFC规范 */
//为了更好地看到给BFC容器加了一个边框
.box{overflow: hidden;border: 2px black solid;}
</style>
</head>
<body>
<!-- 解决margin叠加问题 -->
<div class="div1"></div>
<div class="div2"></div>
<!-- 使用BFC解决 -->
<!-- 相当于在最外层加了一个BFC容器，自己的外层边距等里面元素不会影响其他容器 -->
<div class="box">
<div class="div1"></div>
</div>
<div class="div2"></div>
</body>
</html>
解决margin传递问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{width: 300px;height: 300px;background-color: red;}
.div2{width: 100px;height: 100px;background-color: blue;margin-top: 100px;}
#box{overflow: hidden}
</style>
</head>
<body>
<!-- 会发现，里面容器加上margin-top: 100px会把外面的容器带下来 -->
<div class="div1" >
<div class="div2"></div>
</div>
<!-- 在最外层的容器触发BFC时其大小和位置固定，不受里面元素的影响 -->
<div class="div1" id="box">
<div class="div2"></div>
</div>
</body>
</html>
经常左侧固定大小，右侧自适应大小（利用浮动做到左右排列）
在左侧的上加上BFC边框就可以做到左侧固定大小，右侧自适应大小
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
