您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

HTML / CSS / 网页布局知识点

时间：12-14来源：作者：点击数：

一、普通标签

1、 `<q>引用文本</q>`

短文本引用。
浏览器会对 q 标签自动添加双引号，但重点是其语义：引用别人的话。

2、`<blockquote>引用文本</blockquote>`

长文本引用
浏览器对

标签的解析是缩进样式

3、

为你的网页中添加一些空格

4、`<address>联系地址信息</address>`

网页上显示公司地址；也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
在浏览器上显示的样式为斜体，使用 css 样式来修改它的默认样式。
<address> 本文的作者：<a href="mailto:lilian@imooc.com">lilian</a> </address>

5、`<code>var i=i+300;</code>`

在网页中显示一些计算机专业的编程代码
如果是多行代码，可以使用<pre>语言代码段</pre>标签
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。(所以不需要输入换行<br>，空格也不需要输入 ;只需要用<pre>即可)
<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码

6、table标签

<tbody>…</tbody>：如果不加<thead><tbody><tfooter>, table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
表头，也就是th标签中的文本默认为粗体并且居中显示
<table summary="表格简介文本"> ：摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

7、caption标签，为表格添加标题和摘要

用以描述表格内容，标题的显示位置：表格上方。 <table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>

8、在新建浏览器窗口中打开链接

<a href="目标网址" target="_blank">click here!</a>

9、使用mailto在网页中链接Email地址

邮箱地址 <a href="mailto:yy@imooc.com">发送</a>：浏览器会自动调用默认的客户端电子邮件程序（如OutLook）,并在收件人框中自动填上收件人的地址，如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
抄送地址 <a href="mailto:yy@imooc.com?cc=aa@aa.com">发送</a> :在收件人地址后用 cc= 地址，可以填写抄送地址。
密件抄送地址 <a href="mailto:yy@imooc.com?bcc=aa@aa.com">发送</a> :在收件人地址后用 bcc= 地址，可以填写密件抄送地址。
多个收件人、抄送、密件抄送人：; <a href="mailto:yy@imooc.com;aa@aa.com">发送</a> :用分号隔开多个收件人的地址，可以给多个收件人发送。
邮件主题：subject= <a href="mailto:yy@imooc.com?subject=发送电子邮件">发送</a> ：用 subject= 添加邮件主题。
邮件内容：body= <a href="mailto:yy@imooc.com?body=欢迎联系我">发送</a> ：用 body= 添加邮件的内容。

10、<img 标签，为网页插入图片

alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
图像可以是GIF，PNG，JPEG格式的图像文件。

二、表单标签

1、表单标签，与用户交互

<form method="传送方式" action="服务器文件"></form>
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method ：数据传送的方式（get/post）
<form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form>
所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
<form> <input type="text/password" name="名称" value="文本" /> </form>
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)。

3、文本域，支持多行文本输入

<textarea rows="行数" cols="列数">文本</textarea>
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

4、使用单选框、复选框，让用户选择

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
当 type="radio"时，控件为单选框当 type="checkbox" 时，控件为复选框
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中

5、使用下拉列表框，节省空间

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
设置selected="selected"属性，则该选项就被默认选中
下拉列表框进行多选：<select>标签中设置 multiple="multiple"
在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击）。

6、使用提交按钮，提交数据

<input type="submit" value="提交">
只有当type值设置为submit时，按钮才有提交作用。
value：按钮上显示的文字。

7、重置按钮，重置表单信息

<input type="reset" value="重置">

8、单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<label for="控件id名称">
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>

三、层叠样式表

1、CSS的某些样式是具有继承性的

p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

2、特殊性

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

3、层叠：后面的样式会覆盖前面的样式

css样式优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

4、重要性

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式 < !important

5、CSS格式化排版

文字排版--字体：注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。。
文字排版--删除线： .oldPrice{text-decoration:line-through;}
段落排版--缩进：p{text-indent:2em;}
段落排版--中文字间距、字母间距： letter-spacing ，这个样式使用在英文单词时，是设置字母与字母之间的间距。设置英文单词之间的间距：word-spacing 。
段落排版--对齐：为块状元素中的文本、图片设置居中样式： text-align:center;

6、元素分类

块级元素
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素
- 和其他元素都在一行上；
- 元素的高度、宽度及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。你需要设置每一列的宽度。如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

7、css布局模型

在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型 (Float)、层模型（Layer）。
流动模型：默认的网页布局模式。
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。实际上，块状元素都会以行的形式占据位置，因为在默认状态下，块状元素的宽度都为100%。
- 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
层模型：三种形式，绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)
- 绝对定位：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
- 相对定位：完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
- 固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
粘性定位：粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
- #one { position: sticky; top: 10px; }
- 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
- 粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
- 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

8、长度值：px（像素）、em、% 百分比

em：本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
- p{font-size:12px;text-indent:2em;}
- 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
特殊情况：给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
- <p>以这个<span>例子</span>为例。</p>
- p{font-size:14px} span{font-size:0.8em;}
- 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）
百分比
- p{font-size:12px;line-height:130%}
- 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

9、水平居中设置

行内元素
- 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
定宽块状元素：：块状元素的宽度width为固定值。
- 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
- margin-left:auto; margin-right:auto;
不定宽块状元素方式：块状元素的宽度width不固定。
- 方法一：加入 table 标签。利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。（1）为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td>) （2）为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）
- <div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
- 方法二：设置 display: inline ，使用 text-align:center。
- 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

10、垂直居中

父元素高度确定的单行文本: 设置父元素的 height 和 line-height 高度一致来实现的。
- 弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
父元素高度确定的多行文本、图片等
- （方法一）:使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
- css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
- <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
- table td{height:500px;background:#ccc}
- 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
- （方法二）:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align:middle 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。