HTML标签+css基本知识点——2019年1月14日

2019年01月16日 13:29:54阅读数：518博客 / 离歌浅唱醉人心丶的博客 / 作业

实例

下面这段代码展示了HTML的所有常用标签

<!--此元素可告知浏览器其自身是一个 HTML 文档。-->
<!DOCTYPE html>
<!--<html> 与 </html> 标签限定了文档的开始点和结束点.-->
<html lang="en">
<!--文档的头部由 <head> 标签定义-->
<head>
    <!--定义编码方式-->
    <meta charset="UTF-8">
    <title>HTML标签</title>
</head>
<!--主体由 <body> 标签定义。-->
<body>
    <div>
        <!--<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。-->
        <h1>这是标题 1</h1>
        <h2>这是标题 2</h2>
        <h3>这是标题 3</h3>
        <h4>这是标题 4</h4>
        <h5>这是标题 5</h5>
        <h6>这是标题 6</h6>
        <!--<p> 标签定义段落。-->
        <p>这是一个段落</p>
    </div>
    <hr> <!--水平分隔线-->
    <div>
        <!--<b> <strong> 标签规定粗体文本。-->
        <p>这是普通文本 - <b>这是粗体文本</b></p>
        <!--<i> <em> 标签显示斜体文本效果。-->
        <p>这是普通文本 - <i>这是斜体文本</i></p>
        <!--<big> 标签呈现大号字体效果。-->
        <p>这是普通文本 - <big>这是大号字体文本</big></p>
        <!--<small> 标签呈现小号字体效果。-->
        <p>这是普通文本 - <small>这是小号字体文本</small></p>
    </div>
    <hr>
    <div>
        <!--<ul> 标签定义无序列表。-->
        <ul>
            <!--<li> 标签定义列表项目。-->
            <!--<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。-->
            <li>可口可乐</li>
            <li>百事可乐</li>
            <li>雪碧</li>
        </ul>
        <!--<ol> 标签定义有序列表。-->
        <ol>
            <li>可口可乐</li>
            <li>百事可乐</li>
            <li>雪碧</li>
        </ol>
    </div>
    <hr>
    <!--<table> 标签定义 HTML 表格。-->

    <!--简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。-->

    <!--tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。-->

    <!--更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。-->
    <!--cellpadding    规定单元边沿与其内容之间的空白。-->
    <!--cellspacing    规定单元格之间的空白。-->


    <!--border	规定表格边框的宽度。-->
    <table border="1">
        <caption> 两行三列：</caption> <!--表格标题-->
        <!--定义表格内的表头单元格。-->

        <!--HTML 表单中有两种类型的单元格：-->

        <!--表头单元格 - 包含表头信息（由 th 元素创建）-->
        <!--标准单元格 - 包含数据（由 td 元素创建）-->
        <!--th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。-->
        <tr>
            <th>100</th>
            <th>200</th>
            <th>300</th>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>
    <hr>
    <div>
        <!--<form> 标签用于为用户输入创建 HTML 表单。-->

        <!--表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。-->

        <!--表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。-->

        <!--表单用于向服务器传输数据。-->
        <form action="login.php" method="post"> <!--action 是将数据提交的地址 method是提交的方式-->
            <!--<input> type类型：button checkbox file hidden image password radio reset submit text-->
            <span>用户名：</span>
            <input name="" type="text" placeholder="请输入用户名">
            <span>密码：</span>
            <input name="" type="password" placeholder="请输入密码">
            <input type="submit" value="进入">
            <!--多选框-->
            <input type="checkbox" name="favorite[]" value="1" />前端
            <input type="checkbox" name="favorite[]" value="2" />后端
            <input type="checkbox" name="favorite[]" value="3" />美工
            <!--上传文件-->
            <input type="file">
            <!--单选框-->
            <input type="radio" name="sex[]" value="1"> 男
            <input type="radio" name="sex[]" value="2"> 女
            <!--重置-->
            <input type="reset">
            <!--select 元素可创建单选或多选菜单。-->

            <!--<select&> 元素中的 <option> 标签用于定义列表中的可用选项。-->
            <select>
                <option value="1">一月</option>
                <option value="2">二月</option>
                <option value="3">三月</option>
                <option value="4">四月</option>
            </select>
            <!--<textarea> 标签定义多行的文本输入控件。-->

            <!--文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。-->

            <!--可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。-->
            <textarea rows="1" cols="70">
                 山有木兮木有枝，心悦君兮君不知。 ---佚名《越人歌》
            </textarea>
            <!--<button> 标签定义一个按钮。-->

            <!--在 button 元素内部，可以放置比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。-->

            <!--<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。-->
            <!--<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。-->
            <!--例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。-->
            <button type="button">来点我</button>
        </form>
    </div>
    <hr>
    <div>
        <!--img 元素向网页中插入一幅图像。-->
        <img src="static/images/1.jpg" alt="血小板" width="300px">
        <!--<video> 标签定义视频，比如电影片段或其他视频。-->
        <video src="static/images/月光光心慌慌.mp4" controls="controls"></video>
    </div>
</body>
</html>

运行实例 »

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


下面这段代码展示了css常用选择器及 每个选择器优先级之间的比较

实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用选择器与优先级</title>
    <!--外联样式-->
    <link rel="stylesheet" href="static/css/style02.css">
    <!--内联样式-->
    <style>
        /*标签选择器*/
        p{
            /*设置背景色*/
            background-color: lightcyan;
            /*设置字体颜色*/
            color: coral;
            /*设置字体大小*/
            font-size: 18px;
        }
        /*class选择器*/
        .bg-green{
            background-color: lightgreen;
            color: #ffffff;
            font-size: 18px;
        }
        /*id选择器*/
        #bg-yellow{
            background-color: lightyellow;
            color: red;
            font-size: 18px;
        }
        /*行内样式 > 内联样式 > 外联样式*/
    </style>
</head>
<body>
    <p>山有木兮木有枝，心悦君兮君不知。——佚名《越人歌》</p>
    <p class="bg-green">人生若只如初见，何事秋风悲画扇。——纳兰性德《木兰词·拟古决绝词柬友》</p>
    <p class="bg-green" id="bg-yellow">十年生死两茫茫，不思量，自难忘。——苏轼《江城子·乙卯正月二十日夜记梦》</p>

    <!--选择器优先级 ： 标签 < class < id-->
    <!--优先级高于上面三个的是行内样式-->
    <p class="bg-green" id="bg-yellow" style="background-color: lightcoral;color: white">曾经沧海难为水，除却巫山不是云。——元稹《离思五首·其四》</p>

    <!--优先级最高的是JS-->
    <p id="bg-coral">玲珑骰子安红豆，入骨相思知不知。——温庭筠《南歌子词二首 / 新添声杨柳枝词》</p>
    <script>
        document.getElementById('bg-coral').style.backgroundColor = 'coral';
        document.getElementById('bg-coral').style.color = 'white';
    </script>

</body>
</html>

运行实例 »

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


下面这段代码展示了HTML的盒模型，盒模型是布局的基础，可设置css来改变样式


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" href="static/css/style03.css">
    <style>
       .box1{
                    width: 600px;
                    height: 500px;
                    background-color: antiquewhite;
                    /*设置padding 简写方法*/
                    /*四个数字分别代表 上 右 下 左*/
                    padding: 10px 20px 30px 40px;
                    /* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
                    /* 上边框 */
                    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;
                }
                
                .box2{
                    /*继承父元素的高度*/
                    height: inherit;
                    background-color: coral;
                    /*三个数字分别代表 上下 左右 */
                    padding: 10px 20px 40px;
                
                    /* 以上样式与可以简写 */
                    border-top: 10px solid red;
                    border-right: 10px dashed green;
                    border-bottom: 10px dotted blue;
                    border-left: 10px double black;
                }
                
                .box3{
                    height: inherit;
                    background-color: beige;
                    /*两个数字分别代表 上 左右 下*/
                    padding: 30px 20px;
                
                    /* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
                    border: 10px solid red;
                }        
    </style>
</head>
<body>
    <!--
    1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
    2. 盒子默认都是块级元素: 独占一行,支持宽度设置
    3. 盒子模型分为三个层级:
      1. 内容级: 宽高和背景三个属性
           (1): width
           (2): height
           (3): background-color (默认透明)
      2. 元素级(可视范围)
         (1): 包括内容级(width + height + background)
         (2): 内边距: padding
         (3): 边框: border
      3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
   -->
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>

运行实例 »

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

批改状态：未批改

老师批语：

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 博主信息
    离歌浅唱醉人心丶的博客
    离歌浅唱醉人心丶的博客
    博文
    11
    粉丝
    0
    评论
    0
    访问量
    4945
    积分：0
    P豆：47
    最新更新
    jQuery的动画效果及简单应用——2019年1月24日2019-01-25
    说说输入点赞删除功能——2019年1月23日2019-01-24
    获取滚动值案例、点击商品选中效果——2019年1月22日2019-01-24
    jQuery选择器和春节倒计时——2019年1月21日2019-01-22
    表单传统验证与ajax验证——2019年1月18日2019-01-24
    ToList留言、JS动态表格——2019年1月17日2019-01-24
    JS引入方式和JS数组处理函数——2019年1月16日2019-01-19
    css常用选择器、布局、遮罩、固定定位——2019年1月15日2019-01-16
    博文分类
    作业9篇
    热门文章
    JS引入方式和JS数组处理函数——2019年1月16日731
    说说输入点赞删除功能——2019年1月23日623
    css常用选择器、布局、遮罩、固定定位——2019年1月15日620
    ToList留言、JS动态表格——2019年1月17日579
    HTML标签+css基本知识点——2019年1月14日518
    jQuery的动画效果及简单应用——2019年1月24日510
    jQuery选择器和春节倒计时——2019年1月21日502
    表单传统验证与ajax验证——2019年1月18日462
    提交
    首页视频教程原生手册编程词典

    Copyright 2014-2020 //m.m.sbmmt.com/
    All Rights Reserved PHP中文网 版权所有

    皖B2-20150071-9皖公网安备34010402701654号

    如果有侵犯您的版权或其他权益，请联系邮箱: a@php.cn