您的位置：首页 > Web前端 > CSS

语义化理解以及常用html标签总结，块级元素、行内元素、空元素（空标签）、理解和翻译css语句【不全，根据自身运用日渐完善】

2020-02-13 09:03 537 查看

传送门：html常用标签（块元素和行内元素、链接、列表、表格）

所谓的语义化，就是清楚知道每个标签的作用，什么标签用在哪里合适。


比如：如果希望定义一个地址：XXX市XXX区XXX路
  • （错误）“<p>XXX市XXX区XXX路</p>”
  • （正确）“<adderss>XXX市XXX区XXX路</address>”

虽然两个语句浏览器是显示的，但是， p 标签是定义段落的。而 adderss 则是斜体，同时也是用来定义文档作者/所有者的联系信息的。通俗的来说，就是，同样是刀，一把砍柴刀，一把菜刀，难道因为都是刀，就用砍柴刀来切菜?

当然，上面是比较容易理解的语义化例子，毕竟，很容易就能发现不同，进而调整。但是，在这基础上，还要更深的例子呢？

同样是上面地址的例子

  • （错误）“<em>XXX市XXX区XXX路</em>”
  • （正确）“<adderss>XXX市XXX区XXX路</address>”

虽然两个标签都是斜体，但是，em是强调标签，主要用于搜索引擎优化（seo），对搜索引擎抓取有作用。内联元素。 address 是地址标签 ，块级元素。两者默认都是斜体表示，在文本中表现差不多，但是两个标签的语义不同。

所以，什么刀用来切什么，就是语义化的运用了。
我也是新手，我也知道很难像大牛一样熟悉每个标签的用途，但是，尽量做到标签语义化，较小的偏差还是可以的。也就是，知道砍柴刀不能切菜，但是，偶尔出现水果刀切菜的情况，毕竟误差算小，而且勉强也可以用。至于切菜专用的菜刀嘛，慢慢找，慢慢摸索。

语义化的好处：
a、让结构更简洁，让搜索引擎更友好
b、通过多重组合，减少不必要的CSS命名

要学好记住语义化，就必须理解每个标签的定义。

下面是常用标签总结

（网上是一堆没错，但是总是收藏然后不看不用等于没用，最好还是自己尝试运用每个标签，懂得每个标签的用途）

其他标签
标签 描述 类型
<!--...--> 定义注释。
<!DOCTYPE HTML> 声明 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html> 告知浏览器这是一个 HTML 文档。

头部标签
标签 描述 类型
<head> 定义页面的信息。
<meta /> 定义页面的描述信息，便于搜索优化。
<title> 定义文档的标题。
<link /> 定义引用外部文件，如联入CSS样式表。
<style> 定义内联的CSS样式信息。
<script> 定义内联或外联的客户端脚本，如js。

主体标签
标签 描述 类型
<body> 定义文档的主体，默认有外边距，注意清除。 结构标签
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<table> 定义表格。 块级元素
<tbody> 定义表格中的主体内容。 块级元素
<tr> 定义表格中的行。 块级元素
<th> 定义表格中的表头单元格。 块级元素
<td> 定义表格中的单元。 块级元素
<thead> 定义表格中的表头内容。 块级元素
<tfoot> 定义表格中的表注内容（脚注）。 块级元素
<caption> 定义表格标题。 块级元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<ul> 定义无序列表，默认有外边距和内边距。 块级元素
<ol> 定义有序列表，即数字列表，默认有内外边距。 块级元素
<li> 定义列表的项目，一般被嵌套在<ul>或<ol> 内。 块级元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<dl> 自定义列表的项目，默认有外边距和内边距。 块级元素
<dt> 自定义列表的标题，嵌套在<dl>内，与<dd>区别。 块级元素
<dd> 自定义列表的内容，嵌套在<dl>内，与<dt>区别。 块级元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<div> 定义一个块级元素的空盒子。 块级元素
<span> 定义一个行内元素的空盒子。 ⭐行内元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<h1>~<h6> 定义标题部分，默认有外边距。 块级元素
<p> 定义段落，默认有一个行高的外边距。 块级元素
<a> 定义锚链接或其他链接，行内元素。 ⭐行内元素
🔸<nav> 定义导航链接的部分。 块级元素
<textarea> 定义一个多行的文本输入控件。 ⭐行内元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<img /> 定义引入一张图片，行内元素。 ⭐行内元素
<map> 定义图像映射，即鼠标热区。 ⭐行内元素
<area /> 定义图像映射内部的区域。 ⭐行内元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<br /> 定义一个回车换行。 ⭐行内元素
<hr /> 定义一条水平线。 块级元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<sup> 定义上标文本。 ⭐行内元素
<sub> 定义上标文本。 ⭐行内元素
<del> 定义文档中已被删除的文本。 ⭐行内元素
<u> 定义下划线文本。 ⭐行内元素
👉<i> 定义斜体文本。 ⭐行内元素
👉<b> 定义粗体文本。 ⭐行内元素
<em>👈 定义强调文本，样式为斜体。 ⭐行内元素
<strong>👈 定义强调文本，样式为加粗。 ⭐行内元素
<q> 定义短的引用。 ⭐行内元素
<blockquote> 定义长的引用。 块级元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<from> 定义输入提交的表单。 块级元素
<button> 定义表单中的按钮 (push button)。 ⭐行内元素
<input> 定义表单中的输入控件。 ⭐行内元素
<label> 定义 input 元素的标注。 ⭐行内元素
<select> 定义表单中的选择列表（下拉列表）。 ⭐行内元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
<address> 定义文档作者/所有者的联系信息（地址）。 块级元素
<noscript> 定义针对不支持客户端脚本的用户的替代内容。 块级元素
<code> 定义计算机代码文本（显示一行代码）。 ⭐行内元素
<pre> 定义预格式文本（显示代码段）。 块级元素
<abbr> 定义缩写（配合title属性使用）。 ⭐行内元素
🈯🈯🈯 🈯🈯🈯🈯🈯🈯 🈯🈯🈯
🔺<embed /> 定义外部交互内容或插件（html5中替代 object 的存在）。 ⭐行内元素
🔺<object> 定义内嵌对象（在html5中部分属性丢失，被 embed 取代 ）。 ⭐行内元素

为了方便理解和熟记，我将一些经常组合在一起使用的标签，或者相同类似用法的标签组成组，以🈯🈯🈯分隔，太泛的就没分组了，一两个不好分。

💦💦💦块级元素、行内元素

  1. 块级元素：
    ①总是在新行上开始（单独占一行）；
    ②高度，行高以及外边距和内边距都可控制；
    ③宽度缺省是它的容器的100%，除非设定一个宽度。
    ④它可以容纳内联元素和其他块元素

  2. 内联元素（行内元素）
    ①和其他元素都在一行上；
    ②高，行高及外边距和内边距不可改变；
    ③宽度就是它的文字或图片的宽度，不可改变
    ④内联元素只能容纳文本或者其他内联元素

注意：

  • 只有文字才能组成段落，因此类似<p>，<h1>~<h6>，<dt>等里面不能放块级元素。因为它们都是文字块级标签，里面不能再存放其他的块级标签。
  • 链接里面不能再存放链接。

🚸🚸🚸行内块级元素

  • 和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
  • 默认的宽度就是本身内容的宽度
  • 高度，行高，内边距和外边距都可以设置

（在行内元素中有几个特殊的标签，<img />，<input />，<td>可以设置它们的宽高度以及对齐属性）

当然，块级元素和行内元素两者是可以通过设置css样式来互相转换的：
块转行内：
display:inline;
行内转块：
display:inline-block;


对了，上面的表格是代码写的，正好练习<table>及其相关标签，代码如下：

<table>
<caption><strong>其他标签<strong></caption>  //为了强调显眼，我使用了strong 加粗
<tbody>
<tr>
<th>标签</th>	//同样是单元格，th更侧重与头部的描述（第一行底色和字体加粗明显不同其他行）
<th>描述</th>
<th>类型</th>
</tr>
<tr>
<td>&lt;html&gt;</td>		//&lt;=<,&gt;=>,只有这样才能显示出来，不然会被当成代码执行。
<td>告知浏览器这是一个 HTML 文档。</td>
<td></td>		//td就是普通的单元格了
</tr>
</tbody>
</teble>

一个简单的table表格，只需要table、caption（这个是定表格标题用，可不写）、tbody(可不写)、tr、th、td构成，至于thead和tfoot是特出情况特殊用法。


下面这个表看看就好，列出来是因为w3cshcool说：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。当然也不是绝对，喜欢就用呗，而且<code>还能插入代码显示呢。

所有短标签
标签 描述
<em> 定义强调文本，样式为斜体。
<strong> 定义强调文本，样式为加粗。
<dfn> 定义一个定义项目
<code> 定义计算机代码文本（显示一行代码）。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre>及<code>标签配合使用。

ps：
  1. 以上为常用HTML标签，没列出来的大部分是在HTML5废弃或被取代的，较少用，HTML阶段了解这些足以（或许漏了一些我没注意的，或者没接触过的标签）。
  2. 关于<link />、<meta />、<hr />、<br />、<img />、<input />、<area />这类没有闭合标签的标签被称作为空标签（空元素）。正确的书写格式为<… />。不带斜杠是html4.01的写法，带斜杠是xhtml1.0的写法，现在一般使用xhtml1.0的版本的写法，这种版本比较规范。
  3. 👉👈关于<i>与<em>，<b>与<strong>：就表现而言<em>，<i>表现都一样，都是表示斜体；<b>，<strong>表现都一样，都是表示粗体体。但是<em>和<strong>标签是“含有语义”的标签，搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO。（舍<i>和<b>）
  4. 🔺关于<object>与<embed />，功能上无区别，<object>标签是 HTML 4 的标准标签（在HTML 5中依然保留，但是删除了部分属性）；<embed />标签是 HTML 5 的新标签（新生代，但是老版本的浏览器可能不认识它）。html5以下用<object>，html5以上用<embed />。想要了解更详细点击此处
  5. 🔸关于导航标签<nav>，并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav>元素只是作为标注一个导航链接的区域。一般制作导航用<ul>+<li> +<a> 。

注意：
①因为<a>标签是行内元素，无法设置宽高，需要通过css样式display:block; 将行内元素转为块状元素。
②ul无序前面的小点可以通过css样式list-style-type: none;将格式消除。

下图为使用ul-li-a制作的简单的导航，想要精美的可以自行尝试丰富css样式和js脚本 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>使用ul-li-a标签制作导航</title>
<style type="text/css">
.nav ul{
list-style-type:none;
}
.nav ul li{
float:left;
margin-right:24px;
}
a{
display:block;
color:#000;
}
li a:hover{
background-color:#f39;
}
</style>
</head>

<body>
<div class="nav">
<ul>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
</div>
</body>
</html>

关于上面难理解的代码的翻译如下：

<meta charset="utf-8" />
告知浏览器此页面属于“utf-8”字符集，如果没写或写错，那么就会出现中文乱码（防止中文乱码）。
<style type="text/css"></style>
type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析（“text/javascript”同理）。
.nav ul{ list-style-type:none; }
类名为nav下的所有ul标签的样式设置为消除格式（去无序列表前面的点）。
.nav ul li{ float:left; margin-right:24px; }
类名为nav下的所有ul标签下的所有li标签的样式设置为向左浮动，并且右边的外边距是24像素（在都不设置左外边距的情况下，右外边距就是两个盒子之间的距离）。有点绕详情点链接了解盒子模型margin。
a{ display:block; color:#000; }
a标签的样式设置为块级（元素）属性，颜色是#000（黑色）。【颜色最好写十二进制，这里#000是十二进制#000000简写，是可以的。规范写法就这样，所以避免英文】
li a:hover{ background-color:#f39; }
li标签下所有a标签选择浮动效果（选择鼠标指针浮动在其上的元素），并将其样式设置为背景：#f39颜色（#ff3399缩写，玫红色类）。

其他理解倒没什么，就是CSS的语句需要强调一下：
拿这条来说

.nav ul{ list-style-type:none; }
每个字符和名字，标签都有对应的翻译：
. （点）这个是class，类的选择符，“类为…”。
nav       这个是类的名字，直接翻译。
 （空格），这个是后代选择器，选择父元素下面的所有子元素（无论是否直接后代，只要是后代都选），这里翻译成“所有”。
ul          这里是标签，直接翻译
剩下的就是{ }内的属性设置，直接翻译。

另：
①# 这个是id的选择符，直接翻译“ID为…”
②，这个是“和”的意思，

ul,li{ ... }
，翻译为：“ul标签和li标签的属性设置为…”

  • 点赞
  • 收藏
  • 分享
  • 文章举报
馬不停蹄 发布了29 篇原创文章 · 获赞 2 · 访问量 822 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航