如何做前端性能优化,有的同学能够拿雅虎的性能优化军规回答得头头是道,反复强调使用工具压缩静态资源,但是自己搭建的博客的nginx服务却没有开启gzip。都知道说要合并静态资源,要减少HTTP请求,然而为什么要减少HTTP请求,减少请求之后预计能改善多少性能,获得多少收益呢?需要弄明白这些问题,也需要深入了解HTTP协议本身。
大家都说写HTML的关键是语义化,那么到底什么是语义化呢?这个问题难住了不少同学。标签要符合语义,这个答案看似简单标准,但什么样的标签才是符合语义?强调用 strong 不用 b?那如果有个外星文明,它们的语言里 strong 相当于地球的 bold,bold 相当于地球的 strong,那么它们究竟该用strong 还是用 b?
-
< em >和< strong >标签是为了强调一段话中的关键字时使用,它们的语义是强调。
-
< span >标签是没有语义的,它的作用就是为了设置单独的样式用的。
-
注意这里用< q >标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。不要忘记< q >标签是对简短文本的引用
-
< blockquote >的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。浏览器对< blockquote >标签的解析是缩进样式
-
< br />标签作用相当于word文档中的回车。 与以前我们学过的标签不一样,< br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有< br />、< hr />和< img />。
-
& nbsp; 空格
-
< hr />标签和< br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。
-
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以< address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
-
在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用< code>标签了,注:如果是多行代码,可以使用< pre>标签。
-
< pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。注意:< pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是< pre>标签的一个常见应用就是用来展示计算机的源代码。
-
ul-li是没有前后顺序的信息列表。ol = ordered list 有序列表 ul = unordered list 无序列表
-
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。
-
tr是“table row(表格行)”的缩写,用于表示一行的开始和结束。td是“table data(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结束。<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。th:table head(表头)
14.摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:<table summary="表格简介文本">
-
标题 用以描述表格内容,标题的显示位置:表格上方。< caption>标题文本< /caption>
-
使用< a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
-
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> , title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)< a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。<a href="目标网址" target="_blank">click here!</a>
-
< a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
Paste_Image.png19 . < img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
src:标识图像的位置;
alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
图像可以是GIF,PNG,JPEG格式的图像文件。
20 . <form method="传送方式" action="服务器文件">
<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method : 数据传送的方式(get/post)。
21 . <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
cols :多行输入域的列数。
rows :多行输入域的行数。
在<textarea></textarea>标签之间可以输入默认值。
22 . <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
value:提交数据到服务器的值(后台程序PHP使用)
name:为控件命名,以备后台程序 ASP、PHP 使用
checked:当设置 checked="checked" 时,该选项被默认选中
23 . label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
24 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
Paste_Image.png选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,注意:最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。为了使用样式更加容易阅读,可以将每条代码写在一个新行内
26 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式
就是--就近原则(离被设置元素越近优先级别越高)。嵌入式css样式的位置一定在外部式的后面.
27 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
css样式文件名称以有意义的英文字母命名,如 main.css。
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内
28 ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
29 子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
30 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素
31 关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了
32 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
33 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div{ border:2px solid red; }
34 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
流动模型(Flow)
浮动模型 (Float)
层模型(Layer)
35 层模型有三种形式:
绝对定位(position: absolute)
相对定位(position: relative):偏移前的位置保留不动。
固定定位(position: fixed)
36 使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{ font:12px/1.5em "宋体",sans-serif; }
只是有字号、行间距、中文字体、英文字体设置
网友评论