前端

作者: 四月四七日薄暮 | 来源:发表于2018-11-15 18:49 被阅读0次

根据W3C标准,一个网页主要由三部分组
成:结构、表现还有行为

先说一下HTML

  • 下面就是最基本的HTML网页:
<html>
    <head>
         <title>这是一个非常好的网页</title>
    </head>

    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

  • 1、title网页的标题标签,默认会显示在浏览器的标题栏中
    搜索引擎在检索页面时,会首先检索title标签中的内容
    它是网页中对于搜索引擎来说最重要的内容,会影响到网页在搜索引擎中的排名
  • 2、body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中编写

*3、< !-- ......-->注释
在这个结构中,可以来编写HTML的注释
注释中的内容,不会在页面中显示,但是可以在源码中查看
我们可以通过编写注释来对代码进行描述,从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯,但是注释一定要简单明了

  • 4、 属性:
    可以通过属性来设置标签如何处理标签中的内容
    可以在开始标签中添加属性
    属性需要写在开始标签中,实际上就是一个名值对的结构
    属性名="属性值",一个标签中可以同时设置多个属性,属性之间用空格隔开
<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
        <!--
            这是我写的谁都别动   
        -->
        <h1>
            这是我的<font color = "blue" size>第二个</font>网页
        <h1>
</body>
</html>

  • 编写格式:
    h5的文档声明,声明当前的网页是按照HTML5标准编写的
    编写网页时一定要将此声明写在网页的最上边
    如果不写文档声明,则会导致有些浏览器进入一个怪异模式,导致浏览器无法正常解析显示网页
    所以为了避免进入该模式,一定要写文档声明
  • 常见字符集:
    ASCII、ISO-8859-1、GBK、GB2312、ANSI、还有国际通用UTF-8
    需要告诉浏览器,网页所采用的编码字符集
    meta标签用来设置网页的一些元数据,比如网页的字符集、关键字、简介
    meta是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加一个/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>设置字符集</title>
    </head>
    <body>
        <h1>这是一个网页</h1>
    </body>
</html>

  • 标题标签:
    在HTML中,一共有六级标题标签,h1~h6
    在显示效果上h1最大,h6最小,但是文字的大小我们并不关心
    使用HTML标签时,关心的是标签的语义,我们使用的标签都是语义化标签
    6级标题中,h1的最重要,表示一个网页中的主要内容,h2~h6重要性依次降低
    对于搜索引擎来说,h1的重要性仅次于title,搜索引擎检索完title,会立即查看h1中的内容
    h1标签非常重要,它会影响到页面在搜索引擎中的排名,页面只能写一个h1一般页面中标题标签只使用h1、h2、h3以后的基本不使用
  • 段落标签:
    段落标签用于表示内容中的一个自然段
    使用p标签来表示一个段落
    p标签中的文字默认会独占一行,并且段与段之间会有一个间距
  • 在HTML中,字符之间写再多的空格,浏览器也会当成一个空格解析,
    换行也会当成一个空格解析
    在页面中可以使用br标签来表示一个换行,br标签是一个自结束标签
  • hr标签也是一个自结束标签,可以在页面中生成一条水平线
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>常用的标签</title>
    </head>
    <body>

        <h1>一级标题</h1>
        <h2>一级标题</h2>
        <h3>一级标题</h3>
        <h4>一级标题</h4>
        <h5>一级标题</h5>
        <h6>一级标题</h6>
        <p>我是一个p标签,我用来表示一个段落</p>
        <p>我是一个p标签,我用来表示一个段落</p>

        <p>
            锄       禾日当午,<br />
            汗滴禾下土,<br />
            谁知盘中餐,<br />
            粒粒皆辛苦<br />
        </p>
        <hr />
        </body>
</html>

  • 在HTML中,一些如<、>这种特殊字符是不能直接使用的
    需要使用一些特殊的符号来表示这些特殊字符,这些特殊符号称为实体(转义字符)
    浏览器解析到实体时,会自动将实体转换为其对应的字符实体的语法:&实体的名字;
    &实体的名字:
    <(& lt;)
    (>)(& gt;)
    © (& copy;)

相关文章

  • 前端文章系列

    【前端】从0.1开始,创建第一个项目 【前端】初识HTML 【前端】HTML标签 【前端】HTML属性 【前端】C...

  • Web前端小白入门指迷

    大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR...

  • 推荐几个好的前端博客和网站

    前端开发博客前端开发博客-前端开发,前端博客 对前端知识结构的理解人类身份验证 - SegmentFault 脚本...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • 前端学习:一个好的前端导航可以更好的学习前端

    前端导航: 前端网课(前端的网络课程,在线网站) 前端资源(有论坛等交流平台) 前端手册(html手册,css手册...

  • 2018-09-25

    前端学习 前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

网友评论

      本文标题:前端

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