HTML / CSS / 网页布局知识点 - 文章教程

HTML / CSS / 网页布局知识点

发布于 2021-01-02 字数 16144 浏览 1109 评论 0

一、普通标签

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

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

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

  • 长文本引用
  • 浏览器对

    标签的解析是缩进样式

3、&nbsp;

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

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>,空格也不需要输入&nbsp;只需要用<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 并不支持这个样式, 兼容性比较差。

11、隐性改变display类型

不论之前是什么类型元素,display:none 除外,设置以下 2 个句之一: 1. position : absolute 2. float : leftfloat:right

简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0