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>

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

HTML标签火速入门的更多相关文章

  1. JSP自定义标签开发入门《转》

    JSP自定义标签开发入门 一般情况下开发jsp自定义标签需要引用以下两个包 import javax.servlet.jsp.*; import javax.servlet.jsp.tagext.*; ...

  2. （十）EL表达式和JSTL标签快速入门

    目录 什么是 el 表达式 示例:使用EL表达式获取pageContext .request.session.application域中的数据: 示例:使用EL表达式获取Bean属性 获取当前WEB应 ...

  3. html标签学习入门 随笔

    Html学习入门    随笔1: HTML 标题 HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. 标题仅用于标题文本  不应该被使用在加粗字 ...

  4. JSP自定义标签开发入门

    一般情况下开发jsp自定义标签需要引用以下两个包 import javax.servlet.jsp.*; import javax.servlet.jsp.tagext.*; 首先我们需要大致了解开发 ...

  5. 【JSP】自定义标签开发入门

    JSP 自定义标签 自定义标签是用户定义的JSP语言元素.当JSP页面包含一个自定义标签时将被转化为servlet,标签转化为对被 称为tag handler的对象的操作,即当servlet执行时We ...

  6. javaweb学习总结(二十三)——jsp自定义标签开发入门

    一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...

  7. javaweb(二十三)——jsp自定义标签开发入门

    一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...

  8. 深入分析JavaWeb Item23 -- jsp自己定义标签开发入门

    一.自己定义标签的作用 自己定义标签主要用于移除Jsp页面中的java代码. 二.自己定义标签开发和使用 2.1.自己定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 要编写一 ...

  9. Linux安装 火速入门

    一.基本简介 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. Linux能运行主要的UNIX工具软件.应用程序 ...

随机推荐

  1. vue中使用element2

    阻止谷歌下记住密码 当我们将input框的类型设置为密码框的时候,就会出现下面这种效果,不仅样式不统一,有的时候,密码框的上面并不是用户名,而是其他的内容,也会被强制显示为用户名: 首先需要解决样式问 ...

  2. MongoDB入门三

    MongoDB字段问题  增删查改操作 删除一列操作db.RiderReaTimePositon.update({},{$unset:{'CreateTime':''}},false,true)db. ...

  3. eIQ WSL下工具及环境配置

    1. 配置WSL 参考[https://www.cnblogs.com/hayley111/p/12844337.html] 2. 配置VScode 参考[https://zhuanlan.zhihu ...

  4. 每天一个Linux命令（mkdir）

    每天一个Linux命令(mkdir) mkdir: /bin/mkdir,创建目录( make directories)语法:mkdir [选项]... 不存在的目录...目录:默认时必须该目录不存在 ...

  5. 初探pandas——安装和了解pandas数据结构

    安装pandas 通过python pip安装pandas pip install pandas pandas数据结构 pandas常用数据结构包括:Series和DataFrame Series S ...

  6. 初用MySQL Mysql示例库 Navicat15

    初用MySQL Mysql示例库 Navicat15   查询MySQl版本 Mysql shell > select version(); 右括号,not version   查看初始密码 M ...

  7. 记一道CTF隐写题解答过程

      0x00 前言 由于我是这几天才开始接触隐写这种东西,所以作为新手我想记录一下刚刚所学.这道CTF所需的知识点包括了图片的内容隐藏,mp3隐写,base64解密,当铺解密,可能用到的工具包括bin ...

  8. WPF中国地图

    实现鼠标移动到某个地区显示Popup弹框 1,地图 <Grid Margin="0,0,0,0" Grid.Row="1"> <Path St ...

  9. WPF弹性、惯性效果应用

    WPF弹性.惯性效果.已发布在了一些网站,都是这里写的 代码改编自微软示例代码库 // Copyright © Microsoft Corporation.  All Rights Reserved. ...

  10. Python之爬虫从入门到放弃（十三） Scrapy框架整体的了解

    这里是通过爬取伯乐在线的全部文章为例子,让自己先对scrapy进行一个整理的理解 该例子中的详细代码会放到我的github地址:https://github.com/pythonsite/spider ...