简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html常用标签、css常用选择器和优先级、div模型——2019年1月14日
Blogger Information
Blog 5
fans 0
comment 0
visits 4991
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常用选择器和优先级、div模型——2019年1月14日
阿芃达个人博客
Original
711 people have browsed it

总结：

块标签：div

标题段落标签：h1-h6、p

文本标签：strong、em

列表标签：ul、ol、dl、li、dt、dd

表格标签：table、caption、thead、tbody、tr、th、td

表格属性：cellpadding（添加表格内边距）、cellspacing（设置表格边框距离）

表单标签：from、input、label、select、option、textarea

图片与媒体：img、video


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签练习</title>
    <style>
        body {
            height: 5000px;
        }
    </style>
</head>
<body>
    <!-- 1.标题段落 -->
    <h1>这是标题1</h1>
    <h2>这是标题2</h2>
    <h3>这是标题3</h3>
    <h4>这是标题4</h4>
    <h5>这是标题5</h5>
    <h6>这是标题6</h6>
    <p>这是段落标签</p>

    <hr>

    <!-- 2.文本修饰 -->
    <h1>这是标题1</h1>
    <h2>这是标题2</h2>
    <h3>这是标题3</h3>
    <h4>这是标题4</h4>
    <h5>这是标题5</h5>
    <h6>这是<strong style="background-color:black; color:white">标题6</strong></h6>
    <p>这是段落<em style="color:red">标签</em></p>

    <hr>

    <!-- 3.列表 -->
    <h3>购物清单</h3>
    <!-- 无序列表     -->
    <ul>
        <li>1.暖手宝，30元，被窝太冷</li>
        <li>2.笔记本电脑，5000元，学习php</li>
        <li>3.水果，50元，吃</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>暖手宝，30元，被窝太冷</li>
        <li>笔记本电脑，5000元，学习php</li>
        <li>水果，50元，吃</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
        <dt>知识</dt>
        <dd>知识改变命运给</dd>
        
        <dt>学习</dt>
        <dd>学习是最好的投资</dd>
    </dl>

    <hr>

    <!-- 4.表格   -->

    <table border="1" cellpadding="5" cellspacing="0" width="500px" heigth="150px"  >
        <caption style="font-size:1.2rem;margin-bottom: 15px">购物车</caption>
        <thead>
            <tr bgcolor="lightblue">
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>用途</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>1</td>
                <td>暖手宝</td>
                <td>30元</td>
                <td>被窝太冷</td>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>笔记本电脑</td>
                <td>5000元</td>
                <td>学习php</td>
            </tr>
            <tr align="center">
                <td>3</td>
                <td>水果</td>
                <td>50元</td>
                <td>吃</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <!-- 5.表单 -->
    <h2>用户注册</h2>
    <form action="" method="GET">
        <div>   
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" placeholder="用户名不能少于6位">
        </div>
        <div>   
            <label for="password">密码：</label>
            <input type="password" name="password" id="password" placeholder="密码包含数字和字面" size="30">
        </div>
        <div>   
            <label for="password">确认密码</label>
            <input type="password" name="password" id="password" placeholder="密码包含数字和字面" size="30">
        </div>
        <div>
            <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>  
            <input type="radio" name="gender" value="female" id="female" checked><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="game"><label for="smoke">抽烟</label>
            <input type="checkbox" name="hobby[]" value="programme" id="game" checked><label for="programme">编程</label>
        </div>

        <div>   
            <label for="edu">你的学历</label>
            <select name="edu" id="edu">
                <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="30" rows="10" placeholder="不超过100个字"></textarea>
        </div>

        <input type="submit" value="注册">
    </form>

    <hr>

    <!-- 6.图片与媒体 -->
    <img src="static/images/timg.jpg" alt="">
    <video src="static/images/demo.mp4" controls></video>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


总结：css常用选择器：

                        标签选择器：标签名

                        类选择器：.名

                        id选择器：id名


css优先级:行内样式>内部样式>外部样式

css样式优先级：js样式>内部样式>id样式>class样式>标签样式

实例


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用选择器与优先级</title>
<link rel="stylesheet" href="static/css/style.css">
<style>
h3 {
background-color: black;
}
.bg-blue {
background-color: lightblue;
}
#bg-yellow {
background-color: yellow;
color: black
}
</style>
<title>常用选择器和优先级</title>
</head>
<body>
<h3>样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue">样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue" id="bg-yellow">样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue" id="bg-yellow" style="background-color:red">样式规则 = 选择器 + 声明</h3>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

h3 {
    background-color: red;
    color: bisque;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


div模型总结：

padding和margin编写格式（上，右，下，左）、（上，左右，下）（上下，左右）（上下左右）一共四中书写格式

border的设置（线条类型，线条颜色，线条宽度）

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: solid red 5px;
            padding: 20px;
            margin: 20px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


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！