Web前端（1~20）

扰乱了你的心

已于 2022-10-27 16:55:17 修改

阅读量1.2k

点赞数 2

文章标签：前端 css javascript visual studio vscode

于 2022-10-20 00:39:46 首次发布

本文链接：https://blog.csdn.net/qq_54084071/article/details/127340669

版权

文章目录

一、HTML、CSS系列之导学
- 1.拨云见日
- 2.溯本求源
- 3.风生水起
- 4.巧夺天工
二、什么是HTML和CSS
- 1.查看网站原始代码的方法：
- 2.一个网站是由N多个网页组成的
- 3.如何创建.html文件并看到效果
三、宇宙第一编辑器 VS Code
- 1.安装插件
- 2.学习编辑器使用
四、chrome浏览器
- - 五大浏览器：
五、深入了解网站开发
- 1.职务
- 2.JavaScript,与HTML、CSS之间的关系
六、web前端的三大核心技术
- 1.如何去掉网站的JS
七、HTML基础结构与属性
- 1.超文本
- 2.语言
- 3.标记（标签）
八、HTML初始代码
- 格式
九、HTML注释
- 1.写法：``
- 2.意义：
- 3.快速添加注释与删除注释：
十、HTML语义化
十一、标题与段落
- 1.h标签：标题
- 2.p标签：段落
十二、文本修饰标签
十三、图片标签与图片属性
- 属性
十四、引入文件的地址路径
- 1.相对路径（相对于某一个文件来进行引入的）
- 2.绝对路径
十五、跳转链接
- 1.a标签-->双标签`
十六、跳转锚点
- 实现一
- 实现二
十七、特殊符号
- 1.&+字符
- 2.解决冲突（左右尖括号、添加多个空格的实现）
十八、无序列表
- 标签格式
十九、有序列表
- 标签格式
二十、定义列表
二十、嵌套列表
- 练习
展示
二十二、表格标签
二十三、表格属性
二十四、表单标签1
- 1.重要标签
- type属性及含义
二十五、表单标签2
二十六、表格表单组合实例
二十七、`<div>`与`<span>`
二十八、CSS基础语法
二十九、内联样式与内部样式
三十、外部样式及两种写法
- 引入一个单独的css文件，name.css
三十一、css中的颜色表示法
- 获取颜色的工具：photoshop吸管工具
三十二、CSS背景样式
三十三、背景实现视觉差效果
三十四、CSS边框样式
三十五、边框实现三角形
三十六、family字体类型
- CSS文字样式

一、HTML、CSS系列之导学

1.拨云见日

基础：HTML、CSS
切图流程：传统、智能
实战阶段：PC企业站布局、PC游戏站布局

2.溯本求源

扩展：HTML、CSS
HTML5和CSS3新语法：在浏览器中很成熟
不同浏览器的兼容问题与解决方案hack

3.风生水起

流行布局：弹性布局、网格布局、移动布局、响应式布局(Bootstrap)

4.巧夺天工

工程方面：预编译CSS、postcss、CSS架构
高级功能、CSS与JS交互

二、什么是HTML和CSS

它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。

1.查看网站原始代码的方法：

鼠标右键选择查看网页源代码

2.一个网站是由N多个网页组成的

电视剧可以看作一个网站
每一集可以看作一个网页
播放 .mp4文件
网页 .html文件

3.如何创建.html文件并看到效果

在指定目录下，点击鼠标右键，在新建中创建文本文档（.txt），将其重新命名为.html
输入代码后，拖拽/双击该文件，在浏览器中打开

三、宇宙第一编辑器 VS Code

VS Code，全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器
下载地址：https://code.visualstudio.com/

1.安装插件

语言包、open in browser、view in browser(方便直接进入网页）

2.学习编辑器使用

设置：文件 --> 首选项 --> 设置（大小、是否换行 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+鼠标左键：多光标（同时进行修改）
crtl+d：选中相同元素的下一个

四、chrome浏览器

谷歌浏览器（Google Chrome）是一款可让您更快速、轻松且安全的使用网络的浏览器。市场分额占比过半。
Chrome下载地址：https://www.google.cn/intl/zh-CN/chrome/
百度统计浏览器市场份额：https://tongji.baidu.com/data/browser chrome:68.88%
五大浏览器：
Internet Explorer浏览器（IE）
Opera浏览器（欧朋）
Safari浏览器（苹果）
Mozilla Firefox浏览器（火狐）
Google Chrome浏览器（谷歌）

五、深入了解网站开发

一个大型网站的开发，需要团队的配合，各个岗位不可或缺。

1.职务

UI设计师：提供图片、设计稿
web前端开发工程师（H5开发)：
设计稿–>代码
数据库里的数据–>显示到页面
HTML（结构）+CSS（样式美化渲染）
web后端开发工程师
数据库数据的管理、存储

2.JavaScript,与HTML、CSS之间的关系

HTML与CSS、JS是不同的技术，可以独立存在；
HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；
CSS一般是不能脱离HTML的，如果CSS脱离了HTML，那就没有存在的必要的；
JS可以脱离HTML和CSS而独立存在；
JS可以操作HTML和CSS

HTML是骨架，CSS是皮肤，JS是肌肉

六、web前端的三大核心技术

HTML:结构
CSS：样式
JavaScript：行为（同用户交互的行为）

1.如何去掉网站的JS

点击Chrome浏览器中“设置”–>“高级”–>“内容设置”–>“JavaScript”–>关闭“已允许”

七、HTML基础结构与属性

HTML超文本标记语言，标记通用标记语言的下一个应用，是网页制作必备的编程语言。

1.超文本

文本内容+非文本内容（图片、视频、音频等）

2.语言

编程语言（语法格式、书写格式）

3.标记（标签）

<单词>比如：

<header><footer>

写法分为两种：
单标签、双标签

1)创建标签的快捷键：单词+Tab–> <单词>

2)标签可以上下排列，也可以组合嵌套

<header>
    hello world
    <div>
        1
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</header>

3)HTML5标签含义之元素周期表

4)标签的属性

修饰标签，设置当前标签的一些功能
语法格式

<标签 属性 ="值" 属性2 ="值2"> 一个标签可以加若干属性

<header title="hello">hello world</header>
<footer title="hi">hi HTML<footer>

鼠标移入会显示提示层

八、HTML初始代码

每一个html文件都需要添加初始代码，，初始代码就是无论你你写什么样的代码，这些代码都是有的，要符合html文件的规范写法。
！+Tab键：快速创建html的初始代码，不添加初始代码也能正常解析

格式

<!DOCTYPE html>         文档声明︰告诉浏览器这是一个html文件
<html lang= "en" >      html文件的最外层标签:包裹着所有html标签代码
                        lang ="en"表示是一个英文网站lang-"zh-CN"表示一个中文网站 规范不易出问题
    <head>
        <meta charset="UTF-8">     元信息:是编写网页中的一些赋值信息
        <title>Document</title>    设置网页标题
    </head>
    <body>
        显示网页内容的区域
    </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>

九、HTML注释

注释的代码只有在文件代码中看得到，但是浏览器显示不出来。

1.写法：``

2.意义：

把暂时不不用的代码的代码注释起来，方便以后使用。
对开发人员进行提示

3.快速添加注释与删除注释：

ctrl+/ 光标移动到初始位置
shift+alt+a 需要选中

十、HTML语义化

所谓HTML语义化指的是根据网页中内容结构，选择适合的HTML标签进行编写。
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
4.便于团队开发与维护。

屏幕阅读器：网址（网页标题提取，提炼出标题，整理成大纲）
在Chrome浏览器下–>书签–>显示书签栏
将H5O v0.12.4直接拖拽至书签栏

十一、标题与段落

1.h标签：标题

双标签：<h1></h2>...<h6></h6>...

网页内容区域的标题中的title（与head不同）。
在一个网页中，h1标题是最重要，并且一个.html文件中，只能出现一次h1标签（其他可以出现多次）。

2.p标签：段落

双标签：<p></p>

Chrome浏览器中自带调试器：右键–>检查
不要把很多段落全写在一个p标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<body>
    <h1>一标题</h1>
    <h2>二级标题</h2>
    <p>啥啥啥是啥......</p>
    <h2>三级标题</h2>
    <p>啥啥啥又是啥......</p>
    <h3>四级标题</h3>
    <p>啥啥啥又又是啥......</p>
</body>
</html>

十二、文本修饰标签

<strong></strong>：表示强调，强调性更强，双标签，会对文本进行加粗。
<em></em>：也表示强调，但与<strong>：相比稍弱，双标签，会对文本进行斜体。
<sub></sub>：下标文本

<p> a<sub>2</sub> </p>

<sup></sup>：上标文本

<p> H<sup>2</sup>O </p>

显示效果

<del></del>:删除文本
<ins></ins>：插入文本

<p> 原价<del>300</del>，现价<ins>100</ins>。</p>

显示效果

十三、图片标签与图片属性

<img>：图片单标签 img+"Tab"生成

属性

src：引入图片地址
alt：当图片出现问题，显示不出来的时候，可以显示一段友好的提示文字。（若图片没问题，则不会出现文字）。
title：提示信息（所有HTML标签都具有的属性）
width、weight：图片大小（数值单位像素在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>
</head>
<body>
    <img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2022%2F1019%2Fa8761f58j00rjzes2004vc001hc00u0c.jpg&thumbnail=660x2147483647&quality=80&type=jpg" alt="货轮 CCTV-13"title="这是一张图片的提示信息"width="300" height="300">
</body>
</html>

十四、引入文件的地址路径

1.相对路径（相对于某一个文件来进行引入的）

在路径中表示当前路径
在路径中表示上一级路径

<body>
    <img src="./文件名" alt="" >
    <img src="./文件夹名/文件名" alt="" >     在当前文件的子元素
    <img src="../文件夹名/文件名" alt="" >    在文件夹外部
</body>

2.绝对路径

指文件的完整路径（可以自动寻找盘符），不会参照某一个参照物进行引入，是真真实实的一个绝对的地方
盘符可以不写（自动识别）
在windows下斜线反斜线均通用（尽量避免使用反斜线）
网络地址必须斜线

十五、跳转链接

1.a标签–>双标签`

href属性：链接地址
target：可以改变打开链接的方式（默认在当前页面打开：_self 新窗口打开：_blank）
base标签：可以改变链接的默认行为（单标签），通常嵌套于<head>中

 <a href="http://www.baidu.com">访问百度</a>
 <a href="图片中的目标地址">
 <img src="图片地址" alt="">
 <a href="http://www.baidu.com"target="_blank">访问百度</a>

<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>-->
    <base target="_blank">
</head>

十六、跳转锚点

在一个页内进行跳转

实现一

#号
id属性

 <a href="#html">HTML</a>
 <a href="#css">CSS</a>
 <a href="#js">JavaScript</a>
 
 <h2 id="html">HTML超文本标记语言</h2>
 <p>模拟段落</p>
 <h2 id="css">CSS层叠样式表</h2>
 <p>模拟段落</p>
 <h2 id="js">js脚本</h2>
 <p>模拟段落</p>

实现二

#号
name属性（注意name属性加给的是a标签）

<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
 
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>模拟段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>模拟段落</p>
<a name="js"></a>
<h2>js脚本</h2>
<p>模拟段落</p>

name可以实现回到页面顶部

十七、特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如R（注册商标）、C(版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
空格符： 
©版权：©
®注册商标：®
<小于号：<
大于号>：>
和号：&
¥人民币：¥
°摄氏度：°

大于号、小于号要与html代码区分开

1.&+字符

2.解决冲突（左右尖括号、添加多个空格的实现）

十八、无序列表

<ul>、<li>：列表的最外层容器、列表项
注：ul和li必须是组合出现的，它们之间是不能有其他标签的，符合嵌套的规范（li內部可以有其他标签）
type属性：改变前面标记的样式（一般都是用CSS去控制）

标签格式

<ul type="样式"></ul>
( http://www.w3school.com.cn/tags/att_ul_type.asp )

<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
</ul>

<ul>
    <li><a href="#"><strong>第三项</strong></a></li>
    <li><a href="#">第四项</a></li>
    <li><a href="#">第五项</a></li>
</ul>

十九、有序列表

<ol>、<li>：列表的最外层容器、列表项
注:有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。一般用的比较少。

标签格式

<ol type="a"></ol>
( http://www.w3school.com.cn/tags/att_ol_type.asp )
代码基本上同无序列表

二十、定义列表

列表项需要添加标题和对标题进行描述的内容
<dl>：定义列表
<dt>：定义术语或名词
<dd>：对名词进行解释和描述

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
</dl>

二十、嵌套列表

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

<ul>
    <li>
        江苏省
        <ul>
            <li>南京市</li>
            <li>扬州市</li>
            <li>苏州市</li>
        </ul>
    </li>
    <li>
        山东省
        <ul>
            <li>烟台市</li>
            <li>青岛市</li>
            <li>烟台市</li>
        </ul>
    </li>
    <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>
    </dl>
</ul>

练习

<!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>
    <strong>好美味小吃</strong>
</head>
<body>
    <ul>
        <li>
            小吃类
        <ul>
            <li>煮粉干</li>
            <li>拌青菜</li>
            <li>蛋炒饭</li>
            <li>煎蛋</li>
            <li>米饭</li>
        </ul>
        </li>
        
    </ul>
    <ul>
        <li>
            卤味类
            <ul>
                <li>鸭肠</li>
                <li>面筋</li>
                <li>牛肚</li>
                <li>猪耳朵</li>
                <li>猪头肉</li>
                <li>大肠</li>
                <li>鱿鱼</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>
            套餐类
            <ul>
                <li>卤面筋饭</li>
                <li>猪肉肉饭</li>
            <li>猪耳朵饭</li>
            <li>卤猪脚饭</li>
            <li>卤猪舌头饭</li>
        </ul>
        </li>
    </ul>
    <ul>
        <li>
            炖罐类
            <ul>
                <li>猪蹄黄豆</li>
                <li>猪肚莲子</li>
                <li>猪心枸杞</li>
                <li>羊肉枸杞</li>
                <li>牛肉枸杞</li>
            </ul>
        </li>
    </ul>
</body>
</html>

展示

二十二、表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题

注：之间是有嵌套关系的，要符合嵌套规范。

语义化标签：<tHead>、<tBody>、<tFoot>（不会对网页造成效果的影响，使表格更加规范）

注：在一个table中，tBody是可以出现多次的，但是tHead、tFoot只能出现那一次。

<table>
    <caption>天气预报</caption>
    <tHead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
   <tBody>
     <tr>
           <td>2022年6月21日</td>
           <td>晴朗</td><!--通过img标签插入图片-->
           <td>适合出行</td>
     </tr>
     <tr>
           <td>2022年6月22日</td>
           <td>小雨</td><!--通过img标签插入图片-->
           <td>出门请带伞</td>
     </tr>
   </tBody>
   <tFoot>
    <!--也是tr,td的语句-->
   </tFoot>
</table>

二十三、表格属性

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

二十四、表单标签1

1.重要标签

<form>标签：表单最外层容器
<input>（单）标签：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，比如输入框、密码框、复选框等。
嵌套关系没有太严格的限制

type属性及含义

<test>：普通的文本输入框
<password>：密码输入框
<checkbox>：复选框
<radio>：单选框
<file>：上传文件
<submit>：提交按钮
<reset>：重置按钮

<form action="提交地址">
    <h2>输入框：</h2>
    <input type="text" placeholder="请输入用户名">
    <h2>密码框</h2>
    <input type="password" placeholder="请输入密码">
    <h2>复选框</h2>
    <input type="checkbox" (checked)>苹果     checked 表示已选中
    <input type="checkbox" (checked)>香蕉
    <input type="checkbox" (disabled)>葡萄    diasbled  表示不可选中
    <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>

二十五、表单标签2

<textarea>：多行文本框
<select>、<option>：下拉菜单
<label>：辅助标签

 <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select> 
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>苏州</option>
        <option>南京</option>
    </select>
    <input type="radio" name="gender" id=""><label for="man">男</label>
    <input type="radio" name="gender"><label for="womam">女</label>

> <select size="3">     让下拉菜单项数具体指向几项，默认为一项
> <select multiple>     主要表示多选（通过鼠标滑动或crtl+鼠标左键）
> <input type="file" multiple>    可以多选文件

二十六、表格表单组合实例

表格表单之间可以互相组合形成数据展示效果（先写表单）

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

二十七、`<div>`与`<span>`

div（块）：
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中多数的标签都可以嵌套在标签中，<div>中还可以嵌套多层<div>，用来将网页分成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行

<body>
      <div>这是一个块</div>
      <span>这是一个内联</span>
</body>

二十八、CSS基础语法

格式：选择器{属性1：值1；属性2：值2}（最后一组可以不加“；”）
单位：px -->像素（pixel）、%–>百分比
基本样式：width（宽）、height（高）、background-color（背景颜色）
CSS注释：/CSS注释的内容/(shift+alt+a或ctrl+/）

<head>
    <style>
    div {width:25%;height:100px;background-color: red;}
    span{background-color: blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <spam>这是一个内联</span>
</body>

二十九、内联样式与内部样式

内联（行内、行间）样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加样式
注：内部样式的优点，可以复用代码，复合W3C的规范标准，进而让结构和样式分开处理。

 <head>      
     <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>

三十、外部样式及两种写法

引入一个单独的css文件，name.css

<link>标签：引入外部资源
rel：指定资源和页面的关系
href：资源的地址
@import（这种方式有很多问题，不建议使用）

<head>
    <link rel="stylesheet" href="./common.css">
    <style>
    @import url('./common.css');
    </style>
</head>
<body>
    <div>这是一个块</div>

三十一、css中的颜色表示法

单词表示法：red blue green yellow（有局限性）
十六进制表示法：#000000 最小值黑色，#ffffff 最大值白色
RGB三原色表示法：rgb（，，）取值范围为0-255

获取颜色的工具：photoshop吸管工具

三十二、CSS背景样式

background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat：x,y都进行平铺，默认值
no-repeat：都不平铺

url（背景地址）
默认：会水平垂直都铺满背景图

background-position：背景图片的位置（正数：右下；负数：左上）或（x：left、center、right
y：top、center、bottom）
background-attachment：背景图片随滚动条的移动方式

scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）

<style>
        body{ height: 2000px ;}               滚动条
        div {width:300px;height:300px;background-color: red;}
             background-image: url（图片路径）
             background-repeat: no-repeat;
             background-position: 100px 50px;（50% 50%）
        background-attachment: scroll；      滚动条
        }
</style>

三十三、背景实现视觉差效果

<head>
<style>
#div1{width:1440px;height:800px;background-image:url(图片路径）;}
</style>
</head>
<body>
<div id="div1"></div>
</body>

三十四、CSS边框样式

border-style：边框的样式

solid 实线
dashed 虚线
dotted 点线

border-width：边框的大小（px）
border-color：边框的颜色（注：针对一条边进行单独设置）
边框也可以针对某一条边进行单独设置：border-left-style：中间是方向 left、right、bottom、top

<style>
       div{width:300px;height:300px;border-style: solid;border-color:red;border-width: 1px;}
       div{width: 300px;height: 300px;border-right-style:dashed;border-color:red;border-width: 30px;}
 div{width: 300px;height: 300px;border-right-style: dotted;border-right-width:10px;border-right-color: green;}  /* 针对不同的边可以分别更改样式 */
    </style>

三十五、边框实现三角形

width:0px;height:0px
颜色：透明文字 transparent

隐藏的边框要与背景色同色

三十六、family字体类型

CSS文字样式

font-family：字体类型
英文字体：Arial,‘Times New Roman’ （注：字体出现空格时用单引号）
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun

    <style>
        div{font-family: 宋体;}
    </style>

衬线体与非衬线体
衬线体：端点有棱角，如宋体
非衬线体：字体平滑，如微软雅黑
非衬线体采用了扁平化设计，简单直观。

注意事项
1.设置多字体方式
2.引号的问题

扰乱了你的心

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端（1~20）

Web前端（1~20）
复制链接

扫一扫

Web前端（1~20）

文章目录

一、HTML、CSS系列之导学

1.拨云见日

2.溯本求源

3.风生水起

4.巧夺天工

二、什么是HTML和CSS

1.查看网站原始代码的方法：

2.一个网站是由N多个网页组成的

3.如何创建.html文件并看到效果

三、宇宙第一编辑器 VS Code

1.安装插件

2.学习编辑器使用

四、chrome浏览器

五大浏览器：

五、深入了解网站开发

1.职务

2.JavaScript,与HTML、CSS之间的关系

六、web前端的三大核心技术

1.如何去掉网站的JS

七、HTML基础结构与属性

1.超文本

2.语言

3.标记（标签）

1)创建标签的快捷键：单词+Tab–> <单词>

2)标签可以上下排列，也可以组合嵌套

3)HTML5标签含义之元素周期表

4)标签的属性

八、HTML初始代码

格式

九、HTML注释

1.写法：

2.意义：

3.快速添加注释与删除注释：

十、HTML语义化

十一、标题与段落

1.h标签：标题

2.p标签：段落

十二、文本修饰标签

十三、图片标签与图片属性

属性

十四、引入文件的地址路径

1.相对路径（相对于某一个文件来进行引入的）

2.绝对路径

十五、跳转链接

1.a标签–>双标签`

十六、跳转锚点

实现一

实现二

十七、特殊符号

1.&+字符

2.解决冲突（左右尖括号、添加多个空格的实现）

十八、无序列表

标签格式

十九、有序列表

标签格式

二十、定义列表

二十、嵌套列表

练习

展示

二十二、表格标签

二十三、表格属性

二十四、表单标签1

1.重要标签

type属性及含义

二十五、表单标签2

二十六、表格表单组合实例

二十七、<div>与<span>

二十八、CSS基础语法

二十九、内联样式与内部样式

三十、外部样式及两种写法

引入一个单独的css文件，name.css

三十一、css中的颜色表示法

获取颜色的工具：photoshop吸管工具

三十二、CSS背景样式

三十三、背景实现视觉差效果

三十四、CSS边框样式

三十五、边框实现三角形

三十六、family字体类型

1.写法：``

二十七、`<div>`与`<span>`