html重点知识

HTML

Hyper Text（超文本） Markup（标记） Language（语言）

  • 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的区别主要如下：
        1. https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
        1. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
        1. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
        1. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
  • HTTPS的工作原理
    • 我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取，所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。
image.png
  • 客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。
      1. 客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。
      1. Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。
      1. 客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。
      1. 客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。
      1. Web服务器利用自己的私钥解密出会话密钥。
      1. Web服务器利用会话密钥加密与客户端之间的通信。
image.png

  • HTTPS的优点

    • 尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：
        1. 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
        1. HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
        1. HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
        1. 谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

  • HTTPS的缺点

    • 虽然说HTTPS有很大的优势，但其相对来说，还是存在不足之处的：
        1. HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电。
        1. HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响。
        1. SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。
        1. SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。
        1. HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。
  • 简述浏览器请求数据过程
      1. 按下回车时浏览器根据输入的URL地址发送请求报文
      1. 服务器接收到请求报文，会对请求报文进行处理
      1. 服务器将处理完的结果通过响应报文返回给浏览器
      1. 浏览器解析服务器返回的结果，将结果显示出来
image.png
  • 什么是 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
image.png


  • 了解了什么是URL和URL的组成部分之后，我们就来聊一聊 同源策略
    • 什么叫同源？
      URL由协议、域名、端口和路径组成，如果两个URL( 也就是请求的URL地址，必须与浏览器上的URL地址处于同域[ 同域就是协议、域名和端口相同 ])则表示他们同源。 相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。
看图更明白


<!DOCTYPE html>

作用：指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<html lang="en">

向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english

  • html、xhtml、html5的区别
    • html:语法非常松散,容错性强
    • xhtml:更为严格,要求标签必须小写,必须闭合,标签中的属性必须使用引号引起来等.
    • html5:是html的下一个版本,除了非常松散容错性强之外,还增加了许多新特性

 <base target="_blank">

用来统一该页面的所有超链接以什么方式打开

meta标签常见使用

<meta charset="utf-8">
  • 页面描述，用于搜索引擎收录
<meta name="description" content=" " />
  • 页面关键词，用于被搜索引擎收录
<meta name="keyword" content=" " />
  • 兼容IE
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 禁止用户缩放/做移动端适配等
<meta name="viewport"   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 设置标签页的小图标
<link rel="shortcut icon" href="图片地址.ico" type="image/x-icon">



html标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

注意:企业开发中一个页面只能有一个<h1></h1>标签,而且要慎用h系列的标签


  • SEO简介

    • 全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。

    • 存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

    • 分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能做什么呢？

        1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
        1. 网站内容优化：内容与关键字的对应，增加关键字的密度；
        1. 在网站上合理设置Robot.txt文件；
        1. 生成针对搜索引擎友好的网站地图；
        1. 增加外部链接，到各个网站上宣传

  • 前端SEO
    通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。

  • 一、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
      一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

    • 1.控制首页链接数量
        网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
        因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

    • 2.扁平化的目录层次
        尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，通过3级就能找到香蕉了。

    • 3.导航优化
        其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

    • 4.网站的结构布局--不可忽略的细节
        页面头部：logo及主导航，以及用户的信息。
        页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
        页面底部：版权信息和友情链接。
        特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

    • 5.控制页面的大小，减少http请求，提高网站的加载速度。
        一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

  • 二、网页代码优化

    • 1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。

    • 2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

    • 3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

    • 4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。

    • 5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

    • 6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。

    • 7.<br>标签：只用于文本内容的换行。

    • 8.表格应该使用<caption>表格标题标签。

    • 9.<img>应使用 "alt" 属性加以说明。

    • 10.<strong>、<em>标签 : 需要强调时使用。
         <strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
         <b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

    • 11.文本缩进不要使用特殊符号 &nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy;可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

    • 12.巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

    • 13.重要内容不要用JS输出，因为“蜘蛛”不认识。

    • 14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。

    • 15.谨慎使用display：none ;对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

    • 16.不断精简代码。

    • 17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。


<a href="http://www.baidu.com"  title="你能看到我"  target="_self">鼠标放上来就能看到title内容</a>
  • 功能与属性
    • 锚点：a标签href里面写上需要跳到位置的标签的ID名
    • 跳转到指定页面的指定部分,需要在a标签的href里添加该页面的地址+指定部分的ID
    • 例: <a href="index.html#center" >跳转到指定页面的指定部分</a>
    • href 里面有个tel：电话号的属性，可以用这个来拨打电话，可以用来做电商商家电话功能
    • 例:<a href="tel:182101*****">作者电话</a> 
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" title="郁金香"/>
  • 常用属性：
    • src 图片的路径
    • alt 图片地址错误时显示给用户看的内容
    • title 鼠标悬停在图片上看到的提示
<ul>
 <li>
    <p>我是P标签</p>
    <a href=" ">我是a标签</a>
 </li>
 <li></li>
</ul>
  • 无序列表：
    • 注意点：ul里面只能放li标签,但是li标签里面可以放其他标签
<table border="1" cellspacing="0">
  <caption></caption>
  <tr>
    <th></th>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
  • 表格标签：
    • <table border="1"></table>
    • 表格标签默认边框是0,如想要看到效果如要给table添加border="1"
    • <caption></caption>让表格标题居中于表格中间,必须放在table标签后面
    • <th></th>会让标题自动加粗和居中
<input type="text">
  • input 标签
    • type 属性的取值
    • button 按钮
    • checkbox 多选框
    • file 上传文件
    • image 图片
    • password 密码
    • radio 单选框
    • reset 清空内容
    • submit 提交
    • text 文本
<textarea name="" cols="40" rows="8" style="resize: none">    
  这是一个多行的文本输入框
  resize是控制输入框不可拖动
</textarea>
  • 视频标签的两种格式:
<video src="视频路径" autoplay="autoplay" controls="controls" poster=""></video>

<video>
  <source src="视频路径"  type="video/webm"></source>
  <source src=""  type="video/mp4"></source>
  <source src=""  type="video/ogg"></source>
</video>
视频标签属性参考
  • 音频标签
<audio src="" autoplay="autoplay" controls="controls"></audio>

  • 属性和注意点：

    • 属性：可参考video属性(视频标签属性参考)
    • 注意：audio标签的使用和video标签使用基本一样，只不过有三个不能用。height / width / poster

  • 概要和详情标签

<details>
  <summary style="outline: none">[这是我的简书](https://www.jianshu.com/p/3c4c0ef28502)</summary>
  这是我的第一篇简书文章，如果对你有帮助，可以点个赞支持一下 !!
</details>
  • 跑马灯效果
<marquee behavior="" direction="">爸爸的爸爸叫爷爷</marquee>

  • 属性：

    • direction设置滚动方向 ；值：left / right / up / down
    • scrollamount设置滚动速度 ；值：越大越快
    • loop设置滚动次数，默认是-1，无线滚动，数字越小次数越少
    • behavior设置滚动类型，slide滚动到边界就停止；alternate滚动到边界就弹回

  • 被废弃的标签

    • <br> 不另起段落换行
    • <hr> 一条横线
    • <font></font>
    • <b>加粗</b> == <strong></strong>
    • <u>加下划线</u> == <ins></ins>
    • <i>倾斜</i> <em></em>
    • <s>加中划线</s> == <del></del>


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 长期存储数据，浏览器关闭后数据不丢失
      1. sessionStorage 的数据在浏览器关闭后自动删除

  • 简述一下对HTML语义化的理解

    • 1.去掉或丢失样式的时候能够让页面呈现出清晰的结构。
    • 2.有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
    • 3.方便其它设备解析。
    • 4.便于团队开发和维护，语义化根据可读性。

  • DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

    • 作用：告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
    • 标准模式（Standards mode）以浏览器支持的最高标准运行；
    • 混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。



参考：

HTML字符编码

W3Cschool

字符实体

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342