整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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


用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 src="" alt="" title=""width="" height=""​​>
  • src:图片的来源(必写属性)
  • alt:图像不显示时的替代文本
  • title:鼠标在移动到元素上的文本提示
  • width/height:图片宽高,没有定义宽高的时候,图片按照百分之百比例显示,更改图片的宽度或者高度,图片等比例缩放

普通用法

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

锚点链接

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

  1. 给目标元素设置id值,如​​<p id="id1"></p>​
  2. 设置锚点超链接,锚点的超链接路径一定包含"#",后面紧跟元素的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>

charset编码

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

name

  1. 关键字
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的关键字,尽量将重要的关键词放在前面
  1. 网页描述
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的主要内容
  1. 作者
  • 常用写法: ​​<meta name="author" content="">​
  • 描述:告诉搜索引擎网页的作者
  1. 文件检索
  • 常用写法: ​​<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:为空则刷新本页
  • 常用写法:
  • 描述:规定当前文档与被链接文档/资源之间的关系
  • 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>​​不同的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>​​主要区别和用法见​​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基础​​
  • ​​HTML 参考手册​​
  • HTML中标签对应的英文
  • meter标签改变颜色规则
  • HTML5 progress和meter控件

天继续说下HTML第二讲,空元素、小写标签、属性和对应的具体使用。


先说下HTML 空元素:

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。


使用HTML小标签:

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。


HTML属性:

属性是 HTML 元素提供的附加信息。

属性都包含:

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现,比如:name="value"。


接着我们看一个实例:

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定

<a href="http://www.liepin.com">这是一个链接</a>


我们在Sublime Text上试下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210815---测试开发转型</title>

</head>

<body>

<h>空元素</h>

<p>没有内容的 HTML 元素被称为空元素</p>

</body>

<a href ="https://www.baidu.com">这是一个招聘网站</a>

</html>

由于 http://www.liepin.com跳转需要的时间有点长,可能是家里网速不好, 页面一直跳转不成功。就修改为 www.baidu.com 这样就可以了。点击可以跳转到新的网址。


HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。

提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。


HTML 属性参考手册

下面列出了适用于大多数 HTML 元素的属性:

属性描述

class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)

id 定义元素的唯一id

style 规定元素的行内样式(inline style)

title 描述了元素的额外信息 (作为工具条使用)


HTML 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

接着我们看一个实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210815---测试开发转型</title>

</head>

<body>

<h>空元素</h>

<p>没有内容的 HTML 元素被称为空元素</p>

<h1>我是最大的,你忍一下</h1>

<h2>我是老二,你也要忍一下</h2>

<h3>我是老三,我一般</h3>

<h4>我是老四,我凑合</h4>

<h5>我是老五,我忠于革命</h5>

<h6>我是老六,我是最小的,我啥也不是</h6>

</body>

<a href ="https://www.baidu.com">这是一个招聘网站</a>

</html>



尝试一下 »

注释: 浏览器会自动地在标题的前后添加空行。

可以看出,文字是越来越小的,标题越来越小。说明符合要求

TML 标题

HTML 标题(Heading)是通过 <h1> - <h6> 标签来定义的.

h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1><h2><h3><h4><h5><h6>,每个元素代表文档中不同级别的内容:

<h1> 表示主标题( the main heading ),<h2> 表示二级子标题( subheadings ),<h3>表示三级子标题( sub-subheadings ),<h4><h5><h6>字体的大小依次递减。

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

HTML 段落

HTML 段落是通过标签<p>来定义的,P是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 中的链接

HTML 链接是通过标签<a>来定义的。a标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。

<a href="http://www.liyadong.cn">这是一个链接</a>
<a href="#">这是一个空链接</a> 

HTML 图像

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片,使用src 属性指向一个图片的具体地址。

<img src="logonew2.png" width="206" height="36">

请注意:img元素是自关闭元素,不需要结束标记。

HTML 强调

在 HTML 中我们可以使用em(emphasis)元素来标记这样的情况,浏览器默认风格为斜体:

在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况,浏览器默认风格为粗体:

<p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>
<p>这种液体是<strong>高毒性的</strong>.</p>
<p>我就指望你<strong>不会</strong> 迟到!</p>

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员,提醒他们与程序相关的信息。

注释写法如下:

<!-- 这是一个注释 -->

HTML 折行

如果您希望在不产生一个新起点的情况下进行换行(新行),请使用 <br /> 标签。

在 HTML 语言中,<br /> 标签定义为一个换行符,它可以理解为简单的输入一个空行,而不是用来对内容进行拆分:

<p>这个<br>段落<br>演示了分行的效果</p>

HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

HTML "计算机输出" 标签

标签

描述

<code>

定义计算机代码

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

HTML 引文, 引用, 及标签定义

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目。

HTML <q> 用于短的引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>

用于长引用的 HTML <blockquote>

HTML <blockquote> 元素定义被引用的节。

浏览器通常会对 <blockquote> 元素进行缩进处理。

<p>以下内容引用自 WWF 的网站:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来,WWF 一直致力于保护自然界的未来。
世界领先的环保组织,WWF 工作于 100 个国家,
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

用于缩略词的 HTML <abbr>

HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

用于定义的 HTML <dfn>

HTML <dfn> 元素定义项目或缩写的定义。

<dfn> 的用法,按照 HTML5 标准中的描述,有点复杂:

1. 如果设置了 <dfn> 元素的 title 属性,则定义项目:

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素,则 title 定义项目:

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

3. 否则,<dfn> 文本内容即是项目,并且父元素包含定义。

<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

注释:如果您希望简而化之,请使用第一条,或使用 <abbr> 代替。

用于联系信息的 HTML <address>

HTML <address> 元素定义文档或文章的联系信息(作者/拥有者)。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

用于著作标题的 HTML <cite>

HTML <cite> 元素定义著作的标题。

浏览器通常会以斜体显示 <cite> 元素。

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

用于双向重写的 HTML <bdo>

HTML <bdo> 元素定义双流向覆盖(bi-directional override)。

<bdo> 元素用于覆盖当前文本方向:

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML 引文、引用和定义元素

标签

描述

<abbr>

定义缩写或首字母缩略语。

<address>

定义文档作者或拥有者的联系信息。

<bdo>

定义文本方向。

<blockquote>

定义从其他来源引用的节。

<dfn>

定义项目或缩略词的定义。

<q>

定义短的行内引用。

<cite>

定义著作的标题。

HTML 区块

HTML 可以通过 <div> 和 <span> 将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

<div> 标签可以把文档分割为独立的、不同的部分。

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<p>这是一些文本。</p>
<div style="color:#00FFFF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>这是一些文本。</p>

HTML <span> 与元素

HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

<p>我有一双
<span style="color:gold">金色</span> 的
<span style="font-size:50px">大眼睛</span>和 
<span style="color:blue">蓝色的头发</span>。
</p> 

HTML 分组标签

标签

描述

<div>

定义了文档的区域,块级 (block-level)

<span>

用来组合文档中的行内元素, 内联元素(inline)


HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

<ol>       
<li>Coffee</li>      
<li>Milk</li>       
</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义,如果只有术语名或者只有定义也是可行的,也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 表格

表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 HTML 表格的基本结构:

<table>…</table>:定义表格

<th>…</th>:定义表格的标题栏(文字加粗)

<tr>…</tr>:定义表格的行

<td>…</td>:定义表格的列

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 表格标签


标签

描述

<table>

定义表格

<th>

定义表格的表头

<tr>

定义表格的行

<td>

定义表格单元

<caption>

定义表格标题

<colgroup>

定义表格列的组

<col>

定义用于表格列的属性

<thead>

定义表格的页眉

<tbody>

定义表格的主体

<tfoot>

定义表格的页脚

HTML框架

<iframe>标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

iframe 语法:

<iframe src="URL"></iframe>

URL指向不同的网页,将窗口内容显示为URL地址指向页面。


heightwidth属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%").

<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性,如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
.   
input elements        
.
</form>

文本域通过 <input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。您可以在编程测试中创建文本输入框!

<form>
姓名: <input type="text" name="firstname"><br>       
电话号码: <input type="text" name="lastname">      
</form>

密码字段通过标签 <input type="password"> 来定义:

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项。

<form>        
<input type="radio" name="sex" value="male">男<br>      
<input type="radio" name="sex" value="female">女       
</form>

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>      
<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>      
<input type="checkbox" name="vehicle" value="Car">我有小车
</form>

提交按钮 (Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>


以上内容整理于网络,如有侵权请联系删除。