Web前端学习html css（一）

什麼都沒發生

已于 2022-10-31 20:16:22 修改

阅读量1.9k

点赞数 2

文章标签：前端 css 学习

于 2022-10-19 23:08:50 首次发布

本文链接：https://blog.csdn.net/qq_74114305/article/details/127344473

版权

10.15

1.1 导学

1.拨云见日

html ，css，切图流程， PC企业布局， PC游戏布局

2.溯本求源

扩展html ，扩展css， html5新语法，css3新语法，兼容与hack

3.风声水起

弹性布局，网格布局，移动端布局，响应式布局，Bootstrap

4.巧夺天工

预编译css，postcss css架构，高级功能，css与js交互

1.2.什么是html ，css？

做网站的编程语言
浏览器把代码解析后就是我们看到的网站，鼠标右键看源代码

如何写代码，写在哪里呢？

一个网站是由多个网业组成的
新建文本文档，，改后缀名，通过打开方式，进行修改网页。

html

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.3.VS code编译器

Visual Studio Code（简称“VS Code” [1] ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器， [2] 可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

下载地址

https://code.visualstudio.com/
插件： open in browser ，view in browser，语言包

学习编译器基本使用：

ctrl+s 保存
创建文件创建文件夹重命名删除搜索
ctrl+x 剪切 ctrl+c剪切 ctrl+v粘贴
ctrl+z撤销，ctrl+y前进
shift+end（home）从前（后）选一行
shift+alt+↓ 快速复制一行

10.16

tab 向后缩进
tab+shift 向前缩进
alt+↓（↑）快速移动一行
多光标：alt+鼠标左键
ctrl+d 选择相同元素的下一个

Chrome浏览器

简介

请添加图片描述

深入了解网站开发

UI设计师：模板设计稿
web前端开发工程师（H5开发）
设计稿——>代码
html+css
HTML:结构
CSS:样式
web后端开发工程师
数据库里数据->显示到页面

Javascript

简介：JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
与css html的关系：
这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：

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

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

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

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

JS可以操作HTML和CSS。

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

三剑客

HTML:结构
CSS:样式
Javascript：交互（行为）

10.17

HTML基本结构和属性

html：超文本标记语言
超文本：文本内容+非文本内容（图片视频音频等）
标记：<单词>
语言：编程语言
标记也叫做标签
写法分为两种：单标签<>双标签<></>
创件标签的快捷键：单词+tab
标签可以上下排列也可以组合嵌套
html常见标签：

标签的属性：来修饰标签，设置标签的功能<标签属性=“值”>可以加多个标签

HTML初始代码（符合规范）

快捷键：！+tab （快速创建初始代码）

<!DOCTYPE html>   文档申明告诉浏览器是一个HTML文件
<html lang="en"> lang=“en"表示英文网站  cn中文网站
<head>
    <meta charset="UTF-8">/*meta元信息，是编写网页中的一些赋值信息*/charset="UTF-8"不容易出现乱码
    
    <title>Document</title>设置网业的标题
</head>
<body>
    显示网页内容的区域
</body>
</html>

HTML注释

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

10.18

html语义化（选择合适的标签进行编写）

好处：
1.在没有css的情况下，页面能呈现很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析。（屏幕阅读器，盲人阅读器）。
4.便于团队开发与维护。

标题与段落

标题->双标签

…

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

练习：

<!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>
<h1>王辉</h1>
<h2>个人简介</h2>
<h3>主授课程</h3>
    <p>高等数学等</p>
    
    <p>个人简历</p>
    <p>2005.9—2007.6：武汉大学数学学院，硕士</p> 
    <p>2007.9—2010.6：南开大学数学学院，博士 </p>
    <p>2010.6至今：南京邮电大学 理学院</p>
    <h4>研究领域</h4>
    <p>微分几何与李群李代数</p>

</body>
</html>

效果如下
在这里插入图片描述

文本修饰标签

强调->双标签,
区别：
1.一个加粗一个斜体
2.strong的强调性强，em稍弱
上(下)表文本()
删除文本删除线
插入文本
两个混合使用

10.19

图片标签与图片属性

img->单标签
src引入图片地址
alt当图片出现问题的时候，替代图片显示文字
title提示信息
width，height：图片大小

引入文件的地址路径

相对路径

1...跳到上一级

绝对路径（完整路径）

跳转链接

<a> </a>
href属性：链接的地址
target属性：可以改变链接打开方式，默认情况下在当前页面打开—self 新窗口打开—blank
base->单标签，改变链接默认行为的。
<base target="_blank">

跳转锚点

实现一
#号
id属性
实现二
#号
name属性（加给a标签的）

<!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="#html">HTML</a>
    <a href="#CSS">CSS</a>
    <a href="#JavaScript">JavaScript</a>

    <h2 id="html">HTML超文本标记语言
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <h2 id="CSS">CSS层叠样式</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <h2 id="JavaScript">JavaScript</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</body>
<html>

效果如下
在这里插入图片描述

特数符号

代码可以忽略空格，所以要空格符

无序列表

<ul>、<li>：列表的最外层容器，列表项
注：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>
</head>
<body>
    <ul>
        <li>第一项</ul>          
        <li>第二项</ul>            
        <li>第三项</ul>            
    </ul>
</body>
<html>

效果如下
在这里插入图片描述

有序列表

<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>
</head>
<body>
    <ol>
        <li>第一项</ul>          
        <li>第二项</ul>            
        <li>第三项</ul>            
    </ol>
</body>

效果如下
在这里插入图片描述

type属性<ol type="a">

定义列表`<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>
<body>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
</dl>

</body>
<html>

效果如下
在这里插入图片描述

10.22

嵌套列表

列表之间可以互相嵌套形成多层级列表

<!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>
    <ul>
        <li>
            辽宁省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
                <li>丹东</li>
            </ul>
        </li>
        <li>
            山东省
            <ul>
                <li>济南</li>
                <li>烟台</li>
                <li>青岛</li>
            </ul>
        </li>
    </ul>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <ul>
        <li>
            辽宁省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
                <li>丹东</li>
            </ul>
        </li>
        <li>
            山东省
            <ul>
                <li>济南</li>
                <li>烟台</li>
                <li>青岛</li>
            </ul>
        </li>
    </ul> -->
    <dl>
        <dt>中国</dt>
        <dl>
            <dt>辽宁省</dt>
            <dd>沈阳</dd>
            <dd>大连</dd>
            <dd>丹东</dd>
        </dl>
        <dl>
            <dt> 山东省</dt>
            <dd>济南</dd>
            <dd>青岛</dd>
            <dd>烟台</dd>
        </dl>
        <dt>美国</dt>
        <dd>洛杉矶</dd>
        <dd>纽约</dd>

    </dl>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <ul>
        <li>
            辽宁省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
                <li>丹东</li>
            </ul>
        </li>
        <li>
            山东省
            <ul>
                <li>济南</li>
                <li>烟台</li>
                <li>青岛</li>
            </ul>
        </li>
    </ul> -->
    <!-- <dl>
        <dt>中国</dt>
        <dl>
            <dt>辽宁省</dt>
            <dd>沈阳</dd>
            <dd>大连</dd>
            <dd>丹东</dd>
        </dl>
        <dl>
            <dt> 山东省</dt>
            <dd>济南</dd>
            <dd>青岛</dd>
            <dd>烟台</dd>
        </dl>
        <dt>美国</dt>
        <dd>洛杉矶</dd>
        <dd>纽约</dd>

    </dl> -->
    <h1>好美味的小吃</h1>
    <ul>
        <li>
            小吃类
            <ul>
                <li>拌青菜</li>
                <li>蛋炒饭</li>
                <li>煮粉干</li>
                <li>煎蛋</li>
                <li>米饭</li>
            </ul>
        </li>
        <li>
            卤味类
            <ul>
                <li>鸭肠</li>
                <li>面筋</li>
                <li>牛肚</li>
                <li>猪耳朵</li>
                <li>猪头肉</li>
                <li>大肠</li>
                <li>鱿鱼</li>
            </ul>
        </li>
        <li>
            套餐类
            <ul>
                <li>卤肉筋饭</li>
                <li>猪肉肉饭</li>
                <li>猪耳朵饭</li>
                <li>卤猪脚饭</li>
                <li>卤猪舌头饭</li>
            </ul>
        </li>
        <li>
            炖罐类
            <ul>
                <li>猪蹄黄豆</li>
                <li>猪肚莲子</li>
                <li>猪心枸杞</li>
                <li>羊肉枸杞</li>
                <li>牛肉枸杞</li>
            </ul>
        </li>
        </li>
    </ul>
    <em>亲,20元以上可送餐哦!!</em>
</body>
</html>

效果如下
在这里插入图片描述

表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>：定义表格单元
<caption>：定义表格标题
之间是有嵌套关系的，要符合嵌套规范

<!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>
    <tr>
        <th>日期</th>
        <th>天气情况</th>
        <th>出行情况</th>
    </tr>
    <tr>
        <td>2019.1.1</td>
        <td><img src="./OIP-C.jfif" alt=""></td>
        <td>天气晴朗，适合出行</td>
    </tr>
    <tr>
        <td>2019.1.2</td>
        <td><img src="./OIP-C (1).jfif" alt=""></td>
        <td>有小雨，出门请带伞</td>
    </tr>
   </table> 
</body>
</html>

效果如下
在这里插入图片描述
语义化标签:<tHead>,<tBody>,<tFood>

<!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>2019.1.1</td>
          <td><img src="./OIP-C.jfif" alt=""></td>
          <td>天气晴朗，适合出行</td>
       </tr>
       <tr>
          <td>2019.1.2</td>
          <td><img src="./OIP-C (1).jfif" alt=""></td>
          <td>有小雨，出门请带伞</td>
       </tr>
    </Tbody>
    <tFood>
        
    </tFood>
   </table> 
</body>
</html>

效果如上图一样
tBody可以出现多次，但是tHead，tFood只能出现一次

表格属性

border：表格边框
cellpading：单元格内空间
cellspacing：单元格之间空间
rowspan:合并行
colspan：合并列
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>
    <caption>天气预报</caption>
    <tHead>
      <tr>
           <th>日期</th>
           <th>天气情况</th>
           <th>出行情况</th>
      </tr>
    </tHead>
    <Tbody>
       <tr>
          <td>2019.1.1</td>
          <td><img src="./OIP-C.jfif" alt=""></td>
          <td>天气晴朗，适合出行</td>
       </tr>
       <tr>
          <td>2019.1.2</td>
          <td><img src="./OIP-C (1).jfif" alt=""></td>
          <td>有小雨，出门请带伞</td>
       </tr>
    </Tbody>
    <tFood>

    </tFood>
   </table>  -->
   <table border="1" cellpading="30" cellspacing="30">
    <caption>天气预报</caption>
    <tHead>
      <tr align="right" valign="top">
           <th colspan="2">日期</th>
           <th>天气情况</th>
           <th>出行情况</th>
      </tr>
    </tHead>
    <Tbody>
       <tr>
          <td rowspan="2">2019.1.1</td>
          <td>白天</td>
          <td><img src="./OIP-C.jfif" alt=""></td>
          <td>天气晴朗，适合出行</td>
       </tr>
       <tr>
         <td>夜晚</td>
         <td><img src="./OIP-C.jfif" alt=""></td>
         <td>天气晴朗，适合出行</td>
     </tr>
       <tr>
          <td rowspan="2">2019.1.2</td>
          <td>白天</td>
          <td><img src="./OIP-C (1).jfif" alt=""></td>
          <td>有小雨，出门请带伞</td>
       </tr>
       <tr>
         <td>夜晚</td>
         <td><img src="./OIP-C (1).jfif" alt=""></td>
         <td>有小雨，出门请带伞</td>
     </tr>
    </Tbody>
    <tFood>
        
    </tFood>
   </table> 
</body>
</html>

效果如图
在这里插入图片描述

作业

<body>
    <table border="1" cellpading="30">
        <tr>
            <td>班次名称</td>
            <td>科目</td>
            <td>授课内容</td>
            <td>增值服务</td>
            <td>课时</td>
            <td>价格</td>
            <td>试听</td>
            <td>购买</td>
        </tr>
        <tr>
            <td rowspan="3">真题精解班</td>
            <td>行测+申论</td>
            <td>全科历年真题精解</td>
            <td rowspan="3">课后赠两套模拟卷24小时以内答疑</td>
            <td>48</td>
            <td>1280元</td>
            <td><img src="./QQ截图20221023211810.png" alt=""></td>
            <td><img src="./QQ截图20221023211856.png" alt=""></td>
        </tr>
        <tr>
            <td>行测</td>
            <td>行测历年真题精解</td>
            <td>32</td>
            <td>980元</td>
            <td><img src="./QQ截图20221023211810.png" alt=""></td>
            <td><img src="./QQ截图20221023211856.png" alt=""></td>
        </tr>
        <tr>
            <td>申论</td>
            <td>申论历年真题精解</td>
            <td>16</td>
            <td>580元</td>
            <td><img src="./QQ截图20221023211810.png" alt=""></td>
            <td><img src="./QQ截图20221023211856.png" alt=""></td>
        </tr>
        <tr>
            <td rowspan="3">高分技巧班</td>
            <td>行测+申论</td>
            <td>全科技巧强化</td>
            <td rowspan="3">入学试卷测评24小时内答疑</td>
            <td>32</td>
            <td>980元</td>
            <td><img src="./QQ截图20221023211810.png" alt=""></td>
            <td><img src="./QQ截图20221023211856.png" alt=""></td>
        </tr>
        <tr>
            <td>行测</td>
            <td>行测速技巧强化</td>
            <td>18</td>
            <td>680元</td>
            <td><img src="./QQ截图20221023211810.png" alt=""></td>
            <td><img src="./QQ截图20221023211856.png" alt=""></td>
        </tr>
        <tr>
            <td>申论</td>
            <td>申论速解技巧强化</td>
            <td>14</td>
            <td>580元</td>
            <td><img src="./QQ截图20221023211810.png" alt=""></td>
            <td><img src="./QQ截图20221023211856.png" alt=""></td>
        </tr>
    </table>
</body>
</html>

效果如图所示
在这里插入图片描述

10.23

表单标签

form input …
input（单标签）标签有一个type属性，决定是什么控件。
还有一些常见属性：
checked disabled name for…(如下图代码1.1)
在这里插入图片描述

<!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://2607371654@qq.com">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="1">男
        <input type="radio" name="1">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

在这里插入图片描述

表格标签

form，input，textarea，select，label…

代码1.1

<h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select >
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select size="3">
            <!-- 默认为1，显示项数 -->
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select multiple >
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <input type="file" mutieple>
        <input type="radio" name="1" id="man"><label for="man">男</label>
        <input type="radio" name="1" id="woman"><label for="woman">女</label>

效果如下
在这里插入图片描述

表格表单的组合

<form action="">
        <table border="1" cellpading="30">
             <tr align="center">
                <td rowspan="4">总体信息</td>
                <td colspan="2">用户注册</td>
             </tr>
             <tr align="right">
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名"></td>
             </tr>
             <tr align="right">
                <td>密码：</td>
                <td><input type="text" placeholder="请输入密码"></td>
             </tr>
             <tr align="center">
                <td colspan="2">
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </td>
            </tr>
        </table>
    </form>

效果如下
在这里插入图片描述

10.24

`<div>`与`<span>`

1.<div>做一个区域划分的块
2.<span>对文字进行修饰，内联

 <div>
        <h2><a href="#">哔哩哔哩 <span style="color: red;">(゜-゜)つロ</span> 干杯~-bilibili</a></h2>
        <a href="#"></a>
        <p>哔哩哔哩（bilibili.com)是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up 主。大家可以在这里找到许多欢乐。</p>
        <a href="#">https://www.bilibili.com</a>
    </div>

效果如下图所示
在这里插入图片描述

css基础语法

格式

选择器{属性1：值1；属性2：值2}

单位

px->像素（pixel）
%->百分比（外容器->600px 当前容器50%->300px ）

基本样式

width 宽
height 高
background-color 背景颜色

css注释

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

在这里插入图片描述

 <style>
    div{width:100%; height: 100px;background-color: red}
    span{background-color: blue;}
    </style>

在这里插入图片描述

内链样式与内部样式（css引入样式）

1.内联样式

       style属性

2.内部样式

       style标签

区别：
内部样式可以复用，符合w3c规范标准，进行让结构样式分开处理。

<div style="width:100px; height: 100px;background-color: red">这是一个块</div>
    <div style="width:100px; height: 100px;background-color: red">另外一个块</div>

在这里插入图片描述

<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}
    </style>
</head>
<body>
    <!-- <div style="width:100px; height: 100px;background-color: red">这是一个块</div>
    <div style="width:100px; height: 100px;background-color: red">另外一个块</div> -->
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>
</html>

效果跟上图一样

10.25

外部样式

引入一个单独css文件：name.css
通过标签引入外部资源
rel属性指定资源跟页面关系
href属性资源的地址

<!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">
    <link rel="stylesheet" href="./common.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

在这里插入图片描述
效果如下

== 还可以通过@import引入外部样式==（不建议使用，了解就可以）

<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">
    <!-- <link rel="stylesheet" href="./common.css"> -->
    <title>Document</title>
    <style>
        @import url(./common.css)
    </style>

CSS颜色表示法

单词表示法

请添加图片描述

十六进制表示法

0 1 2 3 4 5 6 7 8 9 a b c d e f

<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 { background-color:#000000}
    </style>
</head>

效果如下
在这里插入图片描述

rgb三源色表示法：rgb(255,255,255)

取值范围：0~255
提取颜色的下载地址https://www.fehelper.com 在这里插入图片描述
也可以ps提取16进制代码

CSS背景样式

background-color 背景色
background-image 背景图
url（背景地址）
默认：水平垂直都铺满

<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: 300px;height: 300px;background-color: red;background-image:url(./QQ截图20221023211856.png) ;}
    </style>
</head>

在这里插入图片描述
background-repeat 平铺方式
repeat-x x轴平铺

repeat-y y轴平铺
在这里插入图片描述

repeat （x,y 都进行平铺，默认值）
在这里插入图片描述

no-repeat 都不平铺
在这里插入图片描述
background-position：背景位置
x ，y ：nummber||单词||百分比
x：left，center，right
y: top,center,bottom
background-attachment：背景图随滚动条的移动方式
scroll：默认值==（按照当前元素进行偏移的）==

fixed （按照浏览器进行偏移的）

10.26

练习

CSS边框的样式

border-style 样式：
solid 实线
dashed 虚线
dotted 点线
border-color 颜色：
red 。。。
border- width 大小
px 。。。

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{height: 2000px;} */
        /* div{width: 300px;height: 300px;background-color: red;background-image:url(./QQ截图20221023211856.png) ;background-repeat: repeat;background-attachment: scroll;} */
        div{width: 300px;height: 300px;border-style: solid;}
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述

边框也可以对某一条边单独设置
border-left-style(top right left bottom)

<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{height: 2000px;} */
        /* div{width: 300px;height: 300px;background-color: red;background-image:url(./QQ截图20221023211856.png) ;background-repeat: repeat;background-attachment: scroll;} */
        div{width: 300px;height: 300px;border-right-style: solid;border-width: 10px;border-color: blue;}
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述

练习

<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: 300px;height: 300px;
    border-top-color: black; 
    border-top-style: solid;
    border-top-width: 10px;
    border-bottom-color: black; 
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-left-color: black; 
    border-left-style: solid;
    border-left-width: 10px;
    border-right-color: black; 
    border-right-style: solid;
    border-right-width: 10px;}
    </style>
</head>
<body>
    <div></div>
</body>

效果：
在这里插入图片描述
练习
透明色 transparent

<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{background-color: aquamarine;}
        div{width: 0px;height: 0px;
    border-top-color: black; 
    border-top-style: solid;
    border-top-width: 10px;
    border-bottom-color: transparent; 
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-left-color: transparent; 
    border-left-style: solid;
    border-left-width: 10px;
    border-right-color: transparent; 
    border-right-style: solid;
    border-right-width: 10px;}
    </style>
</head>

在这里插入图片描述

CSS文字样式

font-family：字体类型
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体

中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：’SimSun‘

衬线体与非衬线体
请添加图片描述

注：1、设置多字体方式和目的
在font-family后面依次输入，并用逗号隔开；为了防止用户电脑中没有对应字体，依次识别。
2、引号的问题
当名称之中存在空格是需要用到引号（英文）

<!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{font-family: 宋体;}
        div2{font-family: 'Times New Roman';}
    </style>
</head>
<body>
    <div id="div1">Win11 新功能：可通过Wi-Fi面板直接打开并连接到手机热点</div>
    <p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！</p>
    <div id="div2">Everything is possible.</div>
    <p>There's a kind of poverty called short-sightedness.</p>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/87aeb49e12354e929ef0101e912e90af.png

字体粗细

写法：正常（normal）、加粗（bold）；也可以直接输入数值（100 200 … 900 都是一些成百的数字，但是100~500都是正常的，600～900都是加粗的）

<style>
	div{font-weight:bold;}
</style>

字体样式

模式：正常（normal）、斜体（italic）

<style>
	div{font-style:italic;}
</style>

注：oblique也是斜体，但是用的比较少。
区别：1、italic 所有带有倾斜字体的字体才可以设置倾斜操作
2、oblique 没有倾斜属性的字体也可以设置倾斜操作

段落样式

text-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不修饰：none
注：可以通过空格隔开进行多个文本修饰

   <style>
        p{width:300px;text-decoration: underline ，overline;}
    </style>

在这里插入图片描述

文本缩进 (text-indent)

首行缩进
em单位：相对单位，1em永远和字体大小相同。如果我利用font-size更改的字体大小，而我在text-indent输入2em，保存后永远会空出俩个字符大小，如果统一段落中混入了英文，那么就有可能依旧对不齐。

</head>
    <style>
        p{text-indent: 36px;font-size:18px}
    </style>
</head>
<body>
    <p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！</p>
</body>

效果如下
在这里插入图片描述
我们就可以看到它首行空出了2个字的间距

文本对齐方式（text-align）

	对齐方式：left、right、center、justify（两端点对齐）

我们让上面的文本进行中间对齐：

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{text-align: center;}
    </style>
</head>
<body>
    <p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！</p>
</body>

在这里插入图片描述

定义行高（line-height）

定义：一行文字的高度。一行文字的高度，上边距和下边距是等价的
默认行高：不是固定值，而是随当前字体大小不断变化的。
取值：1、具体数值。2、比例尺（scale），与文字大小成比例（1就是字体的1倍，2就是两倍）请添加图片描述

    <style>
        p{line-height: 40px;} /也可以直接输入数字，他就会默认成字体大小的比例倍数/
    </style>
</head>
<body>
    <p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！对于熟悉微软的用户来说，“星期二补丁”都是相当熟悉的一个词汇，自从2003年开始，微软就在每个月的第二个周二推送这个月的系统补丁，为用户带来最新的安全性更新。但近一段时间，“星期二补丁”却往往会在修复问题的同时，带来更多的问题。近日，微软确定，10月份Win10的星期二补丁KB5018410存在问题，可能会导致OneDrive受到影响，出现意外关闭、闪退等问题。同时，微软还表示如果帐户创建的标识不同于用于加入域的标识，则可能会遇到错误“0xaac (2732) ”的情况。目前，微软尚未针对上述问题给出任何解决方案，仅表示正在进行调查，预计下周推出对应的修复程序。</p>
</body>

在这里插入图片描述

24、CSS复合样式

一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
复合样式
background
border
font
复合的写法：是通过空格来实现的
例如：

<!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:300px;height: 300px;background: red url(./QQ截图20221023211810.png) no-repeat center center;
         border:4px black solid；
         font:bold italic 30px 宋体
         }
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述
们当然也可以类似上面的边框的写法进行编辑。而且有的写法是不需要关系顺序的，例如background、border；有的是需要关系顺序的，例如：font（注：font至少需要两个值：size和family，而且size总是需要在family之前）
在这里插入图片描述

==注意，尽量不要混写，如果非要混写，那一定要先写复合样式再写单一样式。==如果按照如下格式（先单一后复合）写，那么background-color被覆盖!

24、CSS复合样式

一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式

复合样式

	background
	border
	font

复合的写法：是通过空格来实现的

例如：

<!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:300px;height: 300px;background: red url(./图片合集/OIP-C.jpg) no-repeat center center;
         border:4px black solid；
         font:bold italic 30px 宋体
         }
    </style>
</head>
<body>
    <div></div>
</body>
<ml>

我们当然也可以类似上面的边框的写法进行编辑。而且有的写法是不需要关系顺序的，例如background、border；有的是需要关系顺序的，例如：font（注：font至少需要两个值：size和family，而且size总是需要在family之前）

==注意，尽量不要婚鞋，如果非要混写，那一定要先写复合样式再写单一样式。==如果按照如下格式（先单一后复合）写，那么background-color被覆盖
在这里插入图片描述

CSS选择器

id选择器

CSS：#elem{}
id=“elem”
html：id=“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>
        #div1{background: red }
        #div2{background: blue}
    </style>
</head>
<body>
    <div id="div1">对于熟悉微软的用户来说，“星期二补丁”都是相当熟悉的一个词汇，自从2003年开始，微软就在每个月的第二个周二推送这个月的系统补丁,为用户带来最新的安全性更新。</div>
    <div id="div2">对于熟悉微软的用户来说，“星期二补丁”都是相当熟悉的一个词汇，自从2003年开始，微软就在每个月的第二个周二推送这个月的系统补丁，为用户带来最新的安全性更新。</div>
</body>

在这里插入图片描述

注意：1、一个页面之中只能有一个对应id，出现多个就是不规范的操作
2、命名规范：字母、下划线、中划线，不能是数字
3、驼峰写法：searchButton（小驼峰写法）
短线写法（推荐）：search-small-button
下划线写法：search_small_button

有一个id创建的快捷键：div#div1+tab键

CLASS选择器

CSS：.elem{}
html:class="elem"

注意：（1）、class是可以复用的。
例如：

<!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{background:red}
    </style>
</head>
<body>
    <div class="box">这是一个区块</div>
    <div class="box">这是一个区块</div>
    <p class="box">这是一个区块</p>
</body>
</html>

在这里插入图片描述

（2）、可以添加多个class样式

<!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{background:red}
        .content{font-size:30px}
    </style>
</head>
<body>
    <div class="box content">这是一个区块</div>
</body>
<ml>

（3）、多个样式的时候，样式的优先级根据CSS决定的，而不是在class内的顺序决定的。

<head>
    <style>
        .box{background:red}
        .content{font-size:30px;background:blue}
    </style>
</head>
<body>
    <div class="content box">这是一个区块</div>
</body>

在这里插入图片描述

class中box在content后面，但是这个只会显示蓝色，所以不是按照class内的顺序来决定的。

“.”前面是用来标签限制的，例如：

<head>
    <style>
        p.box{background:red}
    </style>
</head>
<body>
    <div class="box">这是一个区块</div>
    <p class="box">这时一个段落</p>
</body>

在这里插入图片描述

这里保存后运行就只会对下文中的p标签生效了。

什麼都沒發生

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Web前端学习html css（一）

学习web前端
复制链接

扫一扫

Web前端学习html css（一）

10.15

1.1 导学

1.拨云见日

html ，css， 切图流程， PC企业布局， PC游戏布局

2.溯本求源

扩展html ， 扩展css， html5新语法，css3新语法，兼容与hack

3.风声水起

弹性布局，网格布局，移动端布局，响应式布局，Bootstrap

4.巧夺天工

预编译css，postcss css架构，高级功能，css与js交互

1.2.什么是html ，css？

如何写代码，写在哪里呢？

html

css

1.3.VS code编译器

下载地址

学习编译器基本使用：

10.16

Chrome浏览器

简介

深入了解网站开发

Javascript

三剑客

10.17

HTML基本结构和属性

HTML初始代码（符合规范）

HTML注释

10.18

html语义化（选择合适的标签进行编写 ）

标题与段落

文本修饰标签

10.19

图片标签与图片属性

引入文件的地址路径

相对路径

绝对路径（完整路径）

跳转链接

跳转锚点

特数符号

无序列表

有序列表

定义列表<dl><dt><dd>

10.22

嵌套列表

练习

表格标签

表格属性

作业

10.23

表单标签

表格标签

代码1.1

表格表单的组合

10.24

<div>与<span>

css基础语法

格式

单位

基本样式

css注释

内链样式与内部样式（css引入样式）

1.内联样式

2.内部样式

10.25

外部样式

CSS颜色表示法

单词表示法

十六进制表示法

rgb三源色表示法：rgb(255,255,255)

CSS背景样式

10.26

练习

CSS边框的样式

练习

CSS文字样式

字体大小

字体粗细

字体样式

段落样式

html ，css，切图流程， PC企业布局， PC游戏布局

扩展html ，扩展css， html5新语法，css3新语法，兼容与hack

html语义化（选择合适的标签进行编写）

定义列表`<dl><dt><dd>`

`<div>`与`<span>`