初学HTML、CSS

yusheng_xiao

已于 2022-11-03 22:13:08 修改

阅读量1k

点赞数

文章标签： html css 前端

于 2022-10-19 18:39:41 首次发布

本文链接：https://blog.csdn.net/yusheng_xiao/article/details/127344408

版权

一、了解什么是HTML、CSS？

他们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言，是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键选择查看网页代码。
如何写代码？写哪里呢？
一个网站是由N个网页组成的。每一个网页 .html文件
电视剧，四十集。
VS code编辑器?
学习编辑器基本使用？
设置：文件→首选项→设置（大小，是否换行word warp）
创建文件，创建文件夹，重命名和删除、搜索
ctrl+s:保存
ctrl+a：全选
ctrl+x、ctrl+c、ctrl+v：剪切、复制、粘贴
ctrl+z、ctrl+y：撤消、前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行

tab：向后缩进
tab+shift：向前缩进

多光标：alt加鼠标左键
ctrl+d：选择相同元素的下一个

二、五大浏览器

chrome（市场份额最大，约69%）、edge、火狐、qq浏览器、360浏览器、百度
Google Chrome 由谷歌公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括Webkit，目标是提升稳定性、速度和安全性。并创造出简单并且有效率的使用者界面。
软件的名称来自称作Chrome的网络浏览器GUI（图形使用者界面）。软件的beta测试版本在2008年9月2 日发布。提供50种语言版本，有Microsoft Windows、macOS、Linux、Andro、以及IOS版本提供下载。
编程语言：C++、汇编语言、Javascript

Microsoft Edge由为人员开发的基于Chromium开源项目及其他开源软件的网页浏览器。

2015年4月30日，微软在旧金山举行的Build2015开发者大会上宣布——Windows 10内置代号为：Projiect Soartan：的新浏览器被正式命名为”Microsoft Edge“，其内置于Windows 10版本中。2018年3月，微软宣布Edge浏览器已经覆盖了桌面平台和移动平台。用户被允许在Google和App Store上下载Edge。
2022年5月16日，微软官方发布告，称IE浏览器于2022年6月16日正式退役，此后其功能将由Edge浏览器接棒。

火狐
名称由来
该项目定名时几经波折。项目最初取名“Phoenix”（Phoenix首个版本0.1于2002年9月23日发布），但因为和凤凰科技（Phoenix Technologies）的名称冲突，于是于2003年4月14日改为“Firebird”。后来，这个新名称又与另一个开源的数据库系统Firebird发生了冲突，Firebird的开发社区要求以全称“Mozilla Firebird”来标识这个项目或重命名，避免混淆。
2004年2月9日，Mozilla Firebird决定改称Mozilla Firefox，简称Firefox ，正式缩写为Fx或fx ，不过仍然常被称作FF（FireFox）。Firefox在英文俗语里指的是“红熊猫”，但开发小组却采用将“Fire”和“fox”分开来直译蕴意，把吉祥物及官方图标都设计为火红的小狐狸
2022年8月24日，IT之家消息，火狐浏览器 Firefox 104 版本发布。
其使用Gecko排版引擎，支持多种操作系统，如Windows、macOS及GNU/Linux等。Firefox有两个升级渠道：快速发布版和延长支持版（ESR）。快速发布版每四周发布一个主要版本，此四周期间会有修复崩溃和安全隐患的小版本。延长支持版每42周发布一个主要版本，期间至少每四周才有修复崩溃、安全隐患和政策更新相关的小版本。
由于该浏览器开放了源代码，因此还有一些第三方编译版供使用，如pcxFirefox、苍月浏览器、tete009等。
英国防病毒公司Sophos在2015年的调查数据显示，Firefox连续三年成为互联网用户最受信赖的浏览器。
Mozilla Firefox正式版各版本可到Mozilla官方FTP站下载。
QQ浏览器
QQ浏览器是腾讯科技（深圳）有限公司开发的一款浏览器，其前身为TT浏览器。QQ浏览器秉承TT浏览器1-4系列方便易用的特点，但技术架构不同；交互和视觉表现也重新设计。采用Chromium内核+IE双内核，让浏览快速稳定，拒绝卡顿，完美支持HTML5和各种新的Web标准。它同时可以安装众多Chrome的拓展，支持QQ快捷登录，登录浏览器后即可自动登录腾讯系网页。
QQ浏览器是受人重视的产品之一，QQ浏览器7，采用单核模式，集超小安装包和超强稳定性于一身，访问网页速度也得到进一步优化。
2018年8月8日，QQ浏览器获金运奖最佳用户活跃奖。
2019年11月18日，腾讯公司推出的信息流内容服务腾讯看点登陆QQ浏览器平台，在QQ浏览器平台上，为3亿用户带来热门资讯、本地新闻、免费小说等资源。内容推荐与搜索双引擎驱动，理解用户的内容需求，提供需要的资讯与知识技能。
360浏览器
360安全浏览器（360 Security Browser）是360安全中心推出的一款基于Internet Explorer和Chromium双核的浏览器，是世界之窗开发者凤凰工作室和360安全中心合作的产品。
和360安全卫士、360杀毒等软件产品一同成为360安全中心的系列产品。360安全浏览器拥有全国最大的恶意网址库，采用恶意网址拦截技术，可自动拦截木马、欺诈、网银仿冒等恶意网址。独创沙箱技术，在隔离模式即使访问木马也不会感染。
百度
百度浏览器，是一款简洁轻快、智能懂你的浏览器。依靠百度强大的搜索平台，在满足用户浏览网页的基础上，它整合百度体系业务优势，带给用户更方便的浏览方式，更舒适的百度特色上网体验。
“世界很复杂，百度更懂你”，百度浏览器依靠百度强大的平台资源，以简洁的设计、安全的防护、超快的速度、丰富的内容逐渐成为国内成长最快的创新PC浏览器。通过百度的开放整合和精准识别，用户可以一键触达海量优质的服务和资源，以及音乐、阅读、视频、游戏等个性娱乐诉求。

三、深入了解网站开发？

UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
Web后端开发工程师
HTML负责结构
CSS负责样式
HTML是用来标记内容的（重在内容组织上）

Javascript与css、HTML之间的关系

HTML是超文本标记语言的简称，它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。

为什么说HTML是不严谨的呢？因为HTML标签即使不闭合，也并不会影响页面内容的组织。

CSS是用来修饰内容样式的（重在内容样式美化展示上）

CSS是层叠样式表的简称，它用来表现HTML文件样式的，简单说就是负责HTML页面中元素的展现及排版。

JavaScript是用来做交互的

JavaScript是一种脚本语言，即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎，JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。

HTML与CSS及JS的关系

这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：

HTML与CSS、JS是不同的技术，可以独立存在；

HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；

CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；

JS可以脱离HTML和CSS而独立存在；

JS可以操作HTML和CSS。

总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。

Web三大核心技术
HTML
CSS
Javascript

四、HTML结构与基础属性

HTMLL: 超文本标记语言

超文本：文本内容，非文本内容（图片、视频、音频等）

标记：<单词>

语言：编程语言

标记也叫做标签：

 **HTML5标签含义之元素周期表**

请添加图片描述

<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>
<header>hello  world</header>

<!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>...</title>
</head>
<body>
    
</body>
</html>

五、HTML初始代码

每个.html文件都有的代码就是初始代码，要符合html文件的规范写法。
快捷键！+tab键：快速的创造html文件的初始代码

：文档声明：告诉浏览器这是一个html文件：html文件最外层标签包裹着所有的html标签代码 lang="en"：表示一个英文网站 lang=“zh-cn”表示一个中文网网站：元信息：是编写网页中一些辅助信息 charset="UTF-8"国际编码让网页不出现乱码的情况 Document ：设置网页的标题显示网页内容的区域 ##

HTML注释？
写法：<！-- 注释的内容 --！>在浏览器中看不到，只能在代码中看到注释前的内容。
意义：
1、把暂时不用的代码注释起来，方便以后使用。
2、对开发人员进行提示作用。
快捷添加注释与注释删除：
1、ctrl+/
2、shift+alt+a

7、标题与段落

标题->双标签：

在一个网页

标题最重要并且一个html文件中只能出现一次h1标签。
h5 h6 在网页中不经常使用，
段落→双标签

8、文本修饰标签？

强调->双标签：、
区别：1、写法和显示效果
2、strong的强调性更强，em强调性稍弱。
下标：
上标：
删除文本：
插入文本：
注：在一般情况下，插入文本和删除文本配合使用的。

9、图片标签？

ing→单标签
src：引入图片的地址
alt：当图片出现问题时，可以显示一段友好的提示文字

10、链接标签？

a->双标签
herf属性：链接的地址
target属性：可以改变链接打开的的方式，默认情况下在当前页面打开。_self 新窗口打开_blank
base->单标签：作用就是改变链接的默认行为的。

<!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>
</head>
<body>
    <a href="http://www.baidu.com"target="black">访问百度</a>
</body>
</html>

11、锚点？

    两种做法：
        1、#号+id属性
        2、：#号+name属性（注意：name属性加给的是a标签）

12、特殊字符？

                1、&+字符
                1、解决冲突    左右尖括号、添加多个空格的实现
                3、&lt 左尖括号  &gt 右尖括号   nbsp 空格

13、列表标签

1、无序列表->ul li符合嵌套的规范
2、有序列表->ol li 一般用无序列表来实现。
3、定义列表->dl dt dd 列表项需要添加标题和对标题进行描述的内容，
注：列表之间可以互相嵌套，形成多层级的列表。

<!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>
</head>
<dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>辽宁省</dt>
                <dd>沈阳</dd>
                <dd>大连</dd>
                <dd>丹东</dd>
            </dl>
            <dl>
                <dt>山东省</dt>
                <dd>济南</dd>
                <dd>青岛</dd>
                <dd>烟台</dd>
            </dl>
        </dd>
        <dt>美国</dt>
        <dd>洛杉矶</dd>
        <dd>纽约</dd>
    </dl>
</body>
</html>

## 作业

Document

好美味小吃

小吃类

煮粉干

伴青菜

蛋炒饭

煎蛋

米饭

卤味类

鸭肠

面筋

牛肚

猪耳朵

猪头肉

大肠

鱿鱼

套餐类

卤面筋饭

猪肉肉饭

猪耳朵饭

卤猪脚饭

卤猪舌头饭

炖罐类

猪蹄黄豆

猪肚莲子

猪心枸杞

羊肉枸杞

牛肉枸杞

亲,20元以上可送餐哦!!! ```

 


## 补：跳转链接

Document 列表页

```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./detal.html">详情页</a>
    <img src="../images/屏幕截图(19).png" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="../indexl.html">返回首页</a>
    <img src="../images/屏幕截图(9).png" alt="">
</body>
</html>

第二部分

1、表格标签？

<table>：表格的最外层容器
<tr>定义表格行
<th>定义表格头
<td>定义表格单元
<caption>定义表格标题
注：之间有嵌套关系，要符合嵌套规范。
语义化标签：<tHead> <tBody><tFood>

注：tBody可以出现多次，但是tFood、tHead只能出现一次。

<!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>
</head>
<body>
        <table>
            <caption>天气预报</caption>
            <thead>
                <tr>
                    <th>日期</th>
                    <th>天气情况</th>
                    <th>出行情况</th>
                </tr>
            <thead>
                <tBody>
            <tr>
                <td>2018年7月15日</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>天气晴朗,适合出行。</td>
            </tr>
            <tr>
                <td>2018年7月18日</td>
                <td><img src="./tiqnqi1.png" alt=""></td>
                <td>有小雨,出门请带伞。</td>
            </tr>
        </tBody>
    </table>
</body>
</html>

表格属性？

border：表格边框
cellpadding：单元格之内的空间
cellspcing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式
align：left center right
valign:top middle bottom

<!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>
</head>
<body>
    <table border="1" cellpadding="30" cellspacing="30">
     <caption>天气预报</caption>
     <thead>
         <tr align="right" >
             <th colspan="2">日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
         </tr>
     <thead>
         <tBody>
     <tr valign="top">
         <td rowspan="2">2018年7月15日</td>
         <td>白天</td>
         <td><img src="./tianqi2.png" alt=""></td>
         <td>天气晴朗,适合出行。</td>
     </tr>
     <tr>
        <td>夜晚</td>
        <td><img src="./tiqnqi1.png" alt=""></td>
        <td>天气晴朗,适合出行。</td>
    </tr>
     <tr valign="bottom">
         <td rowspan="2">2018年7月18日</td>
         <td>白天</td>
         <td><img src="./tiqnqi1.png" alt=""></td>
         <td>有小雨,出门请带伞。</td>
     </tr>
     <tr>
        <td>夜晚</td>
        <td><img src="./tiqnqi1.png" alt=""></td>
        <td>有小雨,出门请带伞。</td>
    </tr>
    </tBody>
</table>
</body>
</html>

18、表单标签？

：表单的最外层容器。：标签用于搜集用户信息，根据不同的type值属性。展示不同的控件，如输入框，密码框，复选框等。 input（单标签）标签有一个 type属性：决定什么是控件。一开始就有勾的：checked 一开始就不可以选中的：disabled

<!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>
</head>
<body>
    <form action="http//.www.baidu.com">
       <h2>输入框</h2>
       <input type="text" placeholder="请输入用户名">
       <h2>密码框</h2>
       <input type="password" placeholder="请输入密码">
       <h2>复选框</h2>
       <input type="checkbox" checked>周成宇2b
       <input type="checkbox" checked>周成宇运动男神
       <input type="checkbox" disabled>阮哥是个有钱人
       <h2>单选框</h2>
       <input type="radio" name="gender">男
       <input type="radio" name="gender">女
       <h2>上传文件</h2>
       <input type="file">
       <h2>提交按钮和重置按钮</h2>
       <input type="submit">
       <input type="reset">
    </form>
</body>
</html>

cols：列 rows;行 multiple：多选 input type=“flie” 选择文件
text area：多行文本框
：下拉菜单辅助表单

<!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>
</head>
<body>
    <center>
     <h4>电子邮箱:
        <input type="text" placeholder="电子邮箱">
     </h4>
     <h4>设置密码:
        <input type="password" placeholder="设置密码">
     </h4>
     <h4>真实姓名:
        <input type="text" placeholder="真实姓名">
     </h4>
     <dd>性别：
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
     </dd>
     <dd>
        生日：
        <select size="">
            <option selected disabled>请选择</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        <select>年
        <select>
            <option selected disabled>月</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        <select>月
        <select>
            <option selected disabled>日</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        <select>日
            <div><a href="https://new.qq.com/rain/a/20210404A00F6C00">为什么要填写我的生日？</a></div>
    </dd>
    <br>
    <dd>
        我现在：<select>
            <option selected disabled>请选择身份</option>
            <option >学生</option>
            <option >老师</option>
            <option >校领导</option>
        <lect>（非常重要）
        <br>
    </dd>
    <dd>
        <img src="./链接的综合练习/images/1_1$9E)DZTGL]KI[K68G4XK.png" alt="错误了"width="150px" height="50px"> 
        <a href="https://new.qq.com/rain/a/20210404A00F6C00">看不清楚换一张</a>
    </dd>
    <br>
    <dd>
        <strong>验证码：<>
        <input type="password "  placeholder="验证码">
    </dd>
    <br>
    <input type="button" value="立即注册" onclick="alert('你按下了按钮')" >




    </center>
</body>
    <tfoot>

    </tfoot>

    
<ml>

表格表单组合？

表格表单之间可以互相形成数据展示效果。

<!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>
</head>
<body>
    <form action="">
        <table border="1" cellpading="30">
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td> <input type=" " placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td> <input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

19、div和span

div：做一个区域划分的块
span：对文字进行修饰的，内联。

20、css基础语法？

选择器：{属性1：值；属性2：值；属性3：值；}
width：宽 height：高 background colour：背景颜色
长度单位：
1；px 像素
%：百分比
外容器600px：当前容器50%→300px

<!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>
        div { width : 100PX ; height : 100px; background-color: red;} 
        span{ width: 14%; background-color: blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <span>这是一个块</span>
</body>
</html>

21、css样式的引入方式？

1、内联样式
style属性
2、内部样式（注：内部样式的优点。可以复用代码）
style标签
区别：符合w3c标准，选择让结构和样式分开处理。
3、外部样式
引入一个css文件：name：css
通过link标签引入外部资源 rel属性指定资源与页面的关系。helf：资源的地址。
通过@import方式引入外部样式。（这种方式有很多问题，不建议使用。）

21、css中的颜色表示方法？

     1、单词表示法：   red   blue   yellow   black    ....
         2、 十六进制表示法：0    1     2     3      4     5    6    7    8    9    
           0      1
           0       1        2       3        4       5         6       7      8     9     a     b     c  d     e    f 
           3、   rgb三原色表示法：rgb（255，255，255）；
           取值范围   0~255
          获取颜色的工具
              提取颜色的下载地址：https：//www。baidufe。com/fehelper
              photoshop工具

css背景样式？

background-colour 背景色
background 背景图
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x
repeat-y
repeat（x，y都进行平铺.默认值）
no-repeat 都不平铺
background-position：背景位置
x，y ： number（px、%） | 单词
x：left、center、right
y：tor、center、bottom
background-attachment：背景图随滚动条移动的方式
scoll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器d进行偏移的
）

css边框样式？

border-style：边框样式
solid：实线
dashed：虚线
dotted ：点线
border-width：边框大小
px…
border-color：边框颜色
red f00 …
边框也可针对某一个边进行单独设置：border-left-style：中间是方向left right top bottom
颜色：透明颜色 transparent

css文字样式？

fornt-family：字体类型
英文中文
1、注意点 :多个文字类型的设置目的
2、引号的添加目的
front-size：字体大小
默认：16pxp’x
写法：number （px ）|单词）（small large 不推荐使用）
fornt- weight：字体粗细
模式：正常（mormal）加粗（bold）
写法：单词（normal、bold）|（number）（100 200 …900 100到500都是正常的，600到900都是加粗的）
fornt-style：字体样式
模式：正常（normal ）斜体（italic）
写法单词 (normal italic)
注：oblique也表示斜体用的比较少，一般了解即可
区别：italic：所有带有倾斜字体的可以设置
2、oblique没有倾斜字体的属性也可以设置倾斜操作。

css段落样式？

text-decoration ：文本装饰
下划线、underline
删除线line-through
上划线：overline
不添加任何装饰：none
注；添加多个文本修饰：line-through underline overline
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对字母大写：capitilize
text-indent：文本缩进
首行缩进
em单位：相对单位 1em永远都是跟字体大小相同
text-align：文本对齐方式
line-height：定义行高
什么是行高。一行文字的高度，上边距和下边距的等价关系。
默认行高，不是固定值而是变化的
默认行高，不是固定值，而且是变化的。根据当前字体的大小在不断的变化。

  取值：1、number（px）|   scale（比例值，跟文字大小成比例的 ）
  letter-spacing：词之间的间距（针对英文段落的）
  英文和数字不自动折行的问题，
  1、world-break：break-a11（0非常强烈的折行）
  2、world-warp：breakworld；（不是那么强烈的折行会产生一些空白区域）

css复合样式：

复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background
border，有的是需要关心顺序；例如font
1、background：red url（）repeat0 0 ；
2、border：1px red solid ；
3、font：
注：最少有两个值 size family
weight syle size family √
syle weight size √
weight style size/line -height family √
注：如果非要这样写的话；那么要先写复合样式，再写一下简单样式，这样样式才不会被覆盖掉。

css选择器？

                  1、TD选择器
                  #elem（）    id=“elem
                  注：id是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
                  2、命名的规范：由字母’下划线‘中划线，字母（并且第一个不能是数字）
                  3、驼峰写法（searchButton   小驼峰）   S饿啊日和Button（大驼峰）searchsmallbutton
                  短线写法：search-small-buttom
                  下划线写法：search_small_button

CLASS选择器

.elem() class=“elem”
注：1、class选择器是可以复用的。
可以添加多个class样式。
3、多个样式的时候，样式的优先级可以根据css决定。而不是class属性决定的
4、标签+类的写法

第三周

第一部分、

1.标签选择器
该部分主要介绍css各种选择器及其注意事项与用法。
**1.标签选择器（）tag选择器：**如div{}对应div标签
使用场景：1.去掉某些标签的默认样式时
　　　　　2.复杂的选择器中，如层次选择.
**2.群组选择器（）分组选择器：**可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。
3.通配选择器： *{} -> div，ul，li…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用.
使用场景：去掉所有标签的默认样式时

<!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>
     div ,#div1,.div3{background-color: aquamarine;}
     </style>
</head>
<body>
    <div>鼠鼠</div>
    <div id="div1">叔叔</div>
    <div class="div3">数数</div>

</body>
</html>

2.层次选择器
该部分主要介绍层次选择器的使用方法及其内涵.
1.选择器类别：后代 m n {}
　　　　　　　父子 m > n {}
　　　　　　　兄弟 m ~ n {} 当前m下面的所有兄弟n标签
　　　　　　　相邻 m + n {} 当前m下面相邻的n标签

后代即是同一大标签内的所有标签，父子是只有下一个有，兄弟是下面所有，相邻就是相邻的对应标签

<!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>
   #div1 h1{text-decoration:underline;}
   #ol1 > li{font-weight: 700;}
   #ul1 ~ li{border:1px red solid; }
   #div2 + p{background-color: brown;}
    </style>
</head>
<body>
    <div id="div1">
        <h1>本周的特别主题是“猫兄酱紫长？”</h1>
        <h2>猫猫也很可爱</h2>
    </div>
    <ol id="ol1">
        <li>猫儿子
            <ol>
                <li>猫孙子</li>
            </ol>
        </li>
    </ol>
    <ul id="ul1">
        <li>0.0.有id的猫</li>
    </ul>
    <ul>
        <li>没有id的猫</li>
    </ul>
    <div>
        <p>被div岔开的喵喵</p>
    </div>
    <div id="div2">
        <p>内部的喵喵</p>
    </div>
     <p>相邻的喵喵</p>
</body>
</html>


**3.属性选择器**
该部分主要说明属性选择器的用法.
1.属性选择器的用法：
m[] {}
=：完全匹配
*=：部分匹配
^ =: 起始匹配
$ =: 结束匹配

<!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>
        div[id*=div1]{background: red;}
    </style>
</head>
<body>
    <div id="div1">喵</div>![请添加图片描述](https://img-blog.csdnimg.cn/ce1c1c2b4e8f408aba92f5e4e8038ee7.png)

    <div id="div1-div2">喵喵</div>
    <div id="div3-div1">喵喵喵</div>
    <div id="div4-div1">喵喵喵喵</div>
    <div id="div5-div1">喵喵喵喵喵</div>
</body>
</html>

不能重复使用div{}
**4.after，hover等伪类选择器**
该部分主要讲after伪类的使用方法及其作用
1.伪类选择器： css伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用来伪类来添加
2.css伪类：
m：伪类{}
：link 访问前的样式 （只能添加给a标签）
：visited 访问后的样式 （只能添加给a标签）
： hover 鼠标移入时的样式 （可以添加给所有的标签）
： active 鼠标按下时的样式 （可以添加给所有标签）
： after，before
：checked，disabled
：focus

如果四个伪类都生效，一定要按l v h a 的顺序添加
一般网站只这样去设置： a{} a：hover{}
:after,before 通过伪类浮的方式给元素添加一段文本内容，使用content属性
：checked，disabled，focus 都是针对表单元素的

``<!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>
        a{color: brown;}
        a:hover{color: aqua;}
    </style>
</head>
<body>
    <a href="">流体喵</a>
</body>
</html>

Document

喵头

```

shift+ ctrl+ delt 清楚浏览器缓存
5.结构伪类选择器
该部分主要讲解伪类结构选择器的作用
1.选择器种类：
nth-of-type（） nth-child（）
角标从1开始，1表示第一项，以此类推，无线大
first-of-type，last-of-type，only-of-type
child去掉of与type相同
2.type与child的区别：
type：种类，child：孩纸
child修饰的是同阶级的第二个

实验中发现only作用于被包含元素中，且在同级中能重复出现，其它属性类似。

<div>
    <span></span>
    <a href="#"></a>
    </div>
    块嵌套块
    <div>
        <div></div>
    </div>
    特殊：
    <p>
        <div></div>
    </p>
    内联是不能嵌套块
        错误的写法：
        <span>
            <div></div>
         </span>
         特殊：
         正确的写法：
         <a href="">
            <div></div>
         </a>

         总之    标签嵌套规范
         块标签可以嵌套内联标签
         快标签不一定能嵌套块标签
         内联标签不能嵌套块标签
                a标签是一个例外

6.css样式继承
该部分主要讲解css样式继承的条件与用法
1.继承语言： {属性：inherit}

<!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>
        div{ width: 60px;height: 60px; border: 2px red solid;} 
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>喵~~~~~~~~~~~~~~~~~~~~ao</p>
    </div>
</body>
</html>

**相同样式优先级：**设置相同样式后，后面的优先级较高，但不建议出现相同样式的情况.
2.内部样式与外部样式：内部样式与外部样式优先级相同，同样是后写的优先级更高。

style>id>class>tag>*>继承

<!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>
        #div1{color: rgb(221, 0, 255);}
        *{color: red;}
        .div1{color: black;}
        div:{background:inherit;}
    </style>
</head>
<body>
    <div id="div1" class="div1" style="color:rgb(0, 255, 89)">0.0</div>
</body>
</html>

8.!important群组等优先级
该部分主要说明!important群组的优先级顺序
**1.!important:**提升样式优先级，不规范，不建议。
**2.标签+类与单类：**标签+类>单类
**3.群组优先级：**群组选择器与单一选择器的优先级相同，后写优先级更高.

<!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>
    div.p1{color: red;}
    div{color:green}
    h1{color: red;}
    h1,h2{color: blue;}
    #name{color: green;}
    h3{color: rebeccapurple!important;}
</style>
</head>
<body>
    <div class="p1">
        <p>o(=•ェ•=)m</p>
    </div>
    <h1>
        <h2>o(=•ェ•=)m</h2>
    </h1>
    <h3 id="name">o(=•ェ•=)m</h3>
</body>
</html>

9.层次的优先级
该部分主要讲解层次的优先级比较
1.权重比较：
ul li .box p input{} 1+1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较：
ul li .box p input{}
.hello span #elem{}

<!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>
         ul,.box{color: red;}
     ul,#name{color: green;}
     
    </style>
</head>
<body>
    <div >
        <ul id="name"class="box">
            <li>0.0</li>
        </ul>
    </div>
</body>
</html>

一、第二部分

1.css盒子模型
该部分主要讲解css盒子模型的概念及其用法
1.组成： content（物品）——paading（填充物）——border（包装盒）——margin(盒子之间的间距)
content：width与height组成
padding：内边距（内填充）
padding-（left，right，top，bottom）margin也一样
2.效果：
1.背景色填充到margin以内的区域（不包括margin）
2.文字在content区域添加.
3.padding不能为负数，而margin可以为负数.

<!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>
        #div1{ width:900px;height:900px;
            background-color: red;padding: 30px;margin: -60px;}
            #div2{width: 900px;height:900px;background-color:blue;}
            
    </style>
</head>
<body>
    <div id="div1">(￣(工)￣)</div>
    <div id="div2">(￣(工)￣)</div>
</body>
</html>

2.box-sizing改变盒模型
该部分主要介绍部分改变盒子模型的方式
**1.盒模型默认：**盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box：width，height——cnotent
border-box:width,height——content padding border
2.使用场景：
1.不再去计算一些值
2.解决一些100%的问题
2.box-sizing： box-sizing属性允许以特定的方式匹配某个区域的特定元素，取值为content-box border-box

<!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>
        div{width: 100px; height: 100px;background-color: aqua;padding: 10px ;margin: 10px;
        box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>好困0.0</div>
</body>
</html>

3.盒模型之margin叠加问题
该部分主要介绍叠加问题的解决方法
1.问题：当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，这个问题只在上下有，左右是没有这个叠加问题的.
2 解决方案： bfc规范只给一个元素添加间距

!DOCTYPE html>

Document

```

4.盒模型之margin传递问题
该部分主要解决margin传递时的一些问题
1.问题： magin传递问题只会出现在嵌套结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的.
2.解决方案： bfc规范，给父容器加边框，margin换成padding

<!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>
        #span1{background-color: red;margin:100px;}
        #span3{background-color: green;margin:100px;}
        #div1{width: 200px;height: 100px;background-color: red;padding-top: 100px;}
        #div2{width: 100px;height: 100px;background-color: aquamarine;}
    </style>
</head>
<body>
    <div>喵喵<span id="span1">喵喵喵喵喵</span>喵喵</div>
    <div>喵喵<span id="span3">喵喵喵喵喵</span>喵喵</div>
    <div id="div1">
        <div id="div2"></div>
    </div>
    
</body>
</html>

5.css盒模型之拓展
该部分主要讲的是css的拓展知识
1.拓展： margin左右自适应是可以的，但是上下自适应是不行的（现在不行）
width，height不设置的时候，对盒子模型的影响，会自动去计算容器的大小

Document ![

喵喵喵喵喵喵喵喵喵

6.盒子模型的嵌套练习

请添加图片描述

第三部分、

该部分主要介绍标签类型，了解大概即可。
按类型：
block：div、p、ul、li、h1 …
1、独占一行
2、支持所有样式
3、不写宽的时候，跟父元素的宽相同
4、所占区域是一个矩形

inline：span 、a、 em 、strong、img、…
1、挨在一起的
2、有些样式不支持，例如：width、height、margin、padding、
3不写宽的时候，宽度由内容决定
4、所占的区域是一个矩形
5、内联标签之间会有空隙，原因：换行产生的

          inline-block：input、select...
          1、挨在一起，但是支持宽高

注：布局一般使用块标签，修饰文本一般使用内联标签

按内容：
flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
phrasing：措辞
Embeddrd;嵌入的
Interactive：互动的
（详情：https：//www.w3.org/TR/html5/dom.html）

2、display显示边框类型

该部分主要显示框的分类
1、类型：display:biock inline inline-block none…
2、区别;display：none不占隐藏的隐藏
visiblity：hidden 占空间的隐藏
block不内联 inline内联 inline-block并列 none隐藏
实操效果

3、嵌套标签规范

该部分主要介绍标签嵌套规范注意事项
标签嵌套规范？

ul、li
dl dt dd
table tr td
块能够嵌套内联

4、overflow溢出隐藏

**标签**：overflow：visible（默认），hidden，scroll，suto，（x，y轴）

！<!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>
        div{width: 100px;height: 100px;overflow:scroll
            ;border-color: black;}
    </style>
</head>
<body>
    <div>喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵

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

5、透明度与手势

1、调节不透明度：opacity：0（透明）~（不透明）
注：占空间，所有的子内容也会透明 rgba（）：0~1
注：可以让指定的样式透明，而不影响其他样式

2、手势;cursor：手 default：默认箭头
自定义手势;图片：.cur，.ico cursor：url（#），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>
        #div1{width: 100px;height: 100px;background-color: aqua;opacity: 0.5;}
        #div2{width: 100px;height: 100px;background: rgba(255, 0,0 ,1);cursor: alias;}
    </style>
</head>
<body>
    <div id="div1">mao</div>
    <div id="div2">mao</div>
</body>
</html>

6、最大最小宽高
1、代码： min-width height max-width,height

没什么用不如直接加宽高

<!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>
        div{max-width: 200px;min-height: 200px;border:1px red solid;}
    </style>
</head>
<body>
    <div>喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
    </div>
</body>
</html>

7、css默认样式

没有默认样式的：div span 
有默认样式的
body -> marign :8px
h1 -> marign :上下21.440px
font-weight :blod 
<p-> marign：上下 16px
    ul->marign :上下 16px  padding:左 40px 
    默认点：list-style :disc
    a-> text-decoration:underling ;

8、css重置样式

*1、重置方法：
*{marign:0; padding :0; }
ul{list-style:none}
a{text-decoration:none;
color：#666；}
img{display ：block}

<!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>
        *{list-style: none;}
        div{ border: 1px red solid;}
    </style>
</head>
<body>
    <div><img src="./图片/4960A5E8EC6E8131A4F29A750A8AA52D.jpg" alt=""></div>
</body>
</html>

9、float浮动概念及其原理
大块要在下面

脱离文档流，延迟父容器靠左或靠右进行排列
left right none

!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>
        body{border: 1px black solid;}
        #div1{width: 50px;height: 50px;background: green;float: left;}
        #div2{width: 100px;height: 100px;background: red;float: left;}
        #div3{width: 200px;height: 200px;background:blue
        ;}
      
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

10、float注意点

float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。

11、清除float浮动


如何清除浮动？
上下排列：
clear属性，表示清除浮动的，left、right、both、
嵌套排列：
      固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
      父元素浮动：不推荐，因为父容器浮动也会影响后面的元素。
      overflow ：hidden（BFC规范），如果有子元素像溢出，那么也会受到影响。
      display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
      设置空标签：不推荐，会多添加一个标签。
      after伪类：推荐，是空标签的加强版，目前各大公司的做法。
           （clear属性只会操作块标签，对内联标签不起作用）

Document

12.float制作页面小结构

<!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;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none; color: #666;}
        h1,h2,h3{font-size: 16px;}
        .l{ float: left;}
        .r{ float: right;}
        .clear:after{ content:"";display: block;clear: both;}
        #main{width: 400px;margin: 30px auto;}
        #main .h22{font-size:10px ;height: 25px;line-height:25px ;font: 700;padding-left: 30px;background: url(../素材图片/背景色.webp)repeat-x;}
        #mian ul{overflow: hidden; margin-top: 9px;}
        #main li{margin-bottom: 5px;}
        #main .div1{border: 1px grey solid;width: 100px;height: 100px;padding-left: 20px;}
        #mian .div1 img{margin: 2px;}
        #main .div2{width:200px;margin-left: 13px;}
        #main .div2 h2{line-height: 30px;}
        #main .div2 p{line-height:30px ;}

    </style>
</head>
<body>
    <div id="main">
        <h2 class="h22">面狼和猫</h2>
        <ul>
            <li class="clear">
                <div class="l div1">
                    <a href="">
                        <img src="../素材图片/面狼.jpg" alt=""width="100px" height="100px"></a>
                </div>
                <div class="l div2">
                    <h2>眠狼的画与猫</h2>
                    <p>眠狼的画6666666666666666666666666 <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l div1">
                    <a href="">
                        <img src="../素材图片/面狼2.jpg" alt=""width="100px" height="100px">
                    </a>
                </div>
                <div class="l div2">
                    <h2>眠狼的画与猫</h2>
                    <p>眠狼的画6666666666666666666666666<a href="#">[详细]</a>
                    </p>
                </div>
              
            </li>
            <li class="clear">
                <div class="l div1">
                    <a href="">
                        <img src="../素材图片/面狼3.jpg" alt=""width="100px" height="100px">
                    </a>
                </div>
                <div class="l div2" >
                    <h2>眠狼的画与猫</h2>
                    <p>面狼的画66666666666666666666666666666<a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>