简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html常用标签、css常用选择与优先级、盒模型（1月14日）
Blogger Information
Blog 7
fans 1
comment 3
visits 6709
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html常用标签、css常用选择与优先级、盒模型（1月14日）
熊哥的博客
Original
652 people have browsed it

一、html文档中常用的标签

1、标题与段落：标题标签共有6级: h1 ~ h6, 大多只用到h1~h3。

<h1>标题一</h1>

<h6>标题六</h6>

<p>段落内容</p>

运行实例 »

 

2、文本修饰：

<p>这是<strong style="background: black;color:white">文本加粗</strong>了哦！</p>

<p>这是<span style="color:green">文本颜色</span>修改了。</p>

<p>这是<em style="color:red">文本斜体</em>哈哈哈~</p>

运行实例 »

 

3、列表

① 无序列表


        <ul>

            <li>苹果</li>

            <li>雪梨</li>

        </ul>

 
② 有序列表


        <ol>

            <li>苹果</li>

            <li>雪梨</li>

        </ol>

 
③ 定义列表


        <dl>

            <dt>淘宝网</dt>

            <dd>这是一个购物网站</dd>

            <dt>优酷网</dt>

            <dd>这是一个视频网站</dd>

        </dl>

运行实例 »

 

4、表格

<table>

    <caption>表格名称</caption>

        <thead>

            <tr>

                <th>序号</th>

                <th>名称</th>

            </tr>

        </thead>

    <tr>

            <td>1</td>

            <td>苹果</td>

    </tr>

    <tr>

        <td>2</td>

        <td>西瓜</td>

    </tr>

</table>

运行实例 »

 

5、表单

<form action="" method="GET">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" value="" placeholder="不少于6位">
        </div>

        <div>
            <label>
                密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
            </label>
        </div>

        <div>
            <label>
                确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
            </label>
        </div>

        <div>
            <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label>
            <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
        </div>

        <div>
            <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label>
            <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label>
            <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label>
        </div>

        <div>
            <label for="edu">学历:</label>
            <select name="" id="edu" value="">
                <option value="1">幼儿园</option>
                <option value="2" selected>小学</option>
                <option value="3">博士后</option>
            </select>
        </div>

        <div>
            <label for="common">留言:</label>
            <textarea name="" id="common" cols="20" rows="3" placeholder="不超过50字" value=""></textarea>
        </div>

        <input type="submit" value="提交">
        <input type="reset" value="重置">

        <button type="button">注册</button>
</form>

运行实例 »

 

6、图片与媒体

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo图片" width="200">

<video src="http://www.runoob.com/try/demo_source/movie.mp4" controls="controls" width="400"></video>

运行实例 »

 

7、布局标签

8、其它

设置当前页面中的文本采用的默认编码字符集为utf8

<meta charset="UTF-8">

 

引用外部样式表,应该写到<head>标签中, 通过href属性引入

<link rel="stylesheet" href="static/css/style01.css">

 

引用外部js脚本，使用双标签,但标签中间必须为空,通过src属性引入

<script src="static/js/js01.js"></script>

 

二、css常用选择器与优先级

    h1{  }  //标签选择器

    .aa{  }   //class类选择器

    #bb{  }   //id选择器

    *{  }  //所有元素

 

    <p style="color:red;">段落一</p>  //添加style属性

     

    优选级：标签 < class类 < id < style属性 < JavaScript代码

 

三、盒模型

1、盒模型是布局的基础,页面上的一切可见元素皆可看做盒子

2、盒子默认都是块级元素: 独占一行,支持宽度设置

3、盒子模型分为三个层级：

  • 内容级：宽高和背景三个属性

            width、height、background-color (默认透明)

  • 元素级(可视范围)

            (1)包括内容级(width + height + background)

            (2)内边距: padding

            (3)边框: border

  • 位置级：margin，决定当前盒子与其它盒子之间的位置与关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box1{
            background-color: red;
            width: 300px;
            height: 200px;

            padding: 10px;
            padding：10px 20px;
            padding：10px 20px 30px;
            padding：10px 20px 30px 40px;

            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
            padding-left: 50px;

            border-width: 10px 20px 30px;
            border-style: solid;
            border-color: blue red;

            border-top-width: 10px;
            border-right-style: solid;
            border-bottom-color: red;

            border: 10px solid red;
        }
        #aa{
            background-color: yellow;
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div id="aa">这是盒子内的内容</div>
    </div>
</body>
</html>

运行实例 »

 

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！