HTML
Hyper Text(超文本) Markup(标记) Language(语言)
- 五大浏览器及内核
ie (trident)
谷歌 (webkit/blink)
火狐 (gecko)
safari (webkit)
欧朋 (presto)
-
HTTP和HTTPS的基本概念
- HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。
- HTTPS:是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。
- HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。
-
HTTP与HTTPS有什么区别?
- HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了SSL(Secure Sockets Layer)协议用于对HTTP协议传输的数据进行加密,从而就诞生了HTTPS。简单来说,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全。
- HTTPS和HTTP的区别主要如下:
-
- https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
-
- http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
-
- http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
-
- http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
-
- HTTPS的工作原理
- 我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取,所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。
- 客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤,如图所示。
-
- 客户使用https的URL访问Web服务器,要求与Web服务器建立SSL连接。
-
- Web服务器收到客户端请求后,会将网站的证书信息(证书中包含公钥)传送一份给客户端。
-
- 客户端的浏览器与Web服务器开始协商SSL连接的安全等级,也就是信息加密的等级。
-
- 客户端的浏览器根据双方同意的安全等级,建立会话密钥,然后利用网站的公钥将会话密钥加密,并传送给网站。
-
- Web服务器利用自己的私钥解密出会话密钥。
-
- Web服务器利用会话密钥加密与客户端之间的通信。
-
-
HTTPS的优点
- 尽管HTTPS并非绝对安全,掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击,但HTTPS仍是现行架构下最安全的解决方案,主要有以下几个好处:
-
- 使用HTTPS协议可认证用户和服务器,确保数据发送到正确的客户机和服务器;
-
- HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全,可防止数据在传输过程中不被窃取、改变,确保数据的完整性。
-
- HTTPS是现行架构下最安全的解决方案,虽然不是绝对安全,但它大幅增加了中间人攻击的成本。
-
- 谷歌曾在2014年8月份调整搜索引擎算法,并称“比起同等HTTP网站,采用HTTPS加密的网站在搜索结果中的排名将会更高”。
-
- 尽管HTTPS并非绝对安全,掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击,但HTTPS仍是现行架构下最安全的解决方案,主要有以下几个好处:
-
HTTPS的缺点
- 虽然说HTTPS有很大的优势,但其相对来说,还是存在不足之处的:
-
- HTTPS协议握手阶段比较费时,会使页面的加载时间延长近50%,增加10%到20%的耗电。
-
- HTTPS连接缓存不如HTTP高效,会增加数据开销和功耗,甚至已有的安全措施也会因此而受到影响。
-
- SSL证书需要钱,功能越强大的证书费用越高,个人网站、小网站没有必要一般不会用。
-
- SSL证书通常需要绑定IP,不能在同一IP上绑定多个域名,IPv4资源不可能支撑这个消耗。
-
- HTTPS协议的加密范围也比较有限,在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的,SSL证书的信用链体系并不安全,特别是在某些国家可以控制CA根证书的情况下,中间人攻击一样可行。
-
- 虽然说HTTPS有很大的优势,但其相对来说,还是存在不足之处的:
- 简述浏览器请求数据过程
-
- 按下回车时浏览器根据输入的URL地址发送请求报文
-
- 服务器接收到请求报文,会对请求报文进行处理
-
- 服务器将处理完的结果通过响应报文返回给浏览器
-
- 浏览器解析服务器返回的结果,将结果显示出来
-
- 什么是 URL
- 1.我们在浏览器的地址栏中输入的地址其实就是URL
- 2.URL格式:
- 127.0.0.1/index.html (浏览器会自动补全http:和:80)
- http://127.0.0.1/index.html ( 浏览器会自动补全:80)
http://127.0.0.1:80/index.html(完整格式)
协议类型://ip地址:端口号/资源路径/资源名称
- 3.URL拆分
- 网络协议类型 http://
- 服务器IP地址 127.0.0.1
- 服务器端口号 : 80
资源路径 网页在服务器上的路径
资源名称 index.html
- 了解了什么是URL和URL的组成部分之后,我们就来聊一聊 同源策略
- 什么叫同源?
URL由协议、域名、端口和路径组成,如果两个URL( 也就是请求的URL地址,必须与浏览器上的URL地址处于同域[ 同域就是协议、域名和端口相同 ])则表示他们同源。 相反,只要协议,域名,端口有任何一个的不同,就被当作是跨域
。
- 什么叫同源?
作用:指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english
- html、xhtml、html5的区别
- html:语法非常松散,容错性强
- xhtml:更为严格,要求标签必须小写,必须闭合,标签中的属性必须使用引号引起来等.
- html5:是html的下一个版本,除了非常松散容错性强之外,还增加了许多新特性
用来统一该页面的所有超链接以什么方式打开
meta
标签常见使用
- 字符集(简单说就是字符的集合)
- 页面描述,用于搜索引擎收录
- 页面关键词,用于被搜索引擎收录
- 兼容IE
- 禁止用户缩放/做移动端适配等
- 设置标签页的小图标
html
标签
注意:企业开发中一个页面只能有一个标签,而且要慎用h系列的标签
-
SEO简介
全称:Search English Optimization,搜索引擎优化。自从有了搜索引擎,SEO便诞生了。
存在的意义:为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之,就是希望百度等搜索引擎能多多我们收录精心制作后的网站,并且在别人访问时网站能排在前面。
-
分类:白帽SEO和黑帽SEO。白帽SEO,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获取合理的流量,这是搜索引擎鼓励和支持的。黑帽SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量,这类行为大多是欺骗搜索引擎,一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO,那么白帽SEO能做什么呢?
-
- 对网站的标题、关键字、描述精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;
-
- 网站内容优化:内容与关键字的对应,增加关键字的密度;
-
- 在网站上合理设置Robot.txt文件;
-
- 生成针对搜索引擎友好的网站地图;
-
- 增加外部链接,到各个网站上宣传
-
前端SEO
通过网站的结构布局设计和网页代码优化,使前端页面既能让浏览器用户能够看懂,也能让“蜘蛛”看懂。-
一、网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。
一般而言,建立的网站结构层次越少,越容易被“蜘蛛”抓取,也就容易被收录。一般中小型网站目录结构超过三级,“蜘蛛”便不愿意往下爬,“万一天黑迷路了怎么办”。并且根据相关调查:访客如果经过跳转3次还没找到需要的信息,很可能离开。因此,三层目录结构也是体验的需要。为此我们需要做到:1.控制首页链接数量
网站首页是权重最高的地方,如果首页链接太少,没有“桥”,“蜘蛛”不能继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。
因此对于中小型企业网站,建议首页链接在100个以内,链接的性质可以包含页面导航、底部导航、锚文字链接等等,注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。2.扁平化的目录层次
尽量让“蜘蛛”只要跳转3次,就能到达网站内的任何一个内页。扁平化的目录结构,比如:“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”,通过3级就能找到香蕉了。3.导航优化
其次,在每一个网页上应该加上面包屑导航,好处:从用户体验方面来说,可以让用户了解当前所处的位置以及当前页面在整个网站中的位置,帮助用户很快了解网站组织形式,从而形成更好的位置感,同时提供了返回各个页面的接口,方便用户操作;对“蜘蛛”而言,能够清楚的了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率。4.网站的结构布局--不可忽略的细节
页面头部:logo及主导航,以及用户的信息。
页面主体:左边正文,包括面包屑导航及正文;右边放热门文章及相关文章,好处:留住访客,让访客多停留,对“蜘蛛”而言,这些文章属于相关链接,增强了页面相关性,也能增强页面的权重。
页面底部:版权信息和友情链接。
特别注意:分页导航写法,推荐写法:“首页 1 2 3 4 5 6 7 8 9 下拉框”,这样“蜘蛛”能够根据相应页码直接跳转,下拉框直接选择页面跳转。而下面的写法是不推荐的,“首页 下一页 尾页”,特别是当分页数量特别多时,“蜘蛛”需要经过很多次往下爬,才能抓取,会很累、会容易放弃。5.控制页面的大小,减少http请求,提高网站的加载速度。
一个页面最好不要超过100k,太大,页面加载速度慢。当速度很慢时,用户体验不好,留不住访客,并且一旦超时,“蜘蛛”也会离开。
-
二、网页代码优化
1.
标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的标题中不要设置相同的内容。标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的 标题中不要设置相同的内容。 2.
标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。
3.
标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。
4.
中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,
标签是用来设置页面主导航的等。
5.
标签:页内链接,要加 “title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。
6.正文标题要用
标签:“蜘蛛” 认为它最重要,若不喜欢
的默认样式可以通过CSS设置。尽量做到正文标题用
标签,副标题用
标签, 而其它地方不应该随便乱用 h 标题标签。
7.
标签:只用于文本内容的换行。8.表格应该使用
表格标题标签。 9.
应使用 "alt" 属性加以说明。
10.
、
标签 : 需要强调时使用。
标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,
标签强调效果仅次于
标签。
、
标签: 只是用于显示效果时使用,在SEO中不会起任何效果。
11.文本缩进不要使用特殊符号
©
可以直接使用输入法,拼“banquan”,选择序号5就能打出版权符号©
。12.巧妙利用CSS布局,将重要内容的HTML代码放在最前面,最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。
13.重要内容不要用JS输出,因为“蜘蛛”不认识。
14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。
15.谨慎使用
display:none ;
对于不想显示的文字内容,应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none
其中的内容。16.不断精简代码。
17.js代码如果是操作DOM操作,应尽量放在body结束标签之前,html代码之后。
鼠标放上来就能看到title内容
- 功能与属性
- 常用属性:
-
src
图片的路径 -
alt
图片地址错误时显示给用户看的内容 -
title
鼠标悬停在图片上看到的提示
-
-
我是P标签
我是a标签
- 无序列表:
- 注意点:
ul
里面只能放li
标签,但是li
标签里面可以放其他标签
- 注意点:
- 表格标签:
- 表格标签默认边框是0,如想要看到效果如要给
table
添加border="1"
-
让表格标题居中于表格中间,必须放在table
标签后面 -
会让标题自动加粗和居中
-
input
标签-
type
属性的取值 -
button
按钮 -
checkbox
多选框 -
file
上传文件 -
image
图片 -
password
密码 -
radio
单选框 -
reset
清空内容 -
submit
提交 -
text
文本
-
- 视频标签的两种格式:
- 音频标签
-
属性和注意点:
- 属性:可参考
video
属性(视频标签属性参考) - 注意:
audio
标签的使用和video
标签使用基本一样,只不过有三个不能用。height
/width
/poster
- 属性:可参考
概要和详情标签
[这是我的](https://www.jianshu.com/p/3c4c0ef28502)
这是我的第一篇文章,如果对你有帮助,可以点个赞支持一下 !!
- 跑马灯效果
-
属性:
-
direction
设置滚动方向 ;值:left
/right
/up
/down
-
scrollamount
设置滚动速度 ;值:越大越快 -
loop
设置滚动次数,默认是-1,无线滚动,数字越小次数越少 -
behavior
设置滚动类型,slide
滚动到边界就停止;alternate
滚动到边界就弹回
-
-
被废弃的标签-
不另起段落换行 -
一条横线 -
加粗
==
-
加下划线
==
-
倾斜
-
加中划线==
-
HTML
常见面试题
-
HTML5
有哪些新特性- 1.拖拽释放(
Drag and drop
) API - 2.语义化更好的内容标签(
header
,nav
,footer
,aside
,article
,section
) - 3.音频、视频API(
audio
,video
) - 4.画布(
Canvas
) API - 5.地理(
Geolocation
) API - 6.表单控件,
calendar
、date
、time
、email
、url
、search
- 7.新的技术
webworker
,websocket
,Geolocation
- 8.本地离线存储
localStorage
长期存储数据,浏览器关闭后数据不丢失 -
-
sessionStorage
的数据在浏览器关闭后自动删除
-
- 1.拖拽释放(
-
简述一下对HTML语义化的理解
- 1.去掉或丢失样式的时候能够让页面呈现出清晰的结构。
- 2.有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的信息,爬虫依赖于标签来确定上下文和各个关键字的权重。
- 3.方便其它设备解析。
- 4.便于团队开发和维护,语义化根据可读性。
-
DOCTYPE
有什么作用?标准模式与混杂模式如何区分?它们有何意义?- 作用:告诉浏览器使用哪个版本的HTML规范来渲染文档。
DOCTYPE
不存在或形式不正确会导致HTML
文档以混杂模式呈现。 - 标准模式(
Standards mode
)以浏览器支持的最高标准运行; - 混杂模式(
Quirks mode
)中页面是一种比较宽松的向后兼容的方式显示。
- 作用:告诉浏览器使用哪个版本的HTML规范来渲染文档。
参考:
HTML字符编码
W3Cschool
字符实体