HTML部分

作者: 能吃饭也能吃苦1236 | 来源:发表于2018-11-30 00:03 被阅读0次

引入样式，使用什么标签？

HTML有三种样式引入方式：行内样式、嵌入式样式表、外部样式表。

行内样式
又称内联表单样式，它直接卸载标签内部，用style属性生命。行内样式不能实现所有样式，比如hover和@import。

<p style="color: red; background: yellow;">Hello World!</p>

嵌入式样式表
又称内部样式表，必须写在<head>标签中,用<style>标签声明。

<html>
<head>
<title>例子</title>
<style type="text/css">
h1 {color: purple;}
p {font-size: smaller; color: gray;}
</style>
</head>
...
</html>

外部样式引入
3.1 外部样式引入相比于前两种方-式有以下三个优点：
（1）利用通用样式表，减少重复样式的冗余编码和修改；
（2）内容与样式分离，加快了编码的效率，同时增加了文档的可读性；
（3）外部样式表可以被缓存，减少了带宽的使用，加快了网页打开的速度。
3.2 外部样式表有三种引入格式
（1）@import指令

@import url(site.css);

(2) link元素

<link rel="stylesheet" style="index.css">

(3) XML样式表处理指令：只适用于XML文档

<?xml-stylesheet type="text/css" href="index.css" media="all"?>

给超链接设置什么属性，可以点击超链接在新窗口打开？

用target=“_blank”就可以让新页面在另一个窗口打开,如：
<a href="[http://www.baidu.com](http://www.baidu.com/)" target="_blank">百度</a>

_blank  //浏览器总在一个新打开、未命名的窗口中载入目标文档。

//设置a标签所以默认在空白标签中打开，可以在head标签中设置base标签
<head>
/*.......*/
  <base target="_blank" >
/*.......*/
</head>

_self //这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent //这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top //这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

lable标签的作用是什么？是怎么用的，为什么要加for?

（1）作用：<label> 标签为 input 元素定义标注,可以实现交互功能。
（2）for 属性规定 label 与哪个表单元素绑定,label的for属性要与绑定表单元素（input）的ID对应。绑定完成后可以通过点击label触发表单元素的默认属性。通俗的讲就是你绑定完了点lebel就相当于点击表单元素（input）。
（3）用法

//复选框交互，加lable标签，将input的id和lable的for设成一样
<input id="fontWeightBold" type="checkbox" >
<label for="fontWeightBold">粗体</lable>

//单选按钮，加入name属性
<label> /*加上label标签，实现交互*/
<input type="radio" name="gender">
男 /*一般换行，有空白*/
</label>
<label>
<input type="radio" name="gender">女
</label>

HTML中的有序列表和无序列表分别指的是什么标签?

有序列表（ol-li）
<ol type="A">  /*设置type都得值可以控制列表的序号展现方式，在ol中序列的展示方式有阿拉伯数字，英文字母，罗马数字三种方式*/
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

无序列表 （ul-li）
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4/li>
      <li>5</li>
    </ul>

自定义列表（dl-dt dd）
   <dl>
      <dd>1</dd>
      <dt>1</dt>
    </dl>

为什么给img设置alt属性？

alt属性是对图片的简单介绍，尽可能的包含网站的关键词。当用户加载网页有困难的时候，alt属性能帮助他们了解图片的内容，更有利于用户体验。
img标签的要素

source 简写成src资源目录，引用资源有两种方式，使用相对路径和绝对路径引用，一般推荐使用相对路径

alt  紧接上面

width（height）  当它为img的属性时，可以省略px，行内样式和外部样式时不行

行内元素有哪些，块级元素有哪些，空元素有哪些？

//块级元素
<address>//定义地址 
<caption>//定义表格标题 
<dd>    //定义列表中定义条目 
<div>     //定义文档中的分区或节 
<dl>    //定义列表 
<dt>     //定义列表中的项目 
<fieldset> //定义一个框架集 
<form> //创建 HTML 表单 
<h1>    //一级标题
<h2>    // 二级标题
<h3>     //三级标题
<h4>     //四级标题
<h5>     //五级标题
<h6>     //六级标题
<hr>     //创建一条水平线
<legend>    //元素为 fieldset 元素定义标题
<li>     //标签定义列表项目
<noframes>    //为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>    //定义在脚本未被执行时的替代内容
<ol>     //定义有序列表
<ul>    //定义无序列表
<p>     //标签定义段落
<pre>     //定义预格式化的文本
<table>     //标签定义 HTML 表格
<tbody>     //标签表格主体（正文）
<td>    //表格中的标准单元格
<tfoot>     //定义表格的页脚（脚注或表注）
<th>    //定义表头单元格
<thead>    //标签定义表格的表头
<tr>     //定义表格中的行

//行内元素
<a>     //标签可定义锚 
<abbr>     //表示一个缩写形式 
<acronym>     //定义只取首字母缩写 
<b>     //字体加粗 
<bdo>     //可覆盖默认的文本方向 
<big>     //大号字体加粗 
<br>     //换行 
<cite>     //引用进行定义 
<code>    // 定义计算机代码文本
<dfn>     //定义一个定义项目
<em>     //定义为强调的内容
<i>     //斜体文本效果
<img>     //向网页中嵌入一幅图像
<input>     //输入框
<kbd>     //定义键盘文本
<label>     //标签为 input 元素定义标注（标记）
<q>     //定义短的引用
<samp>     //定义样本文本
<select> // 创建单选或多选菜单
<small>     //呈现小号字体效果
<span>     //组合文档中的行内元素
<strong> //加粗
<sub>     //定义下标文本
<sup>     //定义上标文本
<textarea>     //多行的文本输入控件
<tt>     //打字机或者等宽的文本效果
<var>    // 定义变量

//空元素
<br> //换行
<hr> //分隔线
<img>   //图片
<input> //文本框等
<link>   //指定了外部资源与当前文档的关系. 常用语引入css文件
<meta>  //表示那些不能由其它HTML元相关元素表示的任何元数据信息.
<source>    //具体说明多媒体资源的类型

HTML语义化，都有哪些标签？

<title>：页面主体内容。
<hn> //h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul> //无序列表。
<li> //有序列表。
<header> //页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav> //标记导航，仅对文档中重要的链接群使用。
<main> //页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside> //定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer> //页脚，只有当父级是body时，才是整个页面的页脚。
<small> //呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong> //和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em> //将其中的文本表示为强调的内容，表现为斜体。
<mark> //使用黄色突出显示部分文本。
<figure> //规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption> //定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite> //表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto> //定义块引用，块引用拥有它们自己的空间。
<q> //短的引述（跨浏览器问题，尽量避免使用）。
<time> //datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr> //简称或缩写。
<dfn> //定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address> //作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del> //移除的内容。
<ins> //添加的内容。
<code> //标记代码。
<meter> //定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress> //定义运行中的进度（进程）。

form表单中input元素的readonly与disabled属性描述？

相同之处：Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。
区别：
（1） Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）。
（2）如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
（3）readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。
常见使用情况
（1）在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly 。
（2）经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话，若表单中只有input(text / password)和textarea元素，那还是可以的，如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)。
（3）常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。

目前主流浏览器有哪些，其内核介绍是？

什么是浏览器的内核？
浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
它在浏览器中的作用是什么？
浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。
主流浏览器及其内核

IE: trident->EdgeHTML
FireFox: Gecko
Safari: webkit
Chrome: webkit->blink
Opera: Presto->blink

浏览器的js引擎各是什么？

IE: JScript（IE3.0-IE8.0） / Chakra
FireFox: SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）
Safari: Nitro（4-）
Chrome: V8
Opera: Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）

css3各种浏览器私有属性

-moz   //代表FireFox浏览器私有属性
- webkit  //代表Chrome和Safari浏览器私有属性
-o  //代表Opera浏览器私有属性
- ms //代表IE浏览器私有属性

盒模型

标准盒模型
box-sizing: content-box;

怪异盒模型
box-sizing: border-box;  //IE浏览器

外边距合并
兄弟元素与兄弟元素垂直外边距相遇时，会发生外边距合并，合并为大的外边距；
父元素与子元素之间也会发生外边距合并问题，合并为大的外边距；
解决办法：给父元素padding、给父元素加border、给父元素设overflow:hidden、设置绝对定位或浮动、设置display： inline-block变为行内元素，外边距合并只会发生在块级元素上。

HTML5为什么只需要写<!DOCTYPE HTML>？

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

页面导入样式时，使用link和@import有什么不同？

区别1：link是XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

如何区别html和html5？

1、在文档类型声明上
HTML声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5声明：<!doctype html>
2、在结构语义上
HTML:没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5:在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。

HTML5离线存储怎么使用，工作原理解释一下？

在用户不连网时，可以正常访问站点或应用，在用户连网时更新机器上的缓存文件。
工作原理：HTML5离线存储是基于一个新建的.appcache文件的缓存机制，通过这个文件解析清单离线存储资源，这些资源就会像cookie一样被存储下来，之后再网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。
如何使用
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

iframe有哪些缺点？

1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

Doctype作用？严格模式与混杂模式如何区分？他们有何意义？

Doctype作用
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
严格模式与混杂模式如何区分？
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
意义
严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

html5有哪些新特性、移除了哪些元素？如何处理html5新标签的浏览器兼容问题？

新特性：

拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；