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. MongoDB快速入门教程（3.1）

    3.MongoDB进阶 3.1.权限验证 以下内容适用于Mac系统用户,window系统用户请看后面文档 3.1.1.创建超级管理员用户 默认情况下连接mongodb是不需要用户名和密码的,这样不安全 ...

  2. 栈的顺序存储和链式存储c语言实现

    一. 栈 栈的定义:栈是只允许在一端进行插入或删除操作的线性表. 1.栈的顺序存储 栈顶指针:S.top,初始设为-1 栈顶元素:S.data[S.top] 进栈操作:栈不满时,栈顶指针先加1,再到栈 ...

  3. ibit-mybatis 2.x 介绍

    原文链接:ibit-mybatis 2.x 介绍 概述 ibit-mybatis 是一个 Mybatis 的增强工具,在 Mybatis 的基础上增加了新的特性与功能,志在简化开发流程.提高开发效率. ...

  4. Git篇----创建远程仓库

    现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...

  5. python学习笔记之装饰器、生成器、内置函数、json(五)

    一.装饰器 装饰器,这个器就是函数的意思,连起来,就是装饰函数,装饰器本身也是一个函数,它的作用是用来给其他函数添加新功能比如说,我以前写了很多代码,系统已经上线了,但是性能比较不好,现在想把程序里面 ...

  6. 《SpringBoot判空处理》接开@valid的面纱

    一.事有起因 我们在与前端交互的时候,一般会遇到字段格式校验及非空非null的校验,在没有SpringBoot注解的时候, 我们可能会在service进行处理: if(null == name){ t ...

  7. Scala 基础（十四）：Scala 模式匹配（二）

    1 匹配数组 1)Array(0) 匹配只有一个元素且为0的数组. 2)Array(x,y) 匹配数组有两个元素,并将两个元素赋值为x和y.当然可以依次类推Array(x,y,z) 匹配数组有3个元素 ...

  8. Maven 专题（八）：配置（一）常用修改配置

    修改配置文件 通常我们需要修改解压目录下conf/settings.xml文件,这样可以更好的适合我们的使用. 此处注意:所有的修改一定要在注释标签外面,不然修改无效.Maven很多标签都是给的例子, ...

  9. flask源码剖析系列（系列目录）

    flask源码剖析系列(系列目录) 01 flask源码剖析之werkzurg 了解wsgi 02 flask源码剖析之flask快速使用 03 flask源码剖析之threading.local和高 ...

  10. MySQL数据库使用报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.

    今天MySQL数据库,在使用的过程中一直报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement be ...