前端入门问题

2017-02-18  本文已影响13人  跑者小越

如何做前端性能优化，有的同学能够拿雅虎的性能优化军规回答得头头是道，反复强调使用工具压缩静态资源，但是自己搭建的博客的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; }

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

上一篇下一篇

猜你喜欢

热点阅读