HTML与CSS常用标签和属性
常用 HTML 标签及用法
1. 基础结构标签
<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- 根标签 -->
<head> <!-- 头部：存放标题、样式、元信息 -->
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body> <!-- 主体：页面可见内容 -->
这里是网页内容
</body>
</html>2. 标题标签（h1~h6）
从大到小的标题
<h1>最大标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
3. 段落与换行
<p>这是一个段落标签，会自动换行。</p>
<p>这是第二段。<br>这里用 br 强制换行</p>
4. 链接（a 标签）
<!-- 跳转到百度 -->
<a href="https://www.baidu.com">百度一下</a>
<!-- 在新窗口打开 -->
<a href="https://www.baidu.com" target="_blank">新窗口打开</a>
5. 图片（img 标签）
<!-- src=图片地址，alt=图片描述 -->
<img src="logo.png" alt="网站Logo" width="200">
6. 列表
无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
7. 盒子 / 容器标签（div、span）
<div>：块级标签，独占一行<span>：行内标签，不换行
<div>这是一个块容器，会独占一行</div>
<span>行内内容</span>
<span>和它并排</span>
8. 按钮
<button>点击我</button>
9. 表单输入（input）
<!-- 文本框 -->
<input type="text" placeholder="请输入用户名">
<!-- 密码框 -->
<input type="password" placeholder="请输入密码">
<!-- 单选框 -->
<input type="radio" name="gender"> 男
<!-- 复选框 -->
<input type="checkbox"> 同意协议
10. 表格（table）
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
</table>
11. 文本样式
<b>加粗</b>
<strong>强调加粗</strong>
<i>斜体</i>
<u>下划线</u>
<mark>高亮</mark>
12. 注释
<!-- 这是注释，不会显示在页面上 -->
常用 CSS 属性（附用法）
CSS 无标签，是样式属性，分行内、内部、外部三种引入方式
一、CSS 三种引入方式
1. 行内样式（直接写标签里）
html
预览
<div style="color:red; font-size:20px;">文字红色</div>
2. 内部样式（style 标签）
html
预览
<head>
<style>
/* 选择器 {属性:值;} */
div { color: blue; }
</style>
</head>
3. 外部样式（推荐，单独.css 文件）
html
预览
<head>
<link rel="stylesheet" href="style.css">
</head>
二、常用 CSS 属性大全
1. 文字文本样式
/* 字体颜色 */
color: #f00; /* 红色 */
color: rgb(255,0,0);
/* 字体大小 */
font-size: 16px;
/* 字体 */
font-family: "微软雅黑",sans-serif;
/* 加粗 */
font-weight: bold; /* normal正常 */
/* 斜体 */
font-style: italic;
/* 文本居中 */
text-align: center; /* left左 / right右 */
/* 行高 */
line-height: 1.5;
/* 下划线 */
text-decoration: none; /* 取消下划线，a标签常用 */
text-decoration: underline;
2. 宽高尺寸
width: 300px; /* 宽度 */
height: 200px; /* 高度 */
min-width:100px;
max-height:500px;
3. 背景样式
background-color: #eee; /* 背景色 */
background-image: url("bg.jpg"); /* 背景图 */
background-repeat: no-repeat; /* 不平铺 */
background-size: cover; /* 铺满容器 */
background-position: center; /* 居中 */
4. 内外边距
/* 外边距 上下左右 */
margin: 10px;
margin: 10px 20px; /* 上下 左右 */
margin: 0 auto; /* 块元素水平居中 */
/* 内边距 */
padding: 15px;
5. 边框
border: 1px solid #333; /* 粗细 样式 颜色 */
border-radius: 8px; /* 圆角 */
border-radius: 50%; /* 圆形 */
6. 布局显示
display: block; /* 块级元素，独占一行 */
display: inline; /* 行内元素 */
display: inline-block; /* 同行并排+可设宽高 */
display: none; /* 隐藏元素，不占位置 */
/* 弹性布局（最常用） */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
7. 浮动
float: left; /* 左浮动 */
float: right; /* 右浮动 */
clear: both; /* 清除浮动 */
8. 定位
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位 */
top: 10px;
left: 20px;
z-index: 999; /* 层级，数字越大越在上层 */
9. 阴影
box-shadow: 0 2px 10px #ccc; /* 盒子阴影 */
text-shadow: 1px 1px 2px #666; /* 文字阴影 */
10. 鼠标样式
cursor: pointer; /* 小手 */
cursor: move; /* 移动箭头 */
cursor: text; /* 文本光标 */
11. 透明度
opacity: 0.5; /* 0完全透明~1不透明 */
三、常用 CSS 选择器
/* 1.标签选择器 */
p { color:green; }
/* 2.类选择器 .类名 */
.box { width:200px; }
<div class="box"></div>
/* 3.ID选择器 #id名 */
#box { background:pink; }
<div id="box"></div>
/* 4.后代选择器 */
div p { }
/* 5.通配符 全局样式 */
* { margin:0; padding:0; }
四、完整示例
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{
width: 300px;
height: 180px;
background: #f5f5f5;
margin: 30px auto;
border:1px solid #999;
border-radius:10px;
text-align:center;
line-height:180px;
font-size:18px;
color:#333;
box-shadow:0 0 8px #ddd;
}
</style>
</head>
<body>
<div class="box">CSS样式演示盒子</div>
</body>
</html>
HTML与CSS常用标签和属性
http://localhost:8090//archives/html-csschang-yong-biao-qian-he-shu-xing