HTML、CSS笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73493077/article/details/129357401

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、链接、图像等元素，以及CSS的基础知识，如样式表的作用、导入方式和选择器。此外，还提到了网页布局、表单元素和媒体元素的使用，以及定位和浮动的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

Hyper Text Markup Language（超文本标记语言）

W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和影响力的国际中立性技术标准机构

标准：

结构标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

HTML基本结构

<!--规范-->
<!DOCTYPE html>
<html>
    <!--网页头部-->
    <head>
        <!--描述性标签-->
        <meta charset="utf-8">
        <meta name="keywords" content="标签1,标签2">
        <meta name="description" content="描述">
        
        <title>网页标题</title>
    </head>
    
    <!--网页主体-->
    <body>
        Hello Word
    </body>
</html>

<!--标题标签-->
<h1>一级标签</h1>

<!--段落标签-->
<p>第一段</p>

<!--换行标签-->
第一行<br/>

<!--水平线-->
<hr/>

<!--排版-->
<div>块级标签</div>

<pre>预排版标签</pre>

<center>居中</center>
属性:align替代center
Align有多个值代表位置:left  center  right

<!--字体样式标签-->
<font size="" color="" face="">字体样式</font>
<strong>粗体</strong>
<b>粗体</b>
<em>斜体</em>

<!--上标、下标-->
3<sup>2</sup>
3<sub>2</sub>

<!--特殊符号：空格、大于、小于、&、￥、版权、注册商标-->
&nbsp;
&gt;
&lt;
&amp;
&yen;
&copy;
&reg;

属性

class
id
title 鼠标悬浮显示文本内容
bgcolor 背景颜色
background 背景图片

meta标签

<!--设置编码格式-->
<meta charset="utf-8"/>
<!--设置关键字-->
<meta name="keywords" content="关键字1，关键字2"/>
<!--设置网站描述-->
<meta name="description" content="描述"/>
<!--设置网页的刷新-->
<meta http-equiv="refresh" content="5"/>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
<!--设置网页保持最新，no cache 无缓存-->
<meta http-equiv="Progma" content="no-cache"/>

列表标签

<!--有序列表orderlist,1.2.3.-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>C</li>
</ol>

<!--无序列表unorderlist-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>C</li>
</ul>

<!--自定义列表definelist-->
<dl>
    <!--define title-->
    <dt>列表名称</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
    
    <dt>一、</dt>
    <dd>1.</dd>
    <dd>2.</dd>
    <dd>3.</dd>
</dl>

超链接标签

herf：链接路径，链接值可以写#，代表访问当前页
name：超链接标签的名字
target：链接打开窗口方式
- _self本窗口
- _blank新窗口

<a href="path" target="_self">文本</a>
<a href="path" target="_blank">
	<img src="path" alt="text" title="text" width="x" height="y"/>
</a>

锚链接

<a id="top">顶部</a>
<a href="#top">回到顶部</a>

<a href="path#top">另一页面顶部</a>

邮箱链接

<a href="mailto:1938330077@qq.com">点击联系我</a>

下载链接

<a href="test.doc">下载</a>

图片链接

<a href="http://www.baidu.com">
	<img src="baidu.jpg"/>
</a>

不跳转，功能同按钮

<a href="javascript:void(0);" ></a>

图像标签

src：图像路径，…/ 👉 上一级
alt：图像的替代文字
title：鼠标悬停提示文字
align：调整元素位置
- center、middle
- bottom、top
- left、right

<img src="path" alt="图片" title="悬停文字" width="100px" height="100px"/>

热点区域

表格标签

th：表头，加粗显示

tr：行 table row

td：列 table data

cellspancing：外边距
cellpadding：内边距
align
- center
- right
- left

<table border="1px" style="border-collapse: collapse;">
    <caption>表格标题</caption>
    <tr>
        <th></th>
        <!--跨列-->
    	<td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--跨行-->
    	<td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
    	<td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

媒体元素

controls：控制条

autoply：自动播放

<!--视频-->
<video src="path" controls autoply></video>
<!--音频-->
<audio src="path" controls></audio>

表单

基本结构

<form action=" method="post">
    <p>名字：<input type="text" name="username"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
</form>

属性

action
- 提交服务器的路径
method
- get 数据有大小限制
- post 无大小限制
type
- 指定元素的类型，默认text
- text、password、checkbox、tadio、submit、reset、file、hidden、image、button
name
- 指定表单元素的名称
- 服务器根据表单控件的name属性获取参数
value
- 元素的初始值，选框提交值需要写value
- type为radio时必须指定一个值
size
- 指定表单元素的初始宽度
- text或password时表单大小以字符为点位，其他类型像素为单位
maxlength
- text或password时，输入最大字符数
max、min
- 数字中限制大小

按钮

input button

<input type="button" value="input按钮"/>

<!--图片按钮-->
<input type="image" src="1.jpg"/>

<button>普通按钮</button>

文本框

input text

input password

名字：<input type="text" name="username"/>
密码：<input type="password" name="pwd"/>

文本域

textarea

<textarea name="textarea" cols="50" rows="10">内容</textarea>

单选框

input radio

<p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

多选框

input checkbox

属性：checked=true

<p>爱好
    <input type="checkbox" value="math" name="hobby"/>数学
    <input type="checkbox" value="english" name="hobby"/>英语
    <input type="checkbox" value="music" name="hobby"/>音乐
</p>

下拉框

select

<select name="国家">
    <option value="chaina">中国</option>
    <option value="us">美国</option>
    <option value="eng">英国</option>
</select>

input

<!--日期-->
<input type="date" name="birthday"/>

<!--邮箱验证-->
<input type="email" name="email" required/>

<!--选择文件-->
<input type="file" name="files"/>

<!--隐藏域-->
<input type="hidden" name="id"/>

<!--URL-->
<input type="url" name="url"/>

<!--数字-->
<input type="number" name="num" step="2"/>

<!--滑块-->
<input type="range" name="voice" min="0" max="100" step="2"/>

<!--搜索-->
<input type="search" name="search"/>

lable

点击

<lable>用户名：<input type="text" name="username"/></lable>

页面结构

header：标题头部区域的内容(用于页面或页面中的一块区域)
footer：标记脚部区域的内容(用于整个页面或页面的一块区域)
section：Web页面中的一块独立区域
article：独立的文章内容
aside：相关内容或应用（常用于侧边栏)
nav：导航类辅助内容

iframe内联框架

<iframe src="head.html" frameborder="0" width="100%"></iframe>
<iframe src="left.html" frameborder="0" width="20%"></iframe>
<iframe src="right.html" frameborder="0" width="30%"></iframe>

//跳出iframe
if (window != top){
	top.location.href = location.href;
}

应用

控件属性

checked
- radio或checkbox时，指定按钮是否被选中
selected
- option，默认选中
disabled
- 不可用，不能提交到服务器
readonly
- 只读
placeholder
- 框内提示信息

<p>
    <label for="mark">用户名</label>
    <input type="text" id="mark">
</p>

验证

pattern：正则表达式

用户名：<input type="text" name="username" placeholder="用户名"/>
姓名：<input type="text" name="name" required/>

CSS

Cascading Style Sheet（层叠级联样式表）

发展史

CSS1.0
CSS2.0：div，html与css分离
CSS2.1：浮动、定位
CSS3.0：圆角、阴影、动画

优点：

内容和表现分离
网页结构表现同意，可以实现复用
样式丰富
可独立于html
利用SEO，容易被搜索引擎收录

导入方式

内嵌式

<div style="width: 300px; height: 200px; background-color: green;">

</div>

内联式

<head>
    <style type="text/css">
        h1{
            color:blue;
        }
	</style>
</head>

外联式

<!--链接式-->
<link rel="stylesheet" type="text/css" href="style.css"/>

<!--导入式css2.1-->
@import url("style.css")

h1{
	color:green;
}
div{
	color:yellow;
}

优先级

内嵌式 > 内联式 = 外联式（就近原则）

选择器

语法：

选择器{
	声明1;
	声明1;
	声明1;
}

基本选择器

html

<body>
    <p class="class01" id="id01">标签选择器</p>
    <h1 class="class01">类选择器</h1>
    <h2 id="id01">id选择器</h2>
</body>

标签选择器

p{
    font:bold 30px;
    line-height: 40px;
}

类选择器

/*class可复用*/
.class01{
	text-align: center;
}

id选择器

/*id全局唯一*/
#id01{
    text-indent: 2em;
    text-transform: uppercase;
}

通配符选择器

*{
    color:green;
}

优先级

id选择器 > class选择器 > 标签选择器

高级选择器

html

<boody>
    <p>p01</p>
    <p class="c1">p02</p>
    <p>p03</p>
    <ul>
        <li>
            <p>p04</p>
        </li>
        <li>
            <p>p05</p>
        </li>
    </ul>   
</boody>

层次选择器

/*后代选择器p01、p02、p03、p04、p05*/
body p{
	color: red;
}
/*子选择器p01、p02、p03*/
body>p{
	color: green;
}
/*并集、交集选择器*/
p,ul{
    color: blue;
}
p.c1{
    color: red;
}
/*相邻兄弟选择器，相邻下方一个兄弟元素*/
.class1+p{
	color: blue;
}
/*通用选择器，当前选中元素下方所有兄弟元素*/
.class2~p{
	color: green;
}

结构伪类选择器

<body>
    <p>p01</p>
    <p>p02</p>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</body>

/*ul第一个子元素*/
ul li: first-child{
    color: green;
}
/*ul最后一个子元素*/
ul li: last-child{
    color: red;
}
/*选中p：选中定位到当前元素的父元素，选择第1个元素并且是当前元素*/
p: nth-child(1){
    color: green;
}
/*选中p：选中定位到当前元素的父元素，选择当前元素的第一个*/
p: nth-of-type(1){
   color: red; 
}

补充（鼠标悬浮、未访问过的、访问过的、点击）

<style>
    a: hover{
        color: green;
    }
    a: link{
        color: green;
    }
    a: visited{
        color: red;
    }
    a: active{
        color: green;
    }
</style>
<body>
	<a href="">超链接</a>
</body>

属性选择器

正则表达式

等于 =
包含 *=
开头 ^=
结尾 $=

html

<body>
    <a href="file/img" class="01" id="01">A</a>
    <a href="http://www.bilibili.com" class="02">B</a>
    <a href="https://www.baidu.com/" class="03" id="">C</a>
    <a href="file/text.doc" class="1002">D</a>
    <a href="file/text.pdf" class="05" id="05">E</a>
</body>

格式：属性名 = 属性值（正则表达式）

/*a标签中，存在id属性的元素*/
a[id]{
    color: green;
}
a[id=01]{
    color: red;
}
/*a标签中，class包含02的元素*/
a[class*="02"]{
    color: green;
}
/*href中以https开头的元素*/
a[href^=http]{
    color: red;
}
/*href中以pdf结尾的元素*/
a[href$=pdf]{
    color: green;
}

样式属性

字体

/*斜体 加粗 大小：20px 楷体*/
font: oblique boder 20px "楷体";
/*字体*/
font-family: 楷体;
/*大小*/
font-size: 20px;
/*宽度*/
font-weight: bold;
/*颜色，rgba透明度*/
color: red;
color: rgb(255,255,255);
color: rgba(255,255,255,0.5);

文本

/*排版*/
text-align: center;
/*首行缩进两个字*/
text-indent: 2em;
/*行高，上下居中：行高和块的高度一致*/
line-height: 10px;
height: 10px;
/*下划线、中划线、上划线*/
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
/*超链接去下划线*/
text-decoration: none;
/*水平对齐*/
img,span{
    vertical-align: middle;
}

超链接

/*去掉下划线*/
text-decoration:none;

/*鼠标悬停在链接上*/
a: hover{
    color: red;
}
/*被选中的链接*/
a: active{
    color: blue;
}
/*已访问的链接*/
a: visited{
    color: blue;
}
/*为访问的链接*/
a: link{
    color: red;
}

阴影

/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
text-shadow: #3cc7f5 10px -10px 2px;

列表

<div id="nav">
    <h2 class="title">商品分类</h2>
    <ul>
        <li><a href="">图书</a></li>
        <li><a href="">手机</a></li>
        <li><a href="">电脑</a></li>
	</ul>
</div>

#nav{
    width: 300px;
    background: color: red;
}
.title{
    background: color: blue;
}
ul{
    background: color: red;
}
ui li{
    /*行高*/
    height: 30px;
    /*列表样式：none去掉圆点、circle空心圆、square正方形、decimal数字*/
    list-style: none;
    
    display: inline-block;
    
    /*缩进*/
    text-indent:1em   
}
a{
    text-decoration: nore;
    font-size: 10px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

图片背景

<body>    <div class="div01"></div>    <div class="div02"></div>        <div class="div03"></div></body>

div{
    width: 1000px;
    height: 700px;
    /*border：边框线，宽度 实线 颜色*/
    border: 1px solid red;
    /*background-image：颜色 地址 位置 平铺方式：repeat-x、repeat-y、no-repeat*/
    background: green url("../images/img.png") 270px 10px no-repeat;
    
    /*地址*/
    background-image: url("../images/img.png");
    /*位置*/
    background-position: 270px 10px;
    /*平铺方式*/
    background-repeat: no-repeat;
}

渐变

https://www.grabient.com/

background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);

图层

z-index（0~+∞）

z-index: 5;

透明度

opacity: 0.5;
filter: Alpha(opacity=50);

鼠标

cursor: pointer;

显示模式

块元素：可以设置宽和高
行内元素：不能设置宽和高
行内块元素：可以设置宽和高

常见的块元素：h、p、div、ul、ol、li

常见的行内元素：a、strong、b、em、idel、span

display

模式转换

/*
    display: block; 		块元素
    display: inline; 		行内元素
    display: inline-block;  行内块元素
    display: none;			隐藏
	visibility: hidden		隐藏，但占位置
*/

/*文字居中*/
height: 50px;
text-align: center;
line-height: 50px;

/*块水平居中*/
display: inline-block;
margin: 0px auto;

盒子模型

盒子

margin：外边距
padding：内边距
border：边框

边框

html

<div id="box">
    <h2>登录</h2>
    <form action="">
        用户名：<input type="text"><br/>
        密码：<input type="password">
    </form>
</div>

#box{
    width: 300px;
    /*border：宽度 类型：solid实线、dashed虚线、dotted点线 颜色*/
    border: 3px dashed blue;
    border-width: 3px;
    border-style: dashed;
    border-color: blue;
    /*上下左右*/
    boder-top:
}

边框圆角

/*四角*/
border-radius: 20px;
/*左上右下 右上左下*/
border-radius: 20px 20px;
/*左上 右上 右下 左下*/
border-radius: 20px 20px 20px 20px;

内外边距

/*上下左右*/
margin: 0;
/*上下 左右，水平居中：块元素宽度自动*/
margin: 20 auto;
/*上 右 下 左*/
margin: 0 0 0 0;
/*padding同上*/

盒子尺寸=margin+padding+border+内容

盒子阴影

box-shadow: 10px 10px 100px red;

浮动

浮动起来脱离标准文档流，父级边框塌陷

/*右浮、左浮*/
float: right;
float: left;

clear

清除浮动

/*
clear: right; 	清除右侧浮动
clear: left; 	清除左侧浮动
clear: both; 	清除两侧浮动
clear: none;
*/
clear: both;

overflow

消除父级边框塌陷

1.设置父级元素高度

#father{
    border: 1px solid black;
    height: 800px;
}

2.在父级元素下方加一个空的div标签，消除浮动

<div class="father"></div>
<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.overflow

超出内容元素高度，隐藏裁切或加滚动条

/*overflow: hidden隐藏、scroll加滚动条*/
overflow: hidden;

4.父类添加一个伪类（推荐）

#father:after{
    content: '';
    display: block;
    clear: both;
}

定位

position

top
left
bottom
right

静态定位

position: static;

相对定位

相对于原来位置，进行指定偏移，仍在标准文档流中，原来的位置会保留

position: relative;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;

绝对定位

父级元素没有定位，会相对于浏览器定位

相对于浏览器或父级位置，进行指定偏移，不在标准文档流中，原来的位置不会保留

position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

固定定位

应用：“导航栏”、“回到顶部”

position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

粘性定位

以浏览器最为参照，并保留原位置（ie不支持）

position: sticky;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;