我的前端入门笔记(1)--html

初识前端,凭着脑中模糊的前端映像,凭着网络搜索的“只言片语”,我将在这条路上渐行渐远。随着学习的深入,总觉着该写些什么,内容不多只言片语,闲暇时翻来看看未尝不是一件令人欣慰的事。我的前端笔记将随着课程的进度逐渐展开,以下内容纯属个人理解,如有异议欢迎辅正。


1.w3c标准和html语义化。

网页由三部分组成:结构、表现、行为;

对应的标准也分为三个方面:结构化标准:xhtml和xml网页元素内容;表现标准:CSS控制网页样式;行为标准:ECMAScript, DOM, BOM操作网页内容,实现功能或者效果。

html语义化:选择合适的标签,使用合理的代码结构,便于开发者阅读,让浏览器爬虫和机器能更好的解析,有利于搜索引擎的抓取。

优点 1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构; 2. 有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重); 3. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页; 4. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

2.头部标签。

Doctype:用于声明文档使用规范;告知浏览器文档使用哪种 HTML 或 XHTML 规范。

meta:提供有关页面的元信息。

.<meta name="description" content=" ">定义描述内容,显示在搜索页面标题下方的一段文字

.<meta name="keyword" content=" ">定义关键字,用来描述网站相关内容,便于网络爬虫的抓取。

.<meta http-equiv="Cache-Control" content="no-cache">防止网页缓存到本地

title:定义页面标题。

3.常见的浏览器及其内核。

使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

使用Presto内核的浏览器:Opera7及以上版本;

使用Webkit内核的浏览器:Safari、Chrome、360的极速模式等、搜狗浏览器。

4.关于src、url的用处和alt、title的区别。

url:用于css样式中background-image属性的地址链接;

src:用于html中<img>标签的地址链接;

alt:用于图片标签中网上过慢图片加载慢时的图片占位解释字;

title:用于鼠标放上时显示的提示框。

5.块级元素和行内元素。

块级元素占用空间是一整行,行内元素占用空间是它自身的内容宽度。行内元素可以一并排显示,块级元素不能。

行内元素:a、span、img、input、button、em、textarea

.设置宽度width  无效。

•设置高度height  无效,可以通过line-height来设置。

•设置margin 只有左右margin有效,上下无效。

•设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

行内元素和块级元素之间的转换:

.display:block  将行内元素转化为块级元素,拥有块级元素的属性;

.display:inline-block 将行内元素转换为行内块元素,拥有行内元素和块级元素的所有属性。

6.浏览器标准模式、怪异模式及标准盒模型、怪异盒模型。

怪异模式:使用浏览器自己的方式解析执行代码,页面以一种比较宽松的向后兼容(高版本可以兼容低版本)的方式显示。因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式;

标准盒模型:实际的宽/高 = width/height + 2padding + 2border;

怪异盒模型: width/height就是该盒子的大小,是包含内边距padding和边框border宽度在内的,即实际宽/高=width/height=2padding+2border+content(这种情况发生在html文档中没有文档声明的情况下)

7.表单提交中,get方式和post方式的区别。

.get提交的数据在浏览器历史记录中,安全性不好。

1. 无法使用缓存文件(更新服务器上的文件或数据库)

2. 向服务器发送大量数据(POST 没有数据量限制)

3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

8.px、em、rem的区别。

.Em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸:1. em的值并不是固定的;2. em会继承父级元素的字体大小。

.Rem:相对的只是HTML根元素。它可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

9.从输入url到页面呈现的过程。

.url到IP:DNS解析过程:域名解析服务器指向对应的主机的IP地址 。浏览器查缓存→系统缓存→路由器缓存→服务商缓存→根服务器缓存(目的:通过URL定位到IP地址找到主机);

.打包http请求:浏览器打包服务器所需信息;

.创建tcp协议(浏览器向服务器发出请求);

.浏览器发送相关信息至服务器;

.相关进程处理请求:服务器通过端口号确定哪个进程处理该请求;

.服务器响应请求;

.服务器响应内容后传递给浏览器;

.浏览器拿到内容后进行下载和页面渲染。

2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

3. 一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。

4. 此时,Web 服务器提供资源服务,客户端开始下载资源。

请求返回后,便进入了我们关注的前端模块

简单来说,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又可以根据 DOM API 操作 DOM

三次握手:

1.浏览器向服务器发出请求并发送相关信息;

2.服务器收到信息后进行确认,并返回信息至浏览器;

3.浏览器收到返回信息后进行确认。

10.网页乱码原因及解决方式

原因:html文件中设置的编码格式与浏览器的解码格式不一致

解决:在head中设置<meat charset="">(charset的值为文件保存时的编码方式,告诉浏览器以哪种方式解码)

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

推荐阅读更多精彩内容