美文网首页
HTML基本语法,规范版本,元素,属性

HTML基本语法,规范版本,元素,属性

作者: amanohina | 来源:发表于2020-10-19 13:02 被阅读0次

    HTML基本语法

    HTML规范版本

    W3C,万维网联盟,发布与维护互联网的规范和标准 万维网发布的版本

    从HTML4.0开始变得规范化,HTML4.01修复了HTML4的部分bug,XHTML变得严格了起来,没有新的东西。

    HTML标签

    HTML tag,遵循的语法:
    1.标签名必须书写在一对尖括号<>内

    <html></html>
    

    2.标签分为单标签和双标签,双标签不可省略,要成对出现

     <p></p>
      <br />
    

    3.双标签包含开始和结束标签,结束时要写关闭符号/,单标签也要自封闭书写,HTML5中单标签也可以不写关闭符号

    HTML元素

    指的是从开始标签到结束标签的所有内容,包括开始标签,元素内容,结束标签。
    eg:双标签内不包含的纯文本内容,就是元素内容

     <p>文本段落</p>
    

    元素也可以包括其他标签的内容,这种我们称之为嵌套
    一个HTML元素div的内容可能是多个其他元素组成的,比如p,h1,img等等,我们称div是p和h1,img的父级元素,相反,div,h1,img就是div的子级元素,p,h1,img就是同级元素,也称之为兄弟级关系,嵌套是可以多层的
    eg:

    <div><h1>标题1</h1><p>div内部的文本段落</p><img src=" " /></div>
    

    单标签是不能添加元素内容的,可以称之为空元素。

    标签级别

    容器级:内部可以存放任意内容,包含容器级标签,比如h1,div等等
    文本级:内部只可以存放文字或者类似文字的内容,比如存放图片,表单元素,比如p等等。

    HTML元素的特性

    1.元素间对空格、换行、缩进等形成的空白不敏感,有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及相互之间的嵌套关系。
    eg:加了缩进后与上面的不加缩进的代码展示效果是一样的。可以美化代码,方便查看代码

     <div>
            <h1>标题1</h1>
            <p>div内部的文本段落</p>
            <img src=" " />
     </div>
    

    2.空白折叠现象:元素内容如果是文本,所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符,在浏览器中加载时,连接在一起的空白会折叠成一个空格显示,这就是空白折叠现象。
    eg:

    <p>这是一个段落,元素之间对空           格、换
     行、缩        进形容的空白会出现空格折叠现象。</p>
    

    显示的结果是这样的:


    代码块
    Chrome运行效果

    HTML属性

    HTML属性规范

    1.书写位置:必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔
    2.属性包括了:属性名(key)、属性值(value)。属性名与属性值之间的写法通常称作键值对写法,HTML标签属性的键值对写法是k=" v"。XHTML要求属性值必须在双引号内部。

    <p k="v"></p>

    3.一个标签内可以设置多个不同的属性,属性与属性之间使用空格进行分隔,每个属性的键值对写法都是k="v"

    <p k="v" k="v" k="v" k="v"></p>

    4.部分标签属性k可以设置多个属性值v,所有属性值v都必须写在同一对双引号内,值与值之间需要使用空格分隔。

    <p k="v1 v2 v3 v4"></p>

    eg:

    <p class="p1" id="pFrist">段落1</p>
    <p class="p1 p2 p3 p4">段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    

    相关文章

      网友评论

          本文标题:HTML基本语法,规范版本,元素,属性

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