Http常用标签分析以及行内元素和块级元素分析/以及语义化HTML

---

前言

上次写的代码，导师一看就直呼不行了~~~，满屏的div和span，妈呀~~虽然不是不行，但是对于内容的可读行，和美观就很不好啦，对于美的追求，我们当然要熟悉的根据场景使用HTTP中的标签

---

一、常用标签

<b>	定义粗体字。//像需要加粗的，就别再傻乎乎的去写css加粗了，直接用该标签不快乐多了~~
<br>	定义简单的折行。
<label>	定义 input 元素的标注
<p>	定义段落。
<small>	定义小号文本。
<div>  可定义文档中的分区或节。
<span> 标签被用来组合文档中的行内元素。
<h1> to <h6>	定义 HTML 标题。
<i>	定义斜体字。


遇到用上的再补充吧，现在来说常用UI框架，人们里原生的东西越来越远了，但还是得去了解认识的，才能灵活使用。

---

二、行内元素和块级元素

害，有些时候，老是傻傻的分不清行内标签有哪些，块级标签有哪些，现在这里就来做个了断吧！！

行内元素

① 和其他元素都在一行上；
② 高，行高及外边距和内边距部分可改变；
③ 宽度只与内容有关；
④ 行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

<a >
<strong>
<b>
<em>
<del>
<span >
<img> 
<input> 
<select>

块级元素

块级元素：
① 总是在新行上开始，占据一整行；
② 高度，行高以及外边距和内边距都可控制；
③ 宽带始终是与浏览器宽度一样，与内容无关；
④ 它可以容纳内联元素和其他块元素。

<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>
<div>
<dl>

空元素

<br> <hr> <img> <input> <link> <meta>

行内元素和块级元素的转换

//定义元素为块级元素
display：block 
//定义元素为行内元素
display : inline  
//定义元素为行
display：inline-block

---

三、语义化HTMl标签

首先我们看一张图

我们可以看到，途中没有一个 div 标签。其实这里这个语义化也就回应了上面开篇我的到导师说我的一个问题了。下面我们来看看，为什么要语义化，如何语义化我们的HTML页面。

为什么需要语义化

• 语义化便于维护和阅读代码结构，我们可以很便捷的理解页面部分
• 便于网站的排名和SEO，便于网站被浏览器爬虫爬取理解
• 用正确的标签做正确的事情！
• 让页面结构化，便于浏览器引擎解析，和理解
• 在没有CSS样式的情况下也能以文档的形式展示，便于阅读
• 便于在特殊设备上的兼容性，比如电子阅读器，移动设备等

语义化需要注意的

• 减少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以使用strong或者em标签
  • strong默认样式是加粗，粗体强调标签，强调，表示内容的重要性（不要用b）
  • em是斜体，斜体强调标签，更强烈强调，表示内容的强调点（不用i）；

HTML5中的语义化标签：

我们在HTML5中推出了一系列的语义化标签，我们简单认识一下

• header：表现网页的页眉。
• nav：定义页面的导航部分。
• aside：定义网页的侧边，附加内容部分。
• article：代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
• section：元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
• footer：表示网页的底部部分。

---

总结

没啥，加单记录一下，方便后面自己查阅补充~~~