块标签和行标签

块标签和行标签

块标签

1.div 标签（用来页面布局的）

块属性标签，没有任何意义的标签，通常用来 进行页面布局

<div style="border:1px #f00 solid">千里冰封</div>

2.h 标题标签(h1-h6)

h1 的权限较大！！

<h1>万里长城永不倒</h1>
<h2>巴啦啦小魔仙</h2>
<h3>巴啦啦小魔仙</h3>

3.p 段落标签

它的里面一般包含一段文字

<p >  </p>

4. hr br 标签

hr分割线 br换行符

<hr>
<p>越来越好</p>

5.无序列表 ul>li

可以设置它的 list-sytle-type 属性

• square 实心方块

• circle 空心圆

• dotted 实心圆

• none 取消列表样式

• disc 高版本系统下的默认样式

<ul style="list-style-type:none;">
        <li></li>
        <li></li>
        <li></li>
</ul>

6.有序列表 ol>li

可以设置它的 list-sytle-type 属性

• lower-alpha 小写字母

• upper-alpha 大写字母

• lower-roman 小写罗马文

• upper-roman 大写罗马文

<ol>
        <li></li>
        <li></li>
        <li></li>
</ol>

ol,ul,li 都是块属性标签。并且 ol,ul 的子元素，必须是 li （列表项） 标签

7.自定义列表 dl>dt dl>dd

• dl: 块标签，定义列表的 父元素
• dt: 块标签，定义列表的 标题项
• dd: 块标签，定义列表的 列表项

<dl>
        <dt>早餐</dt>
        <dd>包子</dd>
        <dd>油条</dd>
        <dd>豆浆</dd>

        <dt>中餐</dt>
        <dd>米饭</dd>
        <dd>面条</dd>
        <dd>螺蛳粉</dd>
</dl>
```html

8.address 地址标签

```html
<address></address>

9.blockquote 引用标签

引用标签，一般是引用的一段文字，
他的 cite 属性 表示该文字 引用的文献名目>

<blockquote cite="毛主席语录">要想知道梨子的味道，你必须亲自尝一尝</blockquote>

行标签(包括图片)

1.span 标记标签(用来渲染文字的)

标记标签，没有实际意义，通常用来渲染文字

2.a 标签（超链接）

属性:

• herf 属性 ，用来设置超链接的地址
• target 属性 ，用来设置 标签页的打开方式（ _blank 在新标签页打开；_self 默认值，在当前页打开）

a 标签的作用：

• 1设置超链接
• 2设置锚点(不能！设置 herf 为空，这样会导致页面刷新)

a.通常用来 回到顶部 ，即是herf="#"

b.如果在开发过程中需要设置a标签点击没有效果（不动）
  则可以设置herf属性为 ##即是：herf="##"

c.快速直达，页面的某一部分

• 3下载文件
  • 如果设置的下载文件是 音频、视频、图片、文档等，都需要进过 压缩 后，再在 herf 上设置文件的路径
  • 如果是 文本类型 的文件，可以（不用压缩）直接把文件路径，设置在 herf 属性上，直接由浏览器打开

//超链接
<a href="http://www.baidu.com" >百度</a>
<a href="./case.html" target="_blank">案例</a>

<hr/>
//设置锚点
<div id="ye" style="height: 100px;background: #ff0;" ></div>
<div id="gr" style="height: 100px;background: #04be02;"></div>

<a href="#ye">黄色块</a>
<a href="#gr">绿色块</a>
<!-- 直达 -->
<a href="#">回到顶部</a>
<!-- 从下往上找#后的 -->
<a href="##">点不动</a>   
<!-- 找#号后面的#，没有就不动 -->
//下载文件
<a href="./abc.txt">下载</a>
<a href="./QQ.zip">下载文件</a>

3.强调、加粗、斜体标签

• strong 强调标签（加粗）
• em 强调并斜体
• b 文本加粗bold（不常用，h5中即将废弃）
• i 文本倾斜incline
• var文本倾斜（不常用，h5中即将废弃）

4.引用标签q、格式化pre、嵌套代码code标签

• q 引用标签，其引用的内容都比较简短

• pre 标签，用来格式化输出

• code 标签，一般是嵌套代码使用

   &lt;   在html中渲染为 <
   &gt;   在html中渲染为 >
   &nbsp; 在html中渲染为 空格
  

代码如下：

//引用
<span>子曰：</span>
       <q>学而时习之</q>

       <p>
        种豆南山下
        草盛豆苗稀
       </p>
//格式化输出
       <pre>
    种豆南山下
草盛豆苗稀
       </pre>
//输出标签代码
       <code>
        &lt;p&gt;陶渊明&lt;/p&gt;
       </code>
//输出空格
       <code>
        巴啦&nbsp啦
       </code>

5. img 标签 (特殊的行属性标签)

• src 属性

用来设置图片资源的地址/路径，src资源的缩写resource

文件资源路径分为一下三种：
    a.网络路径
        是图片的网络地址
    b.绝对路径
        从 服务器的根目录 开始查找，直到找到需要的文件的整个路径，一般 不使用
    c.相对路径（最常用的！从当前位置开始）
        相对于 当前文件所在的资源路径
          ./ 代表：当前目录
          ../代表：上一级目录

代码如下：

<!-- 绝对路径（从根目录开始）,记得！！反斜杠，如从day01服务器里找到，本网页即02图片，双击即可-->
<img src="D:代码/01HTML/day02/images/a.jpg"  width="800" height="500" alt="">

<!-- 相对路径（从当前文件的位置开始）-->

<img src="./images/b.jpg" width="500" height="500" alt="">
<img src="./images/b.jpg" width="500"   alt="">

• alt 属性
  用来解释图片的内容

作用：

    1.当图片没有被加载出来时，会显示alt的内容
    2.通过alt属性 ，告诉浏览器当前图片的内容

• width/height 属性（一般只设其中一个）

设置图片的宽和高。 在实际的开发过程中，一般只设置 单个的 宽或者高，另一侧根据比例显示大小

块和行标签的总结

1.块属性标签

a.独自占据一行空间（从上至下竖向排列）
b.支持宽和高的设置,设置完宽和高以后，仍然独占一行
c.支持上下 padding  和  上下 margin

2.行属性标签

    a.不会独占一行空间（从左至右横向排列）
    b.无法设置宽和高，他的宽和高由内容 撑开 
    c.不支持上下 padding  和  上下 margin

标签的嵌套

• 标签嵌套规则

  1.块标签作为一个 布局标签 ，可以嵌套 所有 ！的标签

  2.行标签 并不能嵌套 块标签

以下标签不能相互嵌套
 1.p 标签，h1-h6 都不能 相互嵌套（并且他们也不能嵌套 块标签 ）
 2.a 标签不能 相互嵌套