类似元素存在的意义---HTML&CSS

时间 2019-11-18

标签类似元素存在意义 html&css html css 栏目 CSS 繁體版

原文原文链接

1.<q>

　　效果：

　　　　告诉浏览器这是一段短引用，让浏览器以合适的方法来显示css

　　注：

　　不能直接以双引号直接代替<q>，由于有些浏览器<q>的效果不是双引号。html

　　不要忘了移动设备，和语音浏览器，对引用的表现不是双引号这么简单。web

好处：

　　方便搜索引擎寻找带引用的网页。浏览器

　　能够用CSS对引用设置样式，好比：要灰色斜体的引用。ide

2.<blockquote>

　　效果：

　　单独显示较长引用，使其自成一段布局

注：

　　有些浏览器会对其稍稍缩进，但有些不会。搜索引擎

3.块元素与内联元素

块元素特例独行，内联元素随波逐流。spa

块元素一般用作web页面中的主要构建模块，内联元素一般用来标记小段内容设计

设计一个页面时，一般从较大的块开始，而后在完善页面时再加入内联元素3d

浏览器只有当你开始一个新的块元素时，才会插入换行，主动换行须要<br>元素

<ol>和<li>为块元素

4.<a>

　　title:

　　<a href="...." title="...">....</a>

　　　　title有一个值，提供连接信息

target：

　　<a href = "...." title = "..." target="_blank">....</a>

　　新窗口打开连接

　　　　考虑到有视力障碍的人群，不能过分使用target。

注意：

　　　　保证连接标签简洁，可在title中提供额外的信息

　　　　保证标签有意义，不要使用类时“单击下一页”

　　　　不要把连接放在一块儿

5.id & class

要对多个属性使用某种样式时，可使用class

但若是只有一个元素时，就应该使用id

id属性偏偏就是用来惟一地命名元素。

例如，<body>里有多个<p>，咱们只要对其中一个<p>进行样式设置。

6. img

　　注意：

　　　　浏览器是在下载了html文件并开始显示页面后才下载图像的。

　　alt

　　　　<img src="..." alt="..." >

　　　　用alt代替未显示的图像

　　　　你永远不知道客户会用什么浏览器和设备，以及网速。

width & height

　　<img src="..." width="..." height="...">

　　width和height其实是帮助浏览器为要加载的图像预留空间

　　若使用这个属性，则他们的值应与图像实际的宽高相同

　　缩略图连接

　　　　<a href ="../..html"><img src="..." alt ="..."><a>

　　　　不建议直接连接到图像，由于这样浏览器会在一个空白页面上显示图像

　　　　而一般须要为所要显示的图像提供一些上下文。

　　透明图

　　　　若是要把一个透明的图像放在web页面上，要确保图像的蒙版颜色和web页面的背景色相同

7.HTML5

基本格式要求：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="">
 7     </head>
 8     <body>
 9 
10     </body>
11 </html>

8.盒模型图

9.div & span

　　div的使用场合

　　　　多个元素确实能够属于一个类

　　　　但当须要把这些元素加上一个大边框时

　　　　若是使用.Cat{ }，则会给全部属于Cat类的元素都会加上边框，显然这不是咱们想要的。

　　　　因而，就要使用div包围全部元素，给整个div盒设置一个边框

　　span

　　　　为一堆小元素指定样式

10.图片的布局

　　浏览器并排放置两张图片时，两张图片的外边距相加

　　上下共列放置时，以最大外边距高度为最终间隔距离

　　外边距会折叠条件：两元素的垂直外边距碰到一块儿，就必定会折叠。

11.页面布局

　　浮动（float）

　　　做用：

　　　　　float属性首先尽量地向左或向右浮动元素

　　　　　而后它下面的全部内容会绕流这个元素

　　　幕后原理：

　　　　　浏览器正常地将元素导入页面

　　　　　遇到浮动元素会尽量放在左或者右，还会从流中删除这个段落，就像浮在页面上同样

　　　　　因为这个浮动元素已经从正常流中删除，全部其它元素会依旧填满页面，就像没有浮动元素同样

　　　　　不过，内联元素定位时，会考虑的浮动元素的边界，所以会围绕浮动元素

　　　要求：

　　　　　对于全部的浮动元素都有一个要求：必须指定了宽度。

　　　clear：

　　　　所在元素左边或者右边或者两边，不容许有浮动内容，经常使用来处理浮动元素覆盖页底的状况。

　　冻结设计

　　what：

　　　　内容的宽度是固定的，不会随着视窗扩展或收缩。

　　　　但浏览器很宽时，浏览器右侧会有不少空白空间

　　注：

　　　　把主要内容都放在一个id中，并设计宽度。

　　eg：　　　
1 #allcontent{
2     width: 800px;
3 }

　　凝胶布局

　　what：

　　　　内容宽度固定，可是外边距会随着浏览器窗口扩展或收缩。一般会把内容放在中央。

　　How

　　　　由一个固定大小的<div>包围页面的全部内容，而后利用auto属性值容许外边距扩展。

　　eg：　　　
1 #allcontent{
2     width: 800px;
3     margin-left: auto;
4     margin-right: auto; 
5 }

12.定位

position：

　　　static（静态/默认），absolute（绝对），fixed（固定），relative（相对）

　　绝对定位

　　　　　what：

　　　　　　　容许将元素放置在页面上的任何位置。默认的，绝对定位会相对于页面边界来放置。

　　　　　注：

　　　　　　　一个元素绝对定位时，浏览器首先会将它从流中删除，而后将这个元素放置在top和right属性指定的位置上（也能够是bottom和left）

　　　　　　　在被绝对定位的元素下面，页面正常流中的全部元素根本不知道页面上有这个绝对定位的元素，包括内联元素。

　　　　　　　达到覆盖的效果。　　

　　　　　　　绝对定位元素不要求指定宽度，不过，若没有宽度，默认的，块元素会占浏览器的整个宽度（减去你指定的距左边或右边的偏移量）

　　　　　eg：　　　
1 #sidebar{
2     position: absolute;
3     top: 100px;
4     right:200px;
5     width: 280px;
6 }

　固定定位

　what：

　　　让元素位于你指定的位置，且这个位置老是相对于浏览器窗口定位

　　　一旦放置好，就会一直呆在指定的位置，再也不移动，即便你滚动页面它也再也不改变

　　　页面中的其它元素会在这些固定定位元素下面正常滚动。

　eg：
1 #coupon{
2     position: fixed;
3     top: 300px;
4     left: 100px;
5 }

　相对定位

　　相对定位元素首先正常流入页面，而后按指定量偏移。

　　使用相对定位时，left，top，right，bottom是指距正常流中该元素的位置的偏移量。

　静态定位

　　让元素放在正常的文档流中。

13.CSS表格布局

建立一行两列的表格结构

示例代码：

1 <div id="tableContainer">
2     <div id="tableRow">
3         <!-- ... -->
4     </div>
5     <div id="sidebar">
6             <!--  -->
7     </div>
8 </div>

 1 /*表格*/
 2 div#tableContainer{
 3     display: table;
 4 }
 5 /*行*/
 6 div#tableRow{
 7     display: table-row;
 8 }
 9 /*列1*/
10 #main{
11     display: table-cell;
12 }
13 
14 /*列2*/
15 #sidebar{
16     display: table-cell;
17 }