【全栈记】有半个月没有更新了，本打算以“周记”的方式记录自己的全栈学习过程，但并未做到，两周内我想了蛮多，学习前端的过程中是否应该深挖底层原理，什么时候“深挖”合适？“深挖”多深比较合适？脑海中常常会浮现“技术是怎么发展起来的”，技术的不断发展推动着人类社会文明的进步，特想追根溯源；如今虽然想到的皆是片面，却也很是震憾！目前阶段要把“技术”优先级提到最高，尽快成为合格的“攻城狮”，“全栈记”原定于周更，现在要变成不定时更新啦。初心仍在：希望对读者有所帮助，同时也督促自己不断进步，更新自己的“知识库”。
学习前端有将近40天了，今天总结html、css，过程中仍然发现存在很多“认知”上的误区，不过已经解决了欧~
【前言】
W3C标准规定：结构、样式、行为相分离，html负责结构、css负责样式、javascript负责行为；各司其职做自己最擅长的事情，我们需要编写高质量的代码，这就需要我们做到组织好代码的结构（稳定不要随便更改，添加/删除标签）、提高页面加载速度（代码的重用和减小文件的大小）；
浏览器和服务器的关系：用户通过浏览器浏览网页的过程是：用户通过域名访问，也就是发出请求了，内部过程是，域名通过dns(域名解析系统)转化为物理地址，然后找到服务器，服务器开始响应然后将用户请求的网页发给客户端浏览器，浏览器需要将网页加载出来（渲染），渲染过程中，html 和css异步 、javascript是同步，一旦浏览器采用默认加载策略，类似于网络环境不好（常常会出现），首先加载html结构,这时候没有样式和Javascript渲染，会出现文本类型的网页效果；（特：大型企业会有解决方案，稍后会提到）
我们最终是把html、css、javascript文件打包成一个包扔到服务器中，（服务器问题就是传输数据的问题，谁传输数据谁就是服务器）用户访问时通过域名进行访问取得（下载html、css、javascript文件）网页到自己的机器（浏览器中）下载到浏览器中是网站的副本 ，这也是为什么我们在控制台中可以任意修改代码，刷新后依旧恢复正常[刷新网页会重新请求数据]；
【正文】
PC端最终还是需要处理浏览器的兼容性问题，所以对浏览器要有基础的认知，可访问：浏览器知识延展（5大主流4大内核） - 简书
html：超文本标记语言(HyperText Markup Language),超文本指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。目前分享都是基于html4.01，css2.0；html发展历程不过多阐述，后缀名可以是“.htm”【2014年，html5 标准规范制定完成， html5.0添加新的标签和属性；2001年 css3的工作草案制定完成，目前仍在更新推出新模块】
1、html结构：
html结构
<html></html>：html标签是根标签，包含head标签、body标签（结构化标签）；head是给浏览器解析的，body中的内容是给用户展示的；
<!DOCTYPE html>：网页文档类型声明，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档；
<html lang="en">：告诉搜索引擎爬虫该网站是关于什么内容的；language:语言，en：english、zh:中文，de:德语；<html lang ="en , zh">
<meta charset= "utf-8">：编码方式 ,浏览器使用什么编码解析网页；常用的有GB2312（亚洲字符集都包含了，但不包含繁体字），后来推出了GBK，繁体字的问题解决了，unicode：万国码 包含utf-8/urf-16;
<meta name="viewport" content="width=device-width, initial-scale=1.0">：视口设置，width=device-width：让页面的宽度（视口）等于设备的宽度；innitial-scale=1.0：设置初始缩放比例为1（不缩小不放大）； user-scalable （no,yes）：不允许用户进行缩放；
<meta http-equiv="X-UA-Compatible" content="ie=edge">：ie=edge:默认ie浏览器，解决浏览器兼容问题；// http-equiv="X-UA-Compatible"只有IE8可识别，以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以edge引擎来渲染页面
<title></title>：网页标题
字符集关系
2、<body>中的标签（标签也称为元素）：
行元素(内联元素)：<span>、<a>、<strong>、<em>、i 、del,
快元素：<div> 、<h1>、< p>、<ul>、<ol>、<li>、 pre,form ,address、dt,dd,dl
行内快元素：<img>、<input>、<textarea>、<button> 、<select> 表单元素都是行内快元素
三者都有隐式的属性： display:inline / block / inline-block;
(1).凡是带有inline的元素，都有文字特性，编辑器中若是折行书写，浏览器渲染两者之间有空格，若是不折行书写，之间的空格消失，这也是后面解决多张图片水平排列默认4px间隔的底层原理；
<span>huahua</span><span>kukuku</span> 中间间隔消失；
(2).行级元素只能嵌套行级元素，快级元素可以嵌套任何元素；
特殊： [1].p标签中不能嵌套快级元素 <p><div></div></p>(其他都正常) 错误用法，控制台：div将p标签分成了两个p标签；[2].a标签中不能嵌套a标签，到底跳转那个？
3、html编码：&； 中间填充字符， 掌握三个html编码： 空格、< (less than 小于“<”) 、>( great than 大于“>”); 使用<、>；可以解决打印一个标签，例如<div>;
长单词溢出
如上：盒子宽高确定， 首个div浏览器默认是一个单词，超出盒子宽度则会溢出，第二个div是汉字浏览器会识别每个汉字，有分隔的，所以超出折行，第三个盒子加空格有了分隔符，就不会溢出了
4、有序 / 无序列表： ol li前的类型部分（数字、罗马等）以及ul li 前的点部分都属于 ul ol 的padding部分；
5、img标签：
使用图片设置宽高时（img 、background-image），可只设置宽或高，（等比例缩放）；img是行内快元素，当创建多张图片时，相邻图片之间会存在间隔 （大约4px）;
【文字类属性标签都会存在间隔：文字类属性就是含有“inline”，显式/隐式都OK】
解决方案：1、设置margin-left：-4px; 2、4张img图片“压缩空格”排列，综上由于我们最终是把写好的文件部署到服务器中，需要提高页面加载速度（代码的重用和减小文件的大小），企业开发规范中，合成软件自行压缩，所以第二种是最佳方案；
【企业开发：合成软件将html,css,javascript文件进行打包同时还要进行压缩（内容小，浏览器加载速度才快） 压缩：1、自动缩减空格，回车，2、标签字符替换，【多张img图片代码最终往往都被连在一起，所以开发过程中最优写成一行，不要加margin】
6、a标签
7、form表单(form：块元素，组件都为行内快元素；此外：input没有伪元素)
text/password/submit/reset
radio/checkbox/select/button
<input type="button" value="显示消息框> 这也是一个按钮，value就是内容值；
文本输入框中有些bug,js处理；
form表单中label标签：其不会向用户呈现出任何效果，只是为鼠标用户改进了可用性，点击此标签中的内容会触发此控件；（使用方法<label for = "控件id名称">）
标签的 for 属性中的值与相关控件的 id 属性值一定要相同，class属性不可以；
网友评论