• 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>
    

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

  • 相关阅读:
    含有打印、统计DataGridView(1)
    数字金额转换大写人民币
    文件加密解密全解
    正则表达式之全部符号对照表
    C#程序集引入无效的解决方法
    TreeView 的简单实用
    Win7下用IIS发布网站
    C#做完一个网站怎么发布?
    c# 如何获取项目的根目录
    判断控件是否出现了滚动条
  • 原文地址:https://www.cnblogs.com/Amery_J/p/10593992.html
Copyright © 2020-2023  润新知