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. day12—列表、元组、字典基本语法

    一.list类中提供的方法 **********************灰魔法************************** 1. 原来值最后追加 append() li = [11, 22, ...

  2. 补充:回答网友的问题,如何不用路径,而直接将CImage画到DC中,之后DC一起显示.

    补充:回答网友的问题,如何不用路径,而直接将CImage画到DC中,之后DC一起显示.注释掉 pDC->BeginPath(); // 打开路径层 pDC->Rectangle(0,0,p ...

  3. [CF1216E] Numerical Sequence hard version

    题目 The only difference between the easy and the hard versions is the maximum value of k. You are giv ...

  4. 《The Design of a Practical System for Fault-Tolerant Virtual Machines》论文总结

    VM-FT 论文总结 说明:本文为论文 <The Design of a Practical System for Fault-Tolerant Virtual Machines> 的个人 ...

  5. 利用CSS变量实现炫酷的悬浮效果

    最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...

  6. React学习路径快速进入AntDesignPro开发

    好久没有写博客,有空再来记一下.最近在整些小东西,需要用到前端,最开始本着对nodejs的动不动几百兆插件的恐惧, 于是使用自己以前写的 OSS.Pjax 小框架(类似国外的Pjax,利用pushSt ...

  7. C++各种格式转换

    int main() {     stringstream sstr;     //--------int转string-----------     int a=100;     string st ...

  8. 根据URL下载图片到本地

    /// <summary> /// 下载图片 /// </summary> /// <param name="picUrl">图片Http地址& ...

  9. JavaWeb基础（day11）

    HTML HTML是超文本标记语言.HTML就 是普通的文本文件,只不过在文本中的内容如果被一些 特殊的标签进行包裹就有了特殊的含义,这些被那些标签标记文本,就成了超文本. 网页的组成 网页的组成 H ...

  10. 汉王JAVA笔试题

    汉王JAVA笔试题 1,jsp中动态include与静态include的区别? (1)动态包含总是会检查文件中的变化,适合用于包含动态页面,并且可以带参数. (2)静态包含不会检查所含文件的变化,适用 ...