HTML/CSS
2024年8月5日...大约 2 分钟
HTML/CSS
HTML
基本标签
<h1>最大的标题</h1>
...
<h6>最小的标题</h6>
<br> （换行）
<hr> （水平线）
链接：<a href="http://www.example.com/">链接文本(也可以是图片<img>)</a>
<img src="URL" alt="替换文本">
<!-- 无序ul/有序ol列表 -->
<ul>
<li>项目</li>
<li>项目</li>
</ul>
<!-- 表格 -->
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
<!-- 表单 -->
<!-- <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法 -->
<form action="/" method="post">
<input type="text" id="name" name="name" required>
</form>文本格式化
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）CSS
基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 外部样式的引入 -->
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
<style>
/* 内部样式 */
p{
color:red;
background: #cccccc;
}
h2{
color:blue;
}
</style>
<style>
/* 也是外部样式的引入 */
@import "CSS样式文件路径";
@import url(CSS样式文件路径);
</style>
</head>
<body>
<div></div>
</body>
</html>选择器的优先级
从高到低：
内联样式
ID选择器
类选择器
属性选择器
伪类选择器
伪元素选择器
元素类型选择器
通配符选择器
继承
特殊的 !important 规则（可以覆盖其他所有规则）
一些功能
元素的显示和隐藏
display:noe 和 visibility:hidden (值取visible为显示)都可以切换元素的显示和隐藏； 区别在于display隐藏时不再占据页面中的空间，后面的元素会占用其位置， 而visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示。
你认为这篇文章怎么样？
0
0
0
0
0
0
