HTML学习:元素与属性

一、HTML元素

HTML 文档由 HTML 元素定义,由嵌套的HTML元素(可以包含其他HTML元素)构成,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。

HTML元素语法

  • HTML 元素以开始标签起始,以结束标签终止;
  • 元素的内容是开始标签与结束标签之间的内容;
  • 某些 HTML 元素具有空内容(empty content);
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束);
  • 大多数 HTML 元素可拥有属性。

HTML 文档由嵌套的HTML元素(可以包含其他HTML元素)构成。

HTML空元素

  • HTML空元素即为没有内容的HTML元素;
  • HTML空元素应该在开始标签中关闭;
  • HTML的一个空元素为 <br>(用于定义换行),<br> 元素就是没有关闭标签;
  • HTML空元素的关闭方法是在开始标签中添加斜杠,比如<br/>,HTML、XHTML和XML都接受这种方式。

使用小写标签

由于HTML标签对英文字母的大小写不敏感,所以<P><p>表达的意思相同,不过大部分网站喜欢使用大写的HTML标签。
推荐使用小写标签。

HTML元素参考手册

标签 描述 HTML5新属性
基础
<!DOCTYPE> 定义文档类型
<html> 定义一个HTML文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义HTML标题
<p> 定义一个段落
<br> 定义简单的折行
<hr> 定义水平线
<!--...--> 定义一个注释
格式
<abbr> 定义一个缩写
<address> 定义文档作者或拥有者的联系信息
<b> 定义粗体文本
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
<bdo> 定义文本的方向
<blockquote> 定义块引用
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<del> 定义被删除文本
<dfn> 定义定义项目
<em> 定义强调文本
<i> 定义斜体文本
<ins> 定义被插入文本
<kbd> 定义键盘文本
<mark> 定义带有记号的文本
<meter> 定义度量衡。仅用于已知最大和最小值的度量
<pre> 定义预格式文本
<progress> 定义运行中的任务进度(进程)
<q> 定义短的引用
<rp> 定义不支持 ruby 元素的浏览器所显示的内容
<rt> 定义字符(中文注音或字符)的解释或发音
<ruby> 定义ruby注释(中文注音或字符)
<s> 定义加删除线的文本
<samp> 定义计算机代码样本
<small> 定义小号文本
<strong> 定义语气更为强烈的强调文本
<sub> 定义下标文本
<sup> 定义上标文本
<time> 定义一个日期/时间
<u> 定义下划线文本
<var> 定义文本的变量部分
<wbr> 规定在文本中的何处适合添加换行符
表单
<form> 定义一个 HTML 表单,用于用户输入
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<label> 定义 input 元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义 fieldset 元素的标题
<datalist> 规定了 input 元素可能的选项列表
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义一个计算的结果
框架
<iframe> 定义内联框架
图像
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)
<figcaption> 定义一个 caption for a <figure> element
<figure> figure 标签用于对元素进行组合
Audio/Video
<audio> 定义声音,比如音乐或其他音频流
<source> 定义media元素 (<video> 和 <audio>)的媒体资源。media
<track> 为媒体(<video> 和 <audio>)元素定义外部文本轨道
<video> 定义一个音频或者视频
链接
<a> 定义一个链接
<link> 定义文档与外部资源的关系
<nav> 定义导航链接
列表
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dl> 定义一个定义列表
<dt> 定义一个定义定义列表中的项目
<dd> 定义定义列表中项目的描述
<menu> 定义菜单列表
<command> 定义用户可能调用的命令(比如单选按钮、复选框或按钮)
表格
<table> 定义一个表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容(脚注)
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
样式/节
<style> 定义文档的样式信息
<div> 定义文档中的节
<span> 定义文档中的节
<header> 定义一个文档头部部分
<footer> 定义一个文档底部
<section> 定义了文档的某个区域
<article> 定义一个文章内容
<aside> 定义其所处内容之外的内容
<details> 定义了用户可见的或者隐藏的需求的补充细节
<dialog> 定义一个对话框或者窗口
<summary> 定义一个可见的标题。当用户点击标题时会显示出详细信息
元信息
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息
<base> 定义页面中所有链接的默认地址或默认目标
程序
<script> 定义客户端脚本
<noscript> 定义针对不支持客户端脚本的用户的替代内容
<embed> 定义了一个容器,用来嵌入外部应用或者互动程序(插件)
<object> 定义嵌入的对象
<param> 定义对象的参数

二、HTML属性

属性是为HTML元素提供的附加信息。属性和属性值对大小写不敏感。推荐使用小写的属性/属性值。

  • HTML元素可以设置属性;
  • 属性可以在元素中添加附加信息;
  • 属性一般描述于开始标签;
  • 属性总是以名称/值对的形式出现,比如:name="value"
  • 属性值应该始终被包括在引号内;
  • 双引号是最常用的,不过使用单引号也没有问题。

HTML属性参考手册

属性 描述 HTML5新属性
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名(classname)
contenteditable 规定是否可编辑元素的内容。
contextmenu 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-* 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggable 指定某个元素是否可以拖动
dropzone 指定是否将数据复制,移动,或链接,或删除
hidden hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码
spellcheck 检测元素是否拼写错误
style 规定元素的行内样式(inline style)
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息(可在工具提示中显示)
translate 指定是否一个元素的值在页面载入时是否需要翻译
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355