前端学习--HTML块标签、行标签、行块标签

head标签

head标签包括：

• title 网页标题

• meta 信息引入及说明。其中主要用到的有三点：

  keywords 关键词引入
  description 描述引入
  author 作者引入

  <meta name="description" content="关于meta元素的学习"></meta>
  <meta name="author" content="墨痕白羽">
  

• link 引入外部资源。主要用到的有：

  href 链接文件的路径
  rel 规定当前文档与引入文档之间的关系，分别为stylesheet（CSS样式表）、icon（小图标）
  type 引入文档的MIME类型，如type="text/css"

  <link rel="stylesheet" href="css/now.css">
  

• style 内部样式表，即在头文件中写CSS文件

  <style>
        body{
            color: green;
        }
        <!-- 块标签、行标签可以通过设置display元素互换 -->
        p{
           	display:inline
        }
    </style>
  

• script 引入js文件

  <script>
      alert("welcome");
  </script>
  

---

块标签

特点：
独占一行，默认宽度占满父级，高度为0，子级内容撑开高度

<div>无语义的块标签</div>
<p>代表一个段落文本</p>
<!-- h1 h2 h3具备搜索权重 -->
<h1>标题</h1>
<!-- 无序列表 -->
<ul>
	<li>a</li>
    <li>b</li>
</ul>
<!-- 有序列表 -->
<ol>
	<li>A</li>
	<li>B</li>
    <li>C</li>
    <li>D</li>
</ol>
<!-- 新增标签，有语义 -->
<article>
  大标题标签
  <nav>导航栏</nav>
  <header>头部信息</header>
  <aside>侧边栏</aside>
  <section>区域</section>
  <footer>底部信息</footer>
</article>

显示效果如下：

---

行标签

特点：
同排显示，遇到父级边界才换行
不支持宽高，内容撑开宽高
不支持设置上下外边距margin
不正常显示上下内边距padding（设置了之后会直接覆盖其他位置）
换行被解析，换行符的效果会显示在两个行标签中

<!-- span不会对文字造成任何的变化，目的在于,将一段文字中的某一个或者几个文字进行样式的更改，然后设置span格式 -->
	<span>111</span>
    <span>222</span>
    <span>333</span>
    <a href="http://ac.csdn.net" target="_blank">链接</a>
    
	<!-- 换行 -->
    <br>
    <i>倾斜</i>
    <b>加粗</b>
    <br>

    <!-- sub下角标，常用于配合p标签实现富文本 -->
    <p>O<sub>2</sub></p>
    <!-- sup下角标 -->
    <p>O<sup>2</sup></p>
    <br>

    <em>斜线，占一定搜索权重，比i要好</em>
    <strong>加粗，占一定搜索权重，比b要好</strong>

显示效果如下：

---

行块标签

特点：
同行显示，遇到父级边界换行
没有宽高的时候内容撑开宽高
换行被解析

标签包括：
img src="资源路径" alt="图片不能正常显示的提示文本" title="鼠标悬停时的提示文本"
img的特点是若只设置宽度或高度，图片会等比例变化