美文网首页
对html的简单入手

对html的简单入手

作者: dtythicc | 来源:发表于2017-03-22 23:37 被阅读0次

    关于编写环境,我用的是Sublime Text 3,再搞一些插件,很好用。

    怎么开始学习html?我准备从看懂一段含有基础功能的html开始。

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>网页名称</title>
    </head>
    
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落</p>
        <hr> <!--这是一条分界线,而这句话本身是个注释,两头符号即注释符号-->
        <a href="http://www.jianshu.com/">点了这个链接你就到了简书首页</a>
        ![图片说明](https://img.haomeiwen.com/i3567272/1b877fcb23926535.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </body>
    </html>
    

    一段简单的代码,那么我们现在要做的就是读懂她。

    我们先看看大体框架:

    <html>
    <head>...</head>
    <body>...</body>
    </html>
    
    <!DOCTYPE html>

    第一行这一句是个什么东西呢?

    • 意义:html5标准网页声明,告诉浏览器网页采用html5。
    • 作用:给浏览器一个解析渲染页面的标准(W3C),避免不同浏览器显示不同的样式
    • 注意:这句话要放在整个html文件的前面
    <html></html>

    <标签></标签>这个形式叫做标签对,html中的标签往往成对出现(当然不是全部),而这一对标签对则是html页面的根元素。

    <head></head>

    包含文档元数据。
    这一对标签中可以包含很多东西,不只是title,meta等元素,还可以嵌入JavaScript,css代码或者.js文件。

    <meta charset="utf-8">

    这句话告诉网页你的文件以utf-8格式编码,防止中文乱码。

    <body></body>

    光是看名字就看的出这对标签很重要,<body>标签定义了HTML文档主体;
    < h1 >,< h2>...< h6>按字体由大到小定义6种标题,< p>则定义了段落;
    <a href=url>...</a>为引入链接
    < img src=... width=... height=... alt=...>为引入图片,其中src的参数可以传入图片对应(网络或者本地)地址。

    现在你可以让你的浏览器运行一下上述代码,你的第一个html实例将出现在你眼前!


    效果图

    相关参考

    charset="utf-8"有什么作用
    什么是<!DOCTYPE html>及<!DOCTYPE html>的重要性?|代码恶童

    以上

    相关文章

      网友评论

          本文标题:对html的简单入手

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