HTML5与CSS的基础内容-优快云博客

本文详细介绍了HTML和CSS的基本用法，包括标签、属性、选择器、文本样式、表格样式等，适合初学者快速掌握网页设计的基础知识。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<b>粗体文字</b>
<em>强调文字</em>
<strong>加强调文字</strong>
<i>斜体显示</i>
<sup>上标</sup>例如：x²
<sub>下标</sub>
<br/>换行
<p>段落标记</p>
<h1>一级标题</h1>
<ul>无序列表（将ul换成ol就变为有序列表，即自动为列表项编号）
<li>无序列表项</li>
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
..上级目录
../..上级的上级目录
<hr/>显示一条水平线
<a href=”链接” target=_blank>在新窗口打开链接</a>  
<a href=”链接” target=_self>在当前窗口打开链接</a> 
建立的超链接（可以是网站，也可以是图片，文档等）
<a href=”mailto=邮箱地址”>发邮件给指定邮箱</a>
<img src="../HTML/cswz.jpg" usemap="#pic">
<map id="#pic">
	<area shape="rect" coords="0,0,1000,1000" href="http://www.baidu.com/index.html">
</map>


<iframe src="http://www.baidu.com"></iframe>
在当前页面增加小窗口，

<style>
	iframe{
		width:300px;
		height:300px;
		border:none;
	}
</style>
表格
<table>表示一个表格对象的开始
<tr>表格一行的开始
<td>一行中一个单元格</td>
</tr>表格一行的结束
</table>表示一个表格对象的结束
<table>
	<tr><td>AAAAA</td><td>BBBBB</td><td>CCCCC</td></tr>
	<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td></tr>
</table>
合并单元格
左右合并：需要合并的第一个<td>变为<td colspan=”3”>//3代表合并3个单元格,并将后面两个单元格的<td>标记删除。
上下合并：需要合并的第一个<td>变为<td rowspan=”3”>
<table>
	<tr><td>AAAAA</td> <td>BBBBB</td> <td>CCCCC</td></tr>
	<tr><td colspan="2">aaaaa bbbbb</td> <td>ccccc</td></tr>
</table>
上下左右合并

表格中<caption><thead><tfoot><tbody>的使用：
<table>
	<caption>学生成绩单</caption>
	<thead>
		<tr>
			<th>姓名</th><th>性别</th><th>成绩</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>平均分</td><td colspan="2">540</td>
		</tr>
	</tfoot>
	<tbody>
		<tr><td>张三</td><td>男</td><td>500</td></tr>
		<tr><td>李四</td><td>男</td><td>500</td></tr>
		<tr><td>王二</td><td>男</td><td>80</td></tr>
	</tbody>
</table>


使用表单
用于收集浏览者的信息，标记为<form></form>
<form action=”url” method=”get|post” enctype=”mine”></form>

1、单行文本输入框text 
<form>
		登陆信息<br>
		用户名称
		<input type="text" name="user"><br>
		用户密码
		<input type="password" name="password" size=”20” maxlength=”15”><br>
		<input type="submit" value="登录">
	</form>

size定义文本框宽度，单位为单个字符宽度
maxlength定义输入最大字符长度

2、多行文本输入框textarea
<form>
		输入您的建议：<br>
		<textarea name="yoursuggestion" cols="20" rows="5" wrap="输入内容过多"></textarea>
		<br> 
		<input type="submit" value="提交">
	</form>

name定义文本框的名称，必须是独一无二的；
cols定义多行文本框的宽度；
rows定义多行文本框的高度。
<input type=”password” name=”” size=”” maxlength=””>
Type=“password”表示密码框
单选按钮radio
name定义单元按钮名称，以组为单位使用；
value定义单选按钮的值。
<form>
		<input type="radio" name="book" value="book1">JAVA程序设计<br>
		<input type="radio" name="book" value="book2">PYTHON语言程序设计<br>
		<input type="radio" name="book" value="book3">数据库系统原理<br>
	</form>

复选框
checkbox

<form>
		<input type="checkbox" name="book" value="book1">JAVA程序设计<br>
		<input type="checkbox" name="book" value="book2">PYTHON语言程序设计<br>
		<input type="checkbox" name="book" value="book3">数据库系统原理<br>
	</form>

选择列表标记selectmultiple表示多选，去掉表示单选,selected表示默认已选择。
<form>
	<select name="fruit" size="3" multiple>
		<option value="book1" selected>java开发
		<option value="book2">python开发
		<option value="book3">python2开发
		<option value="book4">python3开发
		<option value="book5">python4开发
		<option value="book6">python5开发
	</select>
</form>

普通按钮botton
<input type=”button” name=”普通按钮名称” value=”按钮显示文字” onclick=”单击行为，可通过指定脚本函数定义”>
提交按钮submit
<input type=”submit” value=”提交”>
重置按钮reset
<input type=”reset” name=”重置按钮名称” value=”按钮显示内容”>
红色部分可省略，点击重置按钮即可清空<form></form>中输入框中内容。
url和email属性
<form>
	请输入网址：<br>
	<input type="url" name="userurl">
</form>

<form>
	请输入邮箱地址：<br>
	<input type="email" name="user_email">
	<input type="submit" value="提交">
</form>

date和times

<form>
	请选择购买商品的日期：<br>
	<input type="date" name="user_date">
</form>

number属性
<form>
	此网站我来过<input type="number" name="user_num" max="9" min="0">了！
</form>

range属性
<form>
	此网站我来过<input type="range" name="user_ran" max="9" min="0">了！
</form>

required属性输入域不能为空
<form>
	此网站我来过<input type="password" name="userpass" required="required">了！
</form>

文件上传框
<form>
	<input type="file" name="fileup" size="30" maxlength="50">
</form>

CSS3的使用方法
1、行内样式：不经常使用
<p style="color: red; font-size: 20px; text-decoration: underline; text-align: center">显示段落</p>

2、内嵌样式：常用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内字样</title>
<style>
p {
	color: red;
	font-size: 20px;
	text-decoration: underline;
	text-align: center;
	font-style:italic;
}
</style>
</head>
<body>
	<p>显示段落</p>
</body>
</html>

font-weight:bolder:加粗
3、链接样式
Practice.css
@charset "UTF-8";
h1{text-align:center;}
p{font-size:29px;text-align:center;font-style:italic}
**************************************************************


Practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<link rel="stylesheet" type="text/css" href="Practice.css">
</head>
<body>
	<h1>CSS学习</h1>
	<p>此段落使用链接样式修饰</p>
</body>
</html>

4、导入样式：可同时导入多个CSS文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
@import "Practice.css"
</style>
</head>
<body>
	<h1>CSS学习</h1>
	<p>此段落使用链接样式修饰</p>
</body>
</html>
优先级：行内样式>内嵌样式>链接样式>导入样式
CSS3选择器
1、标记选择器
P,td{font-size:20px;}
2、类选择器
.rd{color:red;}   rd为自己命名的类的名称
使用:<p class=”rd”></p>
3、ID选择器:不能用于多个标记
#fontstyle{
color:red;
font-weight:bold;
Font-size:large;
}
使用：<p id=”fontstyle”></p>
4、全局选择器:应用于一个页面的所有标记
*{
color:red;
Font-size:20px;
}
5、组合选择器
p.firstpar{
color:red;
}
使用：<p class=”firstpar”></p>
6、继承选择器
h1{color:red;text-decoration:underline;}
h1 strong{color:#004400;font-size:40px;}
使用：<h1>测试CSS的<strong>继承</strong>效果</h1>

7、伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
a:link{color:red}                   //未访问的链接
a:visited{color:green}             //已访问的链接
a:hover{color:blue}                //鼠标移到链接上
a:active{color:orange}             //选定的链接
</style>
</head>
<body>
	<a href="">链接到本页</a>
	<a href="http://www.baidu.com">连接到百度</a>
</body>
</html>
8、属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
[align]{color:red;}
[align="left"]{font-size:20px;font-weight:bolder;}
[lang^="en"]{color:blue;text-decoration:underline;}
[src$="gif"]{border-width:5px;boder-color:#ff9900;}
</style>
</head>
<body>
	<p align=center>这里使用属性定义样式</p>
	<p align=left>这里使用属性定义样式</p>
	<p lang="en-us">此处使用属性值前缀定义样式</p>
	<img src="cswz.gif" border="1">
</body>
</html>


9、结构伪类选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
tr:nth-child(even){background-color:#f5fafe;}
tr:last-child{font-size:20px;}
</style>
</head>
<body>
	<table border=1 width=80%>
	<th>姓名</th><th>编号</th><th>性别</th>
	<tr><td>张三</td><td>001</td><td>男</td></tr>
	<tr><td>张三</td><td>001</td><td>男</td></tr>
	<tr><td>张三</td><td>001</td><td>男</td></tr>
	<tr><td>张三</td><td>001</td><td>男</td></tr>
	<tr><td>张三</td><td>001</td><td>男</td></tr>
	<tr><td>张三</td><td>001</td><td>男</td></tr>
	</table>
</body>
</html>

10、UI元素状态伪类选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
input:enabled{border:1px dotted #666;background:blue;}
input:disabled{border:1px dotted #999;background:green;}
</style>
</head>
<body>
	<center>
		<h3 align=center>用户登陆</h3>
		<form method="post" action="">
		用户名：<input type="text" name="name"><br>
		密&nbsp;&nbsp;码:<input type="password" name="pass" disabled="disabled"><br>        //密码框无法输入
		<input type="submit" value="提交">
		<input type="reset" value="重置">
		</form>
	</center>
</body>
</html>

字体属性
字体Font-family:华文彩云，黑体，宋体，“times new roman”；//黑体、宋体为备选字体，当当前浏览器无法显示花文彩云时依次向后选择字体。
字号Font-size:数值|small|large|50%...


字体风格Font-style:normal|italic|oblique...

加粗字体font-weight：100-900(100至900)|bold...


小写字母转化为大写字母font-variant:...

字体复合属性font:...

字体颜色color

阴影文本text-shadow:length length opacity color
依次表示阴影的水平位移，垂直位移，阴影半径，阴影颜色。
<body>
<p align="center" style="text-shadow:10px 2px 6px blue">我是一行字</p>
</body>

溢出文本text-overflow

控制换行word-wrap

保持字体尺寸不变font-size-adjust

段落属性
单词间隔：用于设置词与词之间的间距word-spacing:normal|length(正值或负值)
<body>
<p style="word-spacing:30px">这里是一行字</p>
<p style="word-spacing:30px">这  里  是  一  行  字</p>
<p style="word-spacing:30px">times is going</p>
<p style="word-spacing:normal">times is going</p>
<p style="word-spacing:normal">timesisgoing</p>
</body>


字符间距letter-spacing:normal|length(允许为负值)
<body>
<p style="letter-spacing:30px">这里是一行字</p>
<p style="letter-spacing:normal">这里是一行字</p>
<p style="letter-spacing:30px">times is going</p>
<p style="letter-spacing:normal">times is going</p>
</body>

文字修饰Text-decoration

垂直对齐方式vertial-align

	
文本转换text-transform


水平对齐方式text-align


文本缩进text-indent
文本行高（行间距）line-height

文本反排unicode-bidi和direction


表格基本样式
表格边框样式border-collapse:seprate(默认值，分开)|collapse（不分开）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
.tablelist{
	color:green;
	border:2px solid blue;
	border-collapse:collapse;
}
.tablelist td{
	color:red;
	border:1px solid red;
	border-collapse:collapse;
}
.tablelist caption{
	color:blue;
	border:3px solid yellow;
	border-collapse:collapse;
}
</style>
</head>
<body>
	<table class="tablelist">
		<caption calss="tablelist">2019-10-1标题</caption>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
	</table>
</body>
</html>

表格边框宽度border-width:6px;
边框颜色：border:1px solid green
背景颜色：background-color:green