html学习笔记

元素显示模式

 <!-- 元素显示模式
    块元素：独占一行  div     宽、高、内外边距可以设置
    行内元素：一行可以存在多个  span  宽、高、内外边距不可以设置 -->
    <div>我是一个盒子   </div>
    <span>我是span </span>

表格标签属性

<table border="1px" width="900px" height="400px" cellspacing="0">
                <!-- 表头  rows行 height单元格高度  width单元格宽度  cellspacing单元格间距 border只控制最外围大小-->
                <caption>学生信息   </caption>
                <!--  align设置水平方向位置（center、light、right）  valign设置垂直方向位置（top、middle、bottom）-->
                <thead height="20px" align="center" valign="top">
                    <tr height="" align="" valign="">
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>民族</th>
                        <th>政治面貌</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>汉族</td>
                        <td>团员</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>女</td>
                        <td>20</td>
                        <td>满族</td>
                        <td>群众</td>
                    </tr>
                    <tr>
                        <td>王五</td>
                        <td>男</td>
                        <td>19</td>
                        <td>回族</td>
                        <td>党员</td>
                    </tr>
                    <tr>
                            <td>赵六</td>
                            <td>男女</td>
                            <td>21</td>
                            <td>壮族</td>
                            <td>团员</td>   
                    </tr>
                    <tfoot>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>共计：4人</td>
                                
                            </tr>
                        </tfoot>
                </table>

合并单元格

<!-- 跨行：rowspan
                跨列：colspan -->
              跨行：：：：  <tbody>
                    <tr>
                        <td rowspan="2">张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>汉族</td>
                        <td>团员</td>
                    </tr>
                    
                    
  跨列：：：：：   <tr>
                                <td colspan="5">共计：4人</td>
                                
                            </tr>               
                    
                    

details

<!-- 详情标签details   配合summary -->
    <details>
        <summary>点开看看</summary>
        我们这里什么都没有
    </details>

元素显示模式：块元素、行内元素（<span>）、行内块元素 表格标签： 表单标签：

​

input type="" value="" (单选框、多选框必须有) name select option

​

默认选中 checked（多选框） selected h5标签

下午： css：层叠样式表 基本样式： 选择器{ 属性名：属性值； }

引入方式 外部样式 <link> 内部样式 style 行内样式 style="color:pink;"

选择器： 基本选择器：标签选择器、类选择器(.box1)、id选择器(#box2)、通配符选择器 div class="box1" id="box2"

包含选择器:子代选择器（> 亲生儿子）、后代选择器（ 后代所有）

font-size font-weight font-style

逗号选择器：div， p， span{}

属性选择器： input[type="password"] ^ $ *

/* :hover 鼠标悬停 */ cursor 鼠标样式

结构伪类选择器： 父元素 子元素:nth-child(n) :父元素第n个子元素 even：偶数 odd：奇数

选择器： 基础选择器： 标签选择器：一次性把网页所有一类的标签选出来 p div a li 类选择器： .one

​

class人名​

id选择器：#one

​

身份证号：每个网页不能重复​

*

包含选择器：子代选择器  ul>li       亲生儿子
                                    <ul>
                         <li></li>
                          <ul>
                               <li></li>
                          </ul>
                    </ul>
                     后代选择器       ul li

逗号选择器：

div{
}
a{
}                       =》  div,
                            a,
                            p{
                                  }
p  {
}
​
​

属性选择器：

input[type="password"]{}
​
​
*：包含
input[type*="m"]{}
​
​
​
^以……开头
input[type^="te"]{}
​
​
$：以……结尾
​
<input type="text">
<input type="password">
<input type="email">
<input type="number">

伪类选择器： :hover================鼠标经过时 a:hover div{ 对div的更改 }

       <a> 
    <div>
    </div>
       </a>

a:hover+div{ 对div更改的 }

<a></a>

​​

结构伪类：

E:nth-child()   ；先看nth-child
E:nth-of-type（）       先看E，对所有的E进行编码，然后再看:nth-of-type（）
​
​
​
伪元素 ：
：：before       content:"~"
::after  content:"~"
::selection
​
​
​
​