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. 面试官：你精通多少种语言的 Hello World?

    Hello World,是程序员入门编程语言的第一课.不论是C.C++还是Java ,我们写的第一个程序就是它了,还记得小编在大一C语言课上,花了一整节课时间才把它打印到控制台上.万事开头难啊,相信看 ...

  2. 使用docker创建mysql容器

    1.拉取mysql容器   docker pull mysql:5.7

  3. Kubernetes 中 搭建 EFK 日志搜索中心

    简介 Elastic 官方已经发布了Elasticsearch Operator ,简化了 elasticsearch 以及 kibana的部署与升级,结合 fluentd-kubernetes-da ...

  4. 【博弈】HDU - 5963 朋友

    题目 B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根.接下来从女生开始,双 ...

  5. 【错误】上传新的项目出错 error: failed to push some refs to 'https://github.com/...

    问题描述:在git bash中键入 $ git push origin master 进行提交的时候出现 如下错误: error: failed to push some refs to 'https ...

  6. LeetCode62. 不同路径

    由于机器人只可以向右和向下移动,所以我们要到第i行第j列,只可以由第i-1行第j列和第i行第j-1列移动一步得到,因此要到第i行第j列的方案数就是到第i-1行第j列的方案数和到第i行第j-1列的方案数 ...

  7. 《UNIX环境高级编程》(APUE) 笔记系列

    本系列笔记主要是对于 <UNIX环境高级编程>(APUE) 各章节内容 概念性的总结 ,不涉及代码解读 . 目录 : 第一章 UNIX基础知识 第二章 UNIX标准及实现 第三章 文件I/ ...

  8. Windows常用注册表文件

    内容转载自我的博客 目录 1. 删除Visual Studio的右键菜单 2. 恢复Visual Studio的右键菜单 3. 右键菜单添加功能 4. USB3.0连接安卓手机刷机出现问题 1. 删除 ...

  9. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  10. Mariadb之复制过滤器

    mariadb的主从复制集群,默认情况下是把主库上的所有库进行复制,只要在主库上产生写操作,从库基于主库的二进制日志做重放,从而实现把主库的上的库表复制到从库:复制过滤器指的是我们仅复制一个或几个数据 ...