• HTML 初识


      HTML(Hyper Text Markup Language的缩写)中文译为“超文本标记语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

     一、HTML 骨架结构

      每种语言都有自己所必须遵守的格式,HTML也不例外,也有自己的语言语法骨架格式:

    <HTML>   
        <head>     
            <title></title>
        </head>
        <body>
        </body>
    </HTML>
    

      1、HTML标签:作用所有HTML中标签的一个根节点

      2、head标签:

        作用:用于存放:title,meta,base,style,script,link 等标签,

        注意在head标签中我们必须要设置的标签是title

      3、title标签:

        作用:让页面拥有一个属于自己的标题。

      4、body标签:

        作用:页面在的主体部分,用于存放所有的HTML标签:p,h,a,b,u,i,s,em,del,ins,strong,img等标签

        Tips:HTML 结构是单根树状父子结构。

    二、HTML 基本语法特性

      1、HTML 对换行不敏感,对 tab 不敏感

        HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。

      2、空白折叠现象   

        HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

      3、标签页严格封闭

        标签不封闭是灾难的!!!

    三、HTML标签介绍

      1、标签格式

    <标签名>封装的数据</标签名>

      2、标签名大小写不敏感。

      3、标签拥有自己的属性。

    ①  基本属性:bgcolor="red"                             可以修改简单的样式效果
    ②  事件属性:  onclick="alert('hello!');"               可以直接设置事件响应后的代码

      4、标签的分类

       在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上面提到的 <HTML><head><body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令,也称为HTML标签或 HTML元素。

      1、双标签

    <标签名> 内容 </标签名>

      该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。

      2、单标签

    <标签 />

      单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

      

    四、HTML标签关系与语法

      1、标签关系

        标签的相互关系就分为两种:

        1)嵌套关系(父子关系)

    <head>  <title> </title>  </head>
    

          标签嵌套时一定要注意标签的顺序,不能混乱嵌套,下面的这种方式是错误的

    <head>  <title> </head> </title>   × 

        2)并列关系(兄弟关系)

    <head></head>
    <body></body>
    

          两个标签并列显示也称为兄弟关系。

        建议如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。

      2、标签语法

        ① 标签不能交叉嵌套

        ② 标签必须正确关闭

        ③ 属性必须有值,属性值必须加引号

        ④ 注释不能嵌套。

        注意: HTML 代码不是很严谨,有时候标签不闭合,也不会报错,但是要避免这种情况。

    五、文档类型

    <!DOCTYPE html>

      这句话就是告诉我们使用哪个html版本,我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。

      这句话其实就是网页的声明头,术语叫做 DocType Defintion,文档类型定义,简称 DTD。

      标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。

      注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的,但是 HTML5 的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了。

    六、HTML 历史及不同版本

      1、历史发展进程如下图

      

      2、HTML 不同的版本

      现在学习的是HTML4.01这个版本,这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰。但是随着技术的发展,HTML5技术越来越成熟,越来越受欢迎,也逐渐的适应移动端的需求了。

      HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下面):

      HTML4.01里面规定了普通、XHTML两大种规范。

      HTML觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示“严格的”。

      一共有6种DTD,说白了,HTML第一行语句一共有6种:

      

    大规范 里面的小规范
    HTML4.01 Strict        严格的,体现在一些标签不能使用,比如 u
    Transitional     普通的
    Frameset        带有框架的页面

    XHTML1.0

    严格体现在小写标签、

    闭合、引号

    Strict        严格的,体现在一些标签不能使用,比如 u
    Transitional    普通的
    Frameset       带有框架的页面

      

      注意:HTML5中极大的简化了 DTD,也就是说 HTML5 中就没有XHTML了

    七、HTML 头部

      <head> 元素包含了所有头部标签元素。在<head> 元素中可以插入脚本(script),样式文件,及各种信息。

      1、<title> 元素

        此标签定义了不同文档的标题。在HTML/XHTML 文档中是必须的。

        显示在搜索引擎结果页面的标题。

      2、<base> 元素

        此标签描述了基本的链接地址/链接目标,该标签作为 HTML 文档中所有的链接标签的默认链接。

      3、<link> 元素

        此标签定义了文档与外部资源之间的关系。通常用于链接到样式表。

      4、<style> 元素

        此标签定义了 HTML 文档的样式文件引用地址,需要指定样式文件来渲染 HTML 文档。

      5、<meta> 元素

        此标签描述了一些基本的元数据。这些数据不会显示在页面上,但会被浏览器解析。

      6、<script> 元素

        此标签用于加载脚本文件,如JavaScript文件。

    八、<meta> 标签

      1、定义字符集

      语法:

    <meta charset="UTF-8">

        这句话是用来指定HTML页面采用的编码方式。 

          utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。

        gb2312 简单中文 包括6763个汉字

        BIG5 繁体中文 港澳台等用

        GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312

        UTF-8则包含全世界所有国家需要用到的字符,使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

        更多的编码知识请阅读这篇文章:字符编码

      2、定义关键字

      语法:

    <meta name="keywords" content="html,css,xml,javascript">

         设置了关键字,有利于搜索引擎搜索,这个技术叫做SEO,search engine optimization,搜索引擎优化

        关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率

      3、定义描述内容

      语法:

    <meta name="description" content="free web tutorials on  html  and  css">

      4、定义网页作者

      语法:

    <meta name="author" content="Tony">

      5、刷新当前页面

      语法:

    <meta http-equiv="refresh" content="30">

    九、语义化的HTML标签

       HTML标签其实就是为了给文字,图片添加语义,给不同的内容添加不同的语义,让读者能够更好的理解HTML页面。

      好处:

      1、方便代码的阅读和维护

      2、同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容

      3、使用语义化标签会具有更好地搜索引擎优化

      核心:合适的地方给一个最为合理的标签。

      如何查看HTML的语义是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。

      遵循的原则:先确定语义的HTML ,再选合适的CSS。

  • 相关阅读:
    [SDOI2015]约数个数和
    [POI2007]ZAP-Queries
    fpu栈溢出
    shader 汇编
    sample a texture as a rendertarget
    ID3d11asynchronous
    DEVICE DRAW VERTEX BUFFER TOO SMALL
    模型的一个点显示在原点
    setrendertraget 上下颠倒
    skinned mesh 蜘蛛样
  • 原文地址:https://www.cnblogs.com/niujifei/p/11059437.html
Copyright © 2020-2023  润新知