初学html

最新推荐文章于 2024-09-12 18:22:06 发布

et1125

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量383

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_53566222/article/details/125791742

版权

本文介绍了HTML的基本结构和常用标签，包括标题、段落、图像、链接、表单元素等。同时，探讨了CSS在设置文本样式、布局和选择器方面的应用，如颜色、字体、定位、伪类和伪元素。文章还强调了理解盒模型和响应式设计的重要性，以及如何利用CSS实现页面的响应式布局。

摘要由CSDN通过智能技术生成

    标记：用<>括起来的英文单词来表示一个标签
    html:根标签 所有的标签都要放在html的里面
    head：元信息 不需要展示在页面的控制信息
        title；标题 网页的标题
    bady；网页的主体内容部分

 申明浏览器版本 
    作用：版本不一样为了浏览器编译渲染我们的页面，我们需要在第一句告诉浏览器我们的  快捷 html:5  !加上enter
   en 使用的是英文 fr:法语 zh：中文 zh-CN：中文简体 ja：日语 
     long 有什么作用：样式 SEO（搜索引擎的优化）
    样式：没有给一些样式（字体样式-仿宋 宋体），需要给浏览器提供lang语言
    SEO 百度搜索引擎在搜索页面的时候，需要知道网站适用的国家和地区
    meta charset="UTF-8"设置字符集
    计算机不能识别人类的语言，二进制编码只识别机器语言
        UTF-8能够识别Unidode中的任意字符
    GB2312：简体中文
    GBK:兼容GB2312，包含所有的中文

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>就这</title>
    </head>
    <body>
        hello wold
    </body>
</html>
<!-- 标签的分类：
        单标签：单个的，没有结束标签的(</单词>)，只有开始标签(<单词>)
        双标签：双个的，有开始也有结束标签 head title body-->
        <!-- 重点快捷键的使用，常见的字符集，标签的分类 -->

<h1>标题一</h1>
    <h2>标题二</h2>
    <h1>这是标题</h1>
    <h2>这是标题</h2>
    <h3>这是标题</h3>
    <h4>这是标题</h4>
    <h5>这是标题</h5>
    <h6>这是标题</h6>
    <!-- h${name}*6 -->
</body>
</html>
<!-- 标题标签的特性;引起换行 会放大缩小 加粗字体  h1-h6 字体逐渐变小 -->

<!-- pragraph缩写：p
    段落标签;有段前和断后   会换行不会对字体进行修饰 -->
   <h1>啦啦啦</h1>
   <h2>基本信息</h2>
   <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3月17日收盘，沪指涨1.40%，深成指涨2.41%，创业板指涨2.87%。板块方面，地产板块全天领涨，医药、白酒、家电、
       旅游等消费股复苏，锂电、光伏、半导体等赛道股持续火热</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3月17日，大盘午后冲高回落，涨幅明显收窄。截至收盘，沪指涨1.40%，深成指涨2.41%，创业板指涨2.87%。</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;板块方面，地产板块全天领涨，医药、白酒、家电、旅游等消费股复苏，锂电、光伏、半导体等赛道股持续火热。

        资金面上，北向资金全天净</p>
    <h2>经历</h2>
 文本111
    <hr>
    <!-- hr；水平线标签 -->
    文本222
    <br><br>
    <!--br:换行标签  -->
    普通文本
    <br>
普通文本
    <!-- div标签；不会修饰文本布局最多 盒子--块 -->
    <div>div标签1</div>
    <div>div标签2</div>

    <!-- div{name$}*2-->
    <!-- span标签；用来放文本的
    特点：和普通文本一模一样 不会换行 不会修饰文本 也不会段前段后 -->
    <span>阿达</span>
    <span>啊实打实</span>
普通文本
    <br>
    <!-- 文本修饰标签：
    双标签 不会换行 有自己的一些修饰 -->
    <i>文本1---倾斜</i>
    <b>文本2---加粗</b>
    <s>文本3---删除线</s>
    <u>文本4---下划线</u>

    <br>
    <em>倾斜</em>
    <strong>加粗</strong>
    <del>删除线</del>
    <ins>下划线</ins>

    <!-- 后者具有语义化原则:h5趋向于语义化，建议用后者 -->

    <!--标签的关系
        嵌套：父子 子孙后代
        标签之间的嵌套
        同层级：兄弟姐妹 -->
    <strong>
        <ins>
            sadia
        </ins>
    </strong>
  <!-- 嵌套是有规范的，有些可以解析，有些不能解析：p标签只能嵌套行元素，不能嵌套块和自己
        行内：span i b u strong del ins
        块状h1-h6 div p bady -->
<!-- 图像标签：image---img
    标签的属性;写在
    src；图片地址
    alt: 提示作用图片加载出错 没有加载出来的时候显示对应的文字
    border：边框 值为数字
    如果只写width 或者height 对应得宽高都会等比例缩放
    特性:没有换行可以设置宽高----这种特性称为行内块级
    ？img是不是行内块级标签 -->

    <!--  路径
        绝对路径：
            网络网址：http://172.22.0.13/portal/uploads/pc/cqsxxy/images/sxlogo.jpg
            磁盘路径
        相对路径：
            ./  能够访问与当前文件同层级的文件或者文件夹
            ../ 能够访问与当前文件上一层文件同层级的文件或者文件夹
            ../../ 够访问与当前文件上两层文件同层级的文件或者文件夹
            ../../../ 够访问与当前文件上三层文件同层级的文件或者文件夹
            ../*n不要超过4层
    -->

 <!-- h1到h6 head标签一般只有一个h1。其他的可以有好几个 双标签
    div+span：布局用的最多。div：块状，双标签 span：行内 双标签
    p：段内标签 paragraph 块级标签 有段前断后
    i  b  s  u em  strong  del  ins 文本修饰 行内 双标签
    br：换行标签 单标签 hr：水平线标签 单标签
    img：图像标签 称这种特性为行内块级特性 img是行内块级吗？

    标签的属性：
    img属性：border width height src  alt  
    标签的关系：
    嵌套：一个标签的开始和结束都被完整的包含在另一个标签里面
    兄弟：同层级
    嵌套的规则：
    块级标签可以嵌套内联和块级标签
    行内标签可以嵌套内联 不开以嵌套块级
    -->
    <!-- <img src="" alt="">
    <p>
        <span>1</span>
        <span>
            <span>2</span>
        </span>
<!-- 注释标签-->
    <!-- Ctrl+/ -->
<!-- a
            href：链接的目标地址/链接
            target 跳转到目标地址的时候 是在当前自己的窗口打开 还是在新窗口打开
                _self:默认值
                _blank：在新窗口打开
            download:下载，属性会作为下载后的文件名，没有属性值直接用
            特性：行内标签 有些自己的默认颜色和下划线效果

    -->
    <a href="https://www.baidu.com/?tn=44004473_21_oem_dg" target="_blank">百度</a>

    <!-- 
        链接分类
        外部链接：网络路径
        内部链接：内部
        空连接：没有链接的目标地址，点击一定不会跳转新页面
        下载链接：
        网络元素链接：
     -->
     <!-- 外部链接 -->
     <a href="https://image.baidu.com/" target="-blank">百度图片</a>
     <!-- 外部链接  ./ ../ ../../-->
     <a href="./02-注释标签.html">复习</a>
     <a href="">标题段落</a>
     <br><br>
     <!-- 点击时候会重新加载页面 回到页面顶部 -->
     <a href="">空连接1</a>
     <!-- 点击会回到页面顶部 不会重新加载页面 -->
     <a href="#">空间接2</a>
     <!-- 点击不会回到页面顶部 不会重新加载页面  -->
     <a href="JavaScript:;">空连接3</a>

    <br> <br>
    <!-- 下载链接：链接到一个浏览器无法识别的资源，具备解析文件格式的能力，那么会直接预览或者下载文件 -->
    <a href="D:\html\html代码\day03">下载一</a>
    <!-- 真实的下载 -->
    <a href="./text1.txt">下载2</a>
    <a href="./text1.txt "download="下载一个txt文件">下载3</a>
    <br><br>
     <!-- 网络元素链接 -->
    <a href="../day02/day-02段落标签.html">
        <img src="../day02/img/S2[`H3OO3DTD42DB()F5V3K.png" alt="">
    </a>
    <a href="">
        <img src="../day02/img/S2[`H3OO3DTD42DB()F5V3K.png" alt="">
    </a>
<!-- 标签属性 id 所有页面上布局用的标签都可以使用id属性 -->
<!-- <title>Document</title> -->
    <!-- base 
            target:规定页面上所有的超链接的窗口打开方式  a标签也有target属性 以a标签自己的为准 
            href：设置基础属性 页面上所有的相对路径都会链接地址前面拼接基联
        
        -->
</p>
    <!-- < -->
    2 &lt; 5
    <p></p>

    <!-- > -->
    2 &gt; 5
    <br><br>

    <!-- 2的1 2 3次方 -->
    2&sup1;
    2&sup2;
    2&sup3;
    <!-- 2&sup4; -->
    <p></p>

    <!-- 版本 -->
    &copy;啦啦啦
    <p></p>

    <!-- 注册商标 -->
    &reg;
    <P></P>

    <!-- 度 -->
    90&deg;
    <P> </P>

    <!-- * -->
    <!-- 5*3 -->
    10×2
    10&times; 10 = 100
    <p></p>

    <!-- 除 -->
    <!-- 10/4 -->
    6&divide;3=2
    <p>
    </p>
    <!-- 人民币 -->
    6&yen;
    

    &LT;
    &GT;

    &Gt;
    &Lt;

<!-- 
        无序列表：un order list ul
        ul 块级标签 不要去嵌套其他元素 嵌套li
            ul属性type：
                disc：默认值 实心圆
                square：方形
                circle：空心圆
        li：每个项目 项目 可以去嵌套任意元素

        网页布局中使用情况比较多

<!-- 
        有序列表 order list ol 组合标签
        ol：不要嵌套其他标签
            type;
            a A i I 1默认值
        li 可以嵌套任意标签
     -->
     <ol type="I">
         <li>选项1</li>
         <li>选项2</li>
         <li>选项3</li>
     </ol>
<ol type="A">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
</ol>
<!-- 
        dl dt dd 组合而成
        dl: 最外层的父元素
        dt: 名词
        dd：对这个名词的解释 一个dt可以对应多个dd 一个名词可以有多个解释
     -->
    
     <ol>
         <li>四川省
            <ul type="circle">
                <li>成都市 </li>             
                    <dl>
                        <dt>高新区</dt>
                        <dd>软件园</dd>
                        <dd>孵化园</dd>
                        <dd>香年广场</dd>
                        <dd>环球中心</dd>
                        <dd>银泰城</dd>

                        <dt>金牛区</dt>
                        <dd>新诚信大厦</dd>
                        <dt>武侯区</dt>
                        <dd>世外桃源</dd>
                    </dl>
                <li>绵羊市</li>
                <li>乐山市</li>
            </ul>
        <li>云南省</li>
             <ul type="circle">
                 <li>
                     大理市
                 </li>
                 <li>
                     昆明市
                 </li>
             </ul>
        <li>贵州省</li>
    
 </ol>
 <!-- td只是单元格 单元格组成起来看做是列   -->
        <!-- 
            table属性：
             border ：边框
             cellspacing 单元格边框与外层表格边框间隙
             cellpadding：单元边框与自己的内容部分间隙
             width宽
             height高
             align：
                left  right center
             valign:垂直排列方式
                top 靠上    middle 中间     bottom靠下
            注意;td的align valign比tr的align valign优先级更高
            thead表头 表头里面的td需要换成对应的th
            tfoot表尾
            tobody表内容
            caption表格标题
         -->
<!-- 
        th td 跨行 跨列合并
        跨行 同列的单元格 被合并：rowspan
        跨列 同行的单元格 被合并：colspan
     -->
     <table border="1" cellspacing="0" width="600" height= "300">
        <caption>购物车</caption>
        <!-- 只有th 没有thead的时候，会加粗 会与其他项平分高度 -->
         <tr>
<!-- 
        表单：from 块级双标签
        action
        methon
        input标签
            input的type属性
            text：文本输入框
            password 密码输入框
            radio：单选按钮 一组单选按钮需要让name属性一致
            checkbox 多选框
            image 和提交按钮一样 只不过是图片形式
            submit 提交按钮 将当前表单提交给action对应的地址
            reset：重置按钮
            button：普通按钮
            file 文件
        input 的其他属性
            disabled禁用
            size input显示宽度
            maxlength 最多可以输入多少位
            textarea：文本域
            select 下拉框与option组合使用 option是选项 默认选中第一个option
            option的属性
            label：点击label中的文字聚焦input 需要label的for属性关联input的id属性
     -->
     <form action=""  method="">
        用户名：<input type="text" disabled size="40" value="大海"> 
        <br><br>

        密码：<input type="password" name="" id="">
        <br><br>
        性别<input type="radio" name="sex" id="girl"> <label for="girl">女</label>
        <input type="radio" name="sex" id="boy"> <label for="boy">男</label>
        <br><br>
        爱好：<input type="checkbox" name="pashan" id="">爬山
        <input type="checkbox" name="code" id="">编程
        <input type="checkbox" name="playgame" id="">打游戏
        <br><br>
        <input type="iamge" src="../day02/img/S2[`H3OO3DTD42DB()F5V3K.png" alt="">
        头像：<input type="file" name="" id="">
        <br><br>

        地址：<select name="" id="">
            <option value="1">四川</option>
            <option value="2">重庆</option>
            <option value="3">山东</option>
        </select>
        <br><br>
        个人简介
        <br>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br><br>
        普通按钮
        <input type="button" value="普通按钮">
        <br><br>

        <input type="submit" value="提交">
        <input type="reset" value="重置">

   <header style="height: 50px; background-color: red;">定义网页头部</header>
    <nav style="height:  50px; background-color:royalblue;">定义网页的导航区域</nav>
    <div>
        <section style="height: 400px; width: 70%; background-color: seagreen;">定义网页的区域</section>
        <article style="height: 200px; width: 70%; background-color: sienna;">定义网页独立区域-章节</article>

    </div>
    <aside style="height: 600px; width: 30%; background-color: slategrey; float: right;">定义网页的侧边栏</aside>
    <div style="clear: both;"></div>
    <footer style="height: 50px; background-color: tomato;">网脚 网页的底部</footer>
    <!-- 结构标签和div是一模一样的效果 没有任何的区别 h5语义化原则 h5新增的一些结构标签有一些 -->

 <!-- datalist 嵌套
            option -->
    <input type="text" list="names">
    <datalist id="names">
        <option value="20000">1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </datalist>
<!-- fieset和from标签一起使用 对表单进行分组
    分组之后每个组大概的描述信息 legend -->
    <form action="">
        用户名：<input type="text">
        <br><br>
        密码<input type="password" name="" id="">
        <br><br>

        <fieldset>
            头像：<input type="file" name="" id=""> 
        </fieldset>
    </form>
<!-- meter 度量衡
            min
            max
            value
            high
            low
         -->
     <meter min="10" low="40" value="70" max="100" high="80"></meter>
<!-- 
        progress 任务进度 js JavaScript一起结合使用 框架
            value
            max
     -->
     <progress value="50" max="100"></progress
<form action="">
        <input type="url" name="" id="">
        <br><br>
        数字<input type="n" name="" id="">
        <br><br>
        搜索框<input type="search" name="" id="">
        <br><br>
        滑块<input type="range" name="" id="">
        <br><br>
        小时分钟<input type="time" name="" id="">
        <br><br>
        年月日<input type="date" name="" id="">
        <br><br>
        年月<input type="month" name="" id="">
        <br><br>
        年<input type="year" name="" id="">
        <br><br>
        年星期<input type="week" name="" id="">
        <br><br>
        邮箱年月日<input type="email" name="" id="">
        <br><br>
        颜色年<input type="color" name="" id="">
        <br><br>
        显示<input type="show">
        <br><br>
        隐藏<input type="hidden">
        <br><br>
        电话号码<input type="tel" name="" id="">
        <input type="submit" value="提交" >


    </form>
<form action="">
        用户名：<input type="text" placeholder="请输入用户名">
        <p></p>
        自动聚焦：<input type="text" autofocus>
        <p></p>
        必填项：<input type="text" name="" id="" required>
        <p></p>
        多文件选择：<input type="text" name="" id="" multiple>
        <p></p>
        alt+字母聚焦<input type="text" accesskey="k">
        <p></p>
        自动完成输入<input type="text" name="suto" autocomplete="on">
        <p></p>
        <input type="submit" value="提交">
</form>
Day-05
<!-- 
        emdge标签
            src属性
     -->
     <embed src="./loveyou.mp3" type="" width="400" height="400">
<!-- 
        audio：加载音频和视频文件
        audio:
        src:音频资源的地址
        control是：显示控件
        muted：静音播放
        loop：循环播放
        autoplay：自动播放浏览器没有办法自动播放
     -->
<!-- 
        video；加载视频资源
        video属性：
        src:地址
        controls：显示控件
        writh宽
        height高
        muted静音播放
        autopaly:自动播放
        loop：循环播放
        preload:是否预先加载 如果预先加载 采取什么形式加载
        none auto metadata
        如果autoplay 忽略这个属性
        poster:当视频没有加载出来或者在加载过程中 显示对应的图片
     -->
<!-- css是什么？
        html 骨架 皮囊---
    层叠样式表 美化页面 html 
    CSS在html页面上的书写方式
        1.行内样式：直接通过标签的style属性 通过键值对的方式去写的  键名:键值组合 每一项之间空格隔开
        2.内部样式：style标签 写在head标签了通过选择器去识别body中的元素
                选择器{ 键名1 键名2 键值2}
        3.外部样式需要一个独立的css文件   
        选择器{ 键名1 键名2 键值2}
        在dead标签中需要通过link标签引入到html中     
        公有属性 style

        
        
    -->
<!-- 
        选择器
        内部样式或者外部样式
        内部样式 不需要style属性去写 而是需要style标签 写在head标签里面
        行内样式是指名点姓的把样式给那个标签
        内部样式和标签分开了 要如何知道内部的样式是设置给谁的
        选择器去解决
        标签选择器：通过标签名去选择
     -->
/* 覆盖问题 就近原则--后来者居上 会覆盖前面的同样的css属性 */
        div{
            color: cornflowerblue;
        }
        div{
            color: red;
        }
        /* 1行内样式>内部样式
            2内部样式外部样式如果权重一样 就看就近原则
            3总结行内样式>内部样式=外部样式        */


 div{
            /* font-size: x-large; */
            /* font-size: small;
            font-size: large;
            font-size: larger; */
            /* font-size: small; */
            /* chrome浏览器默认大小为16px 
                px是一个相对长度单位，相对于谁？ 相对于电脑屏幕分辨率来说的*/

            font-size: 100px;
            font-size: 2in;
            font: oblique 700 16px "仿宋";
        }
        header{
            font-weight: 500;
            /*取值100--900 由细到粗 100--300 变细 400--500正常  >=500加粗 */
            /* font-weight: bold;
            font-weight: normal;
            font-weight: lighter; */
            /* 如果要字体正常显示 不加font-weight属性就可以了 或者是font-weight normal;100=lighter  400=normal 700=bold */
        } 

        nav{
            /* 如果是中文 需要加上英文状态下的引号"" '' */
            font-family: "隶书";
            /* 如果是英文 单个的英文 不需要加上引号 */
            font-family: lisu;
            /* 如果英文是有多个单词组成起来的那么就需要加上引号 */
            /* 兼容从左到右如果浏览器不支持第一种继续解析第二种...如果所有字体都不能解析 使用浏览器默认字体 */
            font-family: \5B8B\4F53;
            /* 既有中文又有英文 需要将英文写在前面 中文写在所有的英文字体的后面 */
        }

        section{
            font-style: oblique;
            /* 倾斜的字体 使用的字的本身斜体 */
            /* font-style：italic */
            /* 倾斜的字体 有些边边角角的文字没有倾斜 使用浏览器强制给它倾斜 */

            }
            aside{
                font: italic 700 26px "仿宋";
                /* 综合设置 */

div{
            /* 这是颜色的表示方法：
            颜色名字/英文单词：red blue orange 
            十六进制：取值0-f 0-9 a-f 一个颜色两位表示，一共六位#00abcd 颜色值前面要加上#
                    #00aaff;两两相同的可以省略#oaf
            rgb：一共3个取值 取值范围0-255/0-100% rgb(200,99,99
                ragba（200,99,9，）a表示透明度取值范围0-1 完全透明到完全不透明
            hsl 色相 H颜色名字（0-360） 0\360红色 120绿色 240蓝色
            s纯度 值越高就越纯 越高就越灰（0-100%）
            l 亮度 黑到白  值越高就越白 越高就越黑（0-100%） */
            
            color: red;
            color:  #00abcd;
            color: rgba(200, 99, 9,a);
            color: hsl(200, 80%, 40%);

        }
p{
            /* 设置文本内容在标签的水平对齐方向 
                    left左边 center中间 right右边 justify两端对齐用于解决英文的锯齿状*/
            text-align: center;
            background-color: red;    
        }
div{
            /* 下划线 */
            text-decoration: red underline;
            /* 上划线 */
            text-decoration: overline blue;
            /* 删除线 */
            text-decoration: blue line-through;

        }
        a{
            text-decoration: underline red;
        }
p{
            /* 每个单词首字母大写 */
            text-transform: capitalize;
            /* 每个字母字母小写 */
            text-transform: lowercase;
            /* 每个字母全部大写 */
            text-transform: uppercase;
            /* 是什么样就是什么样 默认 */
            text-transform: none;

        }
div{
            /* text-indent: 100px;
            text-indent: -100px; */
            /* 首行缩进2字符 */
            text-indent: 2em;
            /* em相当于当前标签的大小来说的font-size的属性值 */
            
        }
p{
            /* 水平方向的阴影位置 垂直的阴影位置 模糊距离 阴影颜色 */
            /* 正数右下偏移 */
            text-shadow: -10px -10px 3px  red 
        }
div{
            /* 增加或者减少字符之间的空白距离 正值增加 负值减少 用于汉字 */
            /* letter-spacing: 20px; */
            /* 如果用于英文每个字母的空白间隙 空白符也在里面 */
            /* 增加或者减少单词之间的空白距离 正值增加 负值减少 用于英文 */
            word-spacing: 20px;
            
        }
div{
            width: 400px;
            height: 100px;
            background-color: red;
            line-height: 2;
            line-height: 200%;
            /* 单行文本垂直居中：行高height一样的字就会居中 */
            line-height: 120px;
        }
p{
            /* 使用浏览器默认的换行规则 */
            word-break: normal;
        
            width: 500px;
            background-color: red; 
            /* 文本显示保持在同一行 不换行  用于中日韩CJK 如果用于英文就和normal一样 */
            word-break: keep-all;
            
            /* 单词碰到边界换行 用于英文内部的换行不管能不能显示完整 */
            word-break: break-all;

        }
/* div{}标签选择器 */
        #box1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
        #box2{
            width: 200px;
            height: 100px;
            background-color: salmon;
        }
    </style>
</head>
<body>
    <!-- 公有属性 style id -->
    <!-- 需要写id属性 style标签中的#标识对应的标签的id属性 -->
    <div id="box1">box1</div>
    <div id="box2">box2</div>

    

    <!-- 
        id选择器具有唯一性
        只能设置一个 并且其他人也不能再次使用同样的ia值
        身份证号只能有一个 其他人的身份证号不能和别人的的阴一样
     -->
<!-- 多类选择器和/类选择器和id选择器的区别 -->
    <!-- 和id的区别 id一个标签只能用一个id值  一个标签可以有多个class值 -->
    <div class=" div1 box test">测试div</div>
    <!-- 和id的区别2 id不能使用其他的已有的id值 class 可以使用其他的已有的标签 -->
    <!-- <div class="box"> div2</div> -->
/* 链接伪类选择器有4个 */
        
        /* 未访问的链接状态 */
        a:link{
            color: yellow;
        }
        /* 访问后的链接状态 */
        a:visited{
            color: rgb(0, 255, 128);
        }
        /* 鼠标移动到链接之上状态 */
        a:hover{
            color: red;
        }
        /* 鼠标按下未松开的链接状态 */
        a:active{
            color: rgb(255, 0, 221);
        }
        /* link===visited===hover===active这个顺序不能颠倒
         */
    </style>
</head>
<body>
    <!-- 访问过后的链接 不是指我们一定要放到a标签的href属性 通过a标签去访问 而是浏览器有没有访问过 -->
    <a href="15-基础选择器-通配符.html">访问链接</a>
/* 错误的选中第一个子元素---选中div中的第一个子元素 */
        /* 正确的选中所有元素的第一个子元素 如果第一个子元素是div就匹配成功 */
        /* div:first-child{
            color: red;
        } */
        /* li:last-child{
            color: royalblue; */
            /* 正确的选中所有元素的最后一个子元素 如果第一个子元素是li就匹配成功 */

        /* } */

        /* span:nth-child(2){
            color: yellow;
        } */
        /* 正确的选中所有元素的顺数第二个子元素 如果第一个子元素是span就匹配成功 */

        /* span:nth-child(even){
            color: teal;
            
        } */
        /* 正确的选中所有元素的顺数第奇数个子元素 如果第一个子元素是span就匹配成功 */
        span:nth-last-child(even){
            background-color: tomato;
        }
        /*正确的选中所有元素的倒数第偶数个子元素 如果第一个子元素是span就匹配成功  */

        p:nth-last-child(odd){
            background-color: black;
        }
        /* 正确的选中所有元素的倒数第奇数个子元素 如果第一个子元素是p就匹配成功 */
Day-07
div{
            font-size: 120px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-weight: 700;
            text-align: center;
            line-height: 600px;
            /* word-spacing: -20px; */
            /* letter-spacing: -15px; */
        }
        .blue{
            color: rgba(99, 10, 50,0.3);
        }
/* 选中所有的li元素 如果这个li元素是父元素中的第一个 li类型的子元素  就匹配成功*/
        li:first-of-type{
            color: red;
        }
        /* 选中所有的li元素 如果这个li元素是父元素中的最后一个 li类型的子元素  就匹配成功*/
        span:last-of-type{
            color: blue;
            font-weight: bold;

        }
        /* 选中所有的li元素 如果这个p元素是父元素中的顺数第二个类型的子元素  就匹配成功*/
        p:nth-of-type(){
            color: brown;
        }
        /* 选中所有的li元素 如果这个p元素是父元素中的顺数倒数第二个类型的子元素  就匹配成功*/
        p:nth-last-of-type(2){
            color: burlywood;

        }
/* 目标伪类选择器 选择是目标元素 什么是目标元素 就是这个元素的id被当做超链接的锚点#标识了 */
        /* 匹配页面上的所有元素 */
        :target{
            color: red;
        }
        /* 现找页面的所有目标元素 并且这个目标元素是和h1标签匹配成功的 */
        h1:target{
            color: saddlebrown;
        }
/* 匹配所有没有任何兄弟的元素 */
        :only-child{
            color: saddlebrown;
        }
        /* 匹配所有没有任何兄弟的元素  并且这个元素是div元素才能匹配成功 */
        div:only-child{
            color: saddlebrown;
        }       
        
         /*  匹配所有没有任何和他没有同种类型的元素*/
         :only-of-type{
             color: red;
             font-weight: 700;
         }
         /* 匹配所有元素 且div元素没有任何一个同类型的兄弟元素 */
         div:only-of-type{
             color: yellow;
             font-weight: 800;
         }
         /* 匹配没有任何内容 和 子节点的元素 */
         :empty{
             height: 100px;
             background-color: red;

         }
         /* 匹配根节点 html */
         :root{
             color: red;
         }     
Day-08
1.选择器
    标签（元素）----tag
    id
    类---多类--class  .
    通配符----*
    伪链接
        a：link---未访问的链接状态
        a；visited---访问过后的状态
        a：hover---鼠标悬停 移动链接之上的连接状态
        a：active---鼠标按下去 没有松开的时候的链接的状态
        顺序不能改变
    结构伪类
    nth-child：凡是包含child的，一般表示结构上的
    nth-...-type 凡是包含type的 一般表示类型上 -->
    其他结构伪类选择器
    empty：选择空元素 没有任何内容或者子节点（包含空格和换行也表示内容 包含注释标签 不表示子节点）
    root：匹配根元素html
    only-of-type：匹配没有任何和他自己同类型的兄弟元素
    <div>
        <p></p>
        <div></div>
        <span></span>
        <li></li>
    </div>
    only-child：匹配没有任何兄弟元素的元素（独生子就一个）
    <div>
        <p></p>
    </div>
    目标伪类
    target h1：target：匹配某个元素的id值被当做a标签锚点使用 当点击当前a标签 此时目标伪类器会被触发
    <!-- . son2{}类选择器-->
/* 交集选择器：既又 即要求元素名是div 有要求元素的class属性值包含base
         两个标签挨在一起 之间不能有空格 */
        div.base{
            background-color: aqua;
        }
        /* #test{}id选择器 */
        div#test{
            background-color: black;
        }
        p.base{
            background-color: brown;
        }
        /* 交集：第一个为标签 第二个为类或者id 伪类选择器 */
/* 选择div标签之后的所有p标签 p标签与当前div标签同层级 是兄弟关系 */
        div~p{
            background-color: chartreuse;
        }
        /*选择div之后 紧挨着div的p标签 这个p标签和div同层级 是兄弟关系  */
        div+p{
            background-color: crimson;
        }
        .lll+li{
            font-size: 30px;

        }
<!-- 
        并集选择器（群组选择器）
        有很多个选择器(任意的选择器)组合而成，这些选择器自己通过逗号链接S

     -->

/* .son */
        /* .father .son */
        /* body .son */
        /* html .son */
        /* .grandFa .father .son {} */
        /* html .father .son {} */

        /* 子元素：只能通过父级选中子元素  亲儿子 父元素写在前面 子元素写作后面 中间用>连接 */
        .div1>.div3 {
            color: red;
        }

        /* 选中class中包含div1的子元素 中class包含div3 不选中子元素的后代 */

/* 选中页面上type属性值等于password的所有元素 */
        [type="password"] {
            background-color: red;
        }
        [name] {
            background-color: royalblue;
        }
        /* 选中页面上的name属性包含的test字符的所有元素 而且不管test字符在什么位置 */
        [name*="test"] {
            background-color: salmon;
        }
        /* 选中页面上的name属性包含的test字符的所有元素 而且test字符开头位置 */
        [name^="test"] {
            background-color: black;
        }
        /* 选中页面上的name属性包含的test字符的所有元素 而且test字符结尾位置 */
        [name$="test"] {
            background-color: purple;
        }
        /* from表单  input */
/* 块级第一个字母 第一个文字 中日韩 */
        p::first-letter {
            color: purple;
            font-size: 20px;
            font-family: "宋体";
        }

        p::first-line {
            background-color: skyblue;
        }

        /* 一个冒号是伪类 2个冒号是伪元素 */
        p::selection {
            color: springgreen;
        }

        div::before {
            content: 'day09,';
        }

        div::after {
            content: 'world';
        }

        li::after {
            content: "...";
        }
    </style
/* css层叠性 是浏览器出来冲突的一个能力，如果一个css属性通过两个选择器的设置到同一个元素
        上，那么这个时候一个属性就会被另一个属性层叠掉 */
        div {
            width: 100px;
            height: 100px;
            background-color: springgreen;
            color: rebeccapurple;
        }

        .div1 {
            background-color: tomato;
        }
/* !important是提高单行css样式的语法 空格和css属性值隔开 进行书写 */
        div{
            background-color: springgreen !important;
            /* color具有继承性  font-也是具有继承性的*/
            color: violet;
            font-weight: 700;
        }
        
    </style>
</head>
<body>
    <!-- !important>行内>内部 = 外部（
        id选择器>类选择器>标签选择器>*(通配符）>继承？浏览器默认样式-->
    <div class="div1" style="background-color: red;">div1
#mybox {
            color: red;
        }
       .box1 {
           color: tomato;
       }
       .div1, .div2 {
           color: blue;
       }
    </style>
</head>
<body>
    <!-- 
        z子孙后代继承祖先的某些css属性
        字体的属性font- 文本属性text- line-height color

        如果我们的很多祖先都有当前属性，继承最近的父级
        面试题、笔试题：5个左右
a {
            /*特殊性值：0,0,0,1*/
            color: yellow;
        }

        div a {
            /*特殊性值：0,0,0,2*/
            color: green;
        }

        .demo a {
            /*特殊性值：0,0,1,1*/
            color: black;
        }

        .demo input[type="text"] {
            /*特殊性值：0,0,2,1*/
            color: blue;
        }

        .demo *[type="text"] {
            /* 特殊性值：0,0,2,0 */
            color: grey;
        }

        #demo a {
            /*特殊性值：0,1,0,1*/
            color: orange;
        }

        div#demo a {
            /*特殊性值：0,1,0,2*/
            color: red;
        }
    </style>
</head>

<body>
    <a href="">第一条应该是黄色</a>
    <div class="demo">
        <!--适用第4、5行规则，第4行优先级高-->
        <input type="text" value="第二条应该是蓝色" />

        <!--适用第2、3行规则，第3行优先级高-->
        <a href="">第三条应该是黑色</a>
    </div>
    <div id="demo">
        <!--适用第5、6行规则，第6行优先级高-->
<!-- 默认状态下宽度是父容器的100% 高度是内筒撑开的 -->
    <div class="box">11</div>
    <div class="fa">
        <div class="sn">sn</div>
    </div>

    <!-- 行内元素 默认宽度是内容撑开的 -->
    <span>
        span
    </span>
    <!--行内块级;可以设置宽高 不会引起换行  -->
    <img src="" alt="">
    <!-- 
        显示模式
        display{
            行内元素：inline
            行内块级;inline-block
            块级:block
            其他显示模式
        }
div{
            height: 200px;
            background-color: blanchedalmond;
            width: 200px;
            /* background-color: transparent; 背景颜色透明 */
            background-image: url();
            /* 背景不平铺 */
            background-repeat: repeat-x;
            /* 背景平铺，x方向要平铺 */
            background-repeat: repeat;
            /* 背景平铺，x方向y方向都要平铺 */
            background-repeat: repeat-y;
            /* 背景平铺，y方向要平铺 */
            background-repeat: no-repeat;
            /* 背景不平铺 */

            /* 
            背景的位置 第一个表示水平的 第二个表示是垂直方向的
            水平方向关键字：
            left centre right
            垂直方向的关键字：top center bottom
            如果两个方向的取值都为关键字的话 值得顺序可以改变
             */
            background-position: center center;
            background-position: bottom top;
            background-position: right bottom;
            /* 只设置了一个值  那么另一个值将会是center */
            background-position: bottom;
            background-position: right;
            /* 固定值 固定方向 第一个值就是水平的，第二个就是垂直的 */
            background-position: -100px 100px;
div{
            width: 400px;
            height: 400px;
            background-color: chartreuse;
            background-image: url("../day02/img/S2[`H3OO3DTD42DB()F5V3K.png");
            /* 背景缩放
            1设置固定值缩放
             */
             background-size: 300px 300px;
             background-repeat: no-repeat;

             /* 百分百  设置百分时 参照盒子高度*/
             background-size: 10% 10%;

             /* 关键字 */
             background-size: contain;
             background-size: cover;

             /* 只设置一个值得情况 设置的值为横向展示的宽度 纵向则按照原图宽高等比例缩放 */
             background-size: 600px;
        }
Day-10
.fa{
            font-size: 120px;
            background-color: aquamarine;
        }
        .fa .to{
            text-shadow: -1px -1px -2px white, 1px 1px 2px black ;
        }
span{
            font-size: 40px;
            
            -webkit-text-fill-color: cornsilk;
            -webkit-text-stroke-color: crimson;
            -webkit-text-stroke-width: 1px;
        }
div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            margin-top: 30px;
        }
        .box1{
            margin: 30px;

        }
        /* 盒子模型：由外到内 margin   border padding content 
        margin;盒子的外边距
        margin-top 上边距
        margin-left 左边距
        margin-right 右边距
        margin-bottmo 下边距
        margin的合并使用
        margin：30px  四个方向都是一样的30px的外边距
        按照上右下左的顺序设置值 没有值得话 就从对面的边取
        margin 30px 60px 上下30px 左右60px 的外边距
        margin 30px 60px 90px 上30右60下90的外边距
        */
    </style>
div{
            display: inline-block;
            width: 800px;
            height: 600px;
            background-color: red;
            padding: 100px 100px;
            border: 10px solid black;

     /* padding-top 上内边距
        paddding-left 左内边距
        padding-right 右内边距
        padding-bottmo  下内边距*/
        /* 按照上右下左的顺序设置值 没有值得话 就从对面的边取
        padding 30px 60px 上下30px 左右60px 的外边距 */
        /* padding 30px 60px 90px 上30右60下90的外边距 */
        }
Day-11
 div{
            width: 300px;
            height: 200px;
            border: 4px double red;
        }
        /* border-top 上边框     solid 实线      dotted 点线    dashed虚线    double 双实线
            border-right 有边框
            border-left 左边框
            border-bottom 下边框
        */
div{
            width: 200px;
            height: 200px;
            background-color: springgreen;
            border-radius: 50%;
            /* border-top-left-radius: 10px;
            border-top-right-radius: 40px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 30px; */
        }
<style>
        div{
            width: 300px;
            height: 200px;
            background-color: springgreen;
            box-shadow: steelblue 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- box-shadow
        水平阴影位置 必须  增大 右
        垂直阴影位置  必须  增大 上
        阴影模糊距离   可选 值越高越模糊
        阴影尺寸  可选 向外延展尺寸
        阴影颜色   可选
        内部or外部   可选
    -->
div{
            /* 必须设置宽度 */
            width: 300px;
            height: 300px;
            background-color: tan;
            margin: 0 auto;
            /* 盒子水平居中 */
            margin-left: auto;
            margin-right: auto;
        }
div{
            width: 100px;
            height: 100px;
            background-color: turquoise;
        }
        .div{
            margin-bottom: 20px;
        }
        /* 要求不要说即用上边盒子的又用下边盒子的 */
.fa{
            width: 400px;
            height: 300px;
            background-color: turquoise;
            margin: 50px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 50px;
            margin-top: 50px;
            display: inline-block;
        }