百度前端学习

分手后的思念是犯贱 2021-12-09 22:59 358阅读 0赞

## 第一课 ##

今天是2019年6月19日、星期三，其实2014年就已经入门前端开发了，都是陆陆续续的，这次回头来学习，是查看自己是否有遗漏的知识，或者不扎实的知识进行巩固。  
首先说下万维网是如何工作的，万维网的组成有域名、DNS服务器、客户端、后台服务器、数据库，当我们点击链接时，首先是域名会访问DNS服务器进行解析域名，返回一个IP地址，通过这个IP地址找到后台服务器，后台服务器访问数据库，返回数据到客户端，通过html、css进行展示。  
HTML是用来描述网页的语言，它是超文本标记语言，它使用标记标签来描述网页。这里我把网页比作房子，修建房子过程中用到的砖、钢筋等材料比作标记标签，因为在修建房子的时候，要在合适的地方使用合适的材料，所以HTML也要使用合适的标签，称为语义化。  
HTML5我认为就是升级版的html，就像我们从前居住的茅草房、泥土房、砖房、水泥房，只不过是一种事物的正常发展升级，为了我们更好的去使用它。  
对于html5中很多标签和属性还不是很了解，需要进一步的去尝试。

## 第二课 ##

### 理解HTML语义化标签 ###

语义化就是更好让机器（这里指的是浏览器）理解内容。  
HTML标签都有它自己的含义和具体的位置，比如在写导航的时候，我们可以使用`nav`标签，这样搜索引擎在搜集信息时就知道它是一个导航。

### HTML是什么，HTML5是什么 ###

HTML是用来描述网页的语言，HTML是超文本标记语言，不是编程语言，标记标签来描述网页。  
HTML5 是下一代的HTML，将成为HTML、XHTML 以及HTML DOM的新校准，正在进一步完善中。

### HTML元素标签、属性都是什么概念？ ###

HTML元素标签是指构成网页的主要结构，一般有开始标签和结束标签组成。  
属性为HTML元素提供附加信息，在开始标签中规定，属性以名称/值的形式存在。属性赋予元素意义和语境。

### 文档类型是什么概念，起什么作用？ ###

`<!DOCTYPE> 告诉浏览器使用哪个HTML版本进行编写`

### meta标签都用来做什么的？ ###

meta元素提供页面的元信息，例如页面的关键字、标题等。

### Web语义化是什么，是为了解决什么问题 ###

web语义化，从字面上理解是web语言的意义，一个语言的意义其实是为了沟通，在这里是和搜索引擎等机器沟通，简单的说就是让机器更好的读懂内容（理解代码），就需要我们根据具体内容使用HTML标签。  
总结：web语义化让机器更好的理解内容，便于开发者开发和维护。

### 链接是什么概念，对应什么标签？ ###

链接让整个网络链接起来，这大概就是超文本的意思，让我们可以到达互联网的任何地方，对应`<a>` 标签

### 常用标签都有哪些，都适合用在什么场景 ###

常用标签一般就是网页组成中通常有的，我列举一些

<title> 整个网页的标题
    <h1>    每个页面有一个标题
    <header>网页头部
    <nav>   导航
    <article>定义文章
    <aside> 页面内容之外的内容
    <section>文档中区段
    <footer>网页底部
    <form>  定义表单

### 表单标签都有哪些，对应着什么功能，都有哪些属性 ###

表单中标签其实都挺常用的，这里我重要复习下h5新增的标签和属性，后续具体的元素，属性再具体了解

<datalist>  定义下拉列表，代替了select标签
    <keygen>    定义表单生成秘钥
    <output>    定义输出的一些类型
    draggable       属性规定元素是否可拖动
    contenteditable 属性规定元素是否可编辑
    class           规定元素中的类名
    id              规定元素的唯一id

### ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子 ###

ol,ul,li 用来显示同类数据的展示，例如百度搜索结果。  
dl,dd,dt 用来显示定义项目和定义项目的描述，例如我们经常在购物网站中能看到，比如商品的标题是什么，下面就会有一段描述

## 第三课 ##

> 从新复习了一下css的东西，有一些自己还是用的不熟的，会再以后用一个记一个  
> 替换元素：img、input，非替换元素：span  
> 元素显示  
> 块级元素 默认填充父元素，旁边不能有其他元素，不能继承行内元素，不能嵌套在行内元素  
> 行内元素  
> 尽管行内元素内嵌套块级元素不会报错，但是html是不允许的，它有悖于我们说的语义化。

### 选择器 ###

通配选择器 \*  
元素选择器  
类选择器  
多类选择器  
id选择器  
属性选择器：

简单属性选择器 h1[class]，
        具体属性值选择器 a[href="http://www.baidu.com"]，
        部分属性值选择器 a[class~= "wraning"]

子串匹配选择器：

span[for^="bar"]    选择for属性以bar开头的所有元素
        span[for&="bar"]    选择for属性以bar结尾的所有元素
        span[for*="bar"]    选择for属性包含子串bar的所有元素
        span[lang|="en"]    选择lang属性等于en或en开头的元素

后代选择器（两个元素之间的层级间隔是无限的--减少使用）  
选择子元素（使用 `>`）  
选择相邻兄弟元素 （使用 + ）  
伪类选择器 a:visited 已访问链接，a:link 未访问链接，动态伪类 a:hover ，选择第一个子元素 a:first-child,综合伪类a?hover\{ color:red;\}  
伪元素选择器：设置块级元素首字母大写 p:first-letter \{color:red;\} 会使用户代理对一个假想的元素作出响应。  
：first-line,:before,:after

### 结构和层叠 ###

选择器的权重（特殊性）  
ID选择器 0 1 0 0  
类、属性、伪类 0 0 1 0 伪类选择器权重和属性选择器相同，都大于类选择器  
元素、伪元素 0 0 0 1  
内联样式 1 0 0 0  
结合符和通配符特殊性为0  
继承的值没有特殊性，连0 都没有  
重要性 !important 权重最大  
非css样式特殊性为0

[参考地址][Link 1][https://www.w3.org/TR/CSS22/cascade.html\#specificity][Link 1]

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
     li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
     li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
     ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
     ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
     h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
     ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
     li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
     #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
     style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

### 字体 ###

安全字体  
serif、sans-serif、monospace 三种字体

### 文本属性 ###

text-indent 文本缩进（块元素）  
text-align 水平对齐（块元素）  
line-height 垂直对齐、行高（所有元素）  
vertical-align 垂直对齐文本（行内元素和表单元素）  
word-spacing 字间隔（所有元素）  
letter-spacing 字母间隔（所有元素）  
text-transform 文本转换（所有元素）  
text-decoration 文本装饰（所有元素）  
text-shadow 文本阴影（所有元素）  
white-space 处理空白符（所有元素）  
direction 文本方向（所有元素）  
unicode-bidi 文本方向

### 浮动 ###

浮动会产生一个块级元素，宽度由内容默认制定，清楚浮动使用clear:left、right、both;

position定位  
static 元素框正常生成  
relative 元素框可偏离某个位置，元素仍保留未定位前的位置  
absolute 元素框从文档流删除，相对于其包含块定位，元素在正常流中占用空间不存在。绝对定位  
fixed 相对于窗口定位。固定定位  
包含块默认为html、body元素，absolute的参照于position值不是static的祖先元素

内容溢出和剪裁：overflow、clip(rect)  
元素可见性：visibility：visible、hidden。  
z-index z轴位置

转载于:https://www.cnblogs.com/geek12/p/11054569.html

[Link 1]: https://www.w3.org/TR/CSS22/cascade.html#specificity