蓝旭前端预习1——HTML+CSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了蓝旭前端预习1——HTML+CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML

HTML：超文本标记语言

HTML基本骨架

标签的关系

常见标签及其属性

注释标签

标题

段落

换行

水平线

文本格式化

图像

超链接

多媒体：音频+视频

div、span标签：划分网页区域，摆放内容

字体实体：在网页中显示预留字符

列表

有序列表

无序列表

定义列表

表格

表单：收集用户信息（用于登录+注册+搜索等）

input标签

下拉菜单

文本域：多行输入文本

label标签：某标签的说明文本（经常用于增大表单控件的选择范围）

写法一

写法二

按钮

路径：相对路径、绝对路径

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。

选择器、复合选择器及伪类选择器

基本选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。注意：标签选择器无法差异化同名标签的显示效果。

类选择器：查找标签，差异化设置标签的显示效果。

id选择器：查找标签，差异化设置标签的显示效果。id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式。注意：同一个 id 选择器在一个页面只能使用一次。

通配符选择器：查找页面所有标签，设置相同样式。不需要调用，浏览器自动查找页面所有标签，设置相同的样式。注意：通配符选择器常用于清除标签的默认样式。

复合选择器

后代选择器（包括孙代）

子代选择器（仅子代）

并集选择器：选中多组标签设置相同的样式。

交集选择器：选中同时满足多个条件的元素。

伪类选择器

画盒子

字体文本属性

字体

行高

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

文本对齐

修饰线

文本缩进

文本颜色

Google调试：检查、调试代码；帮助程序员发现代码问题、解决问题 1.打开Google （1）浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查（2）F12 2.使用调试工具

三大特性

Emmet写法：代码的简写方式，输入缩写后， VS Code会自动生成对应的代码。

背景属性

显示模式：标签（元素）显示方式根据标签的显示模式选择合适的标签摆放内容

结构伪类选择器：根据标签的结构关系查找标签

HTML

HTML：超文本标记语言

超文本：链接；

标记：标签；
HTML基本骨架
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字
- VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
标签的关系

父子关系：嵌套
兄弟关系：并列

常见标签及其属性
- 注释标签
  
  
- 标题
  
  title：网页标题
  
  <title>Document</title>
- 段落
```
<p>	这是段落标签 </p>
```
- 换行
```
<br>单标签
```
- 水平线
```
<hr>单标签
```
- 文本格式化
  - ```
  加粗标签 <strong></strong> <b></b>
```
- ```
倾斜标签 <em></em>   <i></i>
```
  - ```
  下划线标签<ins></ins>	<u></u>
```
- ```
删除线标签<del></del>	<s></s>
```
- 图像
```
<img src="(路径)" alt="" title="" width="" height="">
```
  - src——指定图像的位置和名称
  - alt——替换文本
  - title——提示文本
  - width——图片宽度
  - height——图片高度
  <img src="D:\微信文件保存\WeChat Files\wxid_0hbb0jjzeevs22\FileStorage\Temp\e46831809bd2634b2cf6980222d5a6c.png" alt="e46831809bd2634b2cf6980222d5a6c" align="left"/>
- 超链接
```
<a href="" target="_blank">这是超链接</a>
```
  - href=①路径；②#空链接，用于开发初期并不知道跳转的窗口，后续补充
  - target="_blank" 点击超链接打开新窗口
- 多媒体：音频+视频
  
  (在HTML中，如果属性名和属性值完全一样，可以简写为一个单词)
  - ```
  <audio src="URL" controls loop autoplay></audio>
```
<img src="D:\微信文件保存\WeChat Files\wxid_0hbb0jjzeevs22\FileStorage\Temp\9fb98fb1ecdbdd207037f29b3a26ff9.png" alt="9fb98fb1ecdbdd207037f29b3a26ff9" align="left" />
- ```
<video src="URL"></video>
```
  <img src="D:\微信文件保存\WeChat Files\wxid_0hbb0jjzeevs22\FileStorage\Temp\592300a99c7b57003cc9d1d5e3ed58f.png" alt="592300a99c7b57003cc9d1d5e3ed58f" align="left" />
- div、span标签：划分网页区域，摆放内容
  - div：独占一行（大盒子）
  - span：不换行（小盒子）
  ![f1daf9e771d1b7e47e5fcfc6142a36a](D:\微信文件保存\WeChat Files\wxid_0hbb0jjzeevs22\FileStorage\Temp\f1daf9e771d1b7e47e5fcfc6142a36a.png)
- 字体实体：在网页中显示预留字符
  
  <img src="D:\微信文件保存\WeChat Files\wxid_0hbb0jjzeevs22\FileStorage\Temp\903b218a3de9de2f53b83e16b44c741.png" alt="903b218a3de9de2f53b83e16b44c741" align="left" />
列表
- 有序列表
```
<ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
</ul>
```
  <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323132858305.png" alt="image-20240323132858305" align="left" />
- 无序列表
```
<ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ol>
```
  <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323132928891.png" alt="image-20240323132928891" align="left"/>
- 定义列表
```
    <dl>
        <dt>聊天软件</dt>
        <dd>Wechat</dd>
        <dd>QQ</dd>
    </dl>
```
  <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323133432876.png" alt="image-20240323133432876" align="left"/>

表格

<!-- border用来设置边框；cellspacing 用来设置边框之间的缝隙大小;rowspan、colspan分别用来跨行跨列进行单元格合并--> 
    <table border="2" >
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>第一行</td>
            <td>第一行</td>
        </tr>
    </table>
    <br>
    <table border="1" cellspacing="0">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>第一行</td>
            <td>第一行</td>
        </tr>
    </table>

表单：收集用户信息（用于登录+注册+搜索等）
- input标签
```
<input type="" placeholder="提示信息，如请输入用户名">
```
  <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323140050741.png" alt="image-20240323140050741" align="left"/>
```

<input type="radio"  name="1"> 

<input type="checkbox" name="2" checked> 
```
- 下拉菜单
  
  <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323141604785.png" alt="image-20240323141604785" align="left"/>
- 文本域：多行输入文本
```
<textarea name="" id="" cols="30" rows="10"></textarea>
```
- label标签：某标签的说明文本（经常用于增大表单控件的选择范围）
  - 写法一
    - label标签只包裹内容，不包裹表单控件
    - 设置label标签的for属性值和表单控件的id属性值相同
```
<input type="radio" id="man" name="1">
<label for="man">男</label>
<input type="radio" id="woman" name="1">
<label for="woman">女</label>
```
  - 写法二
    - 使用label标签包裹文字和表单控件，不需要属性
```
<label><input type="radio" name="1">男</label>
<label><input type="radio" name="1">女</label>
```
- 按钮
```

<button type="">按钮名称</button>
```
  <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323143827579.png" alt="image-20240323143827579" align="left" />
路径：相对路径、绝对路径

相对路径
绝对路径

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。
选择器、复合选择器及伪类选择器
- 基本选择器
  - 标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。注意：标签选择器无法差异化同名标签的显示效果。
    
    <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323162350626.png" alt="image-20240323162350626" align="left"/>
  - 类选择器：查找标签，差异化设置标签的显示效果。
    
    <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323162453044.png" alt="image-20240323162453044" align="left"/>
  - id选择器：查找标签，差异化设置标签的显示效果。id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式。注意：同一个 id 选择器在一个页面只能使用一次。
    
    <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323162634152.png" alt="image-20240323162634152" align="left"/>
  - 通配符选择器：查找页面所有标签，设置相同样式。不需要调用，浏览器自动查找页面所有标签，设置相同的样式。注意：通配符选择器常用于清除标签的默认样式。
    
    <img src="C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20240323162808260.png" alt="image-20240323162808260" align="left" />
- 复合选择器
  - 后代选择器（包括孙代）
    - 写法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开。
  - 子代选择器（仅子代）
    - **写法：**父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。
  - 并集选择器：选中多组标签设置相同的样式。
    - **写法：**选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。
  - 交集选择器：选中同时满足多个条件的元素。
    - **写法：**选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。
- 伪类选择器
  - 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
  - 鼠标悬停状态：选择器:hover { CSS 属性 }
  - 超链接伪类 :link——访问前 :visited——访问后 :hover——鼠标悬停 :active——点击时（激活）

画盒子

<style>
    .red {
        width: 500px;
        height: 500px;
        background-color: #000;
    }
</style>
<div class="red">
        
</div>

字体文本属性

字体
- 大小默认：Google：16px（必须要单位）
- 粗细默认：正常：400（normal）；加粗：700（bold）；
- 字体样式：正常：normal；倾斜：italic；注意：可以用来清除默认倾斜效果
行高
- 数字+px
- 数字（是当前height的倍数）
font:
是否倾斜是否加粗字号/行高字体（必须按顺序书写）
文本对齐
- left——左对齐
- center——居中对齐
- right——右对齐
修饰线
- none——无
- underline——下划线
- line-through——删除线
- overline——上划线
文本缩进
- 数字 + px
- 数字 + em（推荐：1em = 当前标签的字号大小）
文本颜色
- 颜色关键字——对应颜色英文单词
- Rgb表示法——rgb(r,g,b)——rgb代表红绿蓝三原色，取值0-255
- Rgba表示法——rgba(r,g,b,a)——a表透明度，取值0-1
- 16进制表示法——#RRGGBB——eg：#000

描述	属性	描述	属性
字体大小	font-size	字体粗细	font-weight
字体倾斜	font-style	文本缩进	text-indent
行高	line-height	文本对齐	text-align
字体族	font-family	修饰线	text-decoration
字体复合属性	font	颜色	color

Google调试：检查、调试代码；帮助程序员发现代码问题、解决问题 1.打开Google （1）浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查（2）F12 2.使用调试工具
三大特性
- 继承性：子级默认继承父级的文字控制属性
- 层叠性：
  
  特点相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
  
  不同的属性会叠加：不同的 CSS 属性都生效
- 优先级：
  - 基础选择器
    
    规则：选择器优先级高的样式生效。
    
    公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !Important（选中标签的范围越大，优先级越低）
  - 复合选择器-叠加
    
    叠加计算：如果是复合选择器，则需要权重叠加计算。
    
    公式：（行内样式，id选择器个数，类选择器个数，标签选择器个数）（每一级之间不存在进位）
  - 规则：
    
    从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较!important 权重最高，继承权重最低
Emmet写法：代码的简写方式，输入缩写后， VS Code会自动生成对应的代码。
背景属性
- 背景图
  - 属性名：background-image（bgi）
  - 属性值：url（背景图URL)
- 背景图平铺 back-ground-repeat
  - no-repeat（不平铺）
  - repeat（平铺）
  - repeat-x（水平方向平铺）
  - repeat-y（垂直方向平铺）
- 背景图位置 back-ground-poaition
  
  left right center top bottom 坐标（10px）
- 背景图缩放background-size
  - cover：等比覆盖
  - contain：等比缩放，可能存在空白。
  - 百分比：数字+单位（px）
显示模式：标签（元素）显示方式根据标签的显示模式选择合适的标签摆放内容
- 块级元素div：独占一行宽度默认与父级相同可添加宽度属性
- 行内元素span：一行可显示多个，与宽高属性无关，根据内容大小撑开
- 行内块：一行共存多个，宽高生效，默认由内容撑开
结构伪类选择器：根据标签的结构关系查找标签
- E:first-child 用于查找父元素的第一个子元素
- E:last-child 用于查找父元素的最后一个子元素
- E:nth-child(N) 用于查找父元素的第N个子元素
- 偶数 2n 奇数 2n+1 5的倍数 5n 5之后的 5+n 5之前的 5-n文章来源地址https://www.toymoban.com/news/detail-852059.html

到了这里，关于蓝旭前端预习1——HTML+CSS的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

蓝旭前端预习1——HTML+CSS

HTML

HTML：超文本标记语言

HTML基本骨架

标签的关系

常见标签及其属性

注释标签

标题

段落

换行

水平线

文本格式化

图像

超链接

多媒体：音频+视频

div、span标签：划分网页区域，摆放内容

字体实体：在网页中显示预留字符

列表

有序列表

无序列表

定义列表

表格

表单：收集用户信息（用于登录+注册+搜索等）

input标签

下拉菜单

文本域：多行输入文本

label标签：某标签的说明文本（经常用于增大表单控件的选择范围）

写法一

写法二

按钮

路径：相对路径、绝对路径

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

选择器、复合选择器及伪类选择器

基本选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。注意：标签选择器无法差异化同名标签的显示效果。

类选择器：查找标签，差异化设置标签的显示效果。

id选择器：查找标签，差异化设置标签的显示效果。id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式。注意：同一个 id 选择器在一个页面只能使用一次。

通配符选择器：查找页面所有标签，设置相同样式。不需要调用，浏览器自动查找页面所有标签，设置相同的样式。注意：通配符选择器常用于清除标签的默认样式。

复合选择器

后代选择器（包括孙代）

子代选择器（仅子代）

并集选择器：选中多组标签设置相同的样式。

交集选择器：选中同时满足多个条件的元素。

伪类选择器

画盒子

字体文本属性

字体

行高

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

文本对齐

修饰线

文本缩进

文本颜色

Google调试： 检查、调试代码；帮助程序员发现代码问题、解决问题 1.打开Google （1）浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查 （2）F12 2.使用调试工具

三大特性

Emmet写法：代码的简写方式，输入缩写后， VS Code会自动生成对应的代码。

背景属性

显示模式： 标签（元素）显示方式 根据标签的显示模式选择合适的标签摆放内容

结构伪类选择器 ：根据标签的结构关系查找标签

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。

font:
是否倾斜是否加粗字号/行高字体（必须按顺序书写）

Google调试：检查、调试代码；帮助程序员发现代码问题、解决问题 1.打开Google （1）浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查（2）F12 2.使用调试工具

显示模式：标签（元素）显示方式根据标签的显示模式选择合适的标签摆放内容

结构伪类选择器：根据标签的结构关系查找标签