HTML+CSS初学者学习笔记

1、HTML标记语言

HTML的全称是 Hyper Text Markup Language，即超文本标记语言。HTML是一种在互联网上常见的网页制作标记性语言，HTML用于描述超文本中内容的显示方式。使用 HTML 可以实现在网页中定义一个标题、文本或者表格等。严格的说，HTML 并不能算作是一种程序设计语言，因为它缺少了程序设计语言所应有的特征。HTML是通过浏览器的翻译，将网页中的内容呈现给用户的。

1.1 创建第一个HTML文件

编写HTML文件可以通过两种方式：一种是手工编写HTML代码，另一种是借助一些开发软件。在 Windows 操作系统中，最简单的文本编辑软件就是记事本。

示例：使用记事本创建一个HTML文件。

（1）创建一个记事本文件。

（2）打开记事本文件，输入以下HTML代码：

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>创建第一个HTML文件</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    <b>您好！欢迎访问 pan_junbiao的博客</b><br>
  7.  
    <b>博客地址：https://blog.csdn.net/pan_junbiao</b><br>
  8.  
    <b>这是使用记事本编写的HTML文件</b>
  9.  
    </body>
  10.  
    </html>

（3）修改记事本文件名称，将文件的后缀名修改为 .html，如：01.html。

（4）运行文件，执行结果如下：

1.2 HTML文档结构

HTML 文档由4个主要标记组成，这4个标记是<html>、<head>、<title>和<body>。它们构成了HTML页面最基本的元素。

标记说明
<html>标记 <html>标记是 HTML 文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。HTML 页面的所有标记都要放置在<html>与</html>标记中，<html>标记并没有实质性的功能，但却是HTML文件不可缺少的内容。
<head>标记 <head>标记是 HTML 文件的头标记，作用是放置HTML文件的信息。如定义 CSS 样式代码可放置在<head>与</head>标记中。
<title>标记 <title>标记文标题标记。可将网页的标题定义在<title>与</title>标记中。
<body>标记 <body>标记是 HTML 页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，以</body>标记结束。<body>标记本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。

说明：HTML标记是不区分大小写的。

1.3 <meta>标记

<meta>标记可提供有关网页的信息（meta-information），<meta>标记出现在网页的标题部分。<meta>标记提供的信息包括作者姓名、公司名称和联系信息等。许多搜索引擎都要使用此信息。META标签使用属性/值的组合。

1.3.1 设置网站的作者（author）

示例：在页面中将“pan_junbiao的博客”指定为作者。

<meta name="author" content="pan_junbiao的博客">
 

1.3.2 设置网站的关键字（keywords）

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

示例：设置网站的关键字。

<meta name="keywords" content="Java,C#,Oracle,MySQL">
 

1.3.3 网页过期（expires）

示例：设置网页过期。

<meta http-equiv="expires"  content="Wed, 26 Feb 2019 08:21:57 GMT">
 

1.3.4 自动刷新（refresh）

示例：设置网页自动刷新。

  1.  
    <meta http-equiv="refresh" content="30">代表每隔30秒自动刷新本页面
  2.  
    <meta http-equiv="refresh" content="5; url=https://blog.csdn.net/pan_junbiao">代表过5秒自动跳转到新的url网址

1.3.5 解决页面中文乱码

<meta charset="UTF-8">
 

 

2、HTML常用标记

HTML中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加的生动，下面为大家介绍HTML中的常用标记。

2.1 换行标记

在HTML语言中，换行标记为<br>。与前面介绍的HTML标记不同，换行标记是一个单独标记，不是成对出现的。

示例：创建HTML页面，在页面中使用换行标记。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>应用换行标记实现页面文字换行</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    <b>您好！欢迎访问 pan_junbiao的博客</b><br>
  7.  
    <b>博客地址：https://blog.csdn.net/pan_junbiao</b><br>
  8.  
    所有的努力都不会完全白费，你付出多少时间和精力，都是在对未来的积累。<br>
  9.  
    世界上什么都不公平，唯独时间最公平，你是懒惰还是努力，时间都会给出结果。
  10.  
    </body>
  11.  
    </html>

执行结果：

2.2 段落标记

HTML中的段落标记也是一个很重要的标记，段落标记以<p>标记开头，以</p>标记结束。段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容，不受该标记的影响。

2.3 标题标记

要在HTML页面中创建不同级别的标题，可以使用HTML语言中的标题标记。在HTML标记中，设定了6个标题标记，分别为<h1>至<h6>，其中<h1>代表1级标题，<h2>代表2级标题，<h6>代表6级标题等。数字越小，表示级别越高，文字的字体也就越大。

示例：在HTML页面中使用标题标记。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>标题标记</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    <h1>您好，欢迎访问 pan_junbiao的博客</h1>
  7.  
    <h2>您好，欢迎访问 pan_junbiao的博客</h2>
  8.  
    <h3>您好，欢迎访问 pan_junbiao的博客</h3>
  9.  
    <h4>您好，欢迎访问 pan_junbiao的博客</h4>
  10.  
    <h5>您好，欢迎访问 pan_junbiao的博客</h5>
  11.  
    <h6>您好，欢迎访问 pan_junbiao的博客</h6>
  12.  
    </body>
  13.  
    </html>

执行结果：

2.4 文本格式化标记

标签示例
<B>标签 <B>该文本将以粗体显示</B>
<I>标签 <I>该文本将以斜体显示</I>
<U>标签 <U>该文本将显示为带有下划线</U>
<SUB>标签 <SUB>该文本的显示高度将低于前后的文本</SUB>
<SUP>标签 <SUP>该文本的显示高度将高于周围的文本</SUP>

示例：在HTML页面中使用文本格式化标记。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>文本格式化标记</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    <B>您好，欢迎访问 pan_junbiao的博客!</B><br>
  7.  
    <I>您好，欢迎访问 pan_junbiao的博客!</I><br>
  8.  
    <U>您好，欢迎访问 pan_junbiao的博客!</U><br>
  9.  
    <SUB>您好，欢迎访问 pan_junbiao的博客!</SUB>博客地址：https://blog.csdn.net/pan_junbiao<br>
  10.  
    <SUP>您好，欢迎访问 pan_junbiao的博客!</SUP>博客地址：https://blog.csdn.net/pan_junbiao<br>
  11.  
    </body>
  12.  
    </html>

执行结果：

2.5 居中标记

HTML页面中的内容有一定的布局方式，默认的布局方式是从左到右依次排序。如果要想让页面中的内容在页面的居中位置显示，可以使用HTML中的<center>标记。<center>居中标记以<center>标记开头，以</center>标记结尾。标记之中的内容为居中显示。HTML5 不支持 <center> 标签。请用 CSS 代替。

2.6 文字列表标记

HTML语言中提供了文字列表标记，文字列表标记可以将文字以列表的形式依次排列。通过这种形式可以更加的方便网页的访问者。HTML中的列表标记主要有无序的列表和有序的列表两种。

2.6.1 无序列表

无序列表是在每个列表项的前面添加一个圆点符号。通过符号<ul>可以创建一组无序列表，其中每个列表项以<li>表示。

示例：使用无序列表对页面中的文字进行排序。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>无序列表标记</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    编程词典有以下几个品种
  7.  
    <p>
  8.  
    <ul>
  9.  
    <li>Java编程词典</li>
  10.  
    <li>VB编程词典</li>
  11.  
    <li>VC编程词典</li>
  12.  
    <li>.net编程词典</li>
  13.  
    <li>C#编程词典</li>
  14.  
    </ul>
  15.  
    </body>
  16.  
    </html>

执行结果：

2.6.2 有序列表

有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中项目项是有一定的顺序的。

示例：使用有序列表对页面中的文字进行排序。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>有序列表标记</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    编程词典有以下几个品种
  7.  
    <p>
  8.  
    <ol>
  9.  
    <li>Java编程词典</li>
  10.  
    <li>VB编程词典</li>
  11.  
    <li>VC编程词典</li>
  12.  
    <li>.net编程词典</li>
  13.  
    <li>C#编程词典</li>
  14.  
    </ol>
  15.  
    </body>
  16.  
    </html>

执行结果：

2.7 表格标记

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。

标记说明
表格标记<table> <table></table>标记表示整个表格。<table>标记中有很多属性，例如 width 属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对其方式，bgcolor 属性用来设置表格的背景色等。
标题标记<caption> 标题标记以<caption>开头，以</caption>结束，标题标记也有一些属性，例如：align、valign 等。
表格行标记<tr> 一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用，该标记也具有 algin、background 等属性。
表头标记<th> 表头标记以<th>开头，以</th>结束，也可以通过 algin、background、colspan、valign 等属性来设置表头。
单元格标记<td> 单元格标记<td>又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有 algin、background、valign 等属性。

2.7.1 显示表格边框

方法一：在<table>标记中添加属性：border="1" cellspacing="0"，如下：

  1.  
    <table border="1" cellspacing="0">
  2.  
    </table>

说明：

border="1"表示设置表格边框1px；

cellspacing="0"表示设置表格边框间距为0，即无边距。

方法二：使用CSS样式。

  1.  
    table { border-collapse: collapse;}
  2.  
    table,table tr th, table tr td { border:1px solid #000000; }

2.7.2 单元格合并

colspan 是列合并，rowspan是行合并。

示例：在页面中定义学生成绩表，并在表格中显示边框，同时使用单元格合并。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>表格标记</title>
  4.  
    <style>
  5.  
    table { border-collapse: collapse;}
  6.  
    table,table tr th, table tr td { border:1px solid #000000; }
  7.  
    </style>
  8.  
    </head>
  9.  
    <body>
  10.  
    <table align="center">
  11.  
    <caption>学生考试成绩单</caption>
  12.  
    <tr>
  13.  
    <th align="center" valign="middle">姓名</th>
  14.  
    <th align="center" valign="middle">语文</th>
  15.  
    <th align="center" valign="middle">数学</th>
  16.  
    <th align="center" valign="middle">英语</th>
  17.  
    </tr>
  18.  
    <tr>
  19.  
    <td align="center" valign="middle">张三</td>
  20.  
    <td align="center" valign="middle">89</td>
  21.  
    <td align="center" valign="middle">92</td>
  22.  
    <td align="center" valign="middle">87</td>
  23.  
    </tr>
  24.  
    <tr>
  25.  
    <td align="center" valign="middle">李四</td>
  26.  
    <td align="center" valign="middle">93</td>
  27.  
    <td align="center" valign="middle">86</td>
  28.  
    <td align="center" valign="middle">80</td>
  29.  
    </tr>
  30.  
    <tr>
  31.  
    <td align="center" valign="middle">王五</td>
  32.  
    <td align="center" valign="middle">85</td>
  33.  
    <td align="center" valign="middle">86</td>
  34.  
    <td align="center" valign="middle">90</td>
  35.  
    </tr>
  36.  
    <tr>
  37.  
    <th rowspan="2" align="center" valign="middle">博客信息</th>
  38.  
    <td colspan="3" align="center" valign="middle">您好，欢迎访问 pan_junbiao的博客</td>
  39.  
    </tr>
  40.  
    <tr>
  41.  
    <td colspan="3" align="center" valign="middle">博客地址：https://blog.csdn.net/pan_junbiao</td>
  42.  
    </tr>
  43.  
    </table>
  44.  
    </body>

执行结果：

2.8 <hr>标记

<hr>(水平线)标记用于在页面上绘制水平线。

<hr>标签属性：

属性说明
align 指定水平线的位置。
width 指定水平线的长度。
size 指定水平线的宽度，以像素为单位。
 noshade 指定水平线以纯色而不是以阴影进行显示。

示例：在页面中显示水平线。

  1.  
    <hr noshade size="5" align="center" width="50%"/>
  2.  
    <hr size="15" align="left" width="80%"/>

2.9 在HTML中使用特殊符字符

字符实体由3部分组成：&号、 实体名称和分号（；）。

如：空格： &nbsp;      版权号：  &copy;

 

3、HTML表单标记

对于经常上网的人来说，对网站中的登录页面肯定不会感到陌生。在登录页面中，网站会提供给用户用户名文本框与密码文本框，以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。

3.1 <form>表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

<form>标记的语法：

  1.  
    <form action="url" method="get | post" name="formName" οnsubmit="" target="">
  2.  
    </form>

<form>标记的属性：

属性说明
action 该属性用来指定处理表单数据程序的URL地址。
method 该属性用来指定数据传送到服务器的方式。它有两种属性值，分别为 get 和 post。get 属性值表示将输入的数据追加在 action 指定的地址后面，并传送到服务器。当属性值为 post 时，会将输入的数据按照 HTTP 协议中的 post 传输方式传送到服务器。
name 该属性指定表单的名称，程序员可以自定义其值。
onsubmit 该属性用于指定当前用户单击提交按钮时触发的事件。
target 该属性指定输入数据结果显示在哪个窗口中，其属性值可以设置为_blank、_self、_parent 和 _top。其中，_blank 表示在新窗口中打开目标文件；_self 表示在同一个窗口中打开，该项一般不用设置；_parent 表示在上一级窗口中打开，一般使用框架页时经常使用；_top 表示在浏览器的整个窗口中打开，忽略任何框架。

示例：创建表单，设置表单名称为 myForm，传送方式为 post，当用户提交表单时，提交至 action.html 页面进行处理。

  1.  
    <form id="form1" name="myForm" method="post" action="action.html" target="_blank">
  2.  
    </form>

<form>表单标记的详细使用，请浏览本博客的文章：HTML中Form表单的使用

3.2 <input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过这个标记可以在向页面中添加单行文本、多行文本、按钮等。

<input>标记的语法：

  1.  
    <input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit"
  2.  
    readonly="readonly" size="digit" src="uri" usemap="uri" alt="" name="" value="" />

<input>标记的属性：

属性描述
type 用于指定添加的是哪种类型的输入字段，共有10个可选值。
disabled 用于指定输入字段不可用，即字体变成灰色。其属性值可以为空值，也可以指定为 disabled。
checked 用于指定输入字段是否处于被选中状态，用于 type 属性值为 radio 和 checkbox 的情况下。其属性值可以为空值，也可以指定为 checked。
width 用于指定输入字段的宽度，用于 type 属性值为 image 的情况下。
height 用于指定输入字段的高度，用于 type 属性值为 image 的情况下。
maxlength 用于指定输入字段可输入文字的个数，用于 type 属性值为 text 和 password 的情况下，默认没有字数限制。
readonly 用于指定输入字段是否为只读。其属性值可以为空值，也可以指定为 readonly。
size 用于指定输入字段的宽度，当 type 属性为  text 和 password 时，以文字个数为单位，当 type 属性为其他值时，以像素为单位。
src 用于指定图片的来源，只有当 type 属性值 image 时有效。
usemap 为图片设置热点地图，只有当 type 属性值 image 时有效。属性值为 URI，URI格式为“#+<map>标记的 name 属性值”。例如，<map>标记的 name 属性为 Map，该URI为 #Map。
alt 用于指定当图片无法显示时显示的文字，只有当 type 属性值 image 时有效。
name 用于指定输入字段的名称。
value

用于指定输入字段默认的数据值，当 type 属性为 checkbox 和 radio 时，不可省略此属性；为其他值时，可以省略。当 type 属性为 button、reset 和 submit 时，指定的是按钮上的显示文字； 当 type 属性为 checkbox 和 radio 时，指定的是数据项选定的值。

type属性是<input>标记中非常重要的内容，决定了输入数据的类型。

type属性的属性值：

可选值描述可选值描述
text 文本框 submit 提交按钮
password 密码域 reset 重置按钮
file 文件域 button 普通按钮
radio 单选按钮 hidden 隐藏域
checkbox 复选框 image 图像域

示例：在HTML页面中使用各种表单标记。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>表单标记</title>
  4.  
    <style>
  5.  
    .txtBox{
  6.  
    padding: 3px;
  7.  
    width: 300px;
  8.  
    font-size: 16px;
  9.  
    }
  10.  
    </style>
  11.  
    </head>
  12.  
    <body>
  13.  
    <form action="" method="post" name="myform">
  14.  
    <table align="center">
  15.  
    <caption>用户注册</caption>
  16.  
    <tr>
  17.  
    <th>博客信息：</th>
  18.  
    <td>
  19.  
    <input class="txtBox" type="text" id="txtBlogInfo" name="blogInfo" value="您好，欢迎访问 pan_junbiao的博客!" />
  20.  
    </td>
  21.  
    </tr>
  22.  
    <tr>
  23.  
    <th>博客地址：</th>
  24.  
    <td>
  25.  
    <input class="txtBox" type="text" id="txtBlogUrl" name="blogUrl" value="https://blog.csdn.net/pan_junbiao"/>
  26.  
    </td>
  27.  
    </tr>
  28.  
    <tr>
  29.  
    <th>性别：</th>
  30.  
    <td>
  31.  
    <input id="male" name="sex" type="radio" value="1" checked="checked"/>
  32.  
    <label for="male">男</label>
  33.  
    <input id="female" name="sex" type="radio" value="2"/>
  34.  
    <label for="female">女</label>
  35.  
    <input id="secrecy" name="sex" type="radio" value="3"/>
  36.  
    <label for="secrecy">保密</label>
  37.  
    </td>
  38.  
    </tr>
  39.  
    <tr>
  40.  
    <th>兴趣爱好：</th>
  41.  
    <td>
  42.  
    <input id="lq" name="hobby" type="checkbox" value="篮球" checked="checked">
  43.  
    <label for="lq">篮球</label>
  44.  
    <input id="zq" name="hobby" type="checkbox" value="足球" checked="checked">
  45.  
    <label for="zq">足球</label>
  46.  
    <input id="ymq" name="hobby" type="checkbox" value="羽毛球">
  47.  
    <label for="ymq">羽毛球</label>
  48.  
    <input id="ppq" name="hobby" type="checkbox" value="乒乓球">
  49.  
    <label for="ppq">乒乓球</label>
  50.  
    <input id="yy" name="hobby" type="checkbox" value="游泳">
  51.  
    <label for="yy">游泳</label>
  52.  
    </td>
  53.  
    </tr>
  54.  
    <!-- 以下是提交、取消按钮 -->
  55.  
    <tr>
  56.  
    <td colspan="2" style="text-align: center;">
  57.  
    <input type="submit" value="提交"/>
  58.  
    <input type="reset" value="重置" />
  59.  
    </td>
  60.  
    </tr>
  61.  
    </table>
  62.  
    </form>
  63.  
    </body>
  64.  
    </html>

执行结果：

3.3 <select>下拉列表标记

<select>标记可以在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用<option>标记向列表中添加内容。

<select>标记的语法：

  1.  
    <select name="name" size="digit" multiple="multiple" disabled="disabled">
  2.  
    <option value="" selected>选择项1</option>
  3.  
    <option value="">选择项2</option>
  4.  
    <option value="">选择项3</option>
  5.  
    </select>

<select>标记的属性：

属性描述
name 用于指定列表框的名称。
size 用于指定列表框中显示选项的数量，超出该数量的选项可以通过滚动条查看。
disabled 用于指定当前列表框不可使用（变成灰色）。
multiple 用于让多行列表框支持多选。

示例：在页面中应用<select>标记和<option>标记添加下拉列表框和多行下拉列表框。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>下拉列表标记</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    下拉列表框：
  7.  
    <select name="select1">
  8.  
    <option>pan_junbiao的博客</option>
  9.  
    <option>KevinPan</option>
  10.  
    <option>吖标</option>
  11.  
    </select>
  12.  
    &nbsp;&nbsp;
  13.  
    多行列表框（不可多选）：
  14.  
    <select name="select2" size="2">
  15.  
    <option>pan_junbiao的博客</option>
  16.  
    <option>KevinPan</option>
  17.  
    <option>吖标</option>
  18.  
    </select>
  19.  
    &nbsp;&nbsp;
  20.  
    多行列表框（可多选）：
  21.  
    <select name="select2" size="3" multiple>
  22.  
    <option>pan_junbiao的博客</option>
  23.  
    <option>KevinPan</option>
  24.  
    <option>吖标</option>
  25.  
    </select>
  26.  
    </body>
  27.  
    </html>

执行结果：

3.4 <textarea>多行文本标记

<textarea>为多行文本标记，与单行文本相比，多行文本可输入更多的内容。

<textarea>标记的语法：

  1.  
    <textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">
  2.  
    文本内容
  3.  
    </textarea>

<select>标记的属性：

属性描述
cols 用于指定多行文本框显示的列数（宽度）。
rows 用于指定多行文本框显示的行数（高度）。
name 用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用。
disabled 用于指定多行文本框不可使用（变成灰色）。
readonly 用于指定多行文本框为只读。
wrap 用于设置多行文本框中的文字是否自动换行。

wrap属性的可选值：

可选值描述
hard 默认值，表示自动换行，如果文字超过 cols 属性所指的列数就自动换行，并且提交到服务器时换行符同时被提交。
soft 表示自动换行，如果文字超过 cols 属性所指的列数就自动换行，但提交到服务器时换行符不被提交。
off 表示不自动换行，如果想让文字换行，只能按下 Enter 键强制换行。

示例：使用多行文本框，显示文字信息。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>多行文本框</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    <textarea name="content" cols="50" rows="5" wrap="hard">
  7.  
    您好，欢迎访问 pan_junbiao的博客!
  8.  
    博客地址：https://blog.csdn.net/pan_junbiao
  9.  
    岁月从来不曾静好，只是有人在替你背负枷锁，含泪前行。也许是父母，也许是朋友，也许是陌生人，无论是谁，请记得常怀感恩之心。
  10.  
    </textarea>
  11.  
    </body>
  12.  
    </html>

执行结果：


4、超链接与图片标记

HTML 语言的标记有很多，本文只介绍一些常用标记。除了上面介绍的常用标记外，还有两个标记需要介绍，即超链接标记和图标标记。

4.1 超链接标记

超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超链接标记<a>来完成。

<a>标记的语法：

<a href="uri" title="提示文字"></a>
 

<a>标记的属性：

属性描述
href 用来设置链接到哪个页面中。
title 用来设置光标聚焦时显示的提示文字。

<a>标记不显示下划线（只有当光标聚焦时才显示下划线）

  1.  
    a {
  2.  
    text-decoration: none;
  3.  
    color: #454545;
  4.  
    vertical-align: baseline;
  5.  
    cursor: pointer;
  6.  
    }
  7.  
     
  8.  
    a:hover {
  9.  
    text-decoration: underline;
  10.  
    color: #000;
  11.  
    }

4.2 图标标记

在浏览网站中通常会看到各式各样的漂亮的图片，在页面中添加的图片是通过<img>标记来实现的。

<img>标记的语法：

<img src="uri" width="value" height="value" border="value" alt="提示文字">
 

<img>标记的属性：

属性描述
src 用于指定图片的来源。
width 用于指定图片的宽度。
height 用于指定图片的高度。
border 用于指定图片外边框的宽度，默认值为0。
alt 用于指定当图片无法显示时显示的文字。

示例：在页面中添加图片与超链接。

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>图片与超链接</title>
  4.  
    </head>
  5.  
    <body>
  6.  
    <img src="images/logo.png" alt="pan_junbiao的博客" /><br>
  7.  
    <a href="https://blog.csdn.net/pan_junbiao" title="pan_junbiao的博客">您好，欢迎访问 pan_junbiao的博客!</a>
  8.  
    </body>
  9.  
    </html>

执行结果：

 

 

https://wenku.baidu.com/view/be3a7ec93868011ca300a6c30c2259010302f357.html

 

<html> ● 文件声明 让浏览器知道这是 html 文件
<head> ● 开头 提供文件整体资讯
<title> ● 标题 定义文件标题，将显示于浏览顶端
<body> ● 本文 设计文件格式及内文所在
排版标记
<!--注解--> ○ 说明标记 为文件加上说明，但不被显示
<p> ○ 段落标记 为字、画、表格等之间留一空白行
<br> ○ 换行标记 令字、画、表格等显示于下一行
<hr> ○ 水平线 插入一条水平线
<center> ● 居中 令字、画、表格等显示于中间 反对
<pre> ● 预设格式 令文件按照原始码的排列方式显示
<div> ● 区隔标记 设定字、画、表格等的摆放位置
<nobr> ● 不折行 令文字不因太长而绕行
<wbr> ● 建议折行 预设折行部位
字体标记
<strong> ● 加重语气 产生字体加粗 bold 的效果
<b> ● 粗体标记 产生字体加粗的效果
<em> ● 强调标记 字体出现斜体效果
<i> ● 斜体标记 字体出现斜体效果
<tt> ● 打字字体 courier字体，字母宽度相同
<u> ● 加上底线 加上底线 反对
<h1> ● 一级标题标记 变粗变大加宽，程度与级数反比
<h2> ● 二级标题标记 将字体变粗变大加宽
<h3> ● 三级标题标记 将字体变粗变大加宽
<h4> ● 四级标题标记 将字体变粗变大加宽
<h5> ● 五级标题标记 将字体变粗变大加宽
<h6> ● 六级标题标记 将字体变粗变大加宽
<font> ● 字形标记 设定字形、大小、颜色 反对
<basefont> ○ 基准字形标记 设定所有字形、大小、颜色 反对
<big> ● 字体加大 令字体稍为加大
<small> ● 字体缩细 令字体稍为缩细
<strike> ● 画线删除 为字体加一删除线 反对
<code> ● 程式码 字体稍为加宽如<tt>
<kbd> ● 键盘字 字体稍为加宽，单一空白
<samp>● 范例 字体稍为加宽如<tt>
<var> ● 变数 斜体效果
<cite> ● 传记引述 斜体效果
<blockquote> ● 引述文字区块 缩排字体
<dfn> ● 述语定义 斜体效果
<address> ● 地址标记 斜体效果
<sub> ● 下标字 下标字
<sup> ● 上标字 指数（平方、立方等）
清单标记
<ol> ● 顺序清单 清单项目将以数字、字母顺序排列
<ul> ● 无序清单 清单项目将以圆点排列
<li> ○ 清单项目 每一标记标示一项清单项目
<menu> ● 选单清单 清单项目将以圆点排列，如<ul> 反对
<dir> ● 目录清单 清单项目将以圆点排列，如<ul> 反对
<dl> ● 定义清单 清单分两层出现
<dt> ○ 定义条目 标示该项定义的标题
<dd> ○ 定义内容 标示定义内容
表格标记
<table> ● 表格标记 设定该表格的各项参数
<caption> ● 表格标题 做成一打通列以填入表格标题
<tr> ● 表格列 设定该表格的列
<td> ● 表格栏 设定该表格的栏
<th> ● 表格标头 相等于<td>，但其内之字体会变粗
表单标记
<form> ● 表单标记 决定单一表单的运作模式
<textarea> ● 文字区块 提供文字方盒以输入较大量文字
<input> ○ 输入标记 决定输入形式
<select> ● 选择标记 建立 pop-up 卷动清单
<option> ○ 选项 每一标记标示一个选项
图形标记
<img> ○ 图形标记 用以插入图形及设定图形属性
连结标记
<a> ● 连结标记 加入连结
<base> ○ 基准标记 可将相对 url 转绝对及指定连结目标
框架标记
<frameset> ● 框架设定 设定框架
<frame> ○ 框窗设定 设定框窗
<iframe> ○ 页内框架 于网页中间插入框架 ie
<noframes> ● 不支援框架 设定当浏览器不支援框架时的提示
影像地图
<map> ● 影像地图名称 设定影像地图名称
<area> ○ 连结区域 设定各连结区域
多媒体
<bgsound> ○ 背景声音 于背景播放声音或音乐 ie
<embed> ○ 多媒体 加入声音、音乐或影像
其他标记
<marquee> ● 走动文字 令文字左右走动 ie
<blink> ● 闪烁文字 闪烁文字 nc
<isindex> ○ 页内寻找器 可输入关键字寻找于该一页 反对
<meta> ○ 开头定义 让浏览器知道这是 html 文件
<link> ○ 关系定义 定义该文件与其他 url 的关系
stylesheet
<style> ● 样式表 控制网页版面
<span> ● 自订标记 独立使用或与样式表同用

 

 

 

 

https://wenku.baidu.com/view/be3a7ec93868011ca300a6c30c2259010302f357.html

 

 

 

自己在学习前端的时候，css一些常用的属性本来已经学习过了但就是在用的时候，或者过了一段时间就忘记了，所以就自己总结了一些。供大家参考，有不全，请补充，互相学习。

文字属性：

  1. 字体：font；

  2. 文本字体：font-family;

  3. 文本字号：font-size;

  4. 文本字体样式：font-style;

  5. 文本字体粗细：font-weight;

  6. 内容水平对齐：text-align;

  7. 文本缩进：text-index;

  8. 文本大小写：text-transform;

  9. 文本不换行：white-space;

  10. 文本下划线：text-decoration

  11. 文本溢出裁切：text-overflow;

  12. 文本阴影：text-shadow;

  13. 颜色：color；

边框属性：

  1. 边框：border；

  2. 圆角：border-radius;

  3. 阴影：box-shadow;

尺寸属性：

  1. 固定宽度：width；

  2. 最小宽度/高度：min-width/height;

  3. 最大宽度/高度：max-width/height;

背景属性：

  1. 背景：background；

  2. 背景颜色：background-color;

  3. 背景图像：background-image;

  4. 铺排填充：background-repeat;

  5. 滚动固定：background-attachment;

  6. 背景图形位置：background-position；

  7. 背景尺寸大小：background-size；

  8. 常用组合：background:url() no-repeat;

盒子模型：

  1. 外边距:margin；

  2. 内边距：padding；

  3. 浮动：float；

  4. 清除浮动：clear；

  5. 显示方式：display；

  6. 定位方式：position；

  7. 层叠顺序：z-index;

伪类属性：

  1. 向未被访问的链接添加样式：:link;

  2. 向已被访问的链接添加样式：:visited;

  3. 向被激活的元素添加样式：:active;

  4. 向拥有键盘输入焦点的元素添加样式：:focus;

  5. 当鼠标悬浮在元素上方时，向元素添加样式：:hover;

  6. 向元素的第一个子元素添加样式：:fist-child;

  7. 向带有指定lang属性的元素添加样式：:lang;

伪元素：

  1. :first-letter：向文本的第一个字母添加特殊样式。

  2. :first-line：向文本的首行添加特殊样式。

  3. :before：在元素之前添加内容。

  4. :after：在元素之后添加内容。

 

https://wenku.baidu.com/view/be3a7ec93868011ca300a6c30c2259010302f357.html

 

字体属性：(font)
大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常)
行高 line-height:normal;(正常) 单位：PX、PD、EM
粗细 font-weight:bold;(粗体) lighter;(细体) normal;(正常)
变体font-variant: small-caps;(小型大写字母) normal;(正常)
大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体：(font-family)
"Courier New", Courier, monospace, "Times New Roman",Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩background-color:#FFFFFF;
图片background-image:url();
重复background-repeat:no-repeat;
滚动background-attachment:fixed;(固定) scroll;(滚动)
位置background-position:left(水平) top(垂直);
简写方法 background:#000url(..) repeat fixed left top;
区块属性： (Block)
字间距letter-spacing:normal; 数值
对刘text-align:justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent: 数值px;
垂直对齐vertical-align:baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom;
词间距word-spacing:normal; 数值
空格white-space:pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table;table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group;table-column; table-cell; table-caption;(表格标题)
方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:;     顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;
列表属性： (List-style)
类型list-style-type:   disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman;lower-alpha; upper-alpha;
位置list-style-position:outside;(外) inside;
图像list-style-image:url(..);
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切) 

css属性代码大全
一 CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif;/*文字字体*/ 
font-size : 9pt; /*文字大小*/ 
font-style:itelic; /*文字斜体*/ 
font-variant:small-caps; /*小字体*/ 
letter-spacing : 1pt; /*字间距离*/ 
line-height : 200%; /*设置行高*/ 
font-weight:bold; /*文字粗体*/ 
vertical-align:sub; /*下标字*/ 
vertical-align:super; /*上标字*/ 
text-decoration:line-through; /*加删除线*/ 
text-decoration: overline; /*加顶线*/ 
text-decoration:underline; /*加下划线*/ 
text-decoration:none; /*删除链接下划线*/ 
text-transform : capitalize; /*首字大写*/ 
text-transform : uppercase; /*英文大写*/ 
text-transform : lowercase; /*英文小写*/ 
text-align:right; /*文字右对齐*/  
text-align:left; /*文字左对齐*/ 
text-align:center; /*文字居中对齐*/ 
text-align:justify; /*文字分散对齐*/ 
vertical-align属性
vertical-align:top; /*垂直向上对齐*/ 
vertical-align:bottom; /*垂直向下对齐*/ 
vertical-align:middle; /*垂直居中对齐*/ 
vertical-align:text-top; /*文字垂直向上对齐*/ 
vertical-align:text-bottom; /*文字垂直向下对齐*/ 
二、CSS边框空白
padding-top:10px; /*上边框留空白*/ 
padding-right:10px; /*右边框留空白*/ 
padding-bottom:10px; /*下边框留空白*/ 
padding-left:10px; /*左边框留空白
三、CSS符号属性：
list-style-type:none; /*不编号*/ 
list-style-type:decimal; /*阿拉伯数字*/ 
list-style-type:lower-roman; /*小写罗马数字*/ 
list-style-type:upper-roman; /*大写罗马数字*/ 
list-style-type:lower-alpha; /*小写英文字母*/ 
list-style-type:upper-alpha; /*大写英文字母*/ 
list-style-type:disc; /*实心圆形符号*/ 
list-style-type:circle; /*空心圆形符号*/ 
list-style-type:square; /*实心方形符号*/ 
list-style-image:url(/dot.gif); /*图片式符号*/ 
list-style-position: outside; /*凸排*/ 
list-style-position:inside; /*缩进*/ 
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/  
background:transparent; /*透视背景*/ 
background-image : url(/image/bg.gif); /*背景图片*/ 
background-attachment : fixed; /*浮水印固定背景*/ 
background-repeat : repeat; /*重复排列-网页默认*/ 
background-repeat : no-repeat; /*不重复排列*/ 
background-repeat : repeat-x; /*在x轴重复排列*/ 
background-repeat : repeat-y; /*在y轴重复排列*/ 
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/ 
background-position : top; /*向上对齐*/ 
background-position : buttom; /*向下对齐*/ 
background-position : left; /*向左对齐*/ 
background-position : right; /*向右对齐*/ 
background-position : center; /*居中对齐*/ 
五、CSS连接属性：
a /*所有超链接*/ 
a:link /*超链接文字格式*/  
a:visited /*浏览过的链接文字格式*/ 
a:active /*按下链接的格式*/ 
a:hover /*鼠标转到链接*/ 
鼠标光标样式：
链接手指 CURSOR: hand 
十字体cursor:crosshair 
箭头朝下cursor:s-resize 
十字箭头 cursor:move 
箭头朝右 cursor:move 
加一问号 cursor:help 
箭头朝左cursor:w-resize 
箭头朝上cursor:n-resize 
箭头朝右上cursor:ne-resize 
箭头朝左上cursor:nw-resize 
文字I型 cursor:text 
箭头斜右下cursor:se-resize 
箭头斜左下cursor:sw-resize 
漏斗 cursor:wait 
光标图案(IE6)  p {cursor:url("光标文件名.cur"),text;} 
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/ 
border-bottom : 1px solid #6699cc; /*下框线*/ 
border-left : 1px solid #6699cc; /*左框线*/  
border-right : 1px solid #6699cc; /*右框线*/ 
以上是建议书写方式,但也可以使用常规的方式如下:
border-top-color : #369 /*设置上框线top颜色*/ 
border-top-width :1px /*设置上框线top宽度*/ 
border-top-style : solid/*设置上框线top样式*/ 
其他框线样式
solid /*实线框*/ 
dotted /*虚线框*/ 
double /*双线框*/ 
groove /*立体内凸框*/ 
ridge /*立体浮雕框*/ 
inset /*凹框*/ 
outset /*凸框*/ 
七、CSS表单运用：
文字方块  
按钮  
复选框  
选择钮  
多行文字方块  
下拉式菜单选项1选项2 
八、CSS边界样式：
margin-top:10px; /*上边界*/ 
margin-right:10px; /*右边界值*/ 
margin-bottom:10px; /*下边界值*/ 
margin-left:10px; /*左边界值*/ 
  
CSS 属性：字体样式(Font Style) 
序号中文说明标记语法 
1 字体样式{font:font-style font-variant font-weight font-size font-family}  
2 字体类型{font-family:"字体1","字体2","字体3",...}  
3 字体大小 {font-size:数值|inherit| medium| large|larger| x-large| xx-large| small| smaller| x-small| xx-small}  
4 字体风格{font-style:inherit|italic|normal|oblique}  
5 字体粗细  {font-weight:100-900|bold|bolder|lighter|normal;}  
6 字体颜色  {color:数值;} 
7 阴影颜色{text-shadow:16位色值} 
8 字体行高  {line-height:数值|inherit|normal;} 
9 字间距  {letter-spacing:数值|inherit|normal} 
10 单词间距{word-spacing:数值|inherit|normal} 
11 字体变形{font-variant:inherit|normal|small-cps }  
12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase} 
13 字体变形 {font-size-adjust:inherit|none}  
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}  
文本样式(Text Style) 
序号中文说明标记语法 
1 行间距 {line-height:数值|inherit|normal;}  
2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink} 
3 段首空格  {text-indent:数值|inherit} 
4 水平对齐{text-align:left|right|center|justify}  
5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}  
6 书写方式{writing-mode:lr-tb|tb-rl}  
背景样式 
序号中文说明标记语法 
1 背景颜色{background-color:数值} 
2 背景图片{background-image: url(URL)|none} 
3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 
4 背景固定{background-attachment:fixed|scroll} 
5 背景定位 {background-position:数值|top|bottom|left|right|center} 
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置} 
框架样式(BoxStyle)  
序号中文说明标记语法 
1 边界留白{margin:margin-top margin-right margin-bottom margin-left} 
2 补　　白{padding:padding-top padding-right padding-bottom padding-left} 
3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}
宽度值：thin|medium|thick|数值 
4 边框颜色{border-color:数值数值数值数值}　　数值：分别代表top、right、bottom、left颜色值 
5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 
6 边　　框{border:border-width border-style color} 
   上边框{border-top:border-top-width border-style color} 
   右边框{border-right:border-right-width border-style color} 
   下边框{border-bottom:border-bottom-width border-style color} 
   左边框{border-left:border-left-width border-style color} 
7 宽　　度 {width:长度|百分比| auto} 
8 高　　度 {height:数值|auto} 
9 漂　　浮{float:left|right|none} 
10 清　　除{clear:none|left|right|both} 
分类列表 
序号中文说明标记语法 
1 控制显示{display:none|block|inline|list-item} 
2 控制空白{white-space:normal|pre|nowarp} 
3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 
4 图形列表{list-style-image:URL} 
5 位置列表{list-style-position:inside|outside} 
6 目录列表 {list-style:目录样式类型|目录样式位置|url} 
7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

 

CSS 背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
**background-color **
设置背景颜色，颜色值通常以下面几种方式定义：
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
 

background-image
设置背景图片，通常以图片的链接方式定义值

body {
	background-image:url('paper.gif');
}
background-repeat

设置背景如何重复平铺，默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
可设置以下几个属性值：
no-repeat 不平铺
x-repeat 只在水平方向上平铺
y-repeat 只在竖直方向上平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
background-attachment

定义背景图片随滚动轴的移动方式，有以下几种属性值
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承

body
{
background-image:url('back.png');
background-attachment:fixed;
}
background-position

设置背景图像的起始位置

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat fixed right top;}
 

CSS文本

文本属性：
color 设置文本颜色

body{
	color:gray;
}
direction 设置文本方向

rtl:从右到左
ltr:从左到右
inhreit:继承

p{
	direction:rtl;
}

letter-spacing 设置字符间距

p{
	letter-spacing:normal;//默认间距为0		
}

line-height 设置行高
可设置具体值，也可设置字体大小的倍数

p{
	line-height：1.5;		
}

text-align 对齐元素中的文本

h1 {
text-align:center;
}//文本居中
p.date {
text-align:right;
}//向右对齐

text-decoration 向文本添加修饰

h1 {text-decoration:overline;}//上划线
h2 {text-decoration:line-through;}//中划线
h3 {text-decoration:underline;}//下划线
h4 {text-decoration:none;}

text-indent 缩进元素中文本的首行

p {text-indent:50px;}

text-shadow 设置文本阴影
三个值分别为，向右偏移长度，向下偏移长度，颜色

h1
{
    text-shadow: 2px 2px #ff0000;
}

text-transform 控制元素中的字母

p.uppercase {text-transform:uppercase;}//转为大写
p.lowercase {text-transform:lowercase;}//转为小写
p.capitalize {text-transform:capitalize;}//转为首字母大写其他小写

unicode-bidi 设置或返回文本是否被重写
normal 默认。不使用附加的嵌入层面
embed 创建一个附加的嵌入层面
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

div
{
    direction:rtl;
    unicode-bidi:bidi-override;
}

vertical-align 设置元素的垂直对齐
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的底端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

vertical-align:text-top;

white-space 设置元素中空白的处理方式
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

p
{
    white-space:nowrap;
}

word-spacing 设置字间距

p{
	letter-spacing:2px;		
}

CSS字体

font-family
设置文本的字体系列

p{
	font-family:"Times New Roman",Georgia,Serif;
}
font-size

设置文本的字体大小
xx-small,x-small,small,medium,large,x-large,xx-large
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

p{
	font-szie:14px;
}
font-style

设置文本的字体样式
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

font-variant

设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

p.small
{
font-variant:small-caps;
}
 

font-weight
指定字体的粗细
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

CSS 链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

CSS 列表

list-style
list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.
可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。
list-style-image
指定列表项标记的图像

ul{
	list-style-image:url('sqpurple.gif');
}

list-style-position
指定列表项标记的位置
inside或者outside

ul {
    list-style-position: inside;
}

list-style-type
指定列表项标记的类型
none 无标记。
无序列表标记：
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
有序列表标记：
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

CSS 表格

表格边框

table, th, td{
    border: 1px solid black;
}

折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{
    border-collapse:collapse;
}
table,th, td{
    border: 1px solid black;
}
 
posted @ 2022-01-01 10:34  黑旗君  阅读(288)  评论(0)    收藏  举报