常用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签	英文全拼	作用	特点
`<html></html>`	html	网页的根标签	所有的标签都要写在这一对根标签里面
`<head></head>`	head	网页的头标签	包括完档的属性和信息
`<body></body>`	body	网页的主题	包含文档的所有内容
`<div></div>`	division	定义一个区域	浏览器通常会在`<div>`前后放置一个换行符
`<!-- 注释 -->`	-	注释	单标签
`<br>或<br/>`	break	换行	单标签，不会在其前后创建空白行
`<hr>或<hr/>`	horizontal rule	添加水平线	单标签
`<img src="">`	image	添加图片	单标签
`<embed src="">`	embed	嵌入外部应用	单标签
`<meta>`	meta	提供有关页面的元信息	单标签，`<meta>`标签通常位于`<head>`区域内
`<link>`	link	定义文档与外部资源的关系	单标签，`<link>`标签只能存在于`<head>`区域内，不过它可出现任何次数。
`<p></p>`	paragraph	定义段落	自动在其前后创建空白行
`<h1> to <h6>`	Header 1 to Header 6	定义标题	h1在一个页面里只能出现一次
`<strong></strong>`	strong	文本加粗	加粗标记该文本
`<b></b>`	bold	文本加粗	加粗显示文本，不推荐使用
`<em></em>`	emphasize	文本倾斜	倾斜标记文本
`<i></i>`	italic	文本倾斜	倾斜显示文本，不推荐使用
`<del></del>`	delete	文本添加删除线	-
`<s></s>`	strike	文本添加删除线	不推荐使用
`<ins></ins>`	insert	文本添加下划线	-
`<u></u>`	underline	文本添加下划线	不推荐使用
`<a href="">填写内容</a>`	anchor	添加超链接	最好使用CSS来改变链接的样式
`<ul></ul>`	unordered list	定义无序列表	通常与`<li>`标签一起使用
`<ol></ol>`	ordered list	定义有序列表	通常与`<li>`标签一起使用
`<li></li>`	list item	创建列表项	可与各种列表定义标签一起使用
`<dl></dl>`	definition list	定义描述列表	通常与`<dt>`和`<dd>`一起使用
`<dt></dt>`	definition term	定义条目	定义描述列表的项目
`<dd></dd>`	definition description	定义描述	对描述列表中的项目进行描述
`<table></table>`	table	定义HTML表格	尽可能通过样式改变表格外观
`<tr></tr>`	table row	定义表格的行	一个`<tr>`标签包含一个或多个`<th>`或`<td>`标签
`<th></th>`	table headline	定义表格每一列的标题	该标签的文本通常呈现为粗体且居中
`<td></td>`	table data	定义表格中的单元格数据	该标签的文本呈现为普通且左对齐
`<caption>表格标题</caption>`	caption	定义整个表格的标题	`<caption>`标签必须直接放在`<table>`标签后
`<input type="">`	input	定义输入控件	输入字段可通过多种方式改变，取决于type属性
`select`	select	定义下拉列表	`<select>`中的`<option>`标签定义了列表中的可用选项
`<option></option>`	option	定义下拉列表中的可用项	`<option>`标签不可自由定义宽高
`<optgroup></optgroup>`	options group	定义选项组	`<optgroup>`标签用于把相关的选项组合在一起
`<textarea></textarea>`	textarea	定义多行的文本输入控件	文本的默认字体是等宽字体
`<form></form>`	form	定义表单	`<form>`可以包含多个元素
`<fieldset></fieldset>`	field set	定义围绕表单中元素的边框	`<legend>`为`<fieldset>`定义标题
`<legend></legend>`	legend	为`<fieldset>`定义标题	`<legend>`通过css设定样式
`<progress></progress>`	progress	定义运行中的任务进度	`<progress>`是HTML5中的新标签，`<progress>`标签不适合用来表示度量衡
`<meter></meter>`	meter	度量衡	`<meter>`是HTML5的新标签，`<meter>`标签不适合用来表示进度条
`<audio></audio>`	audio	添加音频	`<audio>`标签是HTML5的新标签
`<video></video>`	video	添加视频	`<video>`标签是HTML5的新标签
`<source>`	source	定义媒介资源	`<source>`标签是HTML5中的新标签

常用标签使用说明

`<img>`

常用写法：<img src="" alt="" title=""width="" height="">
src：图片的来源（必写属性）
alt：图像不显示时的替代文本
title：鼠标在移动到元素上的文本提示
width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

`<a>`

普通用法

常用写法：<a href="" title="" target="">填写内容</a>
href：去往的路径（必写属性）
title：鼠标在移动到元素上的文本提示
target：规定在何处打开路径
- _blank：新页面打开
- _parent：在父窗口中打开链接
- _self：当前页面跳转（默认值）
- _top：在当前窗体打开链接，并替换当前的整个窗体
当href的值为javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转
当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

给目标元素设置id值，如<p id="id1"></p>
设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如<a href="#id1"></a>

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

  <a href="#id2">a</a>

  <p id="id1">

    (lorem*15)

  </p>

     (lorem*15)

  <p id="id2">

     (lorem*15)

  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>

  <!-- 让页面所有的超链接新页面打开 -->

  <base target="_blank">

</head>

`<meta>`

charset编码

常用写法： <meta charset="UTF-8">
charset：定义文档的字符编码
- ASCII/ANSI/Unicode：英语
- GBK：亚洲通用字符集
- GB2312：中文简体
- Big5：台澳港繁体
- UTF-8：世界通用字符集

name

关键字
- 常用写法： <meta name="keywords" content="">
- 描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面
网页描述
- 常用写法： <meta name="keywords" content="">
- 描述：告诉搜索引擎网页的主要内容
作者
- 常用写法： <meta name="author" content="">
- 描述：告诉搜索引擎网页的作者
文件检索
- 常用写法： <meta name="robots" content="all | none | index | noindex | follow | nofollow">
- 描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
- content: 文件检索方式
  - all：文件将被检索，且页面上的链接可以被查询（默认值）
  - none：文件将不被检索，且页面上的链接不可以被查询
  - index：文件将被检索；
  - noindex：文件将不被检索，但页面上的链接可以被查询
  - follow：页面上的链接可以被查询
  - nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

常用写法： <meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />
描述：网页5秒后自动跳转到谷歌主页
url：为空则刷新本页

`<link>`

常用写法：
描述：规定当前文档与被链接文档/资源之间的关系
rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
type：规定被链接文档的类型
href：链接的文件路径
示例：
- 链接外部样式表：<link rel="stylesheet" type="text/css" href="a.css">
- 设置网页icon图标：<link rel="icon" href="a.ico">

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        ...

    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

    <ol start="2">

        <li>a</li>

        <li>b</li>

        <li>c</li>

        ...

    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

    <dl>

        <dt>A</dt> <!-- 小标题 -->

            <dd>A1</dd> <!-- 解释标题 -->

            <dd>A2</dd> <!-- 解释标题 -->

        <dt>B</dt> <!-- 小标题 -->

            <dd>B1</dd> <!-- 解释标题 -->

            <dd>B2</dd> <!-- 解释标题 -->

    </dl>

表格

基础表格

常用写法：<table width="" height="" border="" cellspacing="" cellpadding=""></table>
width：表格宽度
height：表格高度
border：边框宽度
cellspacing：单元格间距
cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">

<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>

    <!-- 定义表格的行 -->

    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->

    <td>B1</td>

    <td>C1</td>

</tr>

<tr>

    <!-- 定义表格的行 -->

    <th>A</th> <!-- 定义表格每一列的标题 -->

    <th>B</th>

    <th>C</th>

</tr>

<tr>

    <td>A2</td>

    <td>B2</td>

    <td>C2</td>

</tr>

</table>

单元格合并

常用写法：<td colspan=“” rowspan=“”></td>
描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">

<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->

<tr height="100">

    <!-- 定义表格的行 -->

    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->

    <td>B1</td>

</tr>

<tr height="100">

    <td>A2</td>

    <td>B2</td>

    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->

</tr>

<tr height="100">

    <td>A3</td>

    <td>B3</td>

</tr>

</table>

`<input>`

对于<input>不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

常用写法：<input type="text" name="" maxlength="" readonly="" disabled="" value="">
type：规定输入字段的类型
name：输入框的名字
maxlength：输入文本长度
readonly：输入框是否只读
disabled：输入框是否未激活
value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

常用写法：<input type="password" name="">
type：规定输入字段的类型
name：输入框的名字
密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

常用写法：<input type="radio" name="" checked="checked">
type：规定输入字段的类型
name：输入框的名字
checked：设定该输入框被预先选定
想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>

    <input type="radio" name="man" checked="checked">男

</div>

<div>

    <input type="radio" name="woman">女

</div>

示例二，两个单选框只能有一个被选中

  <div>

    <input type="radio" name="gender" checked="checked">男

  </div>

  <div>

    <input type="radio" name="gender">女

  </div>

下拉列表

<select>

常用写法：<select multiple=""></select>
multiple：当该属性为true时，可选择多个选项。

<optgroup>

常用写法：<optgroup label=""></optgroup>
label：设定选项组的描述。

<option>

常用写法：<option value="" selected="">选项值</option>
value：定义送往服务器的选项值。
selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

  <select>

    <option value="a">a</option>

    <option value="b">b</option>

    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->

  </select>

示例二，带组合的单选下拉列表

  <select>

    <optgroup label="A">

      <option value="a1">a1</option>

      <option value="a2" selected='selected'>a2</option>

    </optgroup>

    <optgroup label="B">

      <option value="b1">b1</option>

      <option value="b2">b2</option>

    </optgroup>

  </select>

示例三，带组合的多选下拉列表

  <select multiple=”multiple”>

    <optgroup label="A">

      <option value="a1">a1</option>

      <option value="a2" selected='selected'>a2</option>

    </optgroup>

    <optgroup label="B">

      <option value="b1" selected='selected'>b1</option>

      <option value="b2">b2</option>

    </optgroup>

  </select>

多选框

常用写法：<input type="checkbox" checked="">
type：规定输入字段的类型
checked：设定该输入框被预先选定

简单示例如下。

  <input type="checkbox"  checked="checked">A

  <input type="checkbox">B

文本框

常用写法：<textarea cols="" rows="" placeholder=""></textarea>
cols：控制可见文本的列数
rows：控制可见文本的行数
placeholder：提示字符

简单示例如下。

  <textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

常用写法：<input type="file" accept=""/>
accept：规定提交的文件的类型

简单示例如下。

  <input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

  <input type="submit">文件提交按钮

  <input type="button" value="">普通按钮

  <input type="image" src="">图片按钮

  <input type="reset">重置按钮

  <input type="url">网址控件

  <input type="date">日期控件

  <input type="time">时间控件

  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->

  <input type="email">邮件控件

  <input type="number" step="3">数字控件

  <input type="range" step="100">滑块控件

  <input type="color">颜色控件

表单

示例一，普通表单

  <form>

    First name: <input type="text" name="fname"><br>

    Last name: <input type="text" name="lname"><br>

    <input type="submit" value="提交">

  </form>

示例二，带分组信息表单

  <form>

    <fieldset>

      <legend>Personalia:</legend>

      First name: <input type="text" name="fname"><br>

      Last name: <input type="text" name="lname"><br>

      <input type="submit" value="提交">

    </fieldset>

    First nameA: <input type="text" name="fname"><br>

    Last nameB: <input type="text" name="lname"><br>

  </form>

`<progress>`与`<meter>`

<progress>与<meter>主要区别和用法见HTML5 progress和meter控件

<progress>

常用写法：<progress value="" max=""></progress>
value：规定进程的当前值
max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

<meter>

常用写法：<meter min="" low="" high="" max="" value="" optimum=""></meter>
value：规定度量的当前值
max：规定被界定为高的值的范围
min：规定被界定为低的值的范围
low：规定被界定为低的值的范围
high：规定被界定为高的值的范围
optimum：规定度量的最优值
具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>

<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

<audio>

常用写法：<audio src="" controls autoplay loop></audio>
src：规定音频文件的url
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

<video>

常用写法：<video src="" width="" height="" poster="" controls autoplay loop></video>
src：规定视频文件的url
width：设置视频播放器的宽度（pixels）
height：设置视频播放器的高度（pixels）
poster：设置视频未播放时展示的画面
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

<source>

常用写法：<source src="" type="">
src：规定媒体文件的url
type：规定媒体文件的类型
因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

  <video controls>

    <source src="demo.mp3" type="audio/mp3">

    <source src="demo.mp4" type="video/mp4">

    您的浏览器不支持video元素。

  </video>

特殊字符

HTML特殊字符编码对照表

参考

[编程基础] 常用html标签使用介绍的更多相关文章

OC基础--常用类的初步介绍与简单实用之集合类
集合类的异同点一.NSArray\NSMutableArray *有序 *快速创建(只有不可变数组可以):@[obj1, obj2, obj3]; *快速访问元素:数组名[i] *只能存放对象二. ...
OC基础--常用类的初步介绍与简单实用之NSString
一.NSString:不可变字符串/NSMutableString:可变字符串 1>字符串的常用创建方式: (1)NSString *s1 = @"Chaos"; (2)NS ...
OC基础--常用类的初步介绍与简单使用之NSDate
一.创建一个时间 NSDate *date = [NSDate date]; // 打印出的时间是0时区的时间(北京--东八区) NSLog(@"%@",date); 二.日期格式 ...
16第一章 ASP.Net编程基础知识
第一章 ASP.Net编程基础知识第一章 ASP.Net编程基础知识本章首先介绍用ASP.Net技术编制服务器端动态网页所需的网络和HTML标记语言方面的有关知识.然后 ...
Java并发编程基础三板斧之Semaphore
引言最近可以进行个税申报了,还没有申报的同学可以赶紧去试试哦.不过我反正是从上午到下午一直都没有成功的进行申报,一进行申报就返回"当前访问人数过多,请稍后再试".为什么有些人就 ...
Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
shell脚本编程基础介绍
Linux系统——shell脚本编程基础介绍 1.什么是shell 它是一个命令解释器,在linux/unix操作系统的最外层,负责直接与用户对话,把用户的输入解释给操作系统,并处理各种操作输出的结果 ...
【转载】Python编程中常用的12种基础知识总结
Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
Winsock编程基础介绍 .
相信很多人都对网络编程感兴趣,下面我们就来介绍,在网络编程中应用最广泛的编程接口Winsock API. 使用Winsock API的编程,应该了解一些TCP/IP的基础知识.虽然你可以直接使用Win ...

随机推荐

flinksql读写redis
0.前言最近有个需求,需要使用flinksql读写redis,由于官网上并没有redis的connector,在网上找了很久,开源的几个connector又没法满足要求,所有这里就自己动手实现了一个 ...
JS---HelloWorld
1.功能效果图 2.代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
sql语法巧用之not取反
数据库的重要性和通用性都不用说了,什么sql的通用性,sql优化之类的也不必说了,咱们今天来聊聊另一个有意思的话题:如何取一个筛选的反面案例. 1. 举几个正反案例的例子为了让大家理解我们的假设场景 ...
Windows7下驱动开发与调试体系构建——3.调试体系概述
目录/参考资料:https://www.cnblogs.com/railgunRG/p/14412321.html 调试体系概述 0.什么是自建调试体系? 就是复写windows的调试api,使得调试 ...
重新整理 .net core 实践篇 ———— linux 上线篇 [外篇]
前言简单整理一个linux 简单上线. 这个是该系列的外篇,该系列继续更新.献给刚学的人. 正文安装实例 dotnet new webapp -n AspNetCoreDemo -o firstw ...
SpringBoot 阶段测试 1
SpringBoot 阶段测试 1 目录 SpringBoot 阶段测试 1 1.使用JDK8新语法完成下列集合练习: 1.1 List中有1,2,3,4,5,6,7,8,9几个元素要求; (1) 将 ...
Asp.Net Core6.0中MediatR的应用CQRS
1.前言对于简单的系统而言模型与数据可以进行直接的映射,比如说三层模型就足够支撑项目的需求了.对于这种简单的系统我们过度设计说白了无异于增加成本,因为对于一般的CRUD来说我们不用特别区分查询和增删 ...
mybatis一对多映射分页的问题
一对多可能会出现分页错误条数不对的问题解决方法: 将主表分页查询一次 SELECT aa.id,aa.name,bb.name FROM (SELECT * from tab1 ORDER BY ...
jvm调优思路及调优案例
jvm调优思路及调优案例我们说jvm调优,其实就是不断测试调整jvm的运行参数,尽可能让对象都在新生代(Eden)里分配和回收,尽量别让太多对象频繁进入老年代,避免频繁对老年代进行垃圾回收,同时 ...

[编程基础] 常用html标签使用介绍

常用html标签使用介绍

常用html标签列表

常用标签使用说明

<img>

<a>

<meta>

<link>

列表

表格

<input>

<progress>与<meter>

多媒体资源

特殊字符

参考

[编程基础] 常用html标签使用介绍的更多相关文章

随机推荐

热门专题

`<img>`

`<a>`

`<meta>`

`<link>`

`<input>`

`<progress>`与`<meter>`