HTML & CSS

HTML基础使用

一、Web前端介绍

1. 什么是网页

网页是基于浏览器的应用程序，是数据展示的载体.

2. 网页的组成

1. 浏览器
   • 代替用户向服务器发请求
   • 接收并解析数据展示给用户
2. 服务器
   • 存储数据
   • 处理并响应请求
3. 协议
   • 规范数据在传输过程中的打包方式

3. 开发前的准备

1. 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
2. 调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
3. 开发工具：不限，选用个人习惯的即可（VSCode、EditPlus、PyCharm等）。

二、 HTML语法介绍

1. HTML介绍

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容

2. 标签

标签也称为标记或元素，用于在网页中标记内容

1. 语法：标签使用< >为标志，在< >内部写标签名和标签属性

   • 注释语法：
   • 标签名不区分大小写，推荐小写表示

2. 分类：

   • 双标签：成对出现，包含开始标签和结束标签。例：
   • 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：

3. 标签属性：

• 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：

• 同一个标签中可以添加若干组标签属性，使用空格间隔。例：

达内慕课网

3. 使用

1. 创建网页文件，使用.html或.htm作为文件后缀

2. 添加网页的基本结构

   
   
       
           
           
       
       
            网页主体内容
       
   
   

   专业的开发工具支持HTML代码补全功能，如VSCode中，创建好HTML页面以后可以输入英文感叹号(!)然后按tab键补全页面基本结构(不同的开发工具补全的基本结构有细微的差别，可以忽略)。

3. 标签嵌套
   在双标签中书写其他标签，称为标签嵌套

   • 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
   • 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
   • 平级结构互为兄弟元素

三、常用标签介绍

1. 基本结构解析

 

 
  
  
      
      
      
       
  
  
   
      网页主体内容
  

2. body中常用标签

• 文本标签

  • 标题标签：自带加粗效果，从h1到h6字体大小逐级递减

   
  一级标题
   
  二级标题
   
  三级标题
   
  四级标题
   
  五级标题
   
  六级标题
  

  • 段落标签：

  段落文本
  

  • 普通文本标签：

  行分区标签，用于对特殊文本特殊处理
  

  • 格式标签：
    浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
  • 字符实体：
    某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
    例：

   使用 < 在页面中呈现 "<"
   使用 > 在页面中呈现 ">"
   使用   在页面中呈现一个空格
   使用 © 在页面中呈现版权符号"©"
   使用 ¥ 在页面中呈现人民币符号"￥"
  

• 容器标签
  常用于页面结构划分，结合CSS实现网页布局

  页面顶部区域
  页面主体区域
  页面底部区域
  

• 图片与超链接标签

  • 图片标签 ：用于在网页中插入一张图片。

    1. 属性 src 用于给出图片的URL，必填。
    2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
    3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
    4. 属性 alt 用于设置图片加载失败后的提示文本

    语法：

  • 超链接标签：用户可以点击超链接实现跳转至其他页面
    1. 属性 href 用于设置目标文件的URL，必填。
    2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

  淘宝
  百度
  

3. 常用结构标签

• 列表标签

  • 有序列表（ordered list）
    默认使用阿拉伯数字标识每条数据

  
     
  list item 列表项
   
     
  list item 列表项
     
  list item 列表项
  
  

  • 无序列表（unordered list）
    默认使用实心圆点标识列表项

  
     
  list item 列表项
   
     
  list item 列表项
     
  list item 列表项
   
  

• 表格标签

  • 表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

  
  
       
      
  
          
          
  姓名
          
  年龄
          
  班级
      
      
  
          
  迪丽热巴
          
  20
          
  002
      
  
  

  • 单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

    单元格属性	作用	取值
    colspan	跨列合并单元格	无单位数值
    rowspan	跨行合并单元格	无单位数值

  • 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入中

• 表单标签
  表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

  • 表单使用

  属性名	取值
  action	设置数据的提交地址
  method	设置数据的提交方式，默认为get方式，可以设置为post
  enctype	设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data"

  例如：

  • 表单控件使用（重点）
    表单控件用于采集用户信息，可设置以下标签属性

  属性名	取值
  type	设置控件类型
  name	设置控件名称，最终与值一并发送给服务器
  value	设置控件的值
  placeholder	设置输入框中的提示文本
  checked	设置单选按钮或复选按钮的默认选中
  selected	设置下拉菜单的默认选中

表单控件用于采集用户信息，常用控件如下：

    文本框
    密码框
    单选按钮
    复选框
    文件上传
   普通按钮
    提交按钮
    下拉菜单
    下拉菜单选项  
   文本域 

CSS 基础使用

一、CSS介绍

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化

二、CSS使用方式

1. 行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成
例：

style="属性:值;属性:值;"

常用CSS属性 :

• 设置文本颜色 color:red;
• 设置背景颜色 background-color:green;
• 设置字体大小 font-size:32px;

2. 内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式
示例:

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式
示例：

/*标签选择器 : 根据标签名匹配所有的该元素*/  
p{
  color:red;
}

3. 外链样式表

• 创建外部样式表文件 后缀使用.css
• 在HTML文件中使用标签引入外部样式表

• 样式表文件中借助选择器匹配元素应用样式

三、样式表特征

1. 层叠性

多组CSS样式共同作用于一个元素

2. 继承性

后代元素可以继承祖先元素中的某些样式
例 : 大部分的文本属性都可以被继承

3. 样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

• 行内样式的优先级最高
• 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
• 浏览器默认样式和继承样式优先级较低

四、CSS 选择器

1. 作用

匹配文档中的某些元素为其应用样式

2. 分类 :

1. 标签选择器

根据标签名匹配文档中所有该元素
语法 :

标签名{
  属性:值;
}

2. id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用
语法 :

  #id属性值{
  
  }

注意 :
id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

3. class选择器/类选择器

根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {
    
}

特殊用法 :

1. 类选择器与其他选择器结合使用
   注意标签与类选择器结合时,标签在前,类选择器在后
   例 : a.c1{ }

2. class属性值可以写多个,共同应用类选择器的样式
   例 :
   .c1{ }
   .c2{ }

4. 群组选择器

为一组元素统一设置样式
语法 :

selector1,selector2,selector3{           
}

5. 后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
语法 :

selector1 selector2{
}

匹配selector1中所有满足selector2的后代元素

6. 子代选择器

匹配满足选择器的所有直接子元素
语法 :

selector1>selector2{
}

7. 伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类 :

:link    超链接访问前的状态
:visited 超链接访问后的状态
:hover   鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)
:focus   焦点状态(文本框被编辑时就称为获取焦点)

使用 :

a:link{
}
a:visited{
}
.c1:hover{ }

注意 :

1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写

:link
:visited
:hover
:active

2. 超链接常用设置 :

a{
  /*统一设置超链接默认样式(不分状态)*/
}
a:hover{
  /*鼠标滑过时改样式*/
}

3. 选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和
群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

五、标签分类

1. 块元素

独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

2. 行内元素

可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub sup a

3. 行内块元素

可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)

4. 嵌套原则

1. 块元素中可以嵌套任意类型的元素
   p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
2. 行内元素中最好只嵌套行内或行内块元素

六、尺寸单位

• px 像素单位
• % 百分比，参照父元素对应属性的值进行计算
• em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
• rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px

七、颜色单位

• 英文单词：red，green，blue
• rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
• rgba(r,g,b,alpha) 三原色每种取值0_{255，alpha取值0（透明）}1（不透明）
• 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
  • 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0_9，af
    例：red rgb(255,0,0) #ff0000
  • 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
    例：#000 #fff #f00

八、常用CSS样式参考

功能	属性名	取值
宽度	width	尺寸单位，行内元素无效
高度	height	尺寸单位，行内元素无效
背景颜色	background-color	颜色单位
背景图片	background-image	url("路径")
字体大小	font-size	尺寸单位
字体粗细程度	font-weight	normal/bold(加粗)
字体样式	font-style	normal/italic(倾斜)
字体名称	font-family	字体名称，如Arial,"黑体"
文本颜色	color	颜色单位
文本装饰线	text-decoration	none/underline(下划线)
文本内容的水平对齐方式	text-align	left(默认值)/center/right/justify(两端对齐)
行高(文本内容垂直对齐)	line-height	尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示
边框	border	三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框)
单边框	border-top/right/bottom/left	同上
圆角边框	border-radius	像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致
内边距	padding	常用像素值，调整元素内容与边框之间的距离， 最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0
单方向内边距	padding-top/right/bottom/left	取一个值
外边距	margin	调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离
单方向外边距	margin-top/right/bottom/left	取一个值
修改鼠标指针样式	cursor	pointer光标呈现为指示链接的指针
过渡效果	transition	取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear

CSS 盒模型

1. 内容尺寸

• 一般情况下，为元素设置width/height，指定的是内容框的大小

• 内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：

  取值	作用
  visible	默认值，溢出部分可见
  hidden	溢出部分隐藏
  scroll	强制在水平和垂直方向添加滚动条
  auto	自动在溢出方向添加可用滚动条

2. 边框

1. 边框实现

语法：

border:width style color;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

2. 单边框设置

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

3. 网页三角标制作

1. 元素设置宽高为0
2. 统一设置四个方向透明边框
3. 调整某个方向边框可见色

4. 圆角边框

1. 属性：border-radius 指定圆角半径
2. 取值：像素值或百分比
3. 取值规律：

一个值     表示统一设置上右下左
四个值     表示分别设置上右下左
两个值     表示分别设置上下 左右
三个值     表示分别设置上右下，左右保持一致

3. 内边距

1. 属性：padding
2. 作用：调整元素内容框与边框之间的距离
3. 取值：

20px;                   一个值表示统一设置上右下左
20px 30px;              两个值表示分别设置(上下) (左右)
20px 30px 40px;         三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;    表示分别设置上右下左

4. 单方向内边距,只能取一个值：

padding-top
padding-right
padding-bottom
padding-left

4. 外边距

1. 属性：margin
2. 作用：调整元素与元素之间的距离
3. 特殊：
   1）margin:0; 取消默认外边距
   2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
   3）margin:-10px;元素位置的微调
4. 单方向外边距：只取一个值
   margin-top
   margin-right
   margin-bottom
   margin-left

布局方式

1. 标准流/静态流

默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示

2. 浮动布局

主要用于设置块元素的水平排列

1）属性

float

2）取值

可取left或right，设置元素向左浮动或向右浮动

float:left/right;

3）特点

• 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
• 元素设置浮动,就具有块元素的特征,可以手动调整宽高
• "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示

4）常见问题

子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局

5）解决

• 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
• 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
• 为父元素设置overflow:hidden;解决高度为0

3. 定位布局

结合偏移属性调整元素的显示位置

1）属性

position

2） 取值

可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位）

postion:relative/absolute/fixed/static

3）偏移属性

设置定位的元素可以使用偏移属性调整距离参照物的位置

top     距参照物的顶部
right   距参照物的右侧
bottom  距参照物的底部
left    距参照物的左侧

4）分类

• relative 相对定位

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

• absolute 绝对定位

1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

使用绝对定位 :
"父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.

• fixed 固定定位

  1. 参照窗口进行定位,不跟随网页滚动而滚动
  2. 脱离文档流

5）堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

• 属性 : z-index
• 取值 : 无单位的数值,数值越大,越靠上
• 堆叠：

1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上