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. LQR要点

    新的“A”变成着了这样:Ac = A - KB 基于对象:状态空间形式的系统 能量函数J:也称之为目标函数 Q:半正定矩阵,对角阵(允许对角元素出现0) R:正定矩阵,QR其实就是权重 下面这段话可能 ...

  2. 在Github上建立自己的个人主页

    目录 注册Github账号 登录Github账号 建立新仓库 选择个人主页的主题 注册Github账号 首先打开Github的主页(https://github.com/),点击右上角的sign up ...

  3. JedisUtils工具类模板

    redis.properties配置文件 redis.maxIdle=30 redis.minIdle=10 redis.maxTotal=100 redis.url=192.168.204.128 ...

  4. Centos 6.4 安装/卸载 Adobe Reader 9（.bin .tar.bz2 rpm 包）

    一.To install Adobe Reader 9.1 using a tarball installer 1. Open a terminal window. 2. Change directo ...

  5. No mapping found for HTTP request with URI [/***] in DispatcherServlet with name 'dispatcherServlet'

    相信不少Springboot初学者和我一样,都遇到上边这个提示,明明路径都是对的,但就是找不到对于的页面而404了,这也困扰我很长一段时间,我也是不得其解,百度上也鲜有合理回答,因为以前使用的时候,明 ...

  6. SpringMVC+Spring+Hibernate个人家庭财务管理系统

    项目描述 Hi,大家好,今天分享的项目是<个人家庭财务管理系统>,本系统是针对个人家庭内部的财务管理而开发的,大体功能模块如下: 系统管理模块 验证用户登录功能:该功能主要是验证用户登录时 ...

  7. css3增加的的属性值position:stricky

    position:sticky sticky 英文字面意思是粘,粘贴.这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊 ...

  8. WireGuard 教程：WireGuard 的工作原理

    原文链接:https://fuckcloudnative.io/posts/wireguard-docs-theory/ WireGuard 是由 Jason Donenfeld 等人用 C 语言编写 ...

  9. C++快速读写

    1.主函数的最前面加入这个 std::ios::sync_with_stdio(0); cin.tie(0); cout.tie(0); 2.这是一个读入数字的快读 inline int read() ...

  10. day18 作业

    目录 1.编写课上讲解的有参装饰器准备明天默写 2.在文件开头声明一个空字典,然后在每个函数前加上装饰器,完成自动添加到字典的操作 3.编写日志装饰器,实现功能如:一旦函数f1执行,则将消息2017- ...