HTML-----目前为止个人学习和面试时压箱底的东西

HTML部分

常见元素：

head区元素：

• meta、title、style、link、script、base

body区元素：

• div/header/footer/nav/main/section/arttical/aside
• p
• img [ src,alt]
• span / em / strong
• table / thead / tbody / tr / td [ colspan,rowspan]
• ul / ol / dl /dt /dd / li
• a [href ,target]
• form [target ,method ,enctype] / input / select / textarea /button

几个文本格式话标签：

标签名	有无语义	作用
<strong></strong>	有语义化	加粗标签文本内
<em></em>	有语义化	倾斜标签文本
<del></del>	有语义化	删除线
<ins></ins>	有语义化	下划线
<b></b>	无语义化	加粗标签文本内容
<i></i>	无语义化	倾斜标签文本
<s></s>	无语义化	删除线
<u></u>	无语义化	下划线

HTML5新增标签

图形标签：canvas

媒体标签：audio、video、source、embed、track

表单标签：date、email、number、search、deatalist、keygen、output

语义化标签：

• header：内部放网站Logo、主导航和其他全站链接，甚至搜索框。
• footer：内部放版权声明， 可能还包括指向隐私政策页面的链接以及其他类似的内容
• article：内部放 一篇论坛帖子、一篇杂志或报纸文章、一篇博客详情、一则用户提交的评论或者任何其他独立的内容项。
• main、section、nav、aside

HTML5 标准提供了哪些新的 API

HTML5新增其他内容：

• localStorage，sessionStorage

• GeolocationAPI （地理定位）

  • navigator.geolocation

  • getCurrentPosition() 方法来获得用户的位置，getCurrentPosition() 方法的第二个参数用于处理错误

    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else
        {
            x.innerHTML="该浏览器不支持获取地理位置。";
        }
    }
    getLocation()
    function showPosition(position)
    {
        x.innerHTML="纬度: " + position.coords.latitude + 
        "<br>经度: " + position.coords.longitude;    
    }
    

• Web Workers

• 5个API-拖拽释放(Drag and drop)

如何处理 HTML5 新标签的浏览器兼容问题

方式一： IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签；

浏览器支持新标签后，还需要添加标签默认的样式。

<script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('article');
    document.createElement('footer');
</script>
或者
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

方式二：直接使用成熟的框架、使用最多的是 html5shiv 框架）

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

HTML5 引入什么新的表单属性

• autocomplete：属性适用于form,以及：text, search, url, telephone, email, password, date，pickers, range, color。 ----
• novalidate ：如果使用该属性，则提交表单时不进行内容的验证。 novalidate="novalidate"
• autofocus：规定输入字段在页面加载时是否获得焦点，加载完成后，光标马上定位在该 input；
• form：form 属性的值必须是其所属表单的 id。
• placeholder：提供可描述输入字段预期值的提示信息（hint）。
• required：规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。
• multiple：如果使用该属性，则允许一个以上的值，比如上传文件的时候，设置这个属性后可以一次选择几个图片；
• min 和 max：min 属性与 max 属性配合使用，可创建合法值范围，两个要一对用。语法是 选择 0-10 数字：input type="number" name="points" min="0" max="10"

HTML5 页面嵌入音频

audio 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者 source>元素来进行描述； 浏览器将会选择最合适的一个来使用。

<audio src="***.mp3"></audio>

<audio controls>
    <source src="jamshed.mp3" type="audio/mpeg">
    您的浏览器不支持音频嵌入功能。
</audio>

<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="horse.ogv" type="audio/wav">
  <source src="axihe.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

在 HTML5 页面嵌入视频

video 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。

<video controls width="250">
    <source src="/media/examples/flower.webm"
            type="video/webm">
    <source src="/media/examples/flower.mp4"
            type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

HTML5 的 form 如何关闭自动完成功能

HTML 的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。 autocomplete="off"（给不想要提示的 form 或某个 input 设置为 autocomplete=off。）

<form action="demo-form.php" autocomplete="off">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

虽然你设置了autocomplete="off"，但是如果用户选择了记住，Chrome 还是会在下次登录给你补全的；

解决 Chrome 记住的方式：

<input type="password" style="display:none;width:0;height:0;">
<input data-placeholder="请输入密码" name="password" data-required="true"  type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" id="auto-id-1505904797992" placeholder="请输入密码">

html 常见的兼容性问题

• 浏览器默认的 margin 和 padding 不同,解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。
• event 对象的区别,IE 下，event 对象有 x、y 属性，但是没有 pageX、pageY 属性；Firefox 下，event 对象有 pageX、pageY 属性，但是没有 x、y 属性
• Chrome 12px 像素,Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
• hover 和 active 失效,改变 CSS 属性的排列顺序 L-V-H-A

实现不使用 border 画出 1px 高的线

可以用 background，或者加个元素高度一 ，伪类来做；

<div style="height:1px;overflow:hidden;background:red"></div>

herf 和 src 的区别

href(Hypertext Reference)标识超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。用在 link 和 a 等元素上，href 是引用和页面关联，用来建立当前元素和文档之间的链接。

src （Source）表示指向资源的来源地址，是引入目的，在请求 src 资源时会将其指向的资源下载并应用到文档中，用在 img，script，iframe 上。

src通常用作“拿取”（引入），href 用作 "连结前往"（引用）。

网页中 mate viewport 具体参数使用

<meta  name="viewport"  content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,userscalable=no"/>

width    设置 viewport 宽度，为一个正整数，或字符串‘device-width’
device-width  设备宽度
height   设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置
initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
user-scalable    是否允许手动缩放

<meta>标签

它描述的是关于文档的元数据信息，可用于指定描述页面的描述信息，作者，关键字等

<meta name="keywords" content="关键字1，2，3，4....">：定义了文档关键词，用于搜索引擎。
<meta name="description" content="......">:定义了WEB页面的描述信息
<meta name="author" content="......">：定义作者名
<meta name="refresh" content="N">:每N秒自动刷新一次
<meta http-equiv="description" content="......">

html文档中meta charset="UTF-8"的作用

它并不是说该html页面是采用utf-8来编码的，而是告诉浏览器以UTF-8规则来解码html页面。页面正真的编码规则采用的是对应编辑器中确定的。如果编辑器中GBK对编码页面，但标签内告诉浏览器用utf-8解码也会导致乱码。

如何理解HTML语义化?

(语义化:用合适的标签做合适的事情。)文本内容的结构化。

1. .搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO;
2. 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;
3. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解;
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

都有哪些标签？有什么意思？

大方向：块级标签，行内标签，行内块标签

• 块级标签

  div、p、h1~h6、ol、ul、dl、li、dt、dd、header、footer、mian、nav、section、artical、table、form、blockquote、address...

• 行内标签

  a、span、small、strong、em、i...

• 行内块标签

  img、input、textarea

这三类标签的区别

块级元素：

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
• 元素的高度、宽度、行高以及顶和底边距都可设置。
• 如果不设置宽度，默认值是auto，那么块级元素会占父标签的100%

行内元素：

• 可以与其他行内元素并排

• 元素的高度、宽度、行高及顶部和底部边距不可设置

• 元素的宽度就是它包含的文字或图片的宽度，不可改变

• 行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

• 给行内元素设置border是可以被渲染出来的，同时在水平方向可以挤开其他行内元素，但是在垂直方向上，不会挤开其他元素。

span{
  border: 10px solid rebeccapurple;
}

<div>asd</div>
  <span>123456789</span><em>asdqweqwee</em>
<div>qweretry</div>

• 给行内元素设置margin在水平方向可以挤开其他行内元素，但是在垂直方向上直接无效，不会挤开其他元素。

行内块元素：

• 能和其他行内块元素待在一行
• 元素的高度、宽度、行高以及顶和底边距都可设置

三类标签如何相互转换