Blogger Information
Blog 11
fans 0
comment 0
visits 6633
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML标签+css基本知识点——2019年1月14日
离歌浅唱醉人心丶的博客
Original
796 people have browsed it

实例

下面这段代码展示了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>

运行实例 »

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

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