HTML+CSS

最新推荐文章于 2024-10-02 17:15:49 发布

智多星001

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量1.2k

点赞数 8

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_72110718/article/details/142628895

版权

html

一基础认知

1.1web标准中分成三个结构

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	页面元素的外观和位置等页面样式（如：颜色，大小等）
行为	JavaScript	网页模型的定义与页面交互

1.2 html的概念

HTML中文译为：超文本标记语言（专门用于网页开发的语言，主要通过HTML标签对网页中的文字，图片，音频，视频等内容进行描述）

1.3 HTML骨架结构

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

1.3 HTML标签的结构

1.3.1 标签由< > / 英文字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名

1.3.2 常见标签由两部分组成，我们称为：双标签，前半部分叫开始标签，后半部分叫结束标签，两部分之间包裹内容

1.3.3 少数标签由一部分组成，我们称为：单标签，自成一体，无法包裹内容

1.4 HTML标签与标签的关系可分为：

1.4.1 父子关系（嵌套关系)

	<head>
    	<title></title>
	</head>

1,4,2 兄弟关系（并列关系）

	<head></head>
	<body></body>

二 HTML标签学习

1.1 标题标签

场景：新闻和页面中，都离不开标题，用来突出文章的主题

语义：1~6级标签，重要程度依次递减

特点：

文字都有加粗
文字都有变大并且从h1~h6文字逐渐减小
独占一行

代码：h系类标签

<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
</body>

1.2 段落标签

场景：在新闻和文章的页面中，用于分段显示

语义：段落

特点：

段落之间存在间隙
独占一行

代码：

<p>我是一段文字</p>

1.3 换行标签

场景：让文字强制换行显示

语义：换行

特点：

单标签
让文字强制换行

代码：<br>

<br />

1.4 水平线标签

场景：分割不同主题内容的水平线

语义：主题的分割转换

特点;

单标签
在页面中显示一条水平线

代码:

<hr>

2.1 语义化标签

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

3.1 图片标签的介绍

标签的完整结构：

<img src="" alt="">

src:属性名

"" :属性值

src="" : 属性标签

属性名=“属性值”

属性的注意点：

标签的属性写在开始标签的内部
标签上可以同时存在多个属性
属性之前以空格隔开
标签名与属性名之间必须以空格隔开
属性之间没有顺序之分

3.1.1 图片的alt属性

属性名：alt

属性值：替代文本

当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

<body>
   <img src="./错的路径会加载失败" alt="我是替代文本" />
</body>

3.1.2 图片标签的title属性

属性名：title

属性值：提示文本

当鼠标悬停时，才显示文本

注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

<body>
        <img src="images/OIP-C.jpg"  alt="" title="我是title" />
</body>

3.1.3 图片标签的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：

如果只设置其中一个，另外一个没设置的会自动等比列缩放（此时图片不会变形）
如果同时设置了两个，若设置不当时图片可能会变形

3.2 路径

3.2.1 绝对路径

绝对路径：指目录下的绝对位置，可直接达到目标，通常从盘符开始的路径

例如：

盘符开头：D:\html\myweb
完整的网路地址：百度一下，你就知道 (baidu.com)

3.2.2 相对路径

1 同级目录：

方法一：<img src="目标图片.gif">

方法二：<img src="./目标图片.gif">

2 下级目录：

<img src="images/目标图片.gif">

3 上级目录：



<img src="../目标图片.gif">

4.1 链接标签的介绍

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签，超链接，锚链接

特点：

双标签，内部可以包裹内容
如果需要a标签点击之后进去指定页面，需要设置a标签的href属性

代码：

<body>
        <a href="./目标网址.html">超链接</a>
</body>

4.1.1 链接标签的target属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转，覆盖原网页
_blank	在新窗口中跳转，保留原网页

5.1 列表标签

场景:在网页中按照行展示关联性的内容，如：新闻列表，排行榜，账单等

特点：按照行的方式，整齐显示内容

种类：无序列表，有序列表，自定义列表

5.1.1 无序列表

场景：在网页中表示一组无序的列表，如：新闻

标签组成：

标签名	说明
ul	表示无序列表的整体，用于包裹li列表
li	表示无序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一项前默认显示圆标识

注意点:

ui标签中只允许包含li标签
li标签中可以包含任意内容

<body>
        <ui>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ui>
</body>

5.1.2 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜

标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一项的内容

显示特点：

列表每一项前默认显示序号表示

注意点：

ol标签中只允许包含li标签
li标签中可以包含任意内容

<body>
        <ol>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ol>
</body>

5.1.3 自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

标签组成：

标签名	说明
dl	自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题二点每一项内容

显示特点：

dd前会默认显示缩进效果

注意点：

dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容

 <body>
        <dl>
            <dt>内容</dt>
            <dt>内容</dt>
            <dt>内容</dt>
        </dl>
</body>

6.1 表格标签

6.1.1 表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

注意点：

表格的嵌套关系：table>tr>td

6.2 表格相关属性

场景：设置表格基本展效果

常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：

实际开发过程中样式效果推荐用css设置

6.3 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

合并单元格的步骤：

明确合并那几个单元格
通过左上原则，确定保留谁删除谁
1. 上下合并只保留最上的，其他删除
2. 左右合并只保留最左的，其他删除
给保留的单元格设置：跨行合并（rowspan）或跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列单元格水平合并

注意点：

只有一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）

7 intput 系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页

标签名：input

input标签可以通过type属性值不用，展示不同的效果

type属性值：

标签名	type属性值	说明
Input	text	文本框，用于输入单行文字
Input	password	密码框，用于输入密码
Input	radio	单选框，用于多选一
Input	checkbox	多选框，用于多选多
Input	file	文件选择，用于之后上传文件
Input	submit	提交按钮，用于提交
Input	reset	重置按钮，用于充值
Input	button	普通按钮，默认无功能，之后配合js添加功能

7.1 input 系类标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容的文本

7.2 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件

type属性：radio

常用属性：

属性名	说明
name	分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checkd	默认选中

注意点：

name属性对于单选框有分组功能

有相同name属性值的单选框为一组，一组中只能有一个被选中

7.3 input系类标签-文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

7.4 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

标签名：button

type属性值：

标签名	type属性	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮，默认无功能，之后配合js使用

注意点：

如果要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签吧表单标签一起包裹起来即可

8 select下拉菜单标签

场景：在网页中提供多个选择的下拉菜单表格控件

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

8.1 textarea文本域标签

场景：在网页中提供可输入多行的文本的表单控件

标签名：textarea

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

注意点：

右下角可以拖拽改变大小

时间开发时针对样式效果推荐用css设置

9 没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div 和span这两个没有语义的布局标签

div：一行只显示一个（独占一行）

span：一行可以显示多个

9.1 没有语义的布局标签

标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同语义

10 常见的字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文;

常见字符实体：

描述	实体名称
空格
小于号	<
大于号	>
和号	&
引号	"
撇号	'
分（cent）	¢
镑（pound）	£
元（yen）	¥
欧元（euro）	€
小节	§
版权（copyright）	©

css

一、CSS简介

1、什么是CSS

CSS：Cascading Style Sheet 层叠样式表
是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS

实现内容与样式的分离，便于团队开发
样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3、CSS作用

页面美化
布局和定位

二语法规则

2.2 css 基本选择器
全局选择器 *

*{color: red;}

选择所有标签，文字颜色为红色

标签选择器标签名

p{color: red;}

选择所有p标签，文字颜色为红色

class类选择器 .类名

.name_li{color: red;}

选择所有class名为name_li的标签，文字颜色为红色

伪类选择器 :状态名

:link{} 初始状态

:visited{} 点击后的状态

:hover{} 鼠标悬停/滑过状态

:active{} 鼠标点击状态

:focus{} 获取光标状态

包含选择器以空格隔开

ul li{} 选择ul里面的li

ol li{} 选择ol里面的li

.nav .a2{}

.nav a:hover{}

ul li a:hover{}

群组选择器以,隔开

h1,h2,h3{}
2.3 css的使用方式
1、行内样式（优先级最高，不建议使用）

<h1 style="color:red;">行内测试样式</h1>
2、内部样式（只能修改一个页面，重用率低）

2.5 文本样式
首行缩进
text—indent:-9999px;

text—indent:2em;

行高

属性值：36px 2em 200% 2.5

line—height:3.5;
水平对齐 text—align:center
文本修饰 text—decoration:___;
2.6 列表样式
以无序列表举例 ul li{}

修改项目符号   list-style-type:squre/disc/circle/none;
将符号变成图片   list-style-type:url(图片)；
修改符号位置   list-style-position:outside/inside;
list-style-type:none;
2.7 背景样式
p{
/*设置背景高度宽度*/
width:500px;
height:3000px
/*背景色 bgc*/
background-color：#0ff;
/*插入背景图*/
background-image:url(图片)；
/*背景平铺 bgr*/
background-repeat: no-repeat;
/*背景位置 bgp*//*属性值：1英语单词 2数字加单位正负都可*/
background-position: 100px 30px;
/*背景附件-设置背景图是否随滚动条滚动*/
background-attachment:scroll;
background-attachment：fixed;

/*符合属性*/
background：#0ff url(图片) 0 0 no-repeat;

/*背景图可以设置大小*/
background-size:50px 50px;

}

三、css3新增属性
3.1 元素显示/转换
标签有分类——单标签、双标签

元素有分类——块元素、行内元素、行内块元素

1》块元素：独占一行、设置宽高生效、默认宽度占父元素100%

display: block;

2》行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的

display: inline;

3》行内块元素：既在一行之内显示、宽高还生效

display: inline-block;

3.2 圆角边框
P{
width: 200px;
height: 200px;
background-color: #f00;

/*圆角*/
border-radius: 50%;
border-radius: 10% 50%;
border-radius: 0% 25% 50%;
/*可以设置1到4属性值，遵循顺时针，对角线原则*/
border-radius: 0% 10% 25% 50%;

}

3.3 背景色渐变
background:linear-gradient(to bottom , red ,oringe, yellow);

background:linear-gradient(red , oringe , yellow);

3.4 文字阴影
/*文字阴影*/

text-shadow:1px(水平偏移量) 1px（垂直偏移量） 1px（模糊程度） red; //可以多个叠加颜色

3.5 盒子阴影
box-shudow: 0px(水平偏移) 2px（垂直偏移） 8px（模糊程度） 10px（扩展半径） #ccc inset（内阴影）;

3.6 过度动画 transition
只能由一种状态过渡到另一种状态

p{

width : 10px;
height : 10px;
overflow: hidden;
/*过度动画*/
transition: all（所选属性） ls（动画时长） ease（速度曲线）;

}
/*鼠标触发动画*/
.P{
width:1190px;
height:100px;

}

3.7 帧动画 animation
定义关键帧：
使用 @keyframes 规则来定义动画的关键帧。关键帧指定了动画在不同时间点的状态。

@keyframes myAnimation {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
3.8 溢出

3.9 文本溢出 text-overflow

四、布局
4.1 静态布局
从上往下逐一摆放

缺点：会造成空间浪费

4.2 浮动布局float
一、基本用法

设置元素浮动：
使用 float 属性来设置元素的浮动方向。可选值有 left（向左浮动）、right（向右浮动）和 none（不浮动，默认值）。
例如：

.float-left {
float: left;
}
.float-right {
float: right;
}
清除浮动：
当一个元素浮动后，可能会影响到后续元素的布局。为了避免这种情况，可以使用 clear 属性来清除浮动。可选值有 left（清除左侧的浮动）、right（清除右侧的浮动）、both（清除两侧的浮动）和 none（不清除浮动，默认值）。

4.3 使用float进行DIV+CSS布局
使用float进行DIV+CSS布局

页面的内容都有指定的标签 p h1-h6 img ……

使用div来表示块元素、也可称之为盒子

页面的所有元素都是盒子

盒模型有四部分、五属性

4.4 定位布局 position
position:static;

静态定位，没有定位，默认值

position:relative;

相对定位，相对于自身进行定位【位移时，自身原位置不消失】

position:absolute;

绝对定位，相对于body或者带有定位的父元素进行定位【位移时，自身原位置消失】

position:fixed;