一、HTML5基础

1,基本结构

<!DOCTYPE html>   #表示文档的类型,html类型
<html>
    <head>                            #网页头部
        <meta charset="utf-8" />   # 网页字符编码
        <title>第一个页面</title>   
    </head>
    <body>                             #主体部分
        yichen is a good man    
    </body>
</html>


<html>....</html>标签标记着html文档的开始和结束 

<meta/>标签 定义其他的说明
<meta name="keywords" content="逸尘秀"/> #内容描述
<meta name="description" content="分享日常工作笔记"/> 

2,基本语法

1、 <常规标签>

    <标签 属性= "属性值" 属性="属性值"></标记>

2、空标签

    <标签 属性="属性值"/>
说明:
    1.写在<>中的第一个单词叫做标记,标签,元素。这3个名字都是指的一个
    2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在""号内。
    3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
    4.空标签没有结束标签,用"/"代替。

## 3,网页基本标签

1, 注释标签

ctrl + /  <!--注释  -->

2,标题标签<h1-6>

        <h1>.....</h1>      <h1>一级标题</h1>
        <h2>.....</h2>        <h2>二级标题</h2>
        <h3>.....</h3>        <h3>三级标题</h3>
        <h4>.....</h4>        <h4>四级标题</h4>
        <h5>......</h5>        <h5>五级标题</h5>
        <h6>......</h6>        <h6>六级标题</h6>

3,换行标签<br />

    <!-- 换行标签 -->
        当今世界正处于百年未有之大变局”,<br />习近平总书记的这一重大论断再次得到印证。人类21世纪的第三个十年,启幕之时因为新冠疫情被摁下“暂停键”。

4, 段落标签 <p>段落标签</p>

    文章的段落一般用<p>标签包起来

5,水平线标签<hr/>

        显示效果就是一条水平线

6,字体样式标签<strong>

        <strong>yichen is a good man </strong><br /> <!--加粗-->
        <b>yichen is a nice man </b>  <!--加粗,语气加强 -->
    
        <!-- 倾斜 -->
        <em>yichen is a good man</em> <br>
        <i>yichen is a cool man</i>

7,特殊符号&nbsp 空格符

        <!-- 特殊符号 -->
        <p>yichen&nbsp  &nbsp is a nice man</p> <!--空格符  -->
        
        <p>&gt;</p>      <!--&gt大于符号  >     -->
        <p>&lt;</p>        <!--&lt小于符号  <     -->
        <p>&quot;</p>    <!--&quot引号    "   -->
        <p>&copy;</p>    <!--&copy版权符号 ©  -->
    

8,图像标签<img>

常见的格式 jpg gif png bmp

    <!-- src="图片的路径" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" -->
        <img src="img/ding17.gif" alt="背景图" title="大背景图" width="160" height="160" />

9,链接标签<a href="">

    1.<!-- 链接标签 -->
        <hr/>                                      _self在本窗口打开,_blank新窗口打开
        <!--href="链接路径" target="目标窗口位置",常用值_self,_blank -->
        <a href="https://yichenxiu.com" target="_blank">逸尘秀</a> 
                     <!--链接图片也可以-->
        <a href="img/ding9.jpg" target="_blank">背景图</a>
                    <!-- 在链接标签内部还可以链接图片标签 -->
        <a href="https://yichenxiu.com" target="_blank"><img src="img/ding9.jpg" width="160" height="160" ></a>
    2.锚点
        <a href="#mao1">跳转锚点</a>
        <!-- 锚点 -->
        <a name="mao1">这是锚点</a>
        

10.列表<ul><li>

    列表的分类: 无序列表 有序列表 定义列表 
    <!-- 无序列表 -->
        <ul>
            <li type="disc"><a href="https://yichenxiu.com">逸尘秀1</a></li>
            <li type="square"><a href="https://yichenxiu.com">逸尘秀2</a></li>
            <li type="circle"><a href="https://yichenxiu.com">逸尘秀3</a></li>
            <li type="circle"> yichen is a good man </li>
        </ul>
        <ul type="square">
            <li ><a href="https://yichenxiu.com">逸尘秀1</a></li>
            <li ><a href="https://yichenxiu.com">逸尘秀2</a></li>
            <li ><a href="https://yichenxiu.com">逸尘秀3</a></li>
            <li > yichen is a good man </li>
        </ul>
    无序列表的类型
    disc    项目符号显示为实体圆心,默认值
    square  项目符号显示为实体方心
    circle  项目符号显示为空心圆
    
    <!-- 有序列表 -->
        <ol type="A">
            <li ><a href="https://yichenxiu.com">逸尘秀1</a></li>
            <li ><a href="https://yichenxiu.com">逸尘秀2</a></li>
            <li ><a href="https://yichenxiu.com">逸尘秀3</a></li>
            <li > yichen is a good man </li>
        </ol>
    有序列表的类型
    1        使用数字作为项目符号
    A/a        使用大写/小写字母作为项目符号
    I/i        使用大写/小写罗马数字作为项目符号
    
    <!-- 定义列表 -->
        
        <dl>
            <dt>学院1</dt>
            <dd>电子信息工程1</dd>
            <dd>电子信息工程111</dd>
            <dt>学院2</dt>
            <dd>电子信息工程2</dd>
        </dl>
     dl 声明定义列表 dt声明的列表项 标题 dd 表示定义列表项内容

4, 表格

1.表格的基本语法

<table align="center">    表格标签
<table align="center" border="1" cellspacing="0" cellpadding="1"> 
            <tr>
                <th>头部</th>       #th代表头部
                <th>姓名</th>
                <th>学生</th>
            
            </tr>
            <tr>                 行标签
                <td>第1行第一列</td> 单元格标签
                <td>第1行第二列</td>
                <td>第1行第三列</td>
            </tr>
            第2行
            <tr>
                <td>第2行第一列</td>
                <td>第2行第二列</td>
                <td>第2行第三列</td>
            </tr> 
            第3行
            <tr>
                <td>第3行第一列</td>
                <td>第3行第二列</td>
                <td>第3行第三列</td>
            </tr>
        </table>

<tr>     定义表格的行
<th>     定义表格的头部 需要被<tr>包裹
<td>     定义表格的单元,需要被<tr>包裹    

<thead>  定义表格的页眉,表格分组标签,可将表格分割
<tfoot>     定义表格的页脚,表格分组标签,可将表格分割
<tbody>  定义表格的主体,表格分组标签,可将表格分割
如果你使用thead,tfoot以及tbody元素,你就必须使用全部的元素,他们的出现次序是: thead、tfoot、tbody,这样浏览器就可以收获所有的数据

<caption> 定义表格标题

对齐方式
表格对齐方式
    默认对齐、居中对齐、左对齐、右对齐
单元格对齐方式
    水平对齐方式、垂直对齐方式
    
属性             值          说明
                left        左对齐
                center        居中对齐
align            right        右对齐
水平对齐方式 

                top         顶端对齐
vailgn            middle        居中对齐
垂直对齐方式        bottom         底端对齐
                baseline    基线对齐
                
border="2"            代表行与行之间的间距,数字越大间距越宽
cellspacing="4"     单元表格之间的空白
cellpadding="3"        代表文字与表格的间距,数字越大间距越宽
colspan ="value" 合拼列
rowspan ="value" 合并行

2,表格的跨行和跨列

<table>
    <tr>    行
                
                <td colspan="2">第一行第一列</td>  2代表占用2列
                <td>第一行第二列</td>
                
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td rowspan="2">第二行第三列</td>   2代表2行
            </tr>
            <tr>
                <td>第三行第一列</td>
                <td>第三行第二列</td>
                <!-- <td>第三行第三列</td> -->
            </tr>
</table>

colspan ="value" 合拼列
rowspan ="value" 合并行

二、CSS基础

1,css简介

CSS:Cascaang Style Sheets 层叠样式表,WEB标准中表现标准语言,主要对网页信息的显示进行控制
(修饰网页信息的显示样式)
css1 1996年  css2  1998年   css2.1  2004年  css3.0 2010年

2,CSS样式

1, 内部样式表
2, 外部样式表
3,内联样式表(行内样式、嵌入式样式)

1,内部样式表

语法:
<style type="text/css">
            /* CSS语句 */
        </style>
        
#注意:使用style标签创建样式时,最好将标记写在<heas> </head>;之间 

2,外部样式表

(1),创建外部样式表
创建css目录,
新建文件: xxx.css
@charset "utf-8";   头一行这样写,现在也可以不用写了,默认的就是utf-8

(2),导入外部样式表
方法1:
<link rel="stylesheet" type="text/css" href="css/style.css>  <!-- herf=""后面填写目标文件路径及文件名全称 -->

说明:使用link标签导入外部样式表时,需要将该元素写在文档的头部,即<head>与</head>中

方法2: 现在很少用这种方法了
<style type="text/css">
            @import url("./css/style.css");
        </style>

说明: @和import之间没有空格, url和小括号之间也没有空格;必须结尾以分号结束;

3,内联样式表(行内样式)

 语法:
 <标签  style="属性: 属性值 属性: 属性值">  </标签>
 或者:
 <标签  style="属性: 属性值 属性: 属性值"/>
 <p style="color: blue;">yichen is a nice  man </p>

4,样式的优先级

内联(行内)样式表优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高
        <!-- css内部样式 -->
        <style type="text/css">
            /* CSS语句 */
        </style>
        
        <!-- css外部样式调用 -->
        <link rel="stylesheet" type="text/css" href="css/style.css"/>  这个在后面,优先级就比前面的高,
        

3,CSS语法

0,CSS盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):
box-model.gif

不同部分的说明:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。

元素的宽度和高度

重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和边距。

下面的例子中的元素的总宽度为300px:

实例

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算:
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

1,语法

语法:
    selector {property:value;property:value;}
    selector表示选择器   property表示声明(属性和值)
    
说明:
    (1)每个css样式由3个部分组成, 选择器,属性 和值。
    (2)属性必须放在{}花括号中,属性和属性值用冒号连接。
    (3)每条声明用;分号结束。
    (4)当一个属性有多个属性值的时候,属性值与属性值不分先后顺序。
    (5)在书写样式过程中,空格,换行等操作不影响属性显示
    
    

2,简单属性的使用

其他属性参考css属性汇总

1. color: 颜色
    规定颜色值为颜色单词名称列如(red)或者十六进制的颜色列如(#ff0000)或者为rgb值的颜色列如(red(255,0,0))
2. width: 宽度
    设置标签的宽度值,值为数字:单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
    像素在浏览器中的概念:
        像素数决定标签或文字在浏览器中显示的大小或位置,页面中的最小计量单位为1px,即1一个像素,
3. height: 高度
    设置标签的宽度值,值为数字:单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
4. background-color: 背景颜色
    背景颜色:规定背景颜色值为单词的名称列如(red)或者十六进制的颜色列如(#ff0000)或者为rgb值的颜色列如(red(255,0,0))。
    可以为所有的标签设置背景色,这包括 body 一直到em和a等行内标签。

4,标签(元素)分类

标签从表面上分为单标签和双标签,单标签功能单一,不能嵌套,双标签功能多样化,可以嵌套。标签又分为块级元素和内联元素(行内元素),
(1) 块级元素(block-levelelements)  p标签,div标签,独占一行或几行
(2) 内联元素(行内元素、inlineelements)
(3) 内联块级元素(inline-block)

1,块级元素

1.块级元素在网页中就是(元素显示为矩形区域)的形式显示。
    常用的块元素: div、dl、dt、dd、ol、ul、li、fieldset、(h1-h6)、p、form、hr、colgroup、col、table、 tr、td等。
    
2.默认情况,块状元素都会占一行,通俗的说,两个相邻的块元素不会出现并列显示的现象;默认情况下,块状元素会按照顺序自上而下排列。

3. 块状元素都可以定义自己的宽度和高度,不设置宽度的时候,默认与父级元素一样宽。

4.块状元素一般都作为其他元素的容器,他可以容纳其他内联元素和其他块元素,我们可以把这种容器比喻为一个盒子。


<p>为段落标签,一般能用于装载段落文字,并且<p>标签中不可以包含块级标签。
h1-h6
<div>为最常用的结构标签,常能用于分割页面区域,以及功能模块。

(1),块级元素汇总

块级元素有:

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易,也是 css layout 的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1-大标题
  • h4 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容,(对于不支持 frame 的浏览器显示此区块内容
  • noscript - )可选脚本内容(对于不支持 script 的浏览器显示此内容)
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

2,内联元素(行内元素)

1.行内元素(内联元素)具有以下特点:

和其他元素都在一行上,直到一行排不下才会换行,宽度随元素内容变化;
高,行高及外边距和内边距不可改变;(设置宽度width无效,高度height无效,但可以设置line-height,设置margin只有左右有效,上下无效,设置padding左右有效,上下无效)
宽度就是他的文字或图片的宽度,不可改变;
内联元素只能容纳文本或者其他内联元素;
行内元素大多为描述性标记;

(1),内联元素汇总

行内元素有:

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体 ( 不推荐 )
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码 ( 在引用源码的时候需要 )
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定 ( 不推荐 )
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线 ( 不推荐 )
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器,定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

3,内联块级元素

1、内联块(行内块)级元素是块级元素和内联元素的混合体,inline-block元素设置宽度和高度,
2、内联快级元素属于内联元素,不会独占一行,而是会和其他inline元素和inline-block元素在同一行按左至右的顺序显示
3、常见的内联块级元素: img、textarea、input、select、iframe等。

内联块级元素的使用场合: 导航菜单

4,元素类型转换

display 属性
display: none; -- 让标签消失(隐藏元素并脱离文档流)
display: inline; -- 内联元素(内联表签)元素前后没有换行符
display: block; -- 块级元素(块级标签)
display: inline-block; -- 既有inline的属性也有block属性

5,行内块级元素案例 导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>导航栏</title>
        <style type="text/css">
            li{
                display: inline-block;
                width: 100px;
                height: 30px;
                background-color: #ff8888;
                font: 12px; /*设置字体的大小*/
                text-align: center; /*设置字体对齐方式*/
                line-height: 30px;/* 等于li的高度,可以让字体垂直居中*/
            }
            a{
                color: cornsilk;
                text-decoration: none; /*去线*/
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="https://www.yichenxiu.com"> 导航1</a></li>
            <li><a href="https://yichenxiu.com"> 导航2</a></li>
            <li><a href="#"> 导航3</a></li>
            <li><a href="#"> 导航4</a></li>
            <li><a href="#"> 导航5</a></li>
            <li><a href="#"> 导航6</a></li>
            <li><a href="#"> 导航7</a></li>
            <li><a href="#"> 导航8</a></li>
        </ul>
    </body>
</html>

下面是显示效果:
image-20200527005151793.png

5,页面布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>页面布局</title>
        <style type="text/css">
            /* *表示通配 */
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 700px;
                
                /* background-color: red; */
                margin: 0 auto;
            }
            #logo1{
                height: 100px;
                background-color: yellow;
            }
            #nav{
                height: 26px;
                background-color: red;
            }
            #main{
                height: 600px;
                
            }
            /* #leftMain{
                display: inline-block;
                width: 350px;
                height: 600px;
                background-color: blue;
            }
            #rifhtMain{
                display: inline-block;
                width: 350px;
                height: 600px;
                float: right; 不写这个也行,但是左右div的宽度加起来不能刚好等于700px
                background-color: pink;
            } */
            #leftMain{
                display: inline-block;
                width: 350px;
                height: 600px;
                background-color: blue;
            }
            #rifhtMain{
                display: inline-block;
                width: 345px;
                height: 600px;
                /* float: right; */
                background-color: pink;
            }
            #footer{
                height: 43px;
                background-color: deeppink;
            }
        </style>
    </head>
    <body>
        <!-- box -->
        <div id="box">
            <!-- logo部分 -->
            <div id="logo1">
                
            </div>
            <!-- nav导航 -->
            <div id="nav">
                
            </div>
            <!-- 广告 -->
            <div id="guanggao">
                
            </div>
            
            <!-- 主体 -->
            <div id="main">
                <div id="leftMain">
                    
                    
                </div>
                <div id="rifhtMain">
                    
                    
                </div>
                
            </div>
            
            <!-- 底部 -->
            <div id="footer">
                
            </div>
            
        </div>
        
    </body>
</html>

6,注释

html注释

<!--注释内容-->

css注释

/*注释内容*/

三、选择器的运用

1、css选择器

常用的:
(1)、元素选择器/标签选择器(element选择器)
(2)、id选择器
(3)、class选择器
(4)、*通配符(全局选择器)
(5)、交集选择器
(6)、并级选择器(群组选择器)
(7)、后代选择器(包含选择器)
(8)、子选择器
(9)、伪类选择器

1,标签选择器

语法:
    元素(标签)名称{属性: 属性值; 
                 属性2: 属性值;
            }
    列如: p{
        cocor: red;
        background-color: pink;
    }
说明:
    (1)标签选择器:以文档语言对象类型作为选择器,即使用结构中元素名称作为选择器,列如 body、div、p、img、em、strong、span等等
    (2)所有的页面元素都可以作为选择器

用法:
    (1)如果想改变某个元素的默认样式时,可以使用元素选择器
    (2)统一文档的某个元素显示效果是,可以使用元素选择器

2,id选择器

语法:
    #id名{
        属性: 属性值;
        属性2: 属性值;
    }
    
说明:
    (1)使用id选择器时,应该为元素定义id属性,如<div id="top"> </div>。
    (2)id选择器的语法格式:"#"加上自定义的is名称。
    (3)id名命名取英文名,不能使用关键字(所有的标记和属性都是关键字)如:head、body等标记。
    (4)一个id名称只能对应文档中的一个具体的元素对象。因为id只能定义页面中的某一个唯一的元素对象。
    (5)id选择器最大的用处:创建网页的外围结构。

3,class选择器

语法:
.class类名{
        属性: 属性值;
        属性2: 属性值;
    }
说明:
    (1)使用类选择器是,应该先为每一个元素定义一个类名称。
    (2)类选择器的语法格式是:
    <div class="top"> </div>
    .top{
        width: 200px;
        height: 500px;
    }
用法:
    class选择器更适合定义一类样式

注意:
    类名的第一个字符不能使用数字。它无法再Mozila或Firefox浏览器中起作用

4,*通配符(全局选择器)

语法:
    *{
        属性: 属性值;
         属性2: 属性值;
    }
说明:
    通配符的写法是"*",其含义就是所有元素/标签。
    
用法:
    常用来重置样式

示例:
    *{padding:0px ; margin: 0} #0可以不用写px。
    

5,交集选择器

语法:
选择器1选择器2{
        属性: 属性值;
        属性2: 属性值;
}

说明:
    用于选择同时有多个选择器匹配的元素
    第一种格式类似于:
        h1.center{
            color: red; text-align:center;
        } 
        这种格式有标签选择器和类选择器组成。
    第二种格式类似于:
        h1#center{
            color:red;
            text-align:center;
        }
两个选择器之间不能有空格,必须连续书写。
以上两种格式组成的选择器,也就是前者所定义的标签类型和后者的类或者id的元素,称之为交集选择器

6,并集选择器

语法:
    选择器1,选择器2,选择器3{
        属性: 属性值;
        属性2: 属性值;
    }
说明:
当有多个选择器应用同样的样式时,可以将选择器用"," 分隔,合并为一组。

7,后代选择器

语法:
    选择器1 选择器2{
        属性: 属性值;
        属性2: 属性值;
        }
说明:
    选择器1和选择器2用空格隔开,含义就是选择器1中包含的所有选择器2;

8,子选择器

语法:
选择器1>选择器2{
        属性: 属性值;
        属性2: 属性值;
        }
说明:
    选择器1和选择器2用>连接,含义就是选择器1中的所有子一级选择器2    

9,伪类选择器

语法:
a:link{color: red;}         超链接的初始状态;没有被访问过的超链接

a:visited{color: yellow;} 超链接被访问后的状态;

a:hover{color:blue;}        鼠标划过超链接时的状态;

a:active{color: pink;}        超链接激活时的状态,即鼠标按下时超链接的状态;

说明:
    (1) 当这4个超链接伪类选择器联合使用时,应注意他们的顺序,正常的顺序为: a:link、a:visited、a:hover、a:active;错误的顺序有时会使超链接的样式失效;
    (2) 为了简化代码,可以把伪类选择符中相同声明提出来放在a选择符中;
    例如: a{color:red;} a:hover{color:green;} 表示超链接的三种状态相同,只有鼠标划过时变颜色。

2、选择器的权重

说明:
在CSS中,会根据选择器的特殊性来觉定所定义的样式规则次序,具有更特殊的选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
CSS中用四位数字表示权重,权重的表达方式为如: 0,0,0,0,

    元素选择器/标签选择器的权重为0001
    class选择器的权重为0010
    id选择器的权重为0100   #这个权重比上面两个高
    属性选择器的权重为0010
    伪类选择器的权重为0010
    伪元素选择器的权重为0010
    包含选择器的权重:为包含选择器的权重之和
    子选择器的权重为0000
    群组选择器的权重为0000
    继承样式的权重为0000
    行内样式的权重为1000  #这个权重最高

比较时从高位到低位(A到D)分别比较,高位相同才需要比较低位

3、css3新增的选择器

1、属性选择器
2、结构伪类选择器
3、UI伪类选择器
4、其他选择器(兄弟元素选择器、否定伪类选择器、目标伪类选择器)

四、列表

1、列表css声明

CSS列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。
<style type="text/css">
            li{
                /* list-style: none url(img/favicon.ico) inside; */ 这种写法更简单
                list-style: none;
                list-style-image: url(img/favicon.ico);
                list-style-position: inside;
            }
        </style>

1.1 定义列表符号样式

通过取不同的list-style-type属性值,我们可以得到不同的项目符号。

例:

ul { list-style-type:disc;} /*实心圆*/
 
ul { list-style-type:circle;} /*空心圆*/
 
ul { list-style-type:square;} /*实心方块*/
 
ul { list-style-type:none;} /*不显示项目符号*/
 
ol { list-style-type:decimal;} /*阿拉伯数字*/
 
ol { list-style-type:lower-roman;} /*小写罗马数字*/
 
ol { list-style-type:upper-alpha;} /*大写英文字母*/

2、背景的css声明

属性描述CSS
background在一个声明中设置所有的背景属性。1
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-color设置元素的背景颜色。1
background-image设置元素的背景图像。1
background-position设置背景图像的开始位置。1
background-repeat设置是否及如何重复背景图像。1
background-clip规定背景的绘制区域。3
background-origin规定背景图片的定位区域。3
background-size规定背景图片的尺寸。3
1. 背景颜色
语法:
    选择器{background-color: 颜色值;}
    
2. 背景图片
语法:
    选择器{background-image: url(图片的路径及全称);}
说明:
    网页上图片有两种形式。也就是结构
    背景图:属于网页的表现,背景图上可以显示文字,插入图片,表格等,
    
3. 背景图片的显示原则和平铺属性
背景图片显示原则:
(1) 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
(2) 容器尺寸大于图片尺寸,背景图片将默认平铺,直到铺满元素;
(3) 容器尺寸小于图片尺寸,只显示元素范围内的背景图;

语法:
    选择器{
        background-repeat:no-repeat|repeat|repeat-x|repeat-y;
    }

    no-repeat  不平铺
    repeat        平铺
    repeat-x    横向平铺
    repeat-y     纵向平铺
    
4.背景图片的固定
语法:
   选择器{ background-attachment: fixed;}
   fixed
   inherit
   initial
   scroll
   unset 
   local
   这些是属性值,很少用
   
5.设置背景图像的开始位置。
     选择器{background-position}
     值有 水平方向上的对齐方式(left/center/rifht)
     垂直方向的对齐方式(top/center/bottom)

3、内容的显示和隐藏

(1),display:none 隐藏元素,该方式隐藏在页面不占位

(2), visibility: hidden,隐藏元素,改方式隐藏的元素在页面中占位

(3),border-radius: 100px; 以多少半径话圆

五、文本属性

1、文本css声明

1,文本样式的font属性
文本大小:font-size
文本字体:font-family
文本粗细:font-weight
文本倾斜: font-style
文本行高: line-height
文字属性font简写

2,文本样式的text属性

3,文本样式修饰的运用规范
4,文本添加阴影

六、表单

表单作用:收集用户信息

表单组成:

​ 1.表单域

​ 2.表单控件

​ 3.提示信息

1,表单域

语法:
<form 属性名称="值">
</form>

常用的属性:
    1, name = "值" :规定表单的名称
    2, action="值" :提交表格的url
    3, method="get/post" :提交方式,一般用post
    4,enctype = "值" :规定在发送表单数据之前进行的编码
    可能的值: "applivation/x-wwww-from-urlercoded" ,"mutpart/from-data", "text/plain"
    5,target="_black/_self/_parent/_top"  打开表单URL
    
H5新增属性
    1, autoconmplete = "on/off" :是否启动表单自动完成
    2, novalidate = "novalidate" 不验证表单
    
    

2,表单控件

1,文本框
    <input type="text" value="默认值">
    
2,密码框    
    <input type="password" placeholder="密码" />

3,提交按钮
    <input type="submit" value="提交" />

4, 重置按钮
    <input type="reset" value="重置"/>

5, 单选框/单选按钮
<input type="radio" name="dan" checked="checked" value="power"/> 单选框里面name的值需要一样
<input type="radio" name="dan" checked="checked" value="money" />

6, 按钮
    <input type="button" value="按钮内容" />

7, 复选框
            <!-- 复选框 disabled表示禁用-->
            <input type="checkbox" name="fu"  disabled="disabled" value="money1"/>
            <input type="checkbox" name="fu"  disabled="disabled" value="money2" />
            <input type="checkbox" name="fu"   value="money3" />
            <input type="checkbox" name="fu"   value="money4" />
    
8, 下拉菜单
            <select>
                <option value ="">北京</option>
                <option value ="上海">上海</option>
                <option value ="深圳">深圳</option>
            </select>

9, 多行文本
    <textarea rows="5" cols="20">
                
            </textarea>
    

3,表单高级

1,表单字位焦
<fieldset id="">
                <legend>信息页面</legend>
                
                
            </fieldset>
功能:相当于一个方框,在字段中可以包含文本和其他元素,该元素用于对表单中的元素进行分组并在文档中区别标出文本,fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象

2, 字段级标题
    <legend>信息页面</legend>
功能: legend元素可以在fieldset对象控制的方框内插入一个标题,legend元素必须是fieldset内的第一个元素

3, 表单元素
    (1) 上传文件框(文件域)
    <!-- 上传文件框  multiple 表示上传多个文件-->
    <input type="file" name=""  value="选择文件" multiple="multiple" />
    
    (2)  图像域
        <input type="image" width="100" height="100" value="" src="./img/favicon.ico" />
    
    (3) 提示信息标签
    <label for="ti1">信息</label>
            <input type="text" name="name" id="ti1" value="" placeholder="请输入信息"/>
            功能: label 元素用来定义标签,为页面上的其他元素指定提示信息,要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。
            label元素不会向用户呈现任何效果,不过,他为鼠标用户改进了可用性,如果在label元素内点击文本,就会触发此控件,就是说,当用户选择标签时,浏览器就会自动将焦点转到和标签相关的表达控件上。
        
     (4)时间
         <!-- 时间标签 -->
            <input type="date" name="" />
            
            <!-- 颜色 -->
            <input type="color" name="" />
            电话号码
            <input type="tel" name="" id="" value="" />
            
    等等还有很多,
Last modification:July 1st, 2020 at 02:53 am
如果觉得我的文章对你有用,请随意赞赏