HTML元素介绍（一）

TML元素介绍（一）

个人学习总结输出，持续更新。Day day study！Day day up！

这里的元素大多数是普通元素。此处的普通指的是：几乎没有自己特殊的属性，只指定通用属性和各种事件属性。

基本元素

:定义HTML注释。
<html>:HTML5文档的根元素，允许省略，但不建议省略。
<head>:HTML5文档的页面头部分，允许省略，但不建议省略。
<title>:HTML5文档页面标题。
<body>:页面主体部分。
<title>:定义标题1-标题6。
<p>:定义段落。
<br>:插入一个换行。
<hr>:水平线，主题结束语义。
<div>:文档中的节。
<span>:与div类似，表示一般性文本，为内联元素。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <h1>标题1</h1>
 <h2>标题2</h2>
 <h3>标题3</h3>
 <h4>标题4</h4>
 <h5>标题5</h5>
 <h6>标题6</h6>
 <p>
 <span>
 其后无br
 </span>
 <span>
 其后有br
 </span>
 <br>
 <span>
 其后有hr
 </span>
 <hr>
 <span>
 其后有div
 </span>
 <div id="">
 一般p内不包含div，div内可包含一切，所以以往大量使用，造成了语义化不明确。
 </div>
 </p>
 </body>
</html>

文本格式相关元素

<b>:粗体文本
<i>:斜体文本
<em>:表示强调，样式也是斜体
<strong>:粗体文本,与<b>用法类似。
<small>:小号字体文本。
<sup>：上标文本
<sub>：下标文本
<bdo>：文本显示方向


 <p>
 <b>b加粗</b><strong>strong加粗</strong>正常
 <small>缩小</small>2<sup>2</sup>a<sub>2</sub>
 <hr >
 <bdo dir="ltr">左向右</bdo>
 <hr >
 <bdo dir="rtl">左向右</bdo>
 </p>

旧的语义相关元素

<abbr>：表示缩写，
title：属性代表全称。
<address>：表示地址
<blockquote>：表示长文本引用。
cite：属性指定出处
<q>：表示短文本引用。
<cite>：作品标题。
<code>：代码文本。
<dfn>：用于定义专业术语。
<del>：待删除线文本。
cite：属性指定原因、
datetime：属性标注修改时间
<ins>：表示插入的文本。
cite：属性指定原因、
datetime：属性标注修改时间
<pre>：预格式化。内部可直接使用本来需要转移的文本。
<samp>：示范文本。
<kbd>：用于定义键盘文本。
<var>：表示变量。


 <p>
 <abbr title="中华人民共和国">中国</abbr>
 <address>西安市雁塔区幸福小区3单元403室</address>
 <cite>作品标题</cite>
 <blockquote cite="www.baidu.com">表示长文本引用。通常带有`cite`属性指定出处（可以使url）</blockquote>
 <q>表示短文本引用。</q>
 <code>
 let tempDom=document.querrySelect('#id');
 dom.hidden=true;
 </code>
 <dfn>牛顿第三定理：</dfn>
 <br>
 <del>待删除线文本。通常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</del>
 <br>
 <ins>表示插入的文本。常带有`cite`属性指定原因、通常带有`datetime`属性标注修改时间</ins>
 <pre>/\'''"""</pre>
 <samp>示范文本。</samp>
 <kbd>ctrl</kbd>
 <var>i</var>
 </p>

H5新增语义元素

<mark>：标记重点。
<time>：标注时间。
datetime：提供格式化的时间，内容本身格式标准，可以不使用此属性。
pubdate：boolean 是否是发布日期
<details>与<summary>：摘要与详情，如果摘要放在详情里，摘要可见，点击摘要显示详情。
<ruby>、<rtc>、<rb>、<rt>和<rp>元素：用于为东亚文字定义解释。
<bdi>:将一段文本隔离出来设置属性。
<wbr>：建议换行。（可使得浏览器在单词中间换行）
<menu>和<menuitem>:用来定义菜单和菜单项。暂无浏览器支持。支持如下属性：
type：三个值，radio、checkbox、command（默认值）
label：指定菜单项文本
icon：指定菜单项图标。
disabled：指定菜单项是否不可用。
checked：type为checkbox或radio时候有意义
radiogroup：type为radio时候有意义，指定菜单项所属分组。
default：指定默认菜单项。

这是一个<mark>重点</mark>
 <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time>
 <details>
 <summary>摘要</summary>
 这是详情、、、、
 </details>
 <ruby>
 <rb>饕</rb>
 <rp>(</rp>
 <rt>tao</rt>
 <rp>)</rp>
 <rb>餮</rb>
 <rp>(</rp>
 <rt>tie</rt>
 <rp>)</rp>
 </ruby>

H5新增结构元素

没啥好说的，见名知其意，解决以前全用div语义化缺失的问题。

<article>：一块独立内容；
<section>：几块分开内容；
<header>、<footer>、<header>、<nav>、<aside>
<figure>和<figcaption>：定义图片区域，<figcaption>是标题

看到这里了，关注吧，由浅入深，持续更新一起学习进步。如果有什么建议和补充，请积极评论。

素类型

根据css显示分类，XHTML元素被分为
三种类型:
块状元素，内联元素，可变元素

&&

三种类型：块状元素，内联元素，内联块元素(css2.1增加)

块状元素的特点

A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。
D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个子。

内联元素的特点

A:内联元素的表现形式是始终以行内逐个进行显示；
B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

常见的标签

块

div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格

内联

a –超链接（锚点）                               
b - 粗体(不推荐) 
br - 换行                             
i - 斜体
em - 强调                             
img - 图片                         
input - 输入框               
label - 表单标签                  
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标   
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择

元素类型的转换

display属性

盒子模型可通过display属性来改变默认的显示类型

A、大部分块元素display属性值默认为block，其中列表li的默认值为list-item。
B、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）。

inline-block ( 行内块元素 )

设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;并加上同级元素（标尺）

（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;）

三个条件：

必须给容器（父元素）加上text-align:center;
必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

元素类型案例

置换元素

一、引题
在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的，但是也有特殊。比如img是内联元素，但可以设置宽高，这肯定让不少人迷惑。这样我们就要引入HTML中置换元素的概念（非置换元素在w3c中没有给出明确的解释，姑且我们就把除置换元素外的元素当作非置换元素吧）。
二、置换元素与非置换元素
a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。

b) 不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

本文转自知乎号：千锋HTML5学院

号持续更新前端面试题和答案......

以下是一些HTML基础面试题：

请解释一下HTML是什么以及它的作用。
什么是HTML标签（Tag）？举例说明几个常见的HTML标签及其作用。
HTML中的块级元素（Block-level elements）和内联元素（Inline elements）有什么区别？请举例说明。
请解释一下HTML5和HTML之间的区别。
HTML中的元数据（Metadata）是什么？请举例说明几个常见的HTML元数据标签。
HTML中的超链接（Hyperlink）是什么？请解释一下如何创建超链接。
HTML中的表单（Form）是什么？请解释一下如何创建一个基本的表单。
HTML中的图像（Image）是如何插入的？请解释一下如何在HTML中插入图像。
请解释一下HTML中的无序列表（Unordered List）和有序列表（Ordered List）的区别，并举例说明。
HTML中的特殊字符（Special Characters）是什么？请举例说明如何使用特殊字符。
HTML中的表格（Table）是什么？请解释一下如何创建一个简单的HTML表格。
HTML中的注释（Comment）是什么？请解释一下如何在HTML中添加注释。
HTML中的DOCTYPE是什么？请解释一下DOCTYPE的作用和用法。
HTML中的元素（Element）和标签（Tag）有什么区别？请解释一下它们之间的关系。
HTML中的语义化（Semantic HTML）是什么？请解释一下语义化的重要性和如何实现语义化。

HTML5中的新特性有哪些？请举例说明其中几个新特性及其作用。
HTML中的元素可以有哪些全局属性（Global Attributes）？请解释一下其中几个全局属性的作用。
HTML中的表单元素有哪些常见的类型（Type）？请解释一下其中几个类型的作用。
HTML中的音频（Audio）和视频（Video）是如何嵌入的？请解释一下如何在HTML中嵌入音频和视频。
HTML中的元素可以有哪些事件属性（Event Attributes）？请解释一下其中几个事件属性的作用。
HTML中的语义化标签（Semantic Tags）有哪些？请解释一下其中几个语义化标签的作用。
HTML中的响应式设计（Responsive Design）是什么？请解释一下如何使用HTML实现响应式设计。
HTML中的地理定位（Geolocation）是什么？请解释一下如何使用HTML获取用户的地理位置信息。
HTML中的离线存储（Offline Storage）是什么？请解释一下如何使用HTML实现离线存储。
HTML中的元素可以有哪些媒体属性（Media Attributes）？请解释一下其中几个媒体属性的作用。
HTML中的元素可以有哪些表单属性（Form Attributes）？请解释一下其中几个表单属性的作用。
HTML中的可访问性（Accessibility）是什么？请解释一下如何使用HTML实现可访问性。
HTML中的SVG是什么？请解释一下SVG在HTML中的使用方法和优势。
HTML中的IFrame是什么？请解释一下IFrame的作用和用法。
HTML中的字符编码（Character Encoding）是什么？请解释一下字符编码的作用和常见的字符编码方式。

在线咨询

上一篇：html5+css3实现特殊网页效果11例
下一篇：数说台风74年，登陆中国的超强台风有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商