其他分享
首页 > 其他分享> > HTML标签火速入门

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>

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

标签:晚景,入门,标签,二首,春江,HTML,惠崇
来源: https://www.cnblogs.com/Amery_J/p/10593992.html