关于HTML的那些事

HTML基础知识

meta标签

<!-- SEO搜素引擎优化，尽可能让本身的网站在搜索引擎有相关搜索时出现 -->
        <!--网站搜索时根据所提供的keywords获得搜索结果-->
        <meta name="keywords" content="鲜花,广州鲜花速递,深圳鲜花速递">
        <!--关于搜索结果的介绍-->
        <meta name="description" content="这是一个卖鲜花的网站">
        <!--字符集-->
        <!--出现乱码的状况，1.文件的字符集不是utf-8 2.meta charset不是utf-8-->
        <meta charset="UTF-8">
        <!--建立网站时，会有不少html页面，但网页首页服务器会默认是index，因此默认起名字是index-->
        <!--重置文件reset.cssnormalize.css下载link便可-->

doctype做用，严格模式和混杂模式如何区分，它们有何意义？

doctype声明位于HTML文档的第一行，位于html标签以前，用于告知浏览器解析器用什么文档标准解析这个文档，doctype不存在或者格式不正确会致使文档以兼容模式呈现

在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法工做。标准模式的排版和JS运做模式都是以该浏览器支持的最高标准运行。

若是HTML文档包含形式完整的doctype，那么他通常是以标准模式呈现，对于HTML4.01文档，包含严格的DTD的doctype经常致使页面以标准模式呈现，doctype不存在或者格式不对会致使文档以混杂模式出现。

请描述一个网页从开始请求到最终显示的完整过程?

1.在浏览器输入网址
2.发送至DNS服务器并得到域名对应的WEB服务器IP地址
3.与WEB服务器创建TCP链接
4.浏览器向WEB服务器的IP地址发送相应的HTTP请求
5.WEB服务器响应请求并返回指定的url的数据或错误信息。若是重定向，则重定向到新的url地址
6.浏览器下载数据后解析HTML源文件，解析的过程当中实现对页面的排版，解析完成后在浏览器显示基础页面
7.分析页面中的超连接并显示在当前页面，重复以上过程直至无超连接须要发送，完成所有数据显示。

html5为何只须要写<！DOCTYPE HTML>？

html5不基于SGML，所以不须要对DTD进行引用
html4.01基于SGML，所以须要对DTD进行引用

浏览器内核的理解

浏览器最重要或者说核心部分：渲染引擎，不过咱们通常称之为浏览器内核。负责对网页语法的解释（标准通用标记语言下的一个应用html，javascript）并渲染显示的网页。渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息，不一样的浏览器内核对网页编写语法的解释也有不一样，所以同一网页在不一样浏览器内核的浏览器里渲染显示的效果也不一样。
渲染引擎负责获取网页的内容，整理讯息，以及计算网页的显示方式

经常使用浏览器内核

Trident内核(MSHTML)：IE，360，搜狗
Gecko内核：FireFox
Presto内核：Opera7以上
（Opera内核原为Presto 现为Blink）
webkit内核：Safari，Chrome
（Chrome的Blink使webkit的分支）
EdgeHTML内核：Microsoft Edge
（此内核实际上是从MSHTMLfork来的，删除了几乎全部IE私有特性）

简述一下对html语义化的理解

1.html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析
2.即使在没有css样式的状况下也能以一种文档格式显示，而且是容易阅读的。
3.搜索引擎的爬虫也依赖于HTML标记来肯定上下文和各个关键字的权重，有利于SEO
4.使阅读源代码的人更容易将网站分块，便于阅读，维护和理解。

行级元素和块级元素分别有哪些？

行级元素：
a, em(强调),strong(粗体强调)，span,i(斜体),img,b(粗体),lable(表格标签),
select(项目选择),textarea(多行文本输入框)sub（下标）
不能设置宽高宽高是内容的高度,能够设置padding，只能设置左右的外边距，不能设置上下外边距
块元素：
不设置高，靠内容充起来,宽度不设置的状况下是充满父级元素的
能够设置宽高，外边距，内边距
div dl定义列表 dt dd ul 非排序列表
ol，p，h1-h6，table，fieldset form，
空元素：br hr
行内块级元素 input和img

a标签

href里不只能够是一个远程地址，还能够是一个本地文件

<a href="https://ww.baidu.com" target="_blank">百度一下</a>
    <!--target属性值的说明
    _blank从新启动一个新的页面
    _parent是父级页面打开
    _top是最上层的页面打开-->

link和@impoort的区别

1.link属于XHTML标签，而@import是CSS提供的
2.页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完了再加载
3.import只在ie5以上才能被识别，而link是XHTML标签，无兼容性问题
4.link方式的样式权重高于@import的权重
5.使用dom控制样式时的差异，当使用js控制dom去改变样式的时候，只能使用link标签。

列表标签

ol,ul,li样式重置:list-style:none
a样式重置：text-direction ：none
ul，ol有上下16px的外边距，左面40px内边距

img标签

<img id="zyl" src="resourses/zylbg.jpg" alt="图片加载失败" title="这是居老师的图片">
<!--alt在图片加载失败时显示 title是在鼠标放到图片上显示-->
<!--设置页面头的图片第一种是a标签里嵌套img标签。ie6下，若是a标签包含img标签，img会有一个边框，须要样式重置border=0-->
<!--当a标签中有img标签的时候：a标签若没有改变成block 则图片的宽高会有错误-->
<!--当图片做为块级元素的背景图片出现的时候，若是块级元素没有设置高度那么整个块级元素将不显示图片-->
<!--background-position:center;//水平垂直居中
//right center //右侧 垂直居中
//right bottom(top)//右侧底部(头部)-->

背景图片大于要显示的大小的时候
<!--background-position: center top;-->
<!--让图片显示中间的部分-->
<!--background-size: auto 100%;-->
<!--适应要显示的大小-->

table标签

<table border="1">
        <tr>
            <td colspan="2">11</td>
    <!--跨列合并单元格-->
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
    </table>
<!--td能够设置宽高跟行内块级元素差很少，tr和table是块级元素-->
<!--table标签里有border属性，这个和style里边的border不一样-->
<!--table里面的属性跨行时只能从上往下跨行不能从下往上跨行。-->
<!--跨列的时候若是左面的一列不见了，那么右面的列会移到左面-->
<!--这个属性能够用在新闻网页，当鼠标放在a标签上的时候会显示这种提示-->