【前端笔记】_bsvg-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67975940/article/details/125137599

本文详细介绍了HTML的基础标签，包括块级元素、内联元素、表格、表单、其他实用标签如iframe和SVG。同时，深入讲解了CSS样式，如颜色值、长度单位、盒模型、浮动和定位，以及如何使用CSS伪类选择器和属性选择器来控制文本和元素样式。此外，还涵盖了CSS在页面布局和响应式设计中的应用，如行内块转换和表格基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

编写软件：VS code

浏览器自动刷新插件：Live Server

浏览器快捷打开插件：Open In Browser 快捷键 alt+B

svg自动代码补全插件：SVG

实用软件：PxCook

<!DOCTYPE html>     <!--文档声明,解析html内容--> <!---->
<html lang="en">    <!--根元素-->
<head>      <!--头部标题-->
    <meta charset="UTF-8">      <!--设置编码字符集-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>      <!--页面标题-->
</head>
<body>          <!--内容-->
    
</body>
</html>

<body>          <!--内容-->
    
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>
    <p>段落标签</p>
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;    缩进一个字母的空格
        &emsp;&emsp;&emsp;&emsp;    缩进一个汉字的空格
    </p>
    <p align = center>文字居中属性</p>  <!--align 属性名：对齐方式 center 属性值 ：居中-->

    <img src="cc.png" alt="老师"    title="老师照片">      <!--图片标签    属性名：src（sourse） 图片地址(相对地址/绝对地址)    属性名：alt 破损图片文本提示 属性名：title 图片标题名-->

    <a href="链接地址">链接名</a>   <!--a（anchor）锚点标签 外部链接    href（Hypertext Reference   超文本引用）-->
    <p id="123"></p>
    <a href="#123"></a>     <!--a（anchor）锚点标签 内部跳转链接-->

    <!-- 修饰文本标签 -->       <!---->
    <b>加粗 （bold ）</b>     <strong>增强显示(加粗)</strong>     <!--strong加重语气-->
    <i>倾斜（italic）</i>     <em>强调倾斜（empnasize）</em>    <!--em 增加爬虫搜索--> 
    <s>删除线文本（strike）</s>       <del>删除线文本（delete）</del>    <!--html5已不支持s标签-->
    <u>文本下划线（underline）</u>  
    <sub>下角标标签（subscript）</sub>    <sup>上角标标签（superscript）</sup>

    <!--列表标签-->     <!---->
    <ol type="A" start="1">    <!--order list 有序列表    注意，ol只能嵌套li-->   <!--type 属性：A a（英文字母顺序）I i （罗马数字顺序）1（阿拉伯数字）start 属性 设定从第几个顺序开始-->
        <li>--内容--</li>       <!--list item   列表-->
    </ol>

    <ul type="">    <!--unorder list 无序列表    注意，ul只能嵌套li-->      <!--type属性：  disc 默认   circle 圆圈    none 隐藏项目符   square 方块-->
        <li>--内容--</li>   
    </ul>

    <dl>         <!--definition list 自定义列表     注意，dl只能嵌套dt和dd-->
        <dt> </dt>   <!--definition term 自定义术语-->       <!--dt和dd不能脱离使用-->
        <dd></dd>     <!--definition description 自定义描述-->
    </dl>

</body>

快速创建标签小技巧（Emmet）

标签名{标签文本内容}+tab或回车键自动代码补全

创建多个相同标签并且标签里面有文本

标签名${标签内容$}*n $为自动排序 n为标签个数

嵌套结构标签

父标签名>子标签名{子标签文本内容}*子标签重复次数

父标签名*子标签重复次数 >子标签名{子标签文本内容}

表格基础

快捷键 alt+鼠标左键，增加光标· ctrl+alt+方向键，向不同方向增加光标

crtl或alt+鼠标中键，光标增加列

选中标签内容按住 ctrl+d 会自动全选相同内容

 <!--列表标签-->
    <!---->
    <ol type="A" start="1">
        <!--order list 有序列表    注意，ol只能嵌套li-->
        <!--type 属性：A a（英文字母顺序）I i （罗马数字顺序）1（阿拉伯数字）start 属性 设定从第几个顺序开始-->
        <li>--内容--</li>
        <!--list item   列表-->
    </ol>

    <ul type="">
        <!--unorder list 无序列表    注意，ul只能嵌套li-->
        <!--type属性：  disc 默认   circle 圆圈    none 隐藏项目符   square 方块-->
        <li>--内容--</li>
    </ul>

    <dl>
        <!--definition list 自定义列表     注意，dl只能嵌套dt和dd-->
        <dt> </dt>
        <!--definition term 自定义术语-->
        <!--dt和dd不能脱离使用-->
        <dd></dd>
        <!--definition description 自定义描述-->
    </dl>

    <!--表格标签-->
    <!---->
    <table border=1 width=500 height=150 cellspacing="0" cellpadding="0" align="center" valign=top bgcolor="red"
        bordercolor="black">
        <!--border 定义线条粗细    width 定义表格高度  height  定义表格宽度  cellspacing 定义单元格之间距离  cellpadding 定义单元格边框和文本之间的距离
        align   单元格文字左右对齐方式  valign  上下对齐方式  top/middle/bottom/baseline     bgcolor    表格背景色  bordercolor 表格线框色-->
        <tr>
            <!--行属性也能设置，优先级次高 行无宽度属性-->
            <th></th>
            <!--单元格属性也能设置  优先级最高-->
            <th></th>
            <th></th>
            <th></th>

        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <hr>
    <table border=1>
        <!--表格合并-->
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td rowspan="3">合并第二行</td>
            <td>单元格</td>
            <!--列合并-->
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>

        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>

        </tr>
        <tr>
            <td>单元格</td>
            <td colspan="3">单元格</td>
            <!--colum span   行合并-->
        </tr>

    </table>

    <table border="1"  align="center" width="600"   bgcolor="#cde7ed" cellspacing="0" cellpadding="0" bordercolor="#ffffff">
        <!--表格分组-->
        <!---->
        <caption> 标题标签 </caption>   <!--设置表标题-->
        <colgroup   span="1"    bgcolor="#91c5d4"></colgroup>     <!--列分组标签     第一列分组-->
        <thead>
            <!--表头标签-->
            <tr>
                <th rowspan="2">序号</th>
                <th colspan="6">--内容--</th>
                         
            </tr>
            <tr>
                <th>--内容--</th>
                <th>--内容--</th>
                <th>--内容--</th>
                <th>--内容--</th>
                <th>--内容--</th>
                <th>--内容--</th>
            </tr>
        </thead>
        <tbody>
            <!--表身标签-->
            <tr>
                <td>--内容--</td>
                <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>
                <td>--内容--</td>
            </tr>
            <tr>
                <td>--内容--</td>
                <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>
                <td>--内容--</td>
            </tr>
            <tr>
                <td>--内容--</td>
                <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>
                <td>--内容--</td>
            </tr>
        </tbody>
        <tfoot>
            <!--表尾标签-->
            <tr bgcolor="#d7e1c5">
                <th bgcolor="B0cc7f">--内容--</th>
                <th colspan="6">--内容--</th>
                
            </tr>
        </tfoot>
    </table>

颜色值表示

十六进制颜色表示

rgb颜色表示

长度单位表示

绝对长度单位：固定，表示的长度会显示设置的尺寸

厘米、毫米、英寸（in）、px

高分辨率1px为多个像素

相对长度单位：指相对于一个长度计算出来的长度，一般用来适配不同的设备

百分比（%）

块级元素和内连元素

显示值：块元素（block-level 块）行内元素（inline 内联）

块级元素独占一行 <p></p> <h1><h6> <ol><ul><li><dl><dt><dd>

div标签 div意为分块，是个2盒子，容器内部都居中了

<div    align="center">
        <p>你好</p>
        <p>世界</p>
    </div>

内联元素不会独占一行只占用必要的宽度

范围内联标签，代替b标签 <span></span> 注意：内联元素里不能嵌套块级元素

 <b  title="inline">加粗显示</b><p></p>
    <span   title="inline">内联显示部分内容</span>  <!--不加粗，鼠标划过，显示文本内容--> <p></p>

表单（采集用户信息）

分组控件

单行文本框控件

多行文本框控件

单选框控件

多选框控件

下拉框控件

文件选择控件

普通按钮控件

自定义按钮控件

表单使用form定义

鼠标定位当前行

按住alt+shift不放，按几次下方向键复制几次

<!--表单标签--> <!---->
    <form action="">
        <label for="001"> 输入练习： <input type="text" id="001"></label>  <!--增强选择和显示 for 属性内容为关联的控件id-->
        <br>
        请输入用户名：<input type="text">       <!--单行文本框控件  普通文本框--> 
        <br>
        请输入密码：&nbsp;&nbsp;  <input type="password">     <!--单行文本框控件  密码文本框-->   <!-- 属性值 type = password 输入内容被屏蔽-->
        <hr>
        请输入详细地址：    
        <textarea name="" id="" cols="30" rows="10"></textarea>  <!--多行文本框控件-->  <!--cols 30：指定文本区域指定宽度为30   rows 10：指定文本区域可见行数为10-->
        <hr>
        请输入取值：<input type="radio" name="gender" checked>   男 <input type="radio" name="gender"> 女   <!--单选按钮取值控件 type=radio -->  
           <!--name分组，同组控件内容一致 cherked 设置默认选中-->
        <br>
        请输入取值：<input type="checkbox" name="choice">  A  <input type="checkbox" name="choice"> B 
          <input type="checkbox" name="choice"> C  <input type="checkbox" name="choice"> D <!--多选按钮取值控件 type=checkbox-->  
            <!--name分组，同组控件内容一致 checked 设置默认选中--> 
        <br>
        出生日期：
        <select name="" id=""   multiple>   <!--下拉菜单标签    multiple 多个选择值-->
           <option value="" >1991</option>   <!--下拉选项 selected 设置默认选中-->
           <option value="">1992</option>
           <option value="" selected>1993</option>
           <option value="">1994</option>
           <option value="">1995</option>
           <option value="">1996</option>
           <option value="">1997</option>
           <option value="">1998</option>
           <option value="">1999</option>
        </select>
        <br>
        <select name="" id=""   multiple size="8">  <!--下拉菜单标签    size=8 设置可见值为8-->
            <option value="">音乐</option>
            <option value="">电影</option>
            <option value="">短视频</option>
            <option value="">游戏</option>
            <option value="">漫画</option>
            <option value="">盲盒</option>
            <option value="">小说</option>
            <option value="">前段</option>
            <br>
            附件：
            <input type="file">  <!--文件选择控件-->
           只读： <input type="text" readonly value="只能复制此内容">    <!--文本控件设置只读属性 readonly： 值为默认值： value-->
           <br>
           禁用：<input type="radio" disabled>  保密
        </select>
    </form>
    <br>
    <!--分组标签--> <!---->
    <fieldset>  <!--字段集（表单控件分组）-->
        <legend> 标题标签</legend>   <!--说明   给组框定义标题-->
        用户名：<input type="text">
        密码：<input type="password">   
    </fieldset>
    <hr>
    <!--按钮标签-->
    <form action="" target="_blank">    <!--action 行动：，表示点提交后表单要执行的内容，值通常为服务器地址，不定义action，则默认当前页面为地址值-->
        <!--target: 保留输入内容值不刷新，可以为：_blank/_self-->
        姓名：<input type="text"> <br>
        邮箱：<input type="text">   <br>
        提交：<input type="submit"  value="注册">  <!--提交按钮   type=submit-->  
        重置：<input type="reset">  <!--提交按钮   type=reset-->  
            <input type="button"  value="普通按钮">  <!--普通按钮   type=reset-->  
        <br>
        图像按钮    <input type="image" src="cc.png"    width="30" height="30">   <!--图像按钮 （提交方式变为点击图像） type=image    src：图片地址-->

        <button>button按钮</button> <!--双标签button按钮默认有提交属性，若增加属性为button，那么提交表单的功能会消失-->
        <button type="button"> 提交消失</button>   

    </form>

<form action="服务器地址" method="post">     
        <!--method属性：get：默认值，浏览器会把收集好的表单数据，加入到服务器地址的后面，提交给服务器 post： 不但能收集表单数据，而且不会在地址栏里暴露隐私数据。--> 
       
        手机号：<input type="text" name="pnumber"><br>
        密码框：<input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>

其他实用标签

   <!--其他实用标签-->     <!---->
    <hr width="300" size="10px" noshade="" color="red"    align="left" >   <!--水平线标签-->
     <!--width/size ：分别控制水平线的宽度和高度  noshade：用来去掉水平线阴影   color：用于定义水平线的颜色 align：用来调整水平线的水平对齐方式-->
    <br>

    <pre>     <!--preformatted 预格式化的文本   按照源代码内容显示-->
        床前明月光，
        疑是地上霜。
        举头望明月，
        低头思故乡。
    </pre>
    <br> <!---->
    <map name="">     <!--图片映射标签  name属性与图片usemap属性对应-->
        <area shape="" coords="" href="" alt="" coords=""><!--热点区域标签-->
         <!--herf：用来定义热点区域链接的目标地址 shape： 用来定义区域的形状（rect：矩形 circle：圆形 poly：多边形） coords：用来定义可点击区域坐标（原点为图片左上角
            需要与shape搭配：poly x1，y1，x2，y2，x3，y3，x4，y4 circle x1,y1,o1）-->
    </map>
    <img src="cc.png" alt=""    usemap="#teacher">
    <map name="teacher">
        <area shape="rect" coords="0,0,110,220" href="dd.png" alt="">
        <area shape="circle" coords="129,161,10" href="ee.png" alt="">
    </map>

iframe 内联框架元素

 <hr><!--内联框架元素-->
    <iframe src="http://qfedu.com/" frameborder="1" width="800" height="600" scrolling="auto"   name="iframe_a"></iframe>
    <!--src：资源地址 width 引入页面宽度 height 引入页面高度 frameborder：框架边框粗细 scrolling：滚动条是否包含    auto/yes/no-->
    <div>
        (a[href target=iframe_a]>b)*3   <!--emmet语法-->
        <a href="http://qfedu.com/" target="iframe_a"><b> 千峰教育  </b></a>
        <a href="http://qfedu.com/html5/" target="iframe_a"><b> 千峰五大前端  </b></a>
        <a href="https://www.bilibili.com/video/BV1oU4y1278g?p=43&vd_source=0dbe9423fd8d597c15808467a3863e8f" target="iframe_a"><b>  b站好程序员 </b></a>
    </div>

SVG

Scalable Vector Graphics 可缩放矢量图

svg属于对图像的形状描述本质上为文本文件，体积较小

 <!--svg矢量图元素-->  <!---->
    <svg    width="800" height="600"></svg>  <!--定义矢量图画布大小-->

svg绘制图形

<!--svg绘制图形-->
    <svg width="400" height="200">
        <rect   width="100" height="20" fill="red" stroke-width="inherit" stroke="blue" x="100" y="100" fill-opacity="0.5" stroke-opacity="0.5"/>  <!--矩形-->
         <!--width：定义矩形的宽度 height：定义矩形的高度 fill：定义矩形的填充颜色 stroke-width：定义矩形的边框宽度 stroke：定义矩形边框的颜色-->
          <!--x：定义矩形左边位置 y：定义矩形右边位置 fill-opacity：定义填充颜色不透明度（0-1）stroke-opacity:定义描边元素不透明度-->
        
    </svg>
    <br>
    <svg width="400" height="200">
        <rect width="100" height="100"  x=50 y=50 opacity="0.2" rx="10" ry="10" /> <!--opacity：定义整个元素不透明度大小 rx/ry:圆角(rx!=ry圆角为椭圆)大小-->
    </svg>

    <br>
    <svg width="400" height="200">  <!--定义圆标签-->
        <circle   cx=50 cy=50  r=40  stroke="black" stroke-width="5" fill="red"/> <!--cx，cy ：圆形坐标 r： 半径-->
    </svg>
    <br>
    <svg width="400" height="200">  <!--定义椭圆标签-->
        <ellipse  cx=50 cy=50  rx=40 ry="20" stroke="purple" stroke-width="5" fill="yellow"/> <!--cx，cy ：椭圆圆心坐标 rx/ry： 水平垂直半径--> 
    </svg>

svg绘制多段线

<br> <!--定义多线段-->
    <svg    width="500" height="250">
        <polyline  points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"   stroke="black" stroke-width="5" fill="none"/>     <!--多段线-->
    </svg>

svg绘制文本

 <br>     <!--绘制文本--> <!---->
    <svg   width="500" height="250" >
        <text x="0" y="15" text-anchor="start" font-size="20"  fill="red" transform="rotate(30 20,40)">I love SVG!</text>
        <!--x/y 文本起点坐标（文本下面）text-anchor：定义坐标在文本位置（start：开头 middle：中间 end：末尾）font—size：文本高度 transform：定义文本变换（rotate(30 20,40)：旋转30度，基点为20,40）-->
    </svg >
    <br> <!--tspan属性：增加不同格式文本-->
    <svg    width="500" height="250">
        <text   x="20" y="30">
            severalline
            <tspan x=0 y="15">oneline</tspan>            
            <tspan x=10 y="70">twoline</tspan>            
        </text>  <!--多段线-->
    </svg>

svg增加文本链接

 <br> <!--增加text链接-->
    <svg    width="500" height="250" xmlns:xlink="http://www.w3.org/1999/xlink">
       <a xlink:href="https://www.bilibili.com/video/BV1oU4y1278g?p=47&spm_id_from=pageDriver&vd_source=0dbe9423fd8d597c15808467a3863e8f" target="_blank">
        <text   x="20" y="30">  b站好程序员</text>  <!--text链接-->
       </a>
    </svg>

svg绘制路径

 <br> <!--svg绘制路径--> <!---->
    <svg    width="400" height="210">
        <path d="M150 0 L75 200 L225 200" />    <!--path:路径   d为定义绘制路径命令（draw） M（moveto）：（x,y） L(lineto):路径点 ML 大写代表绝对定位，小写代表相对定位-->
    </svg>
    <br> <!--svg绘制贝塞尔曲线--> <!---->
    <svg    width="400" height="400">
        <path d="M100 350 q 150 -300 300 0" />    <!--q：quadratic Nezier curve 二次贝塞尔曲线 需定义控制点和终点的坐标-->
    </svg>
    <br> <!--svg g标签包裹公共属性--> <!--贝塞尔曲线辅助绘制-->
    <svg    width="450" height="400">
        <path d="M 100 350 l 150 -300 " stroke=red stroke-width="3" fill="none"/>
        <path d="M 250 50 l 150 300 " stroke=red stroke-width="3" fill="none"/>
        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
        <path d="M100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none" />
        <g  fill="black"><!--三个小圆点-->
            <circle cx="100" cy="350" r="3"/>   
                <circle cx="250" cy="50" r="3"/>   
                <circle cx="400" cy="350" r="3"/>   
        </g>
        <g font-size="30"   fill="black" text-anchor="middle">
            <text x="100" y="350" dx="-30">A</text>
            <text x="250" y="50" dx="-10">B</text>
            <text x="400" y="350" dx="-30">C</text>

        </g>
    </svg>

SVG描边属性

<br> <!--svg描边属性-->      
    <svg     width="300" height="80">
        <g fill="none"> <!--描边颜色-->
            <path stroke="red" d="M5 20 l215 0"/>
            <path stroke="black" d="M5 40 l215 0"/>
            <path stroke="blue" d="M5 60 l215 0"/>
        </g>

    </svg>
    <svg     width="300" height="80">
        <g fill="none" stroke="black"> <!--描边宽度-->
            <path stroke-width="2" d="M5 20 l215 0"/>
            <path stroke-width="4" d="M5 40 l215 0"/>
            <path stroke-width="6" d="M5 60 l215 0"/>
        </g> 

    </svg>
    <svg     width="300" height="80">
        <g fill="none" stroke="black" stroke-width="6"> <!--线帽属性-->
            <path stroke-linecap="butt" d="M5 20 l215 0"/>
            <path stroke-linecap="round" d="M5 40 l215 0"/>
            <path stroke-linecap="square" d="M5 60 l215 0"/>
        </g> 

    </svg>
    <svg     width="300" height="80">
        <g fill="none" stroke="black" stroke-width="4"> <!--虚线属性 内容为虚线打断长度-->
            <path stroke-dasharray="5,5" d="M5 20 l215 0"/>
            <path stroke-dasharray="10,10" d="M5 40 l215 0"/>
            <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"/>
        </g> 

    </svg>

svg模糊和阴影效果

    </svg>
       <br> <!--svg 高斯模糊--> <!---->
    <svg width="110" height="110">
        <defs>      <!--definitions-->
            <filter x="0" y="0" id="f1">    <!--filter ：过滤器 id属性：识别过滤器-->
                <feGaussianBlur stdDeviation="15"/>     <!--高斯模糊滤镜 stdDeviation：定义模糊数量-->
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)">
    </svg>
    <br> <!--svg 阴影--> <!---->
    <svg width="140" height="140">
        <defs>      <!--definitions-->
            <filter x="0" y="0" width="200" height="200" id="f2">    <!--filter ：过滤器 id属性：识别过滤器-->
               <feoffset dx="10" dy="10" in="SourceAlpha"/>    <!--偏移滤镜 dx/dy:偏移量 in:阴影来源（sourceAlpha：黑色阴影 sourceGraphic：原始图像为来源）-->
               <feGaussianBlur stdDeviation="5"/>    <!--模糊顺序不能放反-->
               <feBlend in="SourceGraphic"/>
              
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)">
    </svg>

svg线性渐变和径向渐变

<br> <!--svg 渐变--> <!---->
    <svg width="400" height="150">
        <defs>      <!--definitions-->
            <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1"> <!--表示水平渐变-->
                <stop offset="0%" stop-color="rgb(255,255,0)"/> <!--offset 设置渐变颜色及相对位置-->
                <stop offset="100%" stop-color="rgb(255,0,0)"/>
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" >
    </svg>
    <br> <!--svg 渐变--> <!---->
    <svg width="400" height="150">
        <defs>      <!--definitions-->
            <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grad2"> <!--表示垂直渐变-->
                <stop offset="0%" stop-color="rgb(255,255,0)"/> <!--stop属性：设置渐变颜色 offset 设置渐变颜色及相对位置-->
                <stop offset="100%" stop-color="rgb(255,0,0)"/> 
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2 )" >
    </svg>
    <br> <!--svg 渐变--> <!---->
    <svg width="500" height="150">
        <defs>      <!--definitions-->
            <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad3"> <!--表示径向渐变 cxcy代表最外面的圆 fxfy代表最里面的圆-->
                <stop offset="0%" stop-color="rgb(255,255,255)"/> <!--stop属性：设置渐变颜色 offset 设置渐变颜色及相对位置 0%表示从圆心开始-->
                <stop offset="100%" stop-color="rgb(0,0,255)"/> 
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3 )" >
    </svg>

CSS样式

Cascading Style Sheets 层叠样式表

用于描述HTML元素在屏幕、纸张或其他媒体上的显示方式

CSS规则

选择器：需要定义样式的html元素

声明块：包含一个或多个声明，在大括号内，每个声明包括一个css属性名和值，用冒号隔开

每个声明之间用分号隔开注意：属性名和属性值中间为一个整体，中间不能有空格和换行！

  <title>Document</title>  <!--在标题下面新增style标签，内部写入css语句-->
    <!--页面标题-->
    <style>
        p {
            color: brown;
            text-align: center;
        }
    </style>

行内样式为内联样式

<body>
    <!-- 行内样式 -->
        <h1 style="color:blue;text-align:center;">程序员想跳槽，什么公司不能去？</h1>
        <p  style="color: #76c0d1;">
            一个公司好的HRBP代表的公司的形象，HRBP做的好可以提高offer的接受率，增加员工幸福感，减少员工的离职率，但博主碰到的一个公司的HRBP却给人留下一种坏印象，一种公司和员工是雇主和员工的印象，还动不动套路员工，哎算了，心中的痛。
        </p>
</body>

CSS选择器

元素选择器

根据元素名称来选择html元素

内部样式解决了行内样式（内联样式）代码分离的问题

  <!-- css内部样式 -->
    <style> 
       
        body {
            background-color: linen;
        } 
        /* css设置页面背景颜色为亚麻色 */
        h1 {
            color: maroon;
            margin-left: 40px;    /* 定义标题元素位于父容器左侧40个像素的距离 */
        }
        /*  */
        p {
            color: seagreen;
            text-align: center;
        }
    </style>

也有弊端：1.只能作用于一个页面。

2.随着代码编辑量的增加，需要不断滚动屏幕增加样式

外部样式：将css代码放在一个独立的.css文件中，需要css样式。

优先级

内联样式高于外部样式和内部样式，

内部样式和外部样式优先级按照最后读取优先级高

默认样式优先级最低

简单选择器

根据元素名称，ID名称，类别选择元素

<style>

        /* (*) 通用选择器 给全局添加样式*/

        * {
                background-color: yellow;
        }
       html, body {
    background-color: lightblue;
}
/* 两组样式定义用空行分隔 */
h1 {
    color: navy;
    margin-left: 20px;
}
p {
    color: red;
}
/* ID选择器 */
#para {
    text-align: center;
}
/* 类选择器 */
/* .italic {
    font-style: italic;
   
} */
/* 将p元素名称加在前面。选择的类更具体 */
p.deco {
    text-decoration: underline;  
}
/* 分组选择器 ，隔开元素*/
 h1,#para {
    font-style: italic;
 } 
    </style>

组合选择器

后代选择器：匹配作为指定元素后代的所有元素

子选择器：只能选择作为某元素的子元素，不能选择到孙辈的元素

 <style>
        /* 后代选择器 div空格元素 ：匹配作为指定元素后代的所有元素*/
        div h3 {
            color: blue;
        }
       div li p {    /* div的后代li的后代p为蓝色 */
           color: blue;
       }
       /* 子选择qi */
       div>p {
           color: red;  /* div的子代的第一类p为红色 */
       }
      
    </style>


<body>
    <h1 >去哪里就业好呢</h1>
    <div>
        <h3>你好啊</h3>
        <p> 哈哈哈哈哈哈</p>
        <p >呵呵呵呵呵</p>
       
        <ol>
            <li>
                <p>嘻嘻嘻嘻</p>
                </li>
        </ol>
    </div>

</body>

CSS伪类选择器

伪类选择器属于类选择器中的一种，根据特定状态选取元素

状态	格式	备注
鼠标点击前	:link
鼠标点击后	:visited
鼠标悬停时	:hover
鼠标点击时	:active

注意：

1.冒号和后面的鼠标行为，没有任何空格，必须连接在一起；

2.四个伪类选择器必须按照以上介绍的顺序书写(:link,:visited,hover,active)，否则在浏览器中部分样式不能实现；

3.伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会独立使用在其他标签上面。

  <style>
      a:link {
          color: red;
      }
      a:visited {
          color: green;
      }
      a:hover {
          color: yellow;
      }
      a:active {
          color: skyblue;
      }
      div {
          width: 200px;
          height: 200px;
          background-color: skyblue;
      }
      div:link {
          color: red;
      }
      div:visited {
          color: green;
      }
      div:hover {
          color: yellow;
      }
      div:active {
        width: 100px;
          height: 100px;;
      }
    </style>
</head>

<body>
<a href="#">王者英雄最强出装</a>
  <div>
      普通div标签
  </div>
</body>

css伪元素选择器

/* 伪元素选择器 */
      /* 设置第一行元素样式 */
      div::first-line{
            color: blue;
            font-size: 30px;
      }
      /* 向前插入样式 */
      div::before {
        content: "我是向前添加";
        font-size: 30px;
      }
      /* 向后插入样式 */
      div::after {
        content: "我是向后添加";
        font-size: 30px;
      }
      /* 鼠标选中样式 */
      div::selection{
        color: brown;
        background-color: skyblue;
      }

注意：selection伪元素现择其只支持以下几个样式声明：color（文本颜色），background（背景），cursor（鼠标样式），outline（描边效果）

CSS属性选择器

四种属性：

注意：该属性值只能有一个，不能有多个

简单选择器和组合选择器，可以完成元素的查找。

其他选择器可以更加精准高效地查找元素，从而能提高我们编码速度。

属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多。

 [type] {
        width: 20px;
        height: 20px;
     }
     [name=sex] {
        width: 30px;
     }
     [class|=box] {
        background-color: blue;
     }

CSS文本

CSS文本颜色和大小写转换

body {
   color: rgb(red, 0,0);
   /* 一个页面的默认文本颜色是在body选择器中定义的 */
}
h1 {
    color:blue; /* 标题文本颜色 */
}
/*段落文本颜色  */
p.transform {
     text-transform:uppercase; /* 字母全大写*/
     text-transform:lowercase; /* 字母全小写*/
     text-transform:capitalize; /* 首字母大写*/

}

CSS设置文本对齐和文本间距

line-height设置行高为基线 line-height设为1等于没有行距

p {
    /* 文本对齐方式 水平*/
    text-align: center;
    text-align: left; 
    text-align: right;
    text-align: justify;
    /* 每一行都被拉长类似报纸排版 */
}
p {
    /* 文本对齐方式 垂直    基于四线三格*/
    vertical-align: baseline; /*基线 倒数第二行对齐*/
    vertical-align: text-top;
    vertical-align: middle;
    vertical-align: bottom;
    vertical-align: super;
}

p {
    /* 文本间距 */
    text-indent: 2em;     /*用于设置文本首行缩进 空两个 em：字符倍数*/
    letter-spacing: 10px;   /* 用于指定中文文字或英文字母之间的空隙 */
    font-size:medium;         /* 设置中文字体大小 */
    line-height: normal;   /*用于指定行与行之间高度 normal:默认值 数字：几倍倍当前字符 绝对值：20px*/
    word-spacing: normal;    /* 用于指定 文本中单词的间距，只对英文有效*/
    white-space:nowrap;  
    /*指定了如何处理元素内部的空白 nowrap:不管包含文本的元素宽度为多少，文本都不会换行，直到遇见<br>标签为止 */
}

CSS文本装饰

p {
    /* 文本添加下划线*/
    text-decoration-line:overline;
    /* overline在文本上方添加 line-through在文本中间添加线条修饰 underline 文本下方*/
    text-decoration-line: overline underline; /*可同时添加  */
   
    /* 定义下划线厚度 */
    text-decoration-thickness: 50%;
    /* auto：默认值 px：绝对值 %：相对值*/

     /*定义下划线的颜色 */
     text-decoration-color: azure;

     /* 定义下划线风格  */
      text-decoration-style: solid ;
      /* solid：实线 double：双实线 dotted：圆点线 dashed 虚线 wavy 波浪线 */

    /* 简化写法 */
    text-decoration: underline red double 5px;
    /* 分别对应：line color style thickness  无顺序要求，但必须设置underline*/
    text-decoration: none;  /*去除下划线*/
}

CSS设置字体和字号

p {
    /* 定义字体名称  英文五类字体*/
    font-family: 'Courier New', Courier, monospace; 
    /* Serif：有衬线字体    Sans-serif：无衬线字体  Monospace：单空格字体（等宽字体）*/
    /* Cursive： 草书字体   Fantasy：幻想字体*/
    /* ，隔开可防止电脑无字体，增加备用字体 */

    /* 设定字体大小     绝对 px 相对 em % 相对父元素继承的大小*/
    font-size: 20px;
    font-size: rem; /*继承根元素（html元素）*/
}

CSS设置字体风格和样式

p {
    /* 设置字体倾斜 */
    font-style: normal;
    /* normal：正常显示 itialic：意大利倾斜 oblique：倾斜（浏览器支持度较低）*/

    /* 指定字体粗细*/
    font-weight: 100;
    /* 名称： lighter 细体 normal 正常 bold 加粗 bolder 更粗 对应1479*/
    /* 数值：100 200 300 400 500 600 700 800 900 */
 
    /* 小型 大写字母显示*/
    font-variant: small-caps; /*normal/small-caps*/

    /* 可一次全定义，但字体大小和字体名称必须的 */
    font: oblique 100 small-caps 30px/30px 华文仿宋;
    /* style variant weight font-size/line-height family*/
    
}

CSS谷歌字体和Icon图标

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong&effect=neon|outline|fire|shadow-multiple">
    <link rel="stylesheet" href="mystyle.css">

p.a {
    font-family:"Sofia",Serif;
}
p.b {
    font-family:"Audiowide",sans-serif;
}
p.c{
    font-family:"Trirong" ,sans-serif;
}

|:设置或者类别 &设置其他样式

icon图标可以当成字体添加样式

 <title>Document</title>
    <link rel="stylesheet" href="引用谷歌字体地址">
    <link rel="stylesheet" href="mystyle.css">
    <!-- 引用图标库代码 -->
    <script src="图标代码" crossorigin="anonymous"></script>
</head>
<body>
    <p>
        <i class="fas fa-cloud" style="color: red;"></i>
    </p>
</body>

图标网： iconfont-阿里巴巴矢量图标库

在线ps网站：稿定【在线PS】PS软件网页版，ps在线图片处理工具photopea-稿定设计PS (gaoding.com)稿定

icon图标使用

iconfont字体图标的使用 - 发闪电 - 博客园 (cnblogs.com)

CSS选择器的权重

优先级

计算权重：

补充

块行内行内块

显示模式转换

  /* 转成块 */
    display: block;
    /*转成行内块  */
    display: inline-block;
    /* 转成行内 */
    display: inline;

元素显示规范

CSS特性

继承性

控制文字属性的都能继承，不是控制文字的都不能继承

继承失效情况

即自有的特性一般不继承

层叠性

优先级

  color: blue !important;

权重叠加计算

盒子模型

内容区：蓝色

Emmet 快捷输入：W400+H400+bgc Tab键

注意，边框会撑大盒子尺寸！

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

新浪导航案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            
        }
        .box a {
            
            /* padding：可变盒子大小 省略width*/
           padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上，可以清楚看到文字在什么位置 */
            /* background-color:#edeef0; */
            display: inline-block;
            font-size: 12px;
            text-align: center;
            line-height: 40px;   /* line-height 属性设置行间的距离（行高） */
           
            color:#4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }

    </style>
    <!-- 从外到内原则：先宽高和背景色，再放内容，调节内容的位置，控制文字的细节  -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>

    </div>
</body>
</html>

页边距：

div {
            width: 300px;
            height: 300px;
            background-color:pink;
            /* 添加了四个方向的内边距 */
            padding:  50px;
            /* padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距 */
            /* 顺时针 上 右 下 左 */
            padding: 10px 20px 30px 40px ;
            /* 上 左右 下 */
            padding: 10px 20px 30px  ;
            /* 上下 左右 */
            padding: 10px 20px  ; 
            /* 会撑大盒子的元素：padding border */
        }

 div {
            width: 300px;
            height: 300px;
            background-color:pink;
          border: 10px solid #000;
          padding: 20px;
          /* 内减模式：变为css3的盒子模型，自动减盒子高宽 */
          box-sizing:border-box;
        }

默认内外边距的清除

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } 
 div {

            width: 300px;
            height: 300px;
            margin: 0 auto;/*左右居中*/
        }

案例：新闻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .news {
            width: 500px;
            height: 400px;
            background-color: #fff;
            border: 1px solid  #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }

        .news h2 {
            border-bottom:1px solid #ccc;
            font-size: 30px;
            /* 行高是1倍，就是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }
        .news li {
            list-style: none;
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a {
            text-decoration: none;
            color: #666;
            font-size: 18px;


        }

    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/News Articles  </h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jQuery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jQuery中的链式编程是什么</a></li>
        </ul>
    </div>
   
</body>
</html>

外边距折叠现象

行内元素垂直方向内外边距不生效

margin或padding的top和bottom不生效

结构伪类选择器

内容：

注意：

伪元素 *

内容：

通过css创建标签，装饰性不重要的小图

标准流

内容：

浮动

浏览器解析html行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离。

浮动能解决换行问题

浮动的作用

网页布局

float:left/right;

浮动的特点

浮动元素默认顶对齐

浮动后的标签具备行内块的特点

快捷键： .left+.right Tab

效果：

<div class="left"></div>
    <div class="right"></div>

CSS写顺序

1.浮动/display

2.盒子模型：margin border padding 宽度高度背景色

3.文字样式

使用浮动，如果盒子块=空间不够，会自动换行

主导航必须使用<li></li>标签包裹<a></a>标签

清除浮动

受影响情况：例如父子标签，子级浮动，父级没有高度，后面的标签流盒子会受影响，显示到上面的位置

双伪标签可同时解决父子块元素塌陷问题和浮动问题