㈠ 2019-05-31（前端第六节知识点）表格、元素的层级、背景
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
设置元素的透明背景
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试
使用background-image来设置背景图片
语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的兆唯位置
可选值察液：
该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
但是我们的外族没培部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
我们这个练习，一上来浏览器只会加载link.png
由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几对tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
隔行变色：
tbody > tr.nth-child（even/odd）
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
㈡ web前端学习HTML表格的属性标记有哪些
HTML表格的基本结构包括<table>、<caption>、<tr>、<td>、<th>等标记
1：<table>标记有以下属性
① width属性：表示表格的宽度
② height属性：表示表格的高度
③ border属性：表示表格外边框的宽度
④ align属性表示表格的显示位置：left居左显示；center居中显示；right居右 显示。
⑤ cellspacing属性：单元格之间的间距
⑥ cellpadding属性：单元格内容与边框的显示距离
⑦ frame属性：控制表格边框外层的四条线框
⑧ rules属性：控制显示单元格之间的分割线
2：<caption>标记用于表格中使用标题
<caption>标记的align属性有四个取值：
① top表示标题放在表格的上部
② bottom表示标题放在表格的下部
③ left表示标题放在表格的左部
④ right表示标题放在表格的右部
3：<tr>标记用来定义表格的行，对于每一个表格行，都是由一对<tr>...</tr>标记表示。<tr>标记有如下几种属性
① bgcolor属性用来设置背景颜色
② align属性用来设置垂直方向对齐方式
③ valign属性用来设置水平方向对齐方式
4：<td>和<th>都是单元格的标记，其必须嵌套在<tr>标记中，成对出现。<th>是表头标记，<th>中的文字会被默认加粗，而<td>不会，<td>是数据标记，表示该单元格的具体数据。两者的标记属性是一样的：
① bgcolor属性用来设置背景颜色
② align属性用来设置垂直方向对齐方式
③ valign属性用来设置水平方向对齐方式
④ width属性用来设置表格的宽度
⑤ height属性用来设置表格的高度
⑦ rowspan设置单元格所占行数
⑧ colspan设置单元格所占列数
㈢ 如何正确使用html基本标签
H5e教育html5开发为您解答：
1. 文档声明：<!Doctype>
其实这跟 WCAG 根本上连不上什么直接关系，但为了一个兼容性更好，特别是向后兼容的页面，我推荐你这样写：
<!Doctype html>
2. 链接：<a>
互联网的联几乎可以说是用 <a> 来实现的，作为一个页面最常见的标签。我们应该如何对待呢？
为关键链接添加 accesskey
除非万不得已，不要去掉 focus 时虚线框
<a href="" title="" accesskey="M" rel="" hidefocus>Link</a>
3. 缩写: <abbr>
对于用 HTML Tag 的正确使用，也是非常重要的，这有利于读屏软件使用者对于页面结构的理解。特别是在 H1,H2,H3 等这些标签的使用，滥用非常容易造成结构费解。当然，使用一般的标签，再利用 CSS 来使视觉上形成对比这也是常人能辨识的。但读屏软件用户呢。当然，这里只是顺带提起需要注意页面标签的使用方法，而 abbr 最重要的应该是应该添加一皮逗个 title 属性对缩写进行描述。比如：
<abbr title="Web Developer" >WD</abbr>
4. 大段引用: <blockquote>，一般引用: <cite>
有大段引用的时候，使用 <blockquote>，而行内引用则使用 <cite>，让你的结构更加易读：
<blockquote>
之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更世升好的页面。今天的计划里有一条把 HTML T ag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。
</blockquote>
<p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p>
5. 删除：<del>
在纸上写东西不能像在计算机上写东西一样，可以用撤销键可以按，但当我们想要强调某些东西是被删除的怎么办？那就是使用 <del> 标签了。比如这样：
<del>HTML上表示强调时，请使用 <b> 标签</del>
HTML上表示强调时，请使用 <strong> 标签
效果是这样的：
HTML上表示强调时，请使用 <b> 标签
HTML上表示强调时，请使用 <strong> 标签
6. 定义列表：<dl>
去年带着新人做支付宝前端博客的时候，他们给我印象最深刻的是很喜欢用 <dl>。当时在想，这些同学挺不错的，对语义化的理解还不错。我们还是比较少用到定义列表的。而是使用一般的 <ul> <ol> 这两个。<dl> 也是应该慎用的，最好只使用在某些有“定义”意义的条目，如 w3school 的这个例子，对咖啡和牛奶的定义：
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
7. 无序/有序列表 <ul>/<ol>
列表，这个对于每个前端来说，都熟悉不过了。因为结构可以非常灵活地进行应用，在导航、列表、Tab 等，都经常要要用到。这个就无须多说了。但有一点还是需要明白的，不要相信什么 <ul>/<ol> 是 <table> 的替代品。在我们常用的 HTML Tags 中，每个标签都有自己的作用，谁都不是谁的替代品。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
8. 表格: <table>
如果是一个表格，那就，就不要用段落来替代，更不要用列表。除非万不得已，并且他们是可以转换的。另外，表格中还有一些需要注意的点：
给 <table> 添加 summary 属性，有些表格非常大，并不需要去读完整个
添加 <tbody>，如果我没记错搜握老，如果没添加的话，浏览器会自动为你添加
必要时使用 <col> <colgroup> 来控制表示的栏
<table summary="sofish's blog status">
<thead>
<tr>
<th>DATE</th>
<th>IP</th>
<th>PV</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011.3.11</td>
<td>3000</td>
<td>8000</td>
</tr>
</tbody>
</table>
9. 格式化片段 <code>/<pre>
<code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用 <pre> 来代替一般的 <p>。
<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>
10. 换行: <br>
在现代网页中，使用 <br> 的情况是非常少的。网页中的留白，一般都是使用 CSS 的 padding 和 margin 来实现。这样更精准，并用更容易控制。现在推荐的用法是，使用到一般的段落 <p> 中做简单的换行，而不是用来控制页面留白。
<p>我是一个段落。<br />
诗歌都会用换行的。
</p>
11. 分割线: <hr>
<hr> 具有非常好的语义作用。但他的视觉效果很难控制。之前就写过这样的文章关于<hr />在各浏览器中的问题。一般也都很少用。如果专门为读屏软件使用者提供单独页面的话，或许 <hr> 会大有用处。
<h3>标题一</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>标题二</h3>
<p>This is the entry of... </p>
12. 无语义标签：<div>/<span>
其实 <div>/<span> 这两个标签是有语义的，都是 defines a section in a document。是的，和 HTML5 中的 <section> 其实是一样的。只是，因为搜索引擎的的原因，搜索引擎认为它们是无语义标签，因此他们成了 “无语义” 标签。推荐用法是尽量使用其他来做为页面框架的容器，比如布局、添加额外的视觉效果，而不是段落等的替代品。
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<ul>
<li><span>God</span>, oh my zsh</span></li>
</ul>
</div>
</div>
13. 段落/标题: <p>,<h1>/<h2>/<h3>…
这几个标签几乎可以说是一个页面标签等级结构中最重要的标签。我们可以用一本书的结构来说明这几个标签，而我们构建一个页面的时候，也应该有这样的一种思想在脑中：
书的名称：H1
书的每个章节标题: H2
章节内的文章标题: H3
章节的段落: P
小标题/副标题: H4/H5/H6
是的，当然还有引用 <blockquoute>，技术类书中提供的代码 <pre class="code">，一些需要注意点的列表 <ul>，一些方便比较的表格 <table> 等。
<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
<h3>Summary:</h3>
<p>lorem ipsum is ...<em>emphasize</em></p>
</div>
14. 强调: <em>/<strong>
<em> emphasize 的缩写。而 <strong> 是 strong emphasize。可能很多刚入门前端的同学会对 <em>、<strong>、<cite> 、<i>、<b> 这几个标签的使用拿捏不准。<i> 和 <b> 基本上是被废置的，相当于现在的 <em> 和 <strong>，一般情况下他们对于内容重要性的排序是这样的：strong > em ≈ cite。
<strong>注意：</strong>别使用老掉牙的标签，比如<cite>FONT、CENTER</cite>等，特别是 <em>FONT</em>。
15. 表单项: <input>/<textarea>/<select>
表单项是 HTML 中相对比较复杂的标签，需要注意的点也比较多：
需要给每个表单项添加 <label> 对其进行描述，当不能使用 label 时，为表单项添加 title 属性
当表单项是必填项的时候，使用 “*“ 符号来标记
Flash 创建表单项一般是不会生成 <label> 的，请勾上 auto label 那个选项
<form method="post" action="http://sofish.de">
<fieldset><legend>My Form</legend>
<label for="firstname">* First name:</label> <input type="text" id="firstname" />
<label for="speech">Say something:</label>
<textarea id="speech" />
</textare>
<input type="submit" value="submit" title="submit button" />
</fieldset>
</form>
16. 图片: <img>
对于图片，盲人看不到。提供 alt 来表示替代文本。告诉他们这是一张什么样的图。
<img src="http://sofish.de/favicon.ico" alt="幸福收藏夹的 favicon" />
17. 框架: <iframe>
尽量避免 <iframe>框架的使用，但当你需要使用的时候，最好提供一个 title 属性对其进行描述。
<iframe src="http://sofish.de" title="幸福收藏夹" /></iframe>
18. 流媒体：<video>/<audio>/<object>/<embed>
媒体也是比较复杂的格式，处理起来比较麻烦。通常我们可以这样做：
为视听媒体提供相应的文本，包括相应的场景，比如演讲中的鼓掌等有利有阅读者感知现在气氛的，都应该体现在演讲文本中。其他的依此类推。
如果像交响乐这种不能提供具体描述的，可以进行简单的说明
如果文本较长，不能在当前页面展示，可以在媒体后提供一个链接到相应替代文本的链接
如果媒体中有可能会引起癫痫发作的，应做相应的说明
<audio src="mozart.mp4">莫扎特39号交响曲</audio>
19. 网页标题：<title>
㈣ table标签是什么类型的元素
table标签是什么意思
table标签定义HTML表格，每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
html table标签 语法
作用：定义 HTML 表格。
说明：简单的 HTML 表格由 table 元素以及一个或团友多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复告或带杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
注释：在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞袜芦成使用的。在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。
希望这些因为能给你提供一些帮助
㈤ <tr><dr><thead><table><td>在html中代表什么意思
tr代表 行肢尘洞或称横
dr代表 这个还真不是很确定不兄链是是否是为编辑环历枯境的意思
thead代表 表头
table代表 表格
td代表 单元格或称竖
㈥ table中tr和td是谁的缩写
首标签<举物table>和尾标签</table>分别表示一个表格的开始与结束。
tr是table row（表格行）”的缩写，用于表示一行的开始和结束。
td是“table data（表格数据）”的缩写握睁，用于表示行中各个单正皮液元格（cell）的开始和结束。
㈦ web前端中有哪些块级
web前端的css中有块级元素和行内元素。
常见块级元素：
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
HTML5新增块级元素
<header>...</header>签定义文档的页眉（介绍信息）。
<section>...</section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<footer>...</footer>标签定义文档或节的页脚。应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等 等。可以在一个文档中使用多个 <footer> 元素。联系信息应该位于 <address> 标签中。
<aside>...</aside>标签定义其所处内容之外的内容。其内容应该与附近的内容相关。可做侧栏。
<nav>...</nav>标签定义导航链接的部分。
<main>...</main>标签规定文档的主要内容。其元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、 版权信息、站点标志或搜索表单。在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代： <article>、<aside>、<footer>、<header> 或 <nav>。
<article>...</article>标签规定独立的自包含内容。元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论。
<figure>...</figure>标签规定独立的流内容（图像、图表、照片、代码等等）
㈧ div和table的区别
1、速度和加载方式方面的区别
div 和 table 的差异不是速度，而是加载方式，速度只能是指网络速度，如果速度足够快，是没有差异的。
div 的加载方式是即读即加载，遇到 <div> 没有遇到 <模旁/div> 的时候一样加载 div 中的内容，读多少加载多少；table 的加载方式是完成后加载，遇到 <table> 后，在读到 </table> 之前，table 中的内容不加载，或者传输中断了(document.onload()事件)的时候加载，这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,IE才知道该怎么显示
2、在网页应用中的差别
如果页面首尾加 table ，那么必须等整个页面读完了才加载
如果页面首尾加 div ，无任何影响
3、DIV与Table布局在大型网站的可用性比较
DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说:DIV用于布局，而TABLE则本来就是转二维数据的。让TABLE做该做的事，并不是说页面里不出现TABLE就是多么多么牛。
用DIV进行排版的优势就是我旦拆橡不说，大家应该都比较清楚。DIV是标准，是大势所趋，但并不意味着所有的页面都适合用它来做。
中国的门户和国外的有很御扮大的区别，中国网民并不喜欢信息量少的页面，YAHOO到了中国页面上的内容就多了不少，而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。
为什么DIV不适合他们?下面我从几个方面来逐一说明:
精简代码:
大家都说DIV的布局精简代码，但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用，而这些样式大多用于控制DIV的排版布局。那你会说了，CSS可以放在外部重用啊，要想得到这个问题的答案请往下看。
重用性与下载量:
统一使用一个.css的样式表文件，可以实现修改一次，全站修改的效果，这样使得维护的成本更低。但是请大家换一个角度想，如果所有页面在加载时都要访问一个文件，那这个文件每天的下载量，特别时在搜狐、新浪的网站平台上将达到几亿次，这就需要后面有很多台前端web服务器在做支撑，那后台的成本无形中也提高了很多。如果后台支撑没有做好，那么页面就会出现花屏，之前所作的工作也是白费。很多人会问，这样的几率太小了。我们所作的工作就是为了避 免这一两次意外的发生，如果意外发生了，对于门户后果将是不堪设想的。
HTTP通讯:
统一的样式表文件采用外部调用的形式，这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应，这样对前端web服务器 会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可以看看sohu和sina的页面，大多都是采用这样的形式)，而不是作为外部调用 的形式，也是为了尽量避免给服务器增加消耗。
页面缓存:
每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。
兼容性:
对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本 浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中也增加很多工作量(至少我接触的开发人员制作 div页面比table页面的标准时间要长一些)。
横切与延展性:
横切——传统的布局方式为了使页面下载的更快，把页面自上而下分成若干个块，但是往往采用DIV进行布局的页面都会出现这样的情况，由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应，而出现留白。
以上我们只是讨论某一技术在某一领域的可用性，而非技术本身。
说了这么多并不是说DIV这种布局方式不好，而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用，而不是人云亦云。之所以 DIV的布局方式没有在大型网站应用，不是说门户没有用DIV是技术落后，是里面的人没有前瞻性，而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说，这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。
4、DIV+CSS
而现在我认为DIV +CSS并不是字面上的含义那么简单，而有两重内在含义：
4.1、结构与表现分离，用DIV完成结构，用CSS控制表现，这样带来的好处非常多，DIV精简了页面，提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套，从而大大提高页面加载速度，以及站点的可以维护性。
4.2、选用DIV 来配合CSS的原因，CSS 的核心是 “盒子模型”，而没有哪个标签能比DIV更好的诠释“盒子模型”的精髓，TABLE的结构过于复杂，并不能很好的做到这一点，虽然TABLE+CSS也是一种选择，但别忘了DIV还有另外一个优势，浮动层叠，而且用TABLE进行布局的网站是不能通过W3C验证的。
其实DIV的好处还远远不止这些，例如弹性布局，用户自定义布局，DIV都展现出不可思议的灵活性，而富有语义的结构对搜索引擎的友好度也比TABLE要来的高，更不用说跨平台的应用。DIV+CSS为我们提供了一个优雅而规范的技术框架，让我们能用最少的重复劳动，完成更多更美观的页面，从而提升整个团队的效率，甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。
㈨ web前端 不要用table标签做
这个效果如何：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
html,body{
height:100%;
}
#container{
width:90%;
height:100%;
background-color:#F9F9F9;
padding:10px;
旁枝margin:0auto;
}
.logo{
background:url(163.png)no-repeat;
width:160px;
height:200px;
float:left;
margin-left:20px;
margin-top:20px;
}
.box{
width:160px;
height:200px;
background-color:#E8E8E8;
float:left;
margin-left:20px;
margin-top:20px;
}
.boxdl{
width:140px;
list-style:none;
float:left;
margin:10px;
}
.boxdldt{
width:100px;
font-weight:bold;
font-size:14px;
运信敏margin:10px;
}
.boxdldd{
width:40px;
float:left;
font-size:12px;
margin:10px12px;
}
.box:hover{
background-color:#206F96;
color:#FEFEFE;
}
</style>
</head>
<body>
<divid="container">
<divclass="logo"></div>
<divclass="box">
<dl>
<dt>新闻</dt>
<dd>国内</dd>
<dd>国际</dd>
<dd>社会</dd>
<dd>军事</dd>
<dd>图片</dd>
<dd>评论</dd>
<dd>探索</dd>
<dl>
</div>
<divclass="box">
<dl>
<dt>新闻</dt>
<dd>国内</dd>
<dd>国际</dd>
<dd>社会</dd>
<dd>军事</dd>
<dd>图片</dd>
<dd>评论</dd>
坦银<dd>探索</dd>
<dl>
</div>
<divclass="box">
<dl>
<dt>新闻</dt>
<dd>国内</dd>
<dd>国际</dd>
<dd>社会</dd>
<dd>军事</dd>
<dd>图片</dd>
<dd>评论</dd>
<dd>探索</dd>
<dl>
</div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
</div>
</body>
</html>
㈩ html 行级元素和块级元素标签列表分别有哪些
行内元素列表:
<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为
<input> 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量
块级元素列表:
<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为
<fieldset>元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体（正文）
<td>表格中的标准单元格
<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行
(10)前端中table是谁的标签扩展阅读：
一，从概念的角度解释块级元素和行内元素
1. 块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素
2. 行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。
块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。
而当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。
二，块级元素和内联元素的区别
1. 块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
2. 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）
3. 块级元素可以设置margin,padding属性
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果