美文网首页
web入门案例0——案例前的基础

web入门案例0——案例前的基础

作者: Webcoder_Lin | 来源:发表于2016-11-17 00:22 被阅读17次

    HTML是HyperText Markup Language,也就是超文本标记(Markup)语言的缩写。
    所谓的超文本标记语言,也就是用标记(Markup),也就是标签,来定义不一样内容的语言。(我也不知道为啥Markup被翻译成标记又被翻译成标签,总之这翻译官让初学者都很困扰)

    所以每一个HTML,都是以html标签开始和结束的。

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />   
      </head>
      <body>
      </body>
    </html>
    

    如上面的那行代码,在尖括号<和>中的就是标签。

    第一行的<!doctype html>被称为dtd文档或者文档头,规定浏览器该用html5的版本解释这个html文档。它实际上不属于正文内容,不需要太深刻的探究。

    每个html文档的正文内容都从<html>开始,到</html>结束,其中又包含了<head></head>和<body></body>这两对标签。

    head标签的顾名思义是头部,它是给浏览器和服务器阅读的,其中的内容并不会被体现在网页上,涉及到很多乱七八糟细节知识,对于UI来说唯一有价值的就是如下的一句

      <meta charset="utf-8" />
    

    它唯一的作用就是让网页显示中文的时候不会出现乱码。
    (meta=元语言,charset=character set=字符设置)
    这里不去解释它的来由,只要会用可以了。

    body

    body标签内是一个页面最核心的部位,这中间所写的所有东西都会变成页面上能看到的不同内容,或者称为不同元素

    让我们用一个最简单的标签开始一个页面内容,

    <p>1234567</p>
    

    <p>1234567</p>

    像上例这样有始有终,成双成对的标签被称为双标签
    (双标签一定要用带有反斜杆/的闭合标签闭合)

    常见的标签有:

    h1,h2,h3,h4,h5,h6——head,标题标签,用来表示页面的各级标题,其中h1最大并有网站名的含义,h6最小。
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    (h1标签在任何一个正规页面中,理论上必须存在而且只能存在一个)

    p——paragraph,段落标签,段落标签内一般只有文字和表示文字内容的标签(如:span,strong,em之类的标签)。

    <p>起来饥寒交迫的努力,起来全世界受苦的人</p>
    

    div——division,区块标签,万能标签,没有语义(标签的内容不解释为具体的东西),它本事就只作为结构使用。

    <div>起来饥寒交迫的努力,起来全世界受苦的人</div>
    

    a——超链接标签,用于给内容添加跳转,href指的是超链接的路径,a标签可以包含任何标签,但是不能包含另一个a标签

    <a href="http://www.baidu.com">点这里跳转到百度百度</a>
    

    <a href="http://www.baidu.com">点这里跳转到百度百度</a>

    基础内容就介绍的这里,下面的链接是各种标签的参考手册:

    <a href="http://www.w3school.com.cn/tags/index.asp">w3cschool</a>

    相关文章

      网友评论

          本文标题:web入门案例0——案例前的基础

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