常用标签及特性

常用标签

从今天起，我将踏上学习H5的征程，哈哈哈。。。。。
—革命尚未成功，程序媛需努力

+

今天学习了html的常用标签和每个标签的特性

h系列的标签：h1~h6 =>字体大小依次减小

p标签 ： 段落

br标签 ： 换行

hr标签 ： 分割线

div和span 是无语义的标签 ，div是最常用的标签

图片的路径有两种：

1.绝对路径，从系统根目录开始到图片的一个路径

2.相对路径，从本html目录开始

img标签 ：用于显示图片，src代表图片地址

1
2
3
4
5
6
7
8
9
<!-- img 的属性有src  alt  width  height -->
   <img src=" http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg" width="200px" height="200px"/>  <!-- 绝对路径 Alt表示文本替代方案，是当图片显示不出来时，可以显示图片的内容；可以优化网站-->
   <br>
   <img src="1.jpg" width="200px" height="200px"/>   <!--  相对路径 -->
   <img src="/Users/lanou/Desktop/html学习/7-13标签/1.jpg" width="200px" height="200px"/> 
    <!-- 在终端将相对路径的图片拉倒终端，就形成了图片的绝对路径 -->
   <img src="../image/1.jpg"  width="200px" height="200px"/>   
   <!-- ..表示图片在上一级文件夹，..表示上一级 -->
   <br>

a标签 ：超链接，常用于页面的跳转

1
2
3
<!-- a标签属性有 href  target  title    -->
   <a href="http://www.baidu.com" target="_blank" title="我们去百度啊">百度</a>  
   <!-- target控制跳转方式（_blank在新的窗口打开），href控制跳转地址 title鼠标悬浮时的提示-->

组合标签

(1) ol : 有序列表
(2) ul : 无序列表
(3) dl : 标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
	<ol>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ol>
    <!-- （2）ul无序列表 -->
    <ul>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ul>
    <dl>
        <dt>这是一个标题</dt>
        <dd>这是标题的解释</dd>
    </dl>
```	
## 标签的分类可以分为：
1、块级标签：
div p hr option ol ul dl  h1 form 独占一行，宽度默认父级body标签的宽度.div是块级标签，块级可以改变宽高度
2、行级标签：
(br  span img a)不会独占一行，宽度由内容来决定,宽度和高度不能人为改变;
如果需要改变宽高，只需要将display设置成块级block就行可以；
同理，将块级标签设置成行级，只需将display设置成行级inline.正常状态下没有padding和margin的top和bottom
3.行块级：
```bash
<input/>  <select></slect>  <textarea></textarea>
可以和其他的行级和块级标签同行显示，可以改变大小。对齐方式默认底部对齐。

注意：

1
标签是块级还是行级取决于display属性，由系统决定:disply:block ==> 块级 ; display:inline  ==> 行级