HTML概述
80:20原则：80%的知识，只有20%的场景可以用到，而20%的知识，有80%的场景可以用到。
没有人可以把知识全部学会。太多太多了……我们只需深入掌握这关键的20%，即可完成绝大多数的开发需要。而那80%的知识，用处不大但绝不是没有用处，把它归类于【扩展课程】。
HTML：Hyper Text Markup Languange 超文本标记语言；定义网页中有什么
CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子
难不难？
对比所有的开发技术，HTML&CSS是最简单的。
如何学习？
- 心态平和 不急不躁 精益求精 磨刀不误砍柴工 不要操之过急 （慢就是快！！！）
- 多练习 软件开发是一个工科 需要不断实践 每个知识点都要进行实操演练 过一遍手，练习时间：学习时间 = 1:1 练习量越大，对课程理解就越深
讲解顺序？
HTML讲解一点 -> CSS(补充HTML的知识)
HTML:简单，没有什么效果。学习起来很枯燥
CSS：相对复杂
开发工具：VSCode：Visual Studio Code，通用编辑器，微软。
记笔记：MarkDown：MD，文档格式标椎。文档编写者不需要关注文档的格式，仅关注内容本身。
HTML & CSS概述
术语
术语降低沟通成本
1.web ：互联网
2.w3c：万维网联盟，非盈利性组织：w3.org 为互联网提供各种标椎
3.XML：可扩展的的标记性语言：extension markup language，用于定义文档结构。
什么是HTML?
HTML是w3c组织定义的语言标准，HTML是用于描述页面结构的语言。
MDN:
Mozilla Development Network，Mozilla（开发者社区）组织出品了火狐浏览器
权威的查资料的地方 比如查：h1 mdn
什么是CSS?
CSS是w3c定义的语言标准，CSS是用于描述页面展示的语言。（核心）
CSS决定了页面长什么样子。
执行HTML&CSS
浏览器内核执行 -> 页面
浏览器：
1.shell：外壳
2.core：内核（JS执行引擎、HTML&CSS渲染引擎）
几种常见浏览器的内核：
- IE：Trident
- Firfox：Gecko
- Chrome：Webkit------->Blink
- Safari：Webkit
- Opera：Presto------>Blink
版本和兼容性
HTML5、CSS3
HTML5 :2014年 已经制作完成并发布
CSS3：目前还没有制定完成。有些浏览器能识别，有些不能识别。
XHTML：可以认为是HTML的一种版本，完全符合XML的规范。标准要求高。退出历史舞台。
开发环境的准备
windows记事本
Sublime
ATom
Dreamweaver
VSCode 界面简洁 可扩展插件
插件安装
1.将界面设置成中文：按F1，输入Configure Display Language ，点击，安装其他语言
2.显示文件图标主题：点击扩展插件：vscode-icons
3.直接在浏览器中可以运行，并且能够自动刷新（非常有用）： Live Server
4.增强Markdown的预览：Markdown Preview Enhanced
设置代码自动保存
HTML核心
第一个网页
Emmet插件：可以帮我们自动生成HTML代码片段。（内置的）
元素（Element）
其他叫法:标签，元素
<a href="http://www.duyiedu.com" title = "黑龙江渡一教育有限公司">渡一教育</a>
元素 = 起始标记（begin tag）+ 元素内容 + 结束标记(end tag) + 元素属性（非必需）
属性 = 属性名 + 属性值
属性的分类
1.局部属性：某些元素特有的属性
2.全局属性：所有元素通用,eg:title
<meta charset="UTF-8">
有些元素没有结束标记，这样的元素叫做：空元素
空元素的两种写法：
1.<meta charset="UTF-8">
2.<meta charset="UTF-8"/>
元素的嵌套
元素不能相互嵌套：
<div><p></div><p>
父元素，子元素，祖先元素，后代元素，兄弟元素（拥有同一个父元素的元素）
标准的文档结构
文档声明：告诉浏览器，当前文档使用的是html5标准
<!DOCTYPE html>
不写文档声明，将导致浏览器进入怪异渲染模式。
<html lang="en">
</html>
根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。（html5中没有强制要求书写该元素）
lang属性：language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
lang = “cmn-hans” 表示简体中文
<head>
</head>
文档头，文档头内部的内容，不会显示到页面上。
<meta>
文档的元数据：附加信息。（这些信息不用来显示，用来起一些特定作用）
charset:指定网页内容编码。
计算机中，低压电（0-2 V）0，高压电（2-5 V）1 。使用的是二进制。所以在计算机中只能存储数字。为了存储文字，将文字和数字进行一一对应，比如a–97,A–64.
该字典就叫做字符编码表。中国GB2312，台湾GBK
UTF-8 是Unicode 编码的一个版本，它们是万国码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
把网页的视口设定为适应宽度，以此来兼容手机端。
<meta http-equiv="X-UA-Compatible" content="ie=edge">
这段代码用来解决IE浏览器的兼容性问题，就是告诉浏览器，如果你是一个IE浏览器，那么推荐你将内核切换成edge.
<title>Document</title>
表示网页的标题
<body>
</body>
文档体，页面上所有要参与显示的元素，都应该放置到文档体中。
语义化
语义化在很早以前就提出来了，在html5中更加强调语义化。
什么是语义化？
- 90%以上的HTML元素都有具体的含义
<h1>:一级标题
<p>:段落
<a>:超链接
- 所有元素与展示效果无关
元素展示到页面中的效果，应该完全由CSS来决定。
每个浏览器都带有默认的CSS样式，所以每个元素都有一些默认样式。元素本身没办法显示任何效果。
而你使用CSS代码强制把h1标题的内容缩小，甚至还可以将它隐藏，但不管如何，它仍然是一个一级标题，这就是语义化。
所以，元素决定了含义，但不决定显示效果。元素与显示样式应该是分离开的。
【快捷键】ctrl+d:顺序依次选取相同元素。
重要:选择什么元素，取决于内容的含义，而不是显示出的效果！！！
为什么需要语义化？
- 为了搜索引擎优化（SEO）
搜索引擎：百度、搜狗、Bing、Googel
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码，如果不使用语义化，搜索引擎没办法识别网页的大致内容。
语义化做的越好，搜索引擎就越能理解我们网页的内容，提高网页被搜索到的可能。 - 为了让浏览器理解网页
阅读模式 、语音模式
像div这样没有任何语义的元素很有可能被阅读模式插件给忽略掉
文本元素
HTML5支持哪些元素：HTML5元素周期表
h
标题：head
h1~h6:表示一级标题到六级标题
【VSCode快捷键】：ctrl+Enter:光标不在末尾时的换行。
ctrl+shift+Enter:在上面增加一个空行
【代码快速生成】：比如要写6个h1标签：h1*6>{内容}+Tab键
假如写h1~h6：h$*6>{$级标题}+Tab键
'>'代表要写子元素，'$'代表每次自增 1 的变量
p
段落：paragraphs
在VSCode中输入lorem，再按Tab键，会生成乱数假文（没有任何实际含义的文字），随机生成的，批量生成时内容不一样
在lorem后写1，表示只随机生成一个单词，写1000，那么就是1000个单词
span 【无语义】
没有语义，仅用于样式的设置
某些元素在显示时会独占一行(块级元素)，而某些元素不会(行级元素)。
到了HTML5，已经弃用这种说法
HTML标准中块级元素和行内元素的区别至高出现在4.01标准中。在HTML5,这种区别被一个更复杂的内容类别代替，“块级”类别大致相当于HTML5中的流内容类别，而“行内”类别相当于HTML5中的措辞内容类别，不过除了这两个还有其他类别。
pre
预格式化文本格式
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。
例外：在pre元素里的内容不会出现空白折叠
在pre元素内部出现的内容，会按照源代码格式显示到页面上。
该元素通常用于在网页中显示一些代码（这样会保留代码缩进）。
<code>
<pre>
var i = 2;
if(i){
console.log(i);
}
</pre>
</code>
在代码的pre元素外再套一层code元素，可以实现语义化。code表示代码区域。
pre元素功能的本质：它有一个默认的CSS属性：white-space : pre;
<code style = "white-space : pre">
var i = 2;
if(i){
console.log(i);
}
</code>
HTML实体
实体字符（HTML Entity）
实体字符通常用于在页面中显示一些特殊符号。
- &单词;(常用)
- &#数字;
- 小于符号:
<
<
- 大于符号：
>
- 空格符号
non-breaking space
- 版权符号（©）
©
- &符号
&
常用的转义字符见下表：
| 字符 | 含义 | 实体名 | 实体（十进制） | 实体（十六进制） |
|---|---|---|---|---|
| 空格 | |   |  或者 (下同) | |
| < | 小于号 | < | < | < |
| > | 大于号 | > | > | > |
| = | 等于号 | > | = | = |
| " | 双引号 | " | " | " |
| # | 数字符号 | # | # | |
| $ | 美元符号 | $ | $ | |
| % | 百分号 | % | % | |
| & | 逻辑与 | & | & | & |
| ’ | 单引号 | ' | ' | |
| ( | 左括号 | ( | ( | |
| ) | 右括号 | ) | ) | |
| * | 星号 | * | * |
使用方法：
例如，想显示<a>这个字面内容，应该写成：
<a>
a元素
超链接
href属性
hyper reference:通常表示跳转地址
- 普通链接
- 锚链接
【VSCode代码快速生成】：((h2>{章节$})+p>lorem)*6
'+'后面写的是兄弟节点
((h2[id="chapter$"]>{章节$})+p>lorem1000)*6
属性写在[]内，属性名与等号，等号与属性值之间不要有空格，否则生成不了。
【小技巧】：按住鼠标滚轮垂直向下拖动，可以生成多行光标，高效率修改代码。
id属性：全局属性，表示元素在文档中的唯一编号
<a href="#">回到顶部</a>
‘#’后面不跟任何东西，浏览器默认会帮你跳转到顶部。
锚点跳转也会改变地址栏地址，所以它跟超链接跳转地址从本质上讲没啥区别。
- 并不是说锚链接一定不刷新页面，关键是要看所要链接的锚点是不是在当前页面中。
- 功能链接
点击后，触发某个功能
- 执行JS代码,javascript:
- 发送邮件，mailto: （这个功能要求用户计算机上安装有邮件发送软件，比如exchange）
- 拨打电话，tel:（该功能一般只能在手机端触发）
target属性
表示跳转窗口位置
target属性的取值：
- _selt:在当前页面窗口中打开，默认值
- _blank:在新窗口中打开
路径的写法
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径和相对路径
站外资源:绝对路径
站内资源:相对路径
绝对路径的书写格式：
url地址：
协议名：//主机名：端口号/路径
schema://host:port/path
当跳转目标和当前页面协议相同时，可以省略协议。
https://mbd.baidu.com/newspage/data/landingsuper?
http://www.renren.com
file:///F:/VSCode%20%E4%BB%A3%E7%A0%81%E5%92%8C%E7%AC%94%E8%AE%B0/HTML/2.HTML%E6%A0%B8%E5%BF%83/5.a%E5%85%83%E7%B4%A0/index.html
-
协议名：http、https(比http安全性高)、file(表示本地文件)
-
主机名：域名、IP地址
http://127.0.0.1:5500/HTML/ （IP地址） -
端口号：如果协议是http协议，默认端口号为80；如果协议是https协议，默认端口号为443
相对路径的书写格式：
以./开头，./表示当前资源所在的目录
可以书写…/表示返回上一级目录
相对路径中：./可以省略
图片元素
img元素
image的缩写，空元素，没有结束标记
src属性：source(来源，出处)
alt属性：当图片资源失效时，将使用该属性的文字描述来替代图片
和a元素联用
<a href="https://www.baidu.com/" target="_blank">
<img src="./img/sun.jpg" alt = "这是一个太阳系">
</a>
和map元素联用
map:地图
它与img元素，a元素联合使用，可以做到点击图片某一区域，跳转到一个链接，点击另一个区域，跳转到另一链接。
map的子元素：area
<a href="https://www.baidu.com/" target="_blank">
<img usemap="#txMap" src="./img/sun.jpg" alt = "这是一个太阳系">
</a>
<map name="txMap">
<area shape="circle" coords="240,197,47" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="" target="_blank">
<area shape="rect" coords="58,20,347,62" href="https://baijiahao.baidu.com/s?id=1615843473568508231&wfr=spider&for=pc" alt="" target="_blank">
<area shape="poly" coords="263,140,296,128,311,92,364,102,403,98,366,121,346,154,299,142" href="https://baike.baidu.com/item/土星/136354?fr=aladdin" alt="" target="_blank">
</map>
shape：所选区域形状
coords:坐标
- 圆(circle)需要3个参数，依次是：圆心横坐标，圆心纵坐标，半径
- 矩形(rect)需4个参数，2个坐标，分别是：左上角坐标，右下角坐标
- 多边形(poly):描述多边形所有点的坐标。
可以用QQ截图来测量图片的坐标。
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具。
PS、pxcook、cutpro(老师开发的)
和figure元素联用
figure:指代，定义。
图片元素表示其自己的内容标签，通常带有标题。通常根据文档的主流引用，因此可以在不影响文档的情况下在文档中移动文档。
通常用于把图片、图片标题、描述包裹起来，使图片和文字产生相关性，实现语义化。
子元素：figcaption，表示标题
<figure>
<a href="https://www.baidu.com/" target="_blank">
<img usemap="#txMap" src="./img/sun.jpg" alt = "这是一个太阳系">
</a>
<figcaption>
<h2>太阳系</h2>
</figcaption>
<p>
太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到
远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星
、5颗已经辨认出来的矮行星，包括四个柯伊伯带天体，和数以亿计的太阳系小天体,和彗星。
</p>
</figure>
多媒体元素
video 视频
audio 音频
video
controls：控制控件的显示，取值只能为controls
某些属性，只有两种状态：1.不写 2.取值为属性名。这种属性叫做布尔属性
布尔属性，在HTML5中，可以不用书写属性值：
<video style="width: 300px" controls src="./media/open.mp4"></video>
autoplay:布尔属性，自动播放
muked:布尔属性，静音播放（有些浏览器的设置问题，导致视频添加了autoplay属性也无法自动播放）
loop:布尔属性，循环播放
audio
和视频用法完全一致
兼容性
1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音视频格式可能不一致
通常的视频格式：mp4、webm
实际开发过程中，为了获得最好的兼容性，往往会准备同一视频资源的两种格式(甚至更多)：
<video style="width: 300px" muted loop autoplay controls>
<source src="./media/open.mp4">
<source src="./media/open.webm">
</video>
列表元素
有序列表
ol: ordered list 父元素：有序列表
li: list item 子元素：列表项
【快捷键】：alt + shift + 向下箭头 = 向下复制粘贴所选文本
属性
- type:可以让列表项按照数字/字母/罗马数字 进行排列
【注意】：这个属性在HTML4中被弃用，但是在HTML5中被重新引入。除非列表中的序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则，请使用CSS list-style-type 属性代替。（规范）
因此，通常情况下不建议使用type属性。 - reversed:布尔属性，让列表项倒置排列
无序列表（最常用）
把ol改为ul
ul：unordered list
无序列表常用于制作菜单或新闻列表
定义列表
通常用于一些术语的定义
dl : definition list 父元素
dt : definition title 子元素
dd : definition description 子元素
容器元素
容器元素：该元素代表一块区域，内部用于放置其他元素或其他容器。
div元素
没有语义
在HTML5中提出了很多语义化元素
语义化容器元素
显示效果与div一样，没有任何效果，只是为了提供语义。
- header:通常用于表示页头，也可以用于表示文章的头部
- footer:通常用于表示页脚，也可以用于表示文章的尾部
- article:通常用于表示整篇文章
- section:通常用于表示文章的章节
- aside:通常用于表示侧边栏（一些附加信息）
元素的包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外（a元素作为行级元素可以包含块级元素）。
现在，已经摒弃了块级元素和行级元素的说法。
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素：百度：h1 mdn
总结：
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd）
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
百度：内容类别 mdn
行级元素和块级元素
行级元素(inline)：内容决定元素所占位置，不可以通过css改变宽高
span、strong、em、a、del、i、video、audio
块级元素(block)：独占一行，可以通过css改变宽高
div、p、ul、li、ol、form、address
行级块元素(inline-block)：内容决定大小，可以改宽高
img
凡是带有inline的元素，都有文字特性，比如img，多个img展示时，默认情况下它们之间会有间距。间距是哪来的？是 空格/回车 所带来的。
练习-百度新闻
nav元素
它是HTML5的新元素，是一个容器元素，它的语义是：导航
【牛逼写法】ul5>(li>h3>a>lorem5)+(li6>a>lorem5)
这是把新闻列表的第一个li元素单独加上h3标签
单词，banner:横幅
【快键键】：alt + shift + f :格式化代码，当代码写的很乱，缩进不正确时使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度新闻——海量中文资讯平台</title>
</head>
<body>
<header>
<!-- 最顶部区域 -->
<div>
<ul>
<li><a href="">网页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">知道</a></li>
<li><a href="">音乐</a></li>
<li><a href="">图片</a></li>
<li><a href="">视频</a></li>
<li><a href="">地图</a></li>
<li><a href="">文库</a></li>
</ul>
<ul>
<li><a href="">百度首页</a></li>
<li><a href="">用户名</a></li>
<ul>
<li><a href="">我的主页</a></li>
<li><a href="">账号设置</a></li>
<li><a href="">退出</a></li>
</ul>
<li>
<a href="">
<span>百度新闻客户端</span>
<img src="./img/sncode.png" alt="这是一张二维码">
</a>
</li>
</ul>
</div>
<!-- 搜索区域 -->
<div>
<div>
<h1>
<a href="">
百度新闻
<img src="./img/logo.png" alt="">
</a>
</h1>
</div>
<div>
<input type="text">
<button>百度一下</button>
</div>
<div>
<a href="">帮助</a>
</div>
</div>
<!-- 页面导航 -->
<div>
<nav>
<a href="">首页</a>
<a href="">国内</a>
<a href="">国际</a>
<a href="">军事</a>
<a href="">财经</a>
<a href="">娱乐</a>
<a href="">体育</a>
<a href="">互联网</a>
<a href="">科技</a>
<a href="">游戏</a>
<a href="">女人</a>
<a href="">汽车</a>
<a href="">房产</a>
</nav>
<!-- <ul>
<li><a href="">首页</a></li>
<li><a href="">国内</a></li>
<li><a href="">国际</a></li>
<li><a href="">军事</a></li>
<li><a href="">财经</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">互联网</a></li>
<li><a href="">科技</a></li>
<li><a href="">游戏</a></li>
<li><a href="">女人</a></li>
<li><a href="">汽车</a></li>
<li><a href="">房产</a></li>
</ul> -->
</div>
</header>
<!-- 中部区域 -->
<div>
<!-- 热点要闻 -->
<div>
<!-- 左边 -->
<div>
<!-- 左边部分的标题 -->
<div>
<h2>热点要闻</h2>
</div>
<!-- 多个新闻列表 -->
<div>
<ul>
<li>
<h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
</li>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
<li><a href="">Totam sunt sapiente iste ratione.</a></li>
<li><a href="">Odio ab saepe ipsam ullam.</a></li>
<li><a href="">Provident cupiditate ea ipsa obcaecati.</a></li>
<li><a href="">Enim nihil reiciendis provident perferendis?</a></li>
<li><a href="">Dicta distinctio porro placeat dolor.</a></li>
</ul>
<ul>
<li>
<h3><a href="">Assumenda minus ex cum soluta.</a></h3>
</li>
<li><a href="">Sapiente minus similique officiis sint!</a></li>
<li><a href="">Dolore corporis harum recusandae quibusdam.</a></li>
<li><a href="">Minus magni cumque eius cupiditate?</a></li>
<li><a href="">Maiores laborum quo libero pariatur.</a></li>
<li><a href="">Aliquam dolore accusamus voluptates minima.</a></li>
<li><a href="">Quidem excepturi illum repudiandae modi.</a></li>
</ul>
<ul>
<li>
<h3><a href="">Laborum nostrum magni animi ratione!</a></h3>
</li>
<li><a href="">Ipsam cumque accusantium nulla doloremque.</a></li>
<li><a href="">Illo fuga praesentium voluptas veritatis.</a></li>
<li><a href="">Aperiam explicabo nostrum praesentium perspiciatis.</a></li>
<li><a href="">Temporibus expedita eveniet dolores dolorum.</a></li>
<li><a href="">Odio atque facilis molestiae doloribus!</a></li>
<li><a href="">Accusamus ut tempore fuga odio?</a></li>
</ul>
<ul>
<li>
<h3><a href="">Officia animi temporibus dolorum delectus.</a></h3>
</li>
<li><a href="">Rerum minus a assumenda iusto?</a></li>
<li><a href="">Ducimus natus omnis odio incidunt.</a></li>
<li><a href="">Hic impedit quos magni modi.</a></li>
<li><a href="">Illum magni esse aliquid? Accusamus?</a></li>
<li><a href="">Incidunt veniam provident beatae sed.</a></li>
<li><a href="">Veritatis obcaecati incidunt ea. Dolore?</a></li>
</ul>
<ul>
<li>
<h3><a href="">Eaque iusto nisi nostrum maxime?</a></h3>
</li>
<li><a href="">Aspernatur perferendis dolorem corrupti unde.</a></li>
<li><a href="">Eum id sed eos necessitatibus?</a></li>
<li><a href="">Quisquam, cumque. Molestiae, impedit enim?</a></li>
<li><a href="">Voluptatibus illo exercitationem veritatis. Laudantium.</a></li>
<li><a href="">Perspiciatis culpa voluptatibus qui repellat.</a></li>
<li><a href="">Explicabo rerum quisquam temporibus quaerat.</a></li>
</ul>
</div>
</div>
<!-- 右边 -->
<div>
<!-- 幻灯片、轮播图 -->
<div>
<!-- 轮播图主体部分 -->
<div>
<!-- 放置图片 -->
<div>
<div>
<a href="">
<img src="./img/banner1.jpg" alt="">
<h3>Lorem ipsum dolor sit amet.</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner2.jpg" alt="">
<h3>Pariatur eius adipisci placeat aspernatur.</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner3.jpg" alt="">
<h3>Labore possimus earum neque non.</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner4.jpg" alt="">
<h3>Unde nisi ipsa dolore repellendus!</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner5.jpg" alt="">
<h3>Maiores, velit saepe. Quisquam, odit!</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner6.jpg" alt="">
<h3>Accusantium accusamus nisi ipsam sapiente?</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner7.jpg" alt="">
<h3>Itaque ipsam nihil non dolorum.</h3>
</a>
</div>
<div>
<a href="">
<img src="./img/banner8.jpg" alt="">
<h3>Soluta ducimus dolorem ipsum necessitatibus?</h3>
</a>
</div>
</div>
<!-- 左右切换的按钮 -->
<div>
<span><</span><span>></span>
</div>
<!-- 切换的小圆圈 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 轮播图底部附加新闻部分 -->
<div>
<a href="">
<img src="./img/adv1.png" alt="">
</a>
<a href="">
<img src="./img/adv2.jpg" alt="">
</a>
</div>
</div>
<!-- 热搜新闻词 -->
<div>
<div>
<h3>
热搜新闻词
<span>HOT WORDS</span>
<!-- 下面的这个span是一个图标，将来CSS用 -->
<span></span>
</h3>
</div>
<ul>
<li>Lorem, ipsum.</li>
<li>Quas, voluptas.</li>
<li>Culpa, perferendis!</li>
<li>Quaerat, pariatur.</li>
<li>Quam, reprehenderit?</li>
<li>Dolores, nobis.</li>
<li>Itaque, hic.</li>
<li>Nisi, tempore!</li>
<li>Impedit, voluptatibus.</li>
<li>Maiores, eligendi.</li>
</ul>
</div>
<!-- 百家号 -->
<div>
<div>
<h3>
百家号
<span>BAIJIA</span>
<!-- 下面的这个span是一个图标，将来CSS用 -->
<span></span>
</h3>
</div>
<div>
<!-- 左边 -->
<div>
<ul>
<li><a href=""><span>Lorem ipsum dolor sit.</span><img src="./img/test1.jpg" alt=""></a></li>
<li><a href=""><span>Quasi fugiat cum mollitia!</span><img src="./img/test2.jpg" alt=""></a></li>
<li><a href=""><span>Voluptas deleniti architecto velit.</span><img src="./img/test3.jpg" alt=""></a></li>
<li><a href=""><span>Porro laudantium dolorem officia?</span><img src="./img/test4.jpg" alt=""></a></li>
</ul>
</div>
<!-- 右边 -->
<div>
<ul>
<li><a href="">Lorem ipsum dolor sit.</a></li>
<li><a href="">Quasi labore in enim.</a></li>
<li><a href="">Delectus itaque modi reprehenderit.</a></li>
<li><a href="">Modi ducimus reiciendis non!</a></li>
<li><a href="">Ratione tempora quasi magnam.</a></li>
</ul>
<ul>
<li><a href="">Vel reiciendis necessitatibus voluptates!</a></li>
<li><a href="">Earum ipsam voluptate nisi.</a></li>
<li><a href="">Dolorum omnis voluptatum magni.</a></li>
<li><a href="">Culpa labore eum assumenda.</a></li>
<li><a href="">Nisi ducimus modi exercitationem!</a></li>
</ul>
<ul>
<li><a href="">Mollitia eveniet minima autem?</a></li>
<li><a href="">Voluptas asperiores error ullam?</a></li>
<li><a href="">Rem officia debitis aut!</a></li>
<li><a href="">Ipsum, voluptatum nam. Maxime.</a></li>
<li><a href="">Sint illo iusto voluptatem.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<!-- 上边 -->
<div>
<!-- 左边 -->
<div>
<div>更多精彩内容</div>
<div>
<div>
<img src="./img/sncode.png" alt="">
</div>
<div>
<a href="">Android下载</a>
<a href="">iPhone下载</a>
</div>
</div>
<div>
扫描二维码，收看更多新闻
</div>
</div>
<!-- 右边 -->
<div>
<div>
<h4>百度新闻独家出品</h4>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Repellendus esse at ut accusantium.</li>
<li>Mollitia deleniti similique ipsa sequi?</li>
</ul>
</div>
</div>
</div>
<!-- 下边 -->
<div>
<p>
责任编辑：胡彦BN098 刘石娟BN068 谢建BN085 李芳雨BN091 储信艳BN087 焦碧碧BN084 禤聪BN095 王鑫BN060 崔超BN071 违法和不良信息举报电话：400-921-6911
</p>
<p>
<a href="">用户协议</a>
<a href="">隐私策略</a>
<a href="">投诉中心</a>
京公网安备11000002000001号
<a href="">互联网新闻信息服务许可</a>
©2019Baidu
<a href="">使用百度前必读</a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</p>
</div>
</footer>
<aside>
</aside>
</body>
</html>
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
