• HTML标签火速入门


    HTML标签火速入门

    本文将从:HTML页面必备标签、HTML高频标签,火速入门,阅读完本篇,大概需要60分钟。

    HTML页面必备标签

    我们通过HTML编辑器新建一个HTML文件后,编辑器会帮我们创建一个HTML文件,创建的同时自动生成一些HTML页面必备标签。

    <!--DOCTYPE,规定了文档类型,他会告诉浏览器以哪种规则来渲染以下的内容-->
    <!DOCTYPE html>
    <!--html标签开始,HTML文档的开始,lang="en"旨在告诉浏览器的翻译插件,翻译我的文档内容-->
    <html lang="en">
    <!--head标签里放的HTML文档的元信息-->
    <head>
        <!--meta标签,元信息标签,charset属性规定了文档的编码类型-->
        <meta charset="UTF-8">
        <!--title标签,标题标签,只可在head里写入,title在浏览器上显示,不在浏览器的页面里渲染-->
        <title>Title</title>
    </head>
    <!--body标签里放的HTML文档的核心元素们-->
    <body>
    前端开发的核心区域
    </body>
    </html>
    

    HTML高频标签简介

    HTML高频标签将介绍:h1~h6、p、a、br、img、div、span、ul、ol、dl、table、form、input、select、textarea标签。除了对标签的介绍,还将通过小案例来演示这些高频标签经常在哪里被使用。

    h1~h6,标题标签

    示例代码&现象

    <body>
    <h1>惠崇春江晚景二首</h1>
    惠崇春江晚景二首
    </body>
    

    <body>
    <h1>惠崇春江晚景二首</h1>
    <h2>惠崇春江晚景二首</h2>
    <h3>惠崇春江晚景二首</h3>
    <h4>惠崇春江晚景二首</h4>
    <h5>惠崇春江晚景二首</h5>
    <h6>惠崇春江晚景二首</h6>
    <h7>惠崇春江晚景二首</h7>
    惠崇春江晚景二首
    </body>
    

    h1~h6标签带来的现象:

    1. 文本变大变粗
    2. 标签的数字越大标题的级别越小
    3. 每个标题独占一行

    h1~h6标签的应用:

    标签 现象 应用场景
    h1 最大最粗,独占一行 一个页面仅可存在一个h1标签,h1内放页面的关键词,
    目的是给SEO和爬虫快速识别
    h2~h4 数字越大级别越小,独占一行 文本的普通标题,最小使用h4
    h5、h6 数字越大级别越小,独占一行 html规则有这两个标签,几乎不被使用

    p,段落标签

    示例代码&现象

    <body>
    <h1>惠崇春江晚景二首</h1>
    苏轼
    <p>竹外桃花三两枝</p>
    <p>春江水暖鸭先知</p>
    </body>
    

    p标签带来的现象&应用

    标签 现象 应用
    p 文本内容需要独占一行时
    p 自带行间距 文本内容需要独占一行且需要行间距时

    div,分割标签

    示例代码&现象

    <body>
    <h1>惠崇春江晚景二首</h1>
    苏轼
    <div>竹外桃花三两枝</div>
    <div>春江水暖鸭先知</div>
    ……
    </body>
    

    div标签带来的现象&应用

    标签 现象 应用
    div 独占一行 文本内容需要独占一行时

    a,链接标签

    示例代码&现象

    <body>
    <h1>惠崇春江晚景二首</h1>
    苏轼
    <p>竹外桃花三两枝</p>
    <p>春江水暖鸭先知</p>
    <a href="06后两句.html">点我看后两句</a>
    </body>
    

    后两句的代码&现象

    <body>
    <p>芦蒿满地芦芽短</p>
    <p>正是河豚欲上时</p>
    </body>
    

    点第一个页面中的蓝色字体进行跳转

  • 相关阅读:
    IOS4.x下UIWebView的显示问题
    UIView的动画
    (转)iPhone实战:动态改变UITableView中的Cell高度
    (原) 定制使UITabBarController的tabbar选中tabbaritem时不高亮以及换背景色(支持iPad旋转)
    IOS开发问题汇总
    (转)公钥加密技术
    [Nikon D80]南门老家
    Realtime Ray Tracing RenderMan Point Cloud
    今天败入音特美ER6i
    Practice Realistic Human Skin Rendering In RenderMan Production Pipeline
  • 原文地址:https://www.cnblogs.com/Amery_J/p/10593992.html
Copyright © 2020-2023  润新知