HTML常用标签和CSS选择器的使用及演示——2019.1.14 - 作业栏

Home > List of blog posts > HTML常用标签和CSS选择器的使用及演示——2019.1.14

Blogger Information

Blog 6

fans 0

comment 0

visits 3736

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标题与段落</title>
</head>
<body>
    <!-- <div>是一个块级标签,所谓块级是指它默认独占一行,并且支持宽高,后面还会细说  
     -->
    <div style="background-color:blueviolet;">
        php
    </div>
    <div style="background-color:brown;">
        第二行div
    </div>
    
    <div>
        <h1>大标题</h1>
        <h2>大标题</h2>
        <h3>大标题</h3>
        <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 
        字号和数字大小成反比，数字越大字体越小-->
        <p>跟老师一起学习HTML</p>
        <!-- p表示段落，可以有多个段落 -->
        <p>跟老师一起学习php</p>
    </div>
</body>

</html>

运行实例 »

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

2. 文本修饰（strong,em等）

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文本修饰</title>
</head>

<body>
    <div>
        <p>说好一起到<strong style="background-color:crimson;color: white;">白头</strong>, 你却偷偷焗了油</p>
        <!--strong 标签代表加粗文本  -->
        <!-- em 标签斜体文字 -->
        <p>说好一起当<em style="background-color:yellow;color:red;">学渣</em>,你却偷偷当学霸</p>
    </div>
<body>
</html>

运行实例 »

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

3. 列表（ul ol dl）

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>

<body>
<!-- 3. 列表 将一组有共同特征的内容归纳在一起-->
    <div>
        <h3>购物清单</h3>
        <ul>
            <!-- ul是无序列表  每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套-->
            <li>1.笔记本电脑一台，5000，学习php</li>
            <li>2.哑铃一对，100，锻炼身体</li>
            <li>3.ps4一台，2000，休闲娱乐</li>
        </ul>
        <ol>
            <!-- ol有序列表,列表项前自动添加数值序号(从1开始) -->
            <li>笔记本电脑一台，5000，学习php</li>
            <li>哑铃一对，100，锻炼身体</li>
            <li>ps4一台，2000，休闲娱乐</li>
        </ol>
        <dl>
            <!-- dl定义列表 类似于名称解释,常用用来做友情链接 -->
            <dt>可乐</dt>
            <!-- dt代表一个标题 -->
            <dd>肥宅快乐水</dd>
            <!-- dd名词解释 -->
            <dt>朱老师</dt>
            <dd>php中网讲师</dd>
        </dl>
    </div>
</body>
</html>

运行实例 »

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

4. 表格（table,caption, thead,tbody,tfoot,tr,th,td）

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!-- 4. 表格 -->

    <!-- 
        表格是最重要的格式化数据的工具
        其实上面的列表内容,非常适合用表格来展示
        经过分析, 上面列表加上表头需要一个四行四列的表格进行展示

        完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td
        表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) 
    -->

    <table border="1" cellpadding='4' cellspacing='0' width='500'>
        <!-- border 表格双横线  cellpadding 与边线距离 cellspacing双横线间距 -->
        <caption>购物车</caption>
        <!-- caption 定义表格标题 -->
        <!-- 表头 -->
        <thead>
            <tr bgcolor='lightblue'>
                <!-- bgcolor 背景色 -->
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>用途</th>

            </tr>
        </thead>
        <tbody>

            <tr align="center">
                <!-- aling="center" 居中 -->
                <td>1</td>
                <td>笔记本</td>
                <td>5000</td>
                <td>学习php</td>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>哑铃</td>
                <td>100</td>
                <td>锻炼身体</td>
            </tr>
            <tr align="center">
                <td>3</td>
                <td>ps4</td>
                <td>2000</td>
                <td>休闲娱乐</td>
            </tr>
        </tbody>

    </table>
</body>
</html>

运行实例 »

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

5. 表单（form,label,input,select,textarea,button）

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>  
  <!-- 5. 表单 -->

    <!--
        (1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
        (2) 表单涉及:form,label,input,select,textarea,button标签
        (3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
    -->
    <!-- 下面以用户注册表单为例进行演示 -->
    <h2>用户注册</h2>
    <form action="" method="POST">
        <!-- action 提交数据给谁处理  method 用什么方式提交-->
        <div>
            <!-- 
                (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定
                (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上
            -->
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" value="" placeholder="请输入用户名">
            <!-- value默认值 placeholder提示 -->
            <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 -->
            <!-- placeholder: 用户于设置文本框的提示文本 -->
        </div>
        <div>
            <label for="password">密码：</label>
            <!-- password类型,输入的内容以*号占位符代替 -->
            <input type="password" id="password" name="password" placeholder="请输入密码" size="25">
        </div>
        <div>
            <label>
                <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 -->
                确认密码：<input type="password" name="password1" id="password1" placeholder="请重复输入密码">
            </label>
        </div>
        <div>
            <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>
            <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
            <!-- 单选按钮name必须一致 -->
            <!-- radip单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 -->
            <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 -->
            <!-- checked默认值，防止用户提交无效数据 -->

        </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>
            <input type="checkbox" name="hobby[]" value="swim" id="swim"><label for="swim">游泳</label>
            <input type="checkbox" name="hobby[]" value="php" id="php" checked><label for="game">学习php</label>
        </div>
        <div>
            <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 -->
            <label for="edu">您的学历</label>
            <select name="edu" id="edu" value="3">
                <option value="1">小学</option>
                <option value="2">初中</option>
                <option value="3">高中</option>
                <option value="4" selected>大学</option>
                <option value="5">博士后</option>
            </select>
        </div>
        <div>
            <!-- 文本域,其实就是多行文本框 -->
            <label for="common">留言：</label>
            <textarea name="common" id="common" cols="30" rows="10"  placeholder="文本不超过100字"></textarea>
        </div>
        <!-- 按钮 -->
        <input type="submit" value="注册">
        <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 -->
        <input type="reset" value="重置">
        <!-- 推荐使用语义化的button标签 -->
        <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 -->
        <button type="button">提交</button>

    </form>
  
</body>

</html>

运行实例 »

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

6. 图片与媒体（img video）

实例

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

运行实例 »

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

CSS：CSS是用来修饰html中的元素的

基本语法: 选择器 {样式声明}

1. 选择器: 最基本的有标签,类class, id

2. 样式声明: 包括属性和值二部分

3. 样式规则 = 选择器 + 样式声明

CSS属性优先级

标签选择器 < class类选择器 < ID选择器 <行内样式

实例

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>常用选择器的优先级（selector）</title>
<!-- 如果将css写到当前html文档style标签中则只适应当前文档 -->
<style>
/* 标签选择器 */
h3 {
/* 设置背景色  */
background-color: aqua;
/* 字体颜色 */
color: brown;
}

/* 类class选择器 */
.bg-blue {
background-color: lightblue;
}

/* id选择器 */
#bg-yellow {
background-color: yellow;
}
</style>
</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:lime;">样式规则=选择器+申明</h3>
<!-- 选择器层级上：标签<class<id -->
<script>
// 用js代码将id为bg-yellow的元素的背景色设置为浅灰色
document.getElementById('bg-yellow').style.backgroundColor = 'lightgrey';
</script>

<!-- 
       总结:
        1.常用的选择器: 标签, class, id,还有一个*,选择所有元素,大家课后可以试验一下
        2.这三个常用选择器的优先级是: 标签 < 类class < id 
        3. style属性和js脚本不是选择器, 不参数排名
    -->
</body>

</html>

运行实例 »

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

盒子模型

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

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

(根据盒子模型示意图分析)

3. 盒子模型分为三个层级:

1. 内容级: 宽高和背景三个属性

(1): width

(2): height

(3): background-color (默认透明)

2. 元素级(可视范围)

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

(2): 内边距: padding

(3): 边框: border

3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系

实例

.box1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;

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

    /* 可以简写:按顺时针 */
    padding: 20px 30px 40px 50px;

    /* 如果左右相等30,而上下不相等20,40,可以这样简写 */
    padding: 20px 30px 40px;

    /* 如果上下也相等40 */
    padding: 40px 30px;

    /* 第二个总表示左右内边距 */

    /* 如果四个方向全部相等,例如20 */
    padding: 20px;

    /* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
    /* 上边框 */
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: red;

    /* 右边框 */
    border-right-width: 10px;
    border-right-style: dashed;
    border-right-color: green;

     /* 下边框 */
     border-bottom-width: 10px;
     border-bottom-style: dotted;
     border-bottom-color: blue;

      /* 左边框 */
      border-left-width: 10px;
      border-left-style: double;
      border-left-color: black;

      /* 以上样式与可以简写 */
      border-top: 10px solid red;
      border-right: 10px dashed green;
      border-bottom: 10px dotted blue;
      border-left: 10px double black;

      /* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
      border: 10px solid red;

   
}

.box2 {
    
    height: inherit;
    background-color: wheat;
}

运行实例 »

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

今天学习了HTML的基本标签以及CSS选择器的优先级和盒子模型。

Correction status：qualified

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

jQuery基础知识——2019.01.21

2019-01-24 18:02:06