HTML、CSS

• 一、HTML+CSS
• • 1.1什么是HTML、CSS
  • 1.2宇宙第一编辑器VS Code
  • 1.3Chrome浏览器
  • 1.4、深入了解网站开发
• 一、HTML基本操作
• • 1.web前端三大核心技术
  • 2.HTML初始代码
  • 3.HTML注释
  • 4.HTML语义化
  • 5.标题与段落
  • 6.文本修饰标签
  • 7.图片标签与图片属性
  • 8.引入文件的地址路径
  • 9.跳转链接
  • 10.跳转锚点
  • 11.特殊符号
  • 12.无序列表
  • 13.有序列表
  • 14.定义列表
  • 15.嵌套列表
  • 16.表格标签
  • 17.表格属性
  • 18.表单标签
  • 19.表格表单组合
  • 20.div与span
• 二、CSS基本语法
• • 1.内联样式与内部样式（css样式的引入方式）
  • 2.外部样式
  • 3.css中的颜色表示法
  • 4.背景样式
  • 5.背景实现视觉差
  • 6.边框样式
  • 7.文字样式
  • 8.css段落样式——文本修饰
  • 9.css段落样式——文本大小写
  • 10. css段落样式——文本缩进
  • 11.css段落样式——定义行高
  • 12.css段落样式——字间距与词间距
  • 13.css复合样式
  • 14.css选择器——id
  • 15.css选择器——class

一、HTML+CSS

1.1什么是HTML、CSS

（1）知识点：是制作网页的编程语言

浏览器把代码解析后的样子就是我们看到的网站

一个网站是由很多个网页组成的

查看网页代码源

（2）.html网页制作

新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式（打开记事本）——输入要输入的内容——拖拽网页图标到浏览器里

1.2宇宙第一编辑器VS Code

（1）定义

VSCode，全称visual studio code，来自微软，是一个开源的、基于electron的轻量代码编译器。

（2）基本操作

自动换行：设置：文件->首选项->设置（大小、是否换行Word wrap）

学习编辑器基本使用：

创建文件：点击右键

重命名

删除

VScode快捷操作：

Ctrl+S：保存

Ctrl+a：全选

Ctrl+x、Ctrl+c、Ctrl+v：剪切、复制、粘贴

Ctrl+z、Ctrl+y：撤销、前进

shift+end：从头选中一行

shift+home:从尾部向前选中这一行

shift+alt+↓：快速复制一行

shift+↑或↓：快速移动一行

tab：向后缩进

tab+shift：向前缩进

多光标模式：alt+鼠标左键

Ctrl+D：选择相同元素的下一个

1.3Chrome浏览器

Chrome下载地址：google下载地址

1.4、深入了解网站开发

• UI设计师：设计稿

• web前端开发工程师（HS开发）

  设计稿->代码

  数据库里的数据->显示到页面

  HTML：负责结构

  CSS：负责样式

• web后端开发工程师

一、HTML基本操作

1.web前端三大核心技术

HTML：结构

CSS：样式

JavaScript:与用户的交互行为

示例：

缓缓飘落的枫叶像思念，你烛火惺忪点燃岁末的秋天

2.HTML初始代码

（1）定义

每一个HTML文件都学要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的

（2）内容

     //文档声明：告诉浏览器这是一个html文件
        //html最外层标签，包裹着所有html标签代码  lang= “en”是用英文网站 lang=“zh-CN"表示中文的网站

        //元信息：编写网页中的一些赋值信息 charset="UTF-8”国际编码，让网页不出现乱码的情况
    
    
       // 网页的标题


    //显示网络内容的区域

3.HTML注释

（1）写法：
在浏览器中看不到，只能在代码中看见

快捷方式添加与删除注释：Ctrl+/ （不用选中） shift+alt+a（先选中）

示例：

(2)意义

a.暂时不用的代码注释起来，方便以后使用

b.对开发人员进行提示

4.HTML语义化

（1）定义：所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写（什么样结构采用什么样的标签）

（2）标签的好处：

• 代码结构得到了优化，即使没有css，也能呈现出完整、清晰的结构，更加
• 方便阅读和理解，同时提高了团队合作的效率
• 有利于搜索引擎的优化
• 爬虫依赖标签确定关键字的权重，可以帮助爬虫爬出更多有效信息
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页

  （3）常用标签

  < h1>~< h6>标签：标题标签，h1等级最高，h6等级最低

  header元素：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框

  nav元素：定义页面的导航链接部分区域

  main元素：定义页面的主要内容，一个页面只能使用一次。

  article元素：定义页面独立的内容，它可以有自己的header、footer、sections等

  section元素：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分

  aside元素：一般用于侧边栏

  footer元素：文档的底部信息

  small元素：呈现小号字体效果

  strong元素：用于强调文本

  （4）标签元素周期表：

  

5.标题与段落

（1）h标签：标题

在一个网页中，h1标题最重要，并且一个.html文件只能出现一次h1文件，但是可以有很多h2、h3

标题
标题
标题
标题
标题 
         
标题

图片：

（2）p标签：段落

段落标题

english

6.文本修饰标签

(1)strong标签:表示强调，会对文本进行加粗

写法：

这是一首简单的小情歌

结果：

（2）em标签：表示强调，会对文本进行加粗

写法：

故事的小黄花

结果：

（3）sub：下标文本 、 sup：上标文本

写法：

a2+b2=c3

（4）del：删除文本、 ins：插入文本（一般配合文本使用的）

写法：

插入文本

结果：

7.图片标签与图片属性

（1）采用标签img<单标签>：图片

scr：引入图片的地址

alt:当图片出现问题的时候，可以显示一段友好的提示文字

title：提示信息

width，height：调节文件大小

方式：

示例：

8.引入文件的地址路径

相对路径：./n

在路径中表示当前路径: …/n

   //图片名字

…在路径中表示上一级路径(文件+文件)

图片示例：

绝对路径

看真真正正图片所在的位置

9.跳转链接

链接标签：

标签：双标签 、

href属性：链接的地址

示例：

访问百度

target属性：可以改变链接打开的方式，默认情况下：在当前页面打开新窗口

示例：

访问百度

base标签：（单标签）改变标签的默认行为，写一个打开许多个窗口

<不写在body里，写在head里>

示例：

访问百度
访问百度
访问百度
访问百度
访问百度

10.跳转锚点

实现一：#号、id属性

示例

HTML
css
Javascript
HTML超文本标记语言
                         
CSS层叠样式表
      
Javascript脚本
    

file:///D:/22210305/10.html#html

实现二：#号、name属性

示例

HTML
css
Javascript

HTML超文本标记语言
                         

CSS层叠样式表
      

Javascript脚本
    

11.特殊符号

在编写一些文本时，经常会遇到无法输入的字符，还有往一段文字中加多个空格时，页面并不会解析出多个空格 。这些特殊字符有专门的代码解决冲突

    
        <dahaoren>    

图片展示（翻译后）：

示例2：

        hello    world    
   

图片展示：

12.无序列表

ul、li：列表的最外层容器、列表项（ul和li必须是组合出现的，他们之间是不能有其他标签的）。符合嵌套的规范

示例：

        
第一项
        
第二项
    

结果：

type属性：改变前面标记的样式（一般都是用css去控制）

改变形式

练习：

13.有序列表

ol、li:列表的最外层容器、列表项主要用于排行榜

示例：

        
第一项
        
第二项
    
    

结果：

14.定义列表

列表项需要添加标题和对标题进行描述的内容

dl：定义列表

dt：定义专业术语或名词

dd：对名次进行解释和描述

示例：

    
你
    
是
   

结果：

15.嵌套列表

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

    

        江苏省
        

            
南京市
            
无锡市
            
徐州市
        
    
    

        山东省
        

            
济南
            
青岛
        
   
        

成果展示：

16.表格标签

table：表格的最外层容器

tr：定义表格行

th：定义表头

td：定义表格单元

caption：定义表格标题

以上之间是有嵌套关系的，要符合嵌套规范

    

        

            
日期
            
天气情况
    
            
出行情况
        
 
        

            
2022年1月1日
            

            
天气晴朗，适合出行
        
   
        

            
2022年1月2日
            

            
有小雨，记得带伞
        
    

语义化标签：tHead、tBody、tFood

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

17.表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

rowspan:合并行

colspan:合并列

align:左右对齐方式

valign:上下对齐方式

18.表单标签

不需要太多规范。

from;表单最外层容器

input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等（有一个type属性，决定是什么控件）

还有一些常见的属性：

checked、disabled、name、for…

    

        
输入框：
        
        
密码框：
        
    

成果展示：

 
 
        
输入框：
        
        
密码框：

成果展示：

复选框

    
        
输入框：
        
        
密码框：
        
        
复选框
        苹果
        香蕉
        葡萄
    

成果展示：

单选框：

    

        
单选框
        男
        女
    

成果展示：

上传文件：

    

        
上传文件
        
    

成果展示：

提交按钮和重置按钮：

    

        
        
提交按钮和重置按钮
        
        
    

成果展示：

textarea：多行文本框

多行文本框
        

成果展示：

下拉菜单
       
        
            请选择
            北京
            上海
            徐州
         
        男
        女

成果展示：

19.表格表单组合

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

    

        

            

              

                 
总体信息
                 
用户注册
             
             

                 
用户名：
                 

             
             

                 
密码：
                 

             
             

                 

                     
                     
                
            
        
        
    

成果展示：

20.div与span

div（块）：

div全称division，“分割、分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局

span（内联）：用来修饰文字的，div与span都是没有任何默认样式的。需要配合css才行

    
        
知乎 - 有问题，就会有答案 
        
        
知乎，中文互联网高质量的问答社区和创作者聚集的原创内容平台，于 2011 年 1 月正式上线，以「让人们更好的分享知识、经验和见解，找到自己的解答」为品牌使命。知乎凭借认真、专业 
        https://www.zhihu.com
    

成果展示：

二、CSS基本语法

格式：

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

单位：

px->像素（pixel）、%->百分比

基本样式：

width、height、background-color

CSS注释：

/css注释内容/

 
    
    
    
    
    
 
 
    这是一首简单的小情歌
    

成果展示：

1.内联样式与内部样式（css样式的引入方式）

内联（行内、行间）样式：

在html标签上添加style属性来实现的

 
 
    这是一首简单的小情歌
    

内部样式

在

妹妹说紫色很有韵味
董
双
玉

区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理

2.外部样式

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

link标签：引入外部资源

rel属性：指定资源跟页面的关系（当前文档与被链接的关系）

href属性：资源的地址

@import：通过这种方式引入外部样式（不建议，问题很多）

    
        
        
        
        
        
        
    

    董双玉头顶的颜色就是这块的背景色
    

成果展示

3.css中的颜色表示法

1.单词表示法：red、green等

颜色的英文代码：

2.十六进制表示法：

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.daidufe.com/fehelper

photoshop

4.背景样式

1.background-color:背景颜色

2.background-image:背景图片

【url背景地址】

默认：会水平垂直都铺满背景图

3.background-repeat:背景图片的平铺方式

repeat-x：x轴平铺

repeat-y：y轴平铺

repeat（x,y都进行平铺，默认值）

no-repeat:都不平铺

4.background-position:背景图片的位置

x y:number （px、%）单词

x:left、center、right

y：top、center、bottom

5.background-attachment:背景图片随滚动条的移动方式

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

fixed：（背景位置是按照浏览器进行偏移的）

5.背景实现视觉差

6.边框样式

border-style:边框的样式

solid：实线

dashed：虚线

dotted：点线

border-width:边框的大小（px…）

border-color:边框的颜色(red，#…)

注：针对某一条边进行单独设置

（圆角边框）

成果展示：

练习.利用边框实线三角形

边框加颜色：

成果展示：

三角形：

方法一：（将width与height设置为0，在讲其他方块颜色设置为背景色/不是白色，是与背景图相同的颜色/）

方法二：将每个方块颜色设置为透明色（transparent）

成果展示：

7.文字样式

1.字体类型：font-family

英文、中文

衬线体与非衬线体：

区别：带衬线有棱角，非衬线体比较圆滑

注：设置多字体的方式

如果设置的字体中有空格要带上单引号

 
    
    
    
    
    
 
 
    心中有党，成绩理想
   

成果展示：

2.字体大小：font-size（16px默认像素）

第一种：输入像素数字大小（00px）

第二种：有英文形式：

 
    
    
    
    
    
 
 
    我怀念的是无话不说
    

成果展示：

3.字体粗细：font-weight

模式：正常（normal）、加粗（bold）

写法：单词（normal、bold）/number（100 200…500都是正常的，600…900都是加粗的）/

4.字体样式：font-style

模式：正常（默认）、斜体（italic）

/*oblique也是表示斜体，用的比较少，一般了解即可，没什么差别 */

区别：（1.）italic：带有属性倾斜字体的才可以设置倾斜操作。

（2.）oblique：没有倾斜属性的字体也可以设置倾斜操作

8.css段落样式——文本修饰

text-decoration：文本修饰

下划线:underline

删除线:line-through

上划线:overline

 
    
    
    
    
    
 
 
    
每个优秀的人的心中都有一段沉默的时光，那段时光是付出了很多努力，却得不到结果的日子，我们把它叫做扎根
    

成果展示

9.css段落样式——文本大小写

text-transform：文本大小写（针对英文段落）

小写：lowercase

大写：uppercase

只针对首字母：capitalize

10. css段落样式——文本缩进

text-indent：文本缩进（一个文字16px——对齐）

首行缩进的效果

em相对单位：相对单位，1em永远与字体大小相同

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

 p{ text-align：left: ;}/*调节左右对齐*/
 

11.css段落样式——定义行高

line-height：

定义：一行文字的高度

默认：不是固定值，而是变化的。根据当前字体大小在不断的变化。

取值：1.number（px）|scale（比例值，跟文字大小成比例的）

p{ line-height:30px ;}

12.css段落样式——字间距与词间距

1.letter-spacing：定义字间距

2.Word-spacing：词之间的间距（针对英文段落）

3.强制折行：（针对英文、数字不自动折行）

（1.）word-break:break-all；（非常强烈的折行）

（2.）word-wrap：break-word；（不是那么强烈的折行，会产生空白区域）

13.css复合样式

一个css属性只控制一种样式，叫做单一样式

一个css属性控制多种样式，叫做复合样式（background、border、font）

复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font

14.css选择器——id

1.ID选择器：

15.css选择器——class