前端入门问题

如何做前端性能优化,有的同学能够拿雅虎的性能优化军规回答得头头是道,反复强调使用工具压缩静态资源,但是自己搭建的博客的nginx服务却没有开启gzip。都知道说要合并静态资源,要减少HTTP请求,然而为什么要减少HTTP请求,减少请求之后预计能改善多少性能,获得多少收益呢?需要弄明白这些问题,也需要深入了解HTTP协议本身。


大家都说写HTML的关键是语义化,那么到底什么是语义化呢?这个问题难住了不少同学。标签要符合语义,这个答案看似简单标准,但什么样的标签才是符合语义?强调用 strong 不用 b?那如果有个外星文明,它们的语言里 strong 相当于地球的 bold,bold 相当于地球的 strong,那么它们究竟该用strong 还是用 b?

  1. < em >和< strong >标签是为了强调一段话中的关键字时使用,它们的语义是强调。

  2. < span >标签是没有语义的,它的作用就是为了设置单独的样式用的。

  3. 注意这里用< q >标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。不要忘记< q >标签是对简短文本的引用

  4. < blockquote >的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。浏览器对< blockquote >标签的解析是缩进样式

  5. < br />标签作用相当于word文档中的回车。 与以前我们学过的标签不一样,< br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有< br />、< hr />和< img />。

  6. & nbsp; 空格

  7. < hr />标签和< br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。

  8. 一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以< address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

  9. 在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用< code>标签了,注:如果是多行代码,可以使用< pre>标签。

  10. < pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。注意:< pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是< pre>标签的一个常见应用就是用来展示计算机的源代码。

  11. ul-li是没有前后顺序的信息列表。ol = ordered list 有序列表 ul = unordered list 无序列表

  12. 什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

  13. tr是“table row(表格行)”的缩写,用于表示一行的开始和结束。td是“table data(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结束。<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。th:table head(表头)

14.摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:<table summary="表格简介文本">

  1. 标题 用以描述表格内容,标题的显示位置:表格上方。< caption>标题文本< /caption>

  2. 使用< a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

  3. <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> , title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)< a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。<a href="目标网址" target="_blank">click here!</a>

  4. < a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。

Paste_Image.png

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

Paste_Image.png

19 . < 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; }

只是有字号、行间距、中文字体、英文字体设置


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,508评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,189评论 0 5
  • 3月7日上午,三年级在年级组的统筹安排和精心准备研讨下,扎实开展二轮复习示范研讨活动。本次活动邀请包学科领导参...
    郑立勋阅读 282评论 0 0
  • 一个看上去四十岁出头的女人出现在家里,见我面带疑惑,她立即迎上来,笑着招呼我,嫂子回来了。 婆婆过来一番介绍,她叫...
    关江华阅读 516评论 4 6