HTML页面解析

发表于 | 分类于 |
字数统计: 1,495 | 阅读时长 ≈ 6

今天初步学习了HTML和CSS，难度倒是不大，但是却有许多需要记住的东西。

HTML(Hypertext Markup Language) 超文本标记语言，CSS(Cascading Style Sheets)层叠样式表，简单来说，HTML是房屋的框架，CSS就是房子的装修，下面就借助一个简单的HTML页面来说明HTML和CSS的标签和结构.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 此为文档声明，doctype用来声明当前页面的版本。<!doctype html>表示该文档是h5页面 -->
<!doctype html>

<!-- html是文档的根标签，有且只能有一个，网页中所有内容都必须包含在此标签内 -->
<html>

    <!-- head是页面头部，但是不会显示在页面中，他是告诉浏览器如何解析网页的 -->
    <head>

        <!-- meta是一个自结束标签。charset用来设置页面的编码字符集。可以用name来设置属性的名字，content来设置属性值 -->
        <meta charset="utf-8" name="keywords" content="香蕉,苹果,hello" />

        <!-- title设置网页的标题，不可太长，最好在30个字以内。搜索引擎在检索网页时会优先检索title中的内容 -->
        <title>This is my first page</title>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- 添加样式表 -->
<style type="text/css">

    /*元素选择器*/
    span{
        color: red;  /*为span设置红色字体*/
    }

    /*后代元素选择器，选择X元素下面所有的Y子孙元素*/
    div span{
        color：red; /*设置div下的所有span字体为红色*/
    }

    /*子元素选择器，选择X元素下的所有Y子元素*/
    div > span{
        color:red; /*为div元素的子元素span设置红色字体*/
    }

    /**********伪类选择器*********************/
    /*a:link表示正常的链接;
      a:visited表示已访问过的连接
      a:hover 表示超链接鼠标移入时的状态
      a:active 表示超链接被点击的状态
    */
    a:link{
        color:red;   /*正常链接为红色*/
    }
     a:visited{
        color:yellow;   /*已访问过的链接为黄色*/
    }
     a:hover{
        color:pink;   /*鼠标悬浮时为粉色*/
    }
     a:active{
        color:blcak;   /*鼠标点击链接时为黑色*/
    }

/*
 * 选择器的优先级（权重）
 * 当我们使用不同的选择器，为同一个元素设置同一个样式时，到底要应用哪个选择器设置的样式呢？
 * 这个是由选择器的优先级（权重）来决定
 * 
 * 注意当一个元素上有相同的样式产生冲突时，会根据选择器的优先级来决定显示那个样式，优先级高的优先显示
 *     优先级的计算，需要将所有的选择器相加来计算，如果优先级一样，则谁在下边用谁
 * 优先级的累加，不能超过选择器的最高数量级
 * 
 * 
 * 内联样式：
 *         内联样式的优先级最大，内联样式会优先于所有的选择器显示
 *         优先级是  1000
 * ID选择器：
 *         优先级是 100
 * 类和伪类选择器：
 *         优先级是 10
 * 元素选择器：
 *         优先级是 1
 * 通配选择器（*）：
 *         优先级是 0
 * 继承来的样式：
 *         没有优先级
 * 
 * 我们可以在一个样式的后边添加一个 !important 来将该样式设置为优先级最高的样式，这样他会优先于所有的样式显示
 *     但是在开发中和内联样式一样，尽量避免使用!important
 */

</style>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    </head>

    <!-- body是网页的主体，其内容会显示在网页中 -->
    <body>

        <!-- html中共有六级标题标签，h1-h6，h1最大，重要性仅次于title，且一个页面中一般只能有一个h1。h6最小 -->
        <h1>这是我的一级标题</h1>
        <h2>这是我的二级标题</h2>
        <h3>这是我的三级标题</h3>
        <h4>这是我的四级标题</h4>
        <h5>这是我的五级标题</h5>
        <h6>这是我的六级标题</h6>

        <!-- p标签标示一个段落，会独占一行，默认在段落前后各加一个换行 -->
        <p>我是段落标签，我会独占一行<span>标签可以嵌套使用</span></p>
        <p>我是段落标签，我会独占一行</p>

        <!-- 元素之间的关系
            父元素: 直接包含子元素的元素我们称为父元素
            子元素: 直接被父元素包含的元素我们称为子元素
            祖先元素: 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素）
            后代元素: 直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素）
            兄弟元素: 拥有相同的父元素的元素我们称为兄弟元素
         -->
        <div>
            <p>
                <span>
                    <strong></strong>
                </span>
                <span>
                    <i></i>
                </span>
            </p>
        </div>

        <!-- 换行时需要换行标签，是自结束的标签  -->
        我要换行!<br />
        我也要换行！<br>

        <!-- hr标签可以在页面的指定位置输出一条水平线 -->
        <hr />

        <!-- 转义字符。HTML中的一些特殊字符不能直接输入，要用转义字符代替
             例如：
             小于号：&lt;
             大于号:&gt;
             空格：&nbsp;
         -->
         见到你很高兴&nbsp;
         为什么高兴？&nbsp;
         有多高兴？&nbsp;

         <!-- 超链接可以跳转到其他页面或者指定的目标地址 -->
         <a href="http://www.baidu.com">跳转到百度</a>

         <!-- 超链接介意通过id值定位到id对应的元素位置 -->
         <a href="#footer">跳转到页脚</a>

         <!-- 每个元素都能有一个id值，但同一个页面不能有相同的id -->
         <div id="footer">我就是页脚，快跳过来吧！</div>
    </body>

</html>