HTML / CSS / 网页布局知识点
一、普通标签
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% 来实现水平居中。
- 方法一:加入 table 标签。 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。(1)为需要设置的居中的元素外面加入一个 table 标签 ( 包括
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 并不支持这个样式, 兼容性比较差。
- (方法一):使用插入 table (包括tbody、tr、td)标签,同时设置
11、隐性改变display类型
不论之前是什么类型元素,display:none 除外,设置以下 2 个句之一: 1. position : absolute
2. float : left
或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
更多
发布评论