HTML和CSS

最新推荐文章于 2023-03-21 14:16:11 发布

磊哥的小迷妹

最新推荐文章于 2023-03-21 14:16:11 发布

阅读量1.3k

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_48496502/article/details/121854371

版权

笔记专栏收录该内容

112 篇文章 3 订阅

订阅专栏

本文详细介绍了HTML和CSS的基础知识，包括HTML的书写规范、常用标签如font、特殊字符、标题、超链接、列表、图片、表格、iframe、表单以及CSS的选择器、语法和与HTML的结合方式。重点讲解了表格、表单和超链接的使用，并提供了多个实例演示。此外，还讨论了CSS的选择器，如标签选择器、ID选择器和类选择器，以及如何通过内联样式、内部样式表和外部样式表应用样式。

摘要由CSDN通过智能技术生成

HTML

可查看标签手册（文档：w3cschool.CHM）

在HTML中，绝对路径和相对路径

绝对路径：http://ip:port/工程名/资源路径
相对路径：
.表示当前文件所在目录
.. 表示当前文件所在的上一级目录
./文件名 表示当前文件所在目录的文件,相当于 文件名， ./ 可以省略

1、书写规范

Ctrl+shift + / 注释快捷键

<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="en"表示英文，"zh_CN"表示中文-->
<!--html标签中一般分为两部分，head和body-->
<head><!--表示头部信息，一般包含三部分内容：title标签，css样式，js代码脚本-->
    <meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集-->
    <title>标题</title><!--表示标题-->
</head>
<body><!--是整个html页面显示的主体内容-->
你好你好你好
</body>
</html><!--表示整个html页面的结束-->

标签的格式：
<标签名>封装的数据</标签名>
标签名大小写不敏感。
标签拥有自己的属性。
1. 基本属性：bgcolor="red" 可以修改简单的样式效果
2. 事件属性： onclick="alert('你好！');"可以直接设置事件响应后的代码。
标签又分为，单标签和双标签。
1. 单标签格式： <标签名 />
  比如 <br/> 换行、<hr/> 水平线
2. 双标签格式: <标签名> …封装的数据…</标签名>

注意：

标签不能交叉嵌套
标签注意格式，单标签 <标签名 />，双标签<标签名></标签名>
属性必须有值，属性值必须加引号
注释不能嵌套

2、常用标签

可查看标签手册（文档：w3cschool.CHM）

按字母顺序列出的HTML 4.01/XHTML 1.0标签手册
在这里插入图片描述

2.1、font 字体标签

<font> 可规定文本的字体、字体尺寸、字体颜色
在这里插入图片描述
需求：
在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。

<body>
	<!-- 字体标签
	需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。

	font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
		color 属性修改颜色
		face 属性修改字体
		size 属性修改文本大小
	 -->
<font color="red" face="宋体" size="7">我是字体标签</font>

</body>

在这里插入图片描述

2.2、特殊字符

在这里插入图片描述
需求 1：
把<br>换行标签变成文本转换成字符显示在页面上

<body>
	<!-- 特殊字符
	需求 1：把 <br/> 换行标签 变成文本 转换成字符显示在页面上

	常用的特殊字符:
	    <            &lt;
	    >            &gt;
	   空格          &nbsp;
	 -->
    特殊&lt;br/&gt;字符
</body>

在这里插入图片描述

2.3、h1 标题标签

标题标签是 h1 到 h6

需求 1：
演示标题 1 到标题 6 的

<body>
	<!-- 标题标签
	 需求 1：演示标题 1 到 标题 6 的

	 	h1 - h6 都是标题标签
	 	h1 最大 h6 最小
	 		align 属性是对齐属性
	 			left 左对齐(默认)
	 			center 剧中
	 			right 右对齐
	 -->
	<h1 align="">标题1</h1>
	<h2 align="left">标题2</h2>
	<h3 align="center">标题3</h3>
	<h4 align="right">标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
</body>

在这里插入图片描述

2.4、a 超链接★★★★★

在网页中所有点击之后可以跳转的内容都是超连接

需求 1：
普通的超链接

	 a 标签是 超链接
	 	href 属性设置连接的地址
	 	target 属性设置哪个目标进行跳转
	 		_self 表示当前页面(默认值)
	 		_blank 表示打开新页面来进行跳转

<body>
	<a href="http://dict.youdao.com/?keyfrom=cidian" target="_blank">有道词典</a>
</body>

在这里插入图片描述

2.5、ul 、li 列表标签

需求 1：
使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来

	ul 标签是无序列表
		type 属性可以修改列表项前面的符号
		
	li 标签是列表内容项

<body>
    <!--需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来-->
<ul type="none">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>
</body>

在这里插入图片描述

2.6、img 标签（单标签）

img 标签可以在 html 页面上显示图片

注意相对路径和绝对路径的表示格式

需求 1：
使用 img 标签显示一张美女的照片。并修改宽高，和边框属性

	img 标签是图片标签,用来显示图片
		src 属性可以设置图片的路径 
		width 属性设置图片的宽度
		height 属性设置图片的高度
		border 属性设置图片边框大小
		alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

	在 web 中路径分为相对路径和绝对路径两种 
		相对路径: 
			. 表示当前文件所在的目录 
			.. 表示当前文件所在的上一级目录 
			./文件名 表示当前文件所在目录的文件,相当于 文件名 ./ 可以省略 
		绝对路径: 
			正确格式是: http://ip:port/工程名/资源路径 
			错误格式是: 盘符:/目录/文件名

<body>
    <!--需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性-->
    <img src="../imgs/4.jpg" width="200" border="4" alt="找不到"/>
    <img src="../imgs/857456.jpg" alt="找不到"/>
</body>

在这里插入图片描述

2.7、table 表格标签★★★★★

需求 1：
做一个带表头的，三行，三列的表格，并显示边框

需求 2：
修改表格的宽度，高度，表格的对齐方式，单元格间距。

	table 标签是表格标签
		border 设置整个表格的边框
        width 设置表格宽度
        height 设置表格高度
        align 设置表格相对于页面的对齐方式
        cellspacing 设置表格内单元格间距
	tr 是行标签
	th 是表头标签（表头是加粗、居中）
	td 是单元格标签
        align 设置单元格文本对齐方式
	b 是加粗标签

<body>
<!--
    需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框
    需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间
-->
<table border="2" width="200" align="center">
    <tr>
        <th>1</th>
        <th>1</th>
    </tr>
    <tr>
        <td align="right">2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
    </tr>
</table>
</body>

在这里插入图片描述

2.8、跨行跨列表格★★★

需求 1：
新建一个三行三列的表格，第一行第一列的单元格要跨两列，第二行第一列的单元格跨两行

	tr 是行标签
    th 是表头标签（表头是加粗、居中）
    td 是单元格标签
		colspan 属性设置跨列
		rowspan 属性设置跨行

<body>
<!--
	需求 1：新建一个五行，五列的表格，
	第一行第一列的单元格要跨两列，
	第二行第一列的单元格跨两行，
	第四行第四 列的单元格跨两行两列。
-->
<table width="100" cellspacing="2" border="3">
    <tr>
        <td colspan="2">1.1</td>
		<td>1.2</td>

    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
</body>

在这里插入图片描述

2.9、 iframe 框架标签 (内嵌窗口)

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.

类似于小窗播放

<body>
	<!--iframe 标签可以在页面上开辟一个小区域显示一个单独的页面
            src 属性设置内嵌窗口要显示的文件路径
	-->
这里是原文件的页面<br />
<hr />
<iframe src="5.img标签.html" width="200">
</iframe>
</body>

在这里插入图片描述
iframe 可以和 a 标签组合使用

点击链接后在箭头处显示

iframe 标签可以在页面上开辟一个小区域显示一个单独的页面
	src 属性设置内嵌窗口要显示的文件路径

iframe 和 a 标签组合使用的步骤:
	1 在 iframe 标签中使用 name 属性定义一个名称
	2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值

<body>
这里是原文件的页面<br />
<hr />
<iframe name="小草莓">
</iframe>
<ul>
    <li>
        <a href="1.font标签.html" target="小草莓">font标签</a>
    </li>
    <li>
        <a href="5.img标签.html" target="小草莓">img标签</a>
    </li>
</ul>
</body>

在这里插入图片描述

2.10、表单标签★★★★★

表单就是 html 页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

表单使用表单标签（<form>）定义

<form>
  <input>
  <input>
</form>

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

    form 标签就是表单 input是单标签，type为属性
        input type=text 是文字输入框 value 设置默认显示内容 placeholder 设置提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失
        input type=password 是密码输入框 value 设置默认显示内容,密码框的默认内容也是显示为密码圆点，看不到内容
        input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
        input type=checkbox 是复选框 checked="checked"表示默认选中
        input type=reset 是重置按钮,是重置为默认值  value 属性修改按钮上的文本
        input type=submit 是提交按钮 value 属性修改按钮上的文本
        input type=button 是按钮  value 属性修改按钮上的文本
        input type=file 是文件上传域
        input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的 时候同时发送给服务器）

    select 标签是下拉列表框
        option 标签是下拉列表框中的选项 selected="selected"设置默认选中
        multiple="multiple" 设置成下拉多选框
        	size="4" 下拉多选里面，页面显示的内容个数

    textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度

<form>
    用户名称：<input type="text" value="默认0000"/><br/>
    用户密码：<input type="password" value="哈哈哈"/><br/>
    确认密码：<input type="password"/><br/>
    <!--在单选框中，name属性进行分组，一组单选框里面只可有一个被选中-->
    性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/>
    爱好：<input type="checkbox"/>java<input type="checkbox"/>python<input type="checkbox"/>h5<br/>
    国家：<select>
    <option selected="selected">请输入</option>
    <option>中国</option>
    <option>日本</option>
    <option>韩国</option>
    <option>美国</option>
          </select><br/>
    自我评价：<textarea rows="5" cols="20">请输入文字信息...</textarea><br/>
    提交证件照：<input type="file"/><br/>
    <input type="reset"/> <input type="submit"/>
</form>

在这里插入图片描述
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失

示例：

<input type="text" placeholder="请输入用户名"/>

当输入框没有信息时候会显示提示内容
在这里插入图片描述
当输入框有内容时候，提示会消失

表单格式化

上面是错行排列，要想排列整齐，就需要和表格标签进行联合使用

<form>
    <h2 align="center">用户注册</h2>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认0000"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="哈哈哈"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女</td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td><input type="checkbox"/>java<input type="checkbox"/>python<input type="checkbox"/>h5</td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option selected="selected">请输入</option>
                <option>中国</option>
                <option>日本</option>
                <option>韩国</option>
                <option>美国</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="5" cols="20">请输入文字信息...</textarea></td>
        </tr>
        <tr>
            <td>提交证件照：</td>
            <td><input type="file"/></td>
        </tr>
        <tr>
            <td align="center"><input type="reset"/></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>

在这里插入图片描述

表单提交的细节

form 标签是表单标签
    action 属性设置提交的服务器地址
    method 属性设置提交的方式 GET(默认值)或 POST

表单提交的时候，数据没有发送给服务器的三种情况：
    1、表单项没有 name 属性值
    	（所以要给每一个需要发送给服务器的输入input项加上name属性）
    2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
    3、表单项不在提交的 form 标签中 

GET 请求的特点是：
    1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value
    2、不安全
    3、它有数据长度的限制 
    
POST 请求的特点是： 
    1、浏览器地址栏中只有 action 属性值 
    2、相对于 GET 请求要安全 
    3、理论上没有数据长度的限制

在提交方式为 GET 的情况下，有了name属性服务器才能识别输入内容

<form action="http://localhost:8080" method="get">
用户名称：<input type="text" name="username" value="默认0000"/>
用户密码：<input type="password" name="password" value="哈哈哈"/>
确认密码：<input type="password" name="password"/>
性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
</form>

在这里插入图片描述

单选、复选（下拉列表中的 option 标签）都需要添加 value 属性
上面的图片中，sex项只显示on，并不会显示用户选的是哪一个

下面代码都加上了 name 属性，单选、复选加上了 value 属性

<form action="http://localhost:8080" method="get">
用户名称：<input type="text" name="username" value="默认0000"/>
用户密码：<input type="password" name="password" value="哈哈哈"/>
确认密码：<input type="password" name="password"/>
性别：<input type="radio" name="sex" value="男"/>男
	  <input type="radio" name="sex" value="女"/>女
爱好：<input type="checkbox" name="hobby" value="java"/>java
	  <input type="checkbox" name="hobby" value="python"/>python
 	 <input type="checkbox" name="hobby" value="h5"/>h5
国籍：<select  name="国籍">
		<option selected="selected">请输入</option>
		<option>中国</option>
		<option>日本</option>
		<option>韩国</option>
		<option>美国</option>
     </select>
</form>

在这里插入图片描述
表单项需要在提交的 form 标签中
以下是隐藏域的提交内容

<form action="http://localhost:8080" method="get">
    <input type="hidden" name="abaaba" value="haha"/>
</form>

在这里插入图片描述
GET 请求有数据长度的限制
POST 请求理论上没有长度限制

2.11、div、span、p 标签

div、span、p 标签

	div 标签 默认独占一行 
	span 标签 它的长度是封装数据的长度 
	p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）

<body>
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	<p>p标签1</p>
	<p>p标签2</p>
	11111111
	22222222
</body>

在这里插入图片描述

CSS

可查看标签手册（文档：CSS2.0.chm）

Css 注释 /* 这是 css 的代码注释 */

1、CSS 语法

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
在这里插入图片描述
选择器：
浏览器根据 “ 选择器 ” 决定受 CSS 样式影响的 HTML 元素（标签）。

属性 (property) ：
是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}

多个声明：
如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如：
p{ color:red;
font-size:30px; }
注：一般每行只描述一个属性

2、CSS 和 HTML 的结合方式

使用的属性可以在文档中查询

在这里插入图片描述

2.1、第一种

在标签的 style 属性上设置key:value value;，修改标签样式。

需求 1：
分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色

<body>
<!--标签的 style 属性上设置-->
	<div style="border-width: 2pt;border-style: solid;border-color: red;">div 标签 1</div>
	<div style="border-width: 2pt;border-style: solid;border-color: red;">div 标签 2</div>
	<span style="border-width: 2pt;border-style: solid;border-color: red;">span 标签 1</span>
	<span style="border-width: 2pt;border-style: solid;border-color: red;">span 标签 2</span>
</body>

缺点：
如果标签多了。样式多了。代码量非常庞大。
可读性非常差。
Css 代码没什么复用性可方言

2.2、第二种

在 head 标签中，使用 style 标签专门用来定义 css 样式代码

格式如下： xxx {Key : value value value; }

<head>
    <meta charset="UTF-8">
    <title>CSS基本语法</title>
	<!--在 head 标签中，使用 style 标签专门用来定义 css 样式代码-->
	<style type="text/css">
	/* 这是CSS注释 */
		div{
			 border: 2pt solid red
		}
		span{
			border: 2pt solid red
		}
	</style>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span>
	<span>span 标签 2</span>
</body>

在这里插入图片描述
缺点：
只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
维护起来不方便，实际的项目有成千上万的页面，要去修改每个页面

2.3、第三种

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用

使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 标签导入 css 样式文件， link 标签声明在 head 标签中

需要创建一个单独的CSS文件
New——Stylesheet
在这里插入图片描述
里面的内容与刚刚一致

<head>
    <meta charset="UTF-8">
    <title>CSS基本语法</title>
	<!--link 标签专门用来引入 css 样式代码-->
	<link rel="stylesheet" type="text/css" href="CSS.css"/>
</head>

在这里插入图片描述

3、CSS 选择器

3.1、标签名选择器

标签名选择器的格式是：

标签名{ 
	属性:值;
}

标签名选择器，可以决定哪些标签被动的使用这个样式。

<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border: 1px yellow solid;
			color: blue;
			font-size: 30px;
		}
		span{
			border: 5px blue dashed;
			color: yellow;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<!-- 
	需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>

在这里插入图片描述

假如给定了 CSS 样式，给的是标签名选择器的，则直接复制，即可对对应的标签进行样式设定

3.2、id 选择器

使用 id 选择器的好处是可以使用 id 来选择要使用样式的标签

id 选择器的格式是：

#id属性值{ 
	属性:值; 
}

<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">
		#id001{
			color: blue; font-size: 30px; border: 1px yellow solid;
		}
		#id002{ 
			color: red; font-size: 20px; border: 5px blue dotted ; 
		}
	</style>
</head>
<body>
	<!-- 
	需求1：分别定义两个 div 标签:
		第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
</body>

在这里插入图片描述
假如给定了 CSS 样式，给的是 id 选择器的，则对html的标签进行 id 属性设置，即可对对应的标签进行样式设定

3.3、class 选择器（类选择器）

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

类选择器与 id 选择器用法基本一致，也是通过赋值 class 属性值来进行样式定位

class 类型选择器的格式是：

.class属性值{
	属性:值; 
}

<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: yellow 1px solid;
		}
		.class02{
			color: gray;
			font-size: 26px;
			border: red 1px solid;
		}
	</style>
</head>
<body>
	<!-- 
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->
	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>
</body>

在这里插入图片描述

id 选择器与 class 选择器的区别：

在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class
当页面中用到js或者要动态调用对象的时候，要用到id

3.4、组合选择器

组合选择器可以让多个选择器共用同一个 css 样式代码

组合选择器的格式是：

选择器1,选择器2,选择器n{
	属性:值;
}

<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
    <style type="text/css">
        .class01 , #id01{ 
            color: blue; 
            font-size: 20px; 
            border: 1px yellow solid; 
        }
    </style>
</head>
<body>
	<!-- 
	需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
	字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
	 -->
   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br /> 
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />
</body>

在这里插入图片描述

4、常用样式

字体颜色
color : red;
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
宽度（边框的宽度）
width : 19px;
宽度可以写像素值：19px；也可以写百分比值：20%
高度（边框的高度）
height : 20px;
高度可以写像素值：19px；也可以写百分比值：20%
背景颜色（边框的背景颜色）
background-color : #0F2D4C
字体样式：
color : FF0000;字体颜色红色
font-size：20px; 字体大小
红色 1像素实线边框 border : px solid red;
相对于页面居中margin-left: auto; margin-right: auto;
文本在框中居中： text-align: center;
超连接去下划线 text-decoration: none;
表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/ 变成Word那种表格
}
td,th {
border: 1px solid black; /设置边框/
}
无序列表去除前面的圆点序号修饰
ul {
list-style: none;
}