HTML知识点

作者: 饥人谷_Peggy | 来源:发表于2017-07-18 21:32 被阅读0次

    HTML、XML、XHTML的区别

    • HTML(HyperText Markup Language)超文本标记语言:是语法较为松散的、不严格的Web语言。
    • XML (eXtensible Markup Language)可扩展标记语言:主要用于存储数据和结构参考
    • XHTML (eXtensible HyperText Markup Language)可扩展超文本标记语言:基于XML,作用与HTML类似,但语法更严格参考

    HTML语义化

    选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。

    内容与样式分离原则

    我的理解是:

    • HTML写结构,CSS写样式,JavaScript写事件动画等各种交互事件,三者相互分离,尽量不要把样式或者事件写到HTML里去,便于后期维护修改。
    • 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化。

    meta标签

    The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
    <meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

    <meta>标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

    常见<meta>标签

    • 告诉浏览器解码方式:
    <meta charset="UTF-8">
    
    • IE=edge告诉浏览器若是IE内核使用IE=edge最新的引擎渲染网页,chrome=1则可以激活Chrome Frame,采用谷歌浏览器内核去渲染页面:
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    
    • 告诉爬虫、搜索引擎关键字,你快来找我:
    <meta name="keywords" content="前端学习">
    <meta name="description" content="前端学习网站">
    //搜索引擎:好的好的,我知道你是谁了。
    
    • 告诉手机移动端页面正常的显示页面,别缩放啦,啥年代啦:
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
    

    文档声明

    DOCTYPE是用来声明文档类型和DTD(document type definition,文档类型定义)规范的,一个主要的用途便是文件的合法性验证。 如果文件代码不合法,那么浏览器解析时便会出一些差错。 。

    文档声明的作用就在于告诉浏览器你是用什么类型的文档,然后浏览器就能按照你的文档类型进行解析,不然浏览器就会用混杂模式解析文档,不同的浏览器显示的效果都不太一样。

    HTML 5

    <!DOCTYPE html>
    

    HTML 4.01 Strict

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    

    HTML 4.01 Transitional

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    

    严格模式和混杂模式

    • 严格模式即标准模式,是指浏览器按照 W3C 标准解析代码。
    • 混杂模式又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

    但是HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

    关于浏览器乱码

    浏览器乱码的原因很可能是在<meta>里没有指定编码方式,或者编码方式指定错误,浏览器就解析时就会乱码。一般都以"UTF-8"方式编码。

    常见浏览器内核

    • Trident:IE内核
    • Webkit:chrome、safari内核
    • Gecko:firefox内核
    • 关于移动端:大多都是Webkit内核

    常见标签

    • h1~h6
    • h1代表页面最大的标题
    • h2二级标题
    • h3... 更弱的标题
    • p 段落,表示大段文字
    • a 链接,链到一个地址
    • img 展示一张图片
    • div 语义为“一大块”,用于给页面划分区块,让结构更清晰
    • ul li 无序列表
    • ol li有序列表
    • button 按钮
    • iframe 用于嵌入一个页面 注意跨域操作问题
    • table 用于展示表格,不要用来做布局 thead tbody tfoot可省略,浏览器会自动添加 border-collapse: collapse;用于合并边框

    相关文章

      网友评论

        本文标题:HTML知识点

        本文链接:https://www.haomeiwen.com/subject/junhkxtx.html