学习笔记-HTML-元素+属性

再来100个需求
181 阅读5分钟

CSS 的特性

继承

  • 一个元素没有设置某个属性的值，那就会跟随父元素的值
img {
    /* 相对于父元素 */
    width: 100%;
    /* 强制继承 */
    width: inherit;
}

继承的注意事项

  • CSS属性继承的是计算值，而不是字面值
.box1 {
    font-size: 60px;
}

.box2 {
    /* 0.5em = 60 * 0.5 = 30px */
    font-size: 0.5em;
}

<div class="box1">
    <div class="box2">
        <!-- p is 30px -->
        <p>hahha</p>
    </div>
</div>

层叠

  • CSS允许多个相同属性层叠到一个元素上
.box1 {
    color: red;
}

.box2 {
    background-color: cyan;
}

.box3 {
    font-size: 60px !important;
}

<div class="box1 box2 bo3">哈哈哈</div>
  • 不同选择器时，层叠效果看权重，越大越重，显示就会优先
类型                        权重值
!important                 10000
内联样式                    1000
id选择器                    100
类选择器、属性选择器、伪类     10
元素                       1

html 元素

列表

有序列表 ol(order list)、li(list item)

  • ol里面的直接子元素只能是li
    <ol>
        <li1>1</li1>
        <li2>2</li2>
        <li3>3</li3>
        <li4>4</li4>
    </ol>

无序列表 ul(order list)、li(list item)

  • ul里面的直接子元素只能是li
    <ul>
        <li1>1</li1>
        <li2>2</li2>
        <li3>3</li3>
        <li4>4</li4>
    </ul>

定义列表 dl(difinition list) dt(difinition term：标题、组)、dd(difinition description)

  • dl里面的直接子元素只能是dt、dd
  • dt、dd是兄弟元素
    <ul>
        <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>橘子</dd>

        <dt>饮料</dt>
        <dd>咖啡</dd>
        <dd>牛奶</dd>


        <dt>数码</dt>
        <dd>电脑</dd>
        <dd>手机</dd>
    </ul>

列表的属性使用

  • list-style-type
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
  • list-style-image: url(../img/lala.png);
  • list-style-position: outside;

表格

  • align table的对齐方式
  • width td的宽度
  • border 边框
  • cellpadding td内部的边距
  • cellspacing td之间的边距
  • border-collapse 边框合并
  • margin： 100px auto 上线居中
    <table align="right " width=80 border="1" cellpadding="10" cellspacing="5" >
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>

        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>

        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>

    </table>

表格中其他元素

caption - 表格标题

-直接包标题

<caption>标题</caption>

thead - 表格第一行

  • 内部一般用 tr>th

tbody - 表格主体

  • 内部一般用 tr> td

tfoot - 表格最后一行

  • 内部一般用 tr> td

border-spacing

  • 用于设置单元格之间水平和垂直之间的间距
  • 如果只设置一个值，那水平和垂直间距是一样的
  • 如果设置两个那就代表 水平和垂直 间距
    table {
        border-spacing: 5px,1010;
    }

单元格的合并

  • colspan :column 跨列合并
  • rowspan ： 跨行合并
<style>
        table {
           border-collapse: collapse;
           margin: 0 auto; 
        }

        td {
             border: 1px solid cyan;
             padding: 20px;

             text-align: center;
        }


 </style>

<table>
        <tr>
            <td colspan="2">单元格1</td>

            <!-- <td>单元格2</td> -->
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td rowspan="2">单元格3</td>
            <td rowspan="2" colspan="2">单元格4</td>
            <!-- <td>单元格5</td> -->
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <!-- <td>单元格3</td> -->
            <!-- <td>单元格4</td> -->
            <!-- <td>单元格5</td> -->
        </tr>
    </table>

小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
           border-collapse: collapse;
           margin: 0 auto; 
        }

        td {
             border: 1px solid black;
             padding: 8px 20px;

             text-align: center;
        }
        
        属性选择器 + 类选择器
        [colspan], [rowspan], .week {
            font-weight: bold;
        }

    </style>

</head>
<body>

    <table>
        <tr>
            <td colspan="6">化学</td>
            <!-- <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td> -->
        </tr>
        <tr class="week">
            <td></td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <td rowspan="4">下午</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <td rowspan="2">晚上</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr>
            <!-- <td>化学</td> -->
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
    </table>
    
</body>

</html>

表单相关标签

form

  • 表单
  • 一般情况下，其他表单相关火元素都是它后代元素
内部属性
  • action，后面填写地址
  • method，不写时 默认是get请求
  • target：打开方式，一般用 _self 或者 _blank，和a标签的 target属性类似
  • enctype，参数编码方式
  • accept-charset，规定表单提交时使用的字符编码。默认是UNKNOWN，和文档编码相同，即UTF-8
<form action="http://www.baidu.com">

input

  • 单行文本输入、单选框、复选框、按钮等元素
内部属性
type input的类型
  • text ：文本输入(明文输入)
  • password：文本输入框(密文输入)
  • button：按钮
  • file：文件
  • radio : 单选框，搭配 name属性达到互斥
  • checkbox：复选框，搭配 name属性达到复选
  • reset：重置。前提所有的内容必须在一个表单中.button 也有这个属性
  • submit: 提交表单
value input标签的显示值
<input type="button" value="获取验证码">
maxlength 最大字符长度
placeholder 占位符
readonly 只读
disabled 禁用，不可选中
checked 默认选中。只用于radio、checkbox
autofocus 自动聚焦
name 提交表单时作为query字段中的key
outline 去除input的tab键选中效果
input {
   outline:none
}

textarea

  • 多行文本框
内部属性
  • resize： none 禁止缩放、horizontal 水平缩放、vertical 垂直缩放、both 水平垂直缩放

select、option

下拉选择框

内部属性
  • multiple 多选

button

  • 按钮

label

  • 表单元素标题

fielset

  • 表单元素组

legend

  • fielset的标题

综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>   
        fieldset {
            width: 400px;
        }
    </style>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>必填信息</legend>
    
                <!--1. 手机输入框 -->
            <div>
                <span>手机：</span>
                <input type="text" 
                       maxlength="11" 
                       placeholder="请输入手机号" 
                       disabled
                       readonly
                       autofocus
                       >
            </div>
    
            <!--2. 手机输入框 -->
            <div>
                <span>密码：</span>
                <input type="password">
            </div>
    
            <!--3. 验证码 -->
            <div>
                <span>验证码：</span>
                <input type="password">
    
                <!-- 3.1 按钮的实现方式1 -->
                <!-- <button> 获取验证码 </button> -->
                
                <!-- 3.2 按钮的实现方式1 -->
                <input type="button" value="获取验证码">
            </div>
        </fieldset>
    
        <fieldset>
            <legend>选填信息</legend>
    
                <!--4. 手机输入框 -->
            <div>
                <span>照片：</span>
                <input type="file" value="选择文件"> 
            </div>
    
            <!--5. 性别-->
            <div>
                <span>性别：</span>
                <input type="radio" name="sex">女
                <input type="radio" name="sex">男
            </div>
    
            <!--6. 兴趣 -->
            <div>
                <span>兴趣：</span>
                <input type="password">
                唱<input type="checkbox" name:"hobbies">
                跳<input type="checkbox" name:"hobbies">
                rap<input type="checkbox" name:"hobbies">
            </div>
    
            <!--7. 学历 -->
            <div>
                <span>学历：</span>
                <select name="" id="" multiple>
                    <option value="0">小学</option>
                    <option value="1" selected>初中</option>
                    <option value="2">高中</option>
                </select>
            </div>
    
            <!--8. 简介 -->
            <div>
                <span>简介：</span>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
        </fieldset>
        
    
        <!-- 9. 重置 
            前提：
            1. 类型必须是reset(vuLue值可以不写)
            2. 所有的内容必须在一个表单中
        -->
        
        <input type="reset" value="重置">
    </form>
    
    <!-- 百度搜索 -->
    <form action="http://www.baidu.com/s">
        <label for="question">baidu</label>
        <input type="texxt" 
               placeholder="请输入"
               name="wd"
               id = question
               >
        <input type="submit" value="百度一下">
    </form>
</body>
</html>

布尔属性

  • 布尔属性可以不写，写上了就代表使用这个属性
  • 常见的布尔属性：disable/checked/mutiple/autofocus/selected

元素划分

根据元素的显示类型(能不能显示在同一行)，HTML元素可以分为 块级元素和行内级元素

  • 块级元素：独占父元素一行。div、p。。。
  • 行内级元素：和其他元素可以在同一行显示。span、strong、img。。。

根据元素内容(浏览器是否会替换掉)，可以分为替换元素和非替换元素

  • 替换元素 ：元素本身没有实际内容，浏览器根据元素类型和属性，来决定元素的具体显示内容。比如img，input，iframe。。。
  • 非替换元素：

块级元素都是非替换元素；行内级元素才分为替换元素和非替换元素

替换元素是可以设置宽高的

块级元素、行内级元素 由来:display 属性

  • 浏览器自动给块级元素 加上了display属性，并且值是block。或者值是list-item(li)/table-row(tr)
  • 浏览器自动给行内级元素 加上了display属性，并且值是inline。
  • none：隐藏元素，设置之后就会隐藏并不占空间
  • inline-block：让元素同时具备行内级块级元素的特征，即：可以和其他元素在同一行；可以设置宽高

小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>




    <style>
        /* 样式重置 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /* 整体样式 */
        .mail {
            width: 120px;
            border: 2px solid #999;
            text-align: center;
        }

        /* 局部样式 header */
        .header {
            color: white;
            background-color: #999999;
        }

        /* mail hover 的时候，找子元素ul，将子元素ul 设置成display */
        .mail:hover ul {
            display: block;
        }

        .mail ul {
            display: none;
        }

   
  
        /* 局部样式 邮箱列表 */
        /* 手指移上去变颜色 */
        .mail ul li:hover {
            background-color: skyblue;

        }

        /* 局部样式 a 使鼠标移上去变成小手 */
        .mail ul li a{
            display: block;
        }
    </style>
</head>
<body>

    <!-- .mail>.header+ul>(li>a[href="#"])*3 -->
    <div class="mail">
        <div class="header">邮箱</div>
        <ul>
            <li><a href="#">QQ邮箱</a></li>
            <li><a href="#">gmail邮箱</a></li>
            <li><a href="#">fox邮箱</a></li>
        </ul>
    </div>
    
</body>
</html>
avatar
文章
阅读
粉丝