认识HTML

作者: 怎么昵称 | 来源:发表于2017-06-28 09:59 被阅读0次
    HTML、XML、XHTML的区别

    首先,这三种都是标记语言,是html书写的规范。

    HTML
    html 是超文本标记语言,语法较为松散,要求不严格的web语言。
    可能会出现大小写不一致,标签没有闭合等问题,但是浏览器不会报错,可能会不能显示或者不能运行出来。
    XML
    xml 是可扩展标记语言,主要用于存储数据和结构。
    标签需要自定义使用,无限制名称,主要是传输数据等作用。
    XHTML
    xhtml 是可扩展超文本标记语言,看名称也能知道他是以上两种的结合版。
    基于xml,作用与html类似,语法上要求更加严格。

    HTML语义化

    语义化就是根据页面的要求,具体的内容,在合适的地方使用合适的标签,合理的代码结构编写代码。这样利于seo优化,利于浏览器爬虫和机器对页面的解析。也便于开发者阅读。
    语义化的标签就是对所有包含的所有内容作一个整体声明。

    如何正确的使用标签

    首先需要掌握html标签的含义,在先写内容时,想想用什么标签能更好的描述他,内容与内容间的关系,是并列还是包含,考虑结构化合理。

    语义化的好处

    1 有利于seo,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提高网页权重。
    2 没有css的美化后,能够清晰看到网页的结构,增强可读性。
    3 语义化的html可以认识那个开发者更容易理解,便于团队开发、维护。
    4 支持多个终端设备的浏览器渲染。

    理解内容、样式、行为分离的原则

    html代码与css代码分开编写,两个的代码不能混在一起。
    HTML标签只用负责承载内容,而样式交给了CSS,行为交给了JavaScript。
    怎么做呢??
    1 在编写html的时候不考虑css样式,单独对页面的内容和结构分析。
    2 当html写完后再来写css。
    3 也不要将css写在html内,不允许出现属性样式,行内样式。
    4 行为js 与样式css分离,不直接对css的属性编码,而是通过js操作添加、删除样式。
    这样做的好处??
    为了以后改版时更方便,直接修改样式,而不动HTML的内容。更方便易于阅读样式和内容,便于网站的维护。
    网页的内容直接暴露在搜索引擎面前,这样有利于搜索引擎抓取网页的内容。

    常见的meta标签

    <meta charset="utf-8">设置保存页面内容的编码方式。
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>很多电脑是双内核,声明用用ie最新版本来渲染解析,也可以用Chrome最新版本渲染。
    <meta name="keywords" content="购物">
    <meta name="description" content="shopping">
    上面两个 设置对网站优化有好处。用户可以通过搜索,查找到相关内容,那么"keywords、description就是可以指出网页是写的什么内容,可以查找到返回给用户。
    <meta name="viewport" content="width=device-width, initial-scale=1">是在移动端上显示时能适用,更加合理,正常。
    
    文档声明的作用

    文档声明就是告诉浏览器用什么方式对页面解析。

    严格模式和混杂模式

    严格模式是设置了浏览器对此页面的渲染解析方式。是h5还是h4等。
    混杂模式就是没有设置文档声明的,这个要依据浏览器自己的渲染方式来进行。

    <!doctype html>

    <!docutype html>为html5的文档声明方式。

    浏览器乱码的原因是什么?如何解决

    有可能你没有设置编码方式,只是使用了默认的编码方式保存,浏览器又不知道你的编码方式,用了另一种方式解析。
    也有可能设置页面编码的方式不对,编码方式有的并不支持中文,当这时候页面内有中文,就会在浏览器检测到编码方式时用页面设定的编码方式解析,解析的页面会出现乱码。

    解决:需要设置正确的对应编码方式,编码方式要写在页面中,例如<meta charset="utf-8">。

    常见的浏览器有哪些,什么内核

    IE、Maxthon的内核:Trident
    FireFox、MozillaSuite/SeaMonkey的内核:Gecko
    Opera内核: Presto
    Safari、Chrome的内核:Webkit

    列出常见的标签,并简单介绍这些标签用在什么场景
    1. 标题 h1~h6
      h1是最大标签,h2是二级标题,以此类推。
      可应用在文章的标题,页面的网站大标题等。
    2. p 段落
      文章中的一段文字,也可以是一两个字也可以用p。
      用于新闻类网页的文章段。
    3. a 链接
      链接一个地址,点击跳转。
      用于导航、文字链接,一点击到另外一个页面。
    4. img 图片
      将本地图片加载到网页。
      在页面添加一个图,可用于网站商品图展示中。
    5. div 一个块
      页面划分区域。
      用户页面内容结构划分。
    6. ul li 无序列表
      没有顺序前后之分,搭配使用。表示并列的内容,可以嵌套使用。
      用于页面的导航部分的每个导航内容。
    7. ol li 有序列表
      有顺序,表示步骤。1.2.3.
      用于文章中有顺序阐述的内容。
    8. dl dt dd
      表示标题与内容的一种展示格式。
      用于清晰表现一系列标题与内容的场景。如词典里面的词的解释。
    9. button 按钮
      可点击的按钮。
      用于表单中的提交按钮等。
    10. span strong em
      span 是没有强调作用,只是对某些文字进行包裹,可添加样式。
      strong 强强调,对有想突出的内容显示。
      em 相对于strong 稍弱一点,代表弱强调。
      用于对某些文字稍加强调或其他样式。
      11 iframe
      嵌入到一个页面
      用于不适用后台和js的情况下,简单的一个教程,在左边点击后,右边的iframe标签区域显示。
      12 table 表格
      展示表格,不要用来做布局。
      用于数据统计图表。
    行内元素VS块级元素区别

    区别:
    行内元素占据的宽度是自身的宽度,标签有:a span strong em img button
    块级元素占据整一行。标签有: div p ul li h1~h6

    相关文章

      网友评论

        本文标题:认识HTML

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