百度前端学习

第一课

今天是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 测试 伪元素::first-line 比!important 都高
内联样式 1 0 0 0
结合符和通配符特殊性为0
继承的值没有特殊性，连0 都没有
重要性 !important 权重最大
非css样式特殊性为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轴位置