HTML常用标签与css样式总结-2019年1月15日14时07分 - 作业

Home > List of blog posts > HTML常用标签与css样式总结-2019年1月15日14时07分

Blogger Information

Blog 9

fans 0

comment 0

visits 6169

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html常用标签&css样式设置</title>
</head>
<body>
     <!-- 标题与段落 -->
     <div>
         <!-- 各级标题 -->
         <h1>今天天气不错哟</h1>
         <h2>今天天气不错哟</h2>
         <h3>今天天气不错哟</h3>
         <h4>今天天气不错哟</h4>
         <h5>今天天气不错哟</h5>
         <h6>今天天气不错哟</h6>
         <!-- 段落 -->
         <p>生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。</p>
         <p>若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。</p>
     </div>

     <!-- hr 标签是在页面中添加一条水平分隔线 -->
     <hr>

     <!-- 文本修饰 -->
     <div>
         <!-- strong: 文本加粗 -->
        <p><strong style="background: pink">生活</strong>如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。</p>
        <!-- em: 文本斜体 -->
        <p><em style="font-size: 20px; color: red">生活</em>如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。</p>
     </div>

     <hr>
     <div>
        <!-- 无序列表: 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套 -->
        <h3>四季</h3>
        <ul>
            <li>春</li>
            <li>夏</li>
            <li>秋</li>
            <li>冬</li>
        </ul>

        <!-- 有序列表：列表项前自动添加数值序号(从1开始) -->
        <ol>
            <li>春</li>
            <li>夏</li>
            <li>秋</li>
            <li>冬</li>
        </ol>

        <!-- 定义列表：类似于名称解释,常用用来做友情链接 -->
        <dl>
            <dt>生命体征</dt>
            <dd>生命体征就是用来判断病人的病情轻重和危急程度的指征</dd>
            <dt>呼吸</dt>
            <dd>呼吸是呼吸道和肺的活动。人体通过呼吸，吸进氧气，呼出二氧化碳，是重要的生命活动之一</dd>
        </dl>
     </div>

     <hr>

     <!-- 表格 -->
    <table border="1" width="500" height="150">
        <caption>购物车</caption>
        <!-- 表头 -->
        <thead>
            <tr bgcolor="#ccc">
                <th>名称</th>
                <th>价格(斤/元)</th>
                <th>数量(斤)</th>
            </tr>
        </thead>
        
        <tr align="center">
            <td>青菜</td>
            <td>4</td>
            <td>5</td>
        </tr>

        <tr  align="center">
            <td>猪肉</td>
            <td>10</td>
            <td>8</td>
        </tr>
        <tr  align="center">
            <td>虾</td>
            <td>30</td>
            <td>11</td>
        </tr>
    </table>
    
    <hr>

    <!--表单 -->

    <h2>用户注册</h2>
    <form action="" method="post"><!-- post方法比get方法安全 -->
        <div>
            <!-- 用户名: -->
            <label for="username">用户名:</label><!-- for绑定对应的标签id -->
            <!-- placeholder: 用户于设置文本框的提示文本 -->
            <input type="text" id="username" name="username" value="" placeholder="不少于6位">
        </div>

        <div>
           <label>
               <!-- password类型,输入的内容以*号占位符代替 -->
                密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
           </label><!-- 在label里面写入标签，可代替for绑定 -->
        </div>
        <div>
            <label>
                确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
            </label>
        </div>

        <div>
            <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 -->
            <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 -->
           <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>
            <!-- 复选框 -->
            <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 -->
            <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 -->
            <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label>
            <input type="checkbox" name="hobby[]" value="book" id="book"><label for="book">看书</label>
            <!-- 同样也是使用checked设置默认值,可同时设置多个 -->
            <input type="checkbox" name="hobby[]" value="run" id="run"><label for="run">跑步</label>
            <input type="checkbox" name="hobby[]" value="sleep" id="sleep" checked><label for="sleep">睡觉</label> </input>
        </div>

        <div>
            <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 -->
            <label for="edu">您的学历:</label> 
            <select name="" id="edu" value="">
                <option value="1">没读过书</option>
                <!-- selected设置默认项 -->
                <option value="2" selected>小学</option>
                <option value="3">初中</option>
                <option value="4">高中</option>
                <option value="5">大学</option>
                <option value="6">研究生</option>
                <option value="7">其他</option>
            </select>
        </div>

        <div>
        <!-- 文本域 -->
            <label for="common">请留言:</label>
            <textarea name="" id="common" cols="30" rows="10" placeholder="不超过250字" value=""></textarea>
        </div>
        <!-- 按钮 -->
        <!-- 提交按钮，用于提交表单信息 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <button type="button">注册</button>
    </form>
    <hr>   
    <!--图片与媒体 -->

    <div>
        <!-- 图片标签是单标签,引入的是外部的资源
        src="图片地址", 支持本地和网络url地址
        alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 -->
        <img src="static/images/zly.jpg" alt="颖***" width="200">
        <br>
        <!-- 播放视频:controls显示播放控件, 支持宽度设置 -->
        <video src="static/images/demo.mp4" controls="controls" width="400"></video>
    </div>
    <hr>

    <div style="width: 200px;height: 180px;background: pink;padding: 50px 60px;">
    	<div style="width: 150px;height: 150px;background: #ccc;border: 1px solid #000;border-radius: 10px;margin:15px auto;">
    		
    	</div>
    </div>

   
</body>
</html>

运行实例 »

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

总结：

1、html各种常用标签需多加运用练习，熟悉它们的属性
2、css的常用选择器：标签、id、class、属性、派生
3、css的引入方法与优先级：
3.1、内联样式：直接在标记标签中写css样式
3.2、内部样式：在页面head内部编写样式
3.3、外部样式：第一，编写外部样式表文件（后缀css）；第二，需要在页面中用link引用
3.4、优先级：内联样式＞内部样式＞外部样式
在本示例中，用的是内联样式
4、设置padding时，会把div撑大，需要再次调节div的宽高

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

HTML常用标签与css样式总结-2019年1月15日14时07分

2019-01-16 18:18:09