本文为笔者大二上IT课程的HTML/CSS笔记集合，也算是派上点用场了。
请善用 Ctrl/Command + F 功能，搜索你想要的。

HTML语法

文本部分

主体部分

<html> </html> HTML执行代码部分的开始和结束符

<head> </head> 网页的元数据（包含网页标题、属性等）代码

<body> </body> 主体（正文）部分执行代码

标题和文本

<title> </title> （只能在<head>中修改）网页标题

<h> </h> 正文标题（Heading）（类似地，由 <h1> 至 <h6> 依次减小字号）

<p> </p> 正文部分（Paragraph）

<hr/> 文本换行（可接在<p>后做结尾代替</p>）

<br/> 文本换行（行间距大于 <hr/>，同样可接在<p>后做结尾代替</p>）

文本控制

<b> </b> 粗体

<i> </i> 斜体

<u> </u> 下划线

<s> </s> 删除线

链接（HTML）

<a href="value_1" title="value_2" target="_blank"> text </a> 
<a href="value_1" title="value_2" target="_self"> text </a>
<a href="value_1" title="value_2" target="_parent"> text </a> 
<a href="value_1" title="value_2" target="_top"> text </a>

赋予text以地址为值1的超链接，光标移动至text时将显示为值2，点击后将在当前（第一行）/空白页面（第二行）跳转链接

注：关于target

  • _self - 默认。在单击的同一窗口/选项卡中打开链接。
  • _blank - 在新窗口或选项卡中打开链接。
  • _parent - 框架网页中当前整个窗口位置显示目标网页。
  • _top - 框架网页中在上部窗口中显示目标网页。

图片部分

<img src="value_1" /> 插入地址为值1的图片（或保存于与HTML同路径下的命名为值1的图片）

图表部分

列表

<ul>
  <li>value_1</li>
  <li>value_2</li>
  <li>value_3</li>
</ul>

生成无序号列表（如下）

  • value_1
  • value_2
  • value_3
<ol>
  <li>value_1</li>
  <li>value_2</li>
  <li>value_3</li>
</ol>

生成序号列表（如下）

  1. value_1
  2. value_2
  3. value_3

图表

<table> </table> 标记图表的始终

<tr> </tr> 图表的行

<td> </td> 图表的列

<th> </th> 图标的标题

生成图表范例：

Header_1Header_2
value_tr1_td1value_tr1_td2
value_tr2_td1value_tr2_td2

相应代码如下：

<table>
  <tr>
    <th>Header_1</th>
    <th>Header_2</th>
  </tr>
    <th>value_tr1_td1</th>
    <th>value_tr1_td2</th>
  <tr>
    <th>value_tr2_td1</th>
    <th>value_tr2_td2</th>
  </tr>
</table>

CSS语法

CSS插入HTML方式

行内插入HTML

<ul>
  <li>value_1</li>
  <li style="color: red;">value_2</li>
  <li>value_3</li>
</ul>

如上所示，行内插入是指直接在HTML代码中使用HTML句型style="value"插入CSS句法，使得值2的颜色变为红色。这种CSS代码插入方法虽然简便，但影响范围也小，只能改变插入所在行一行值的属性。

内部插入HTML

<html>
  <head>
    <style>
      li {
          color=red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>value_1</li>
      <li>value_2</li>
      <li>value_3</li>
    </ul>
  </body> 
</html>

这种方式是指在HTML代码的<head>部分插入<style> </style>，并在其中输入CSS代码以修改部分HTML正文部分属性。

外部插入HTML

使用一个额外的、拓展名为.css的配置文件修改HTML属性。

需要两步以完成：

  1. 在.html文件中输入<link/>代码以链接到相应.css配置文件（如下图片段1）；
  2. 在.css文件中使用CSS句法修改配置（如下图片段2）。
<html>
  <head>
    <link rel="stylesheet" href="admin.css" />
  </head>
  <body>
    <ul>
      <li>value_1</li>
      <li>value_2</li>
      <li>value_3</li>
    </ul>
  </body> 
</html>
/* admin.css */
li {
    color: red;
}

CSS选择器定位

选择器（selector）指定了符合CSS语法的样式标记，它们可以用于定位HTML中相应的内容，并根据CSS文件中的代码修改它们的属性和样式。

常用的CSS选择器有3种类型：Tag, Class和ID。

Tag (NONE)

属性将会直接应用于HTML文件的现有标签中。比如：

h1{
    color: red;
}

这里的h1就是HTML文件中已经携带的标签，通过这行代码，我们可以改变HTML中h1内容的颜色为红色。

Class (.)

可以为某些特定部分赋予一个“类别（class）”，或理解成“创造一个新的标签，以供CSS文件识别”。如此CSS文件便可以改变“类别”中的属性。

HTML赋予class的代码为：<name class="text">

class在CSS中的识别码为"."

比如：

<html>
  <head>
    <link rel="stylesheet" href="admin.css">
  </head>
  <body>
    <p class="x1x2">Hello, World!</p>
    <h3 class="x1x2">Hi!</h3>
  </body>
</html>
/* admin.css */
.x1x2{
      color: red;
}

ID (#)

与class类似，我们也可以为部分代码赋予一个ID。两者的工作原理是相同的，而区别在于，一个class可以赋予多行代码，即CSS可以同时识别使用同一class的代码，并同时赋予他们CSS配置属性；但同一个ID只能赋予一行代码。

HTML赋予ID的代码为：<name id="text">

class在CSS中的识别码为"#"

比如：

<html>
  <head>
    <link rel="stylesheet" href="admin.css">
  </head>
  <body>
    <p id="x1x2">Hello, World!</p>
    <h3 id="x3x4">Hi!</h3>
  </body>
</html>
/* admin.css */
#x1x2{
      color: red;
}
#x3x4{
      color: blue;
}

CSS修改网页背景

修改背景色

{background-color: pink;} 修改背景色为预制色

{background-color: rgb(255, 192, 103);} 修改背景色为特定RGB值对应色

{background-color: #1f1e33;} 修改色背景为十六进制色号对应色

修改背景图

{background-image: url ("a.png");} 修改背景图为HTML文件同路径下的某图片（默认按照x/y轴重复排列）

{background-repeat: repeat-x;} 修改背景图为自左上仅沿x轴重复排列

{background-repeat: repeat-y;} 修改背景图为自左上仅沿y轴重复排列

{background-repeat: no-repeat;} 取消背景图重复排列

CSS修改文本属性

颜色

{color: pink;} 修改文本颜色为预制色

{color: rgb(255, 192, 103);} 修改文本颜色为特定RGB值对应色

{color: #1f1e33;} 修改文本为十六进制色号对应色

文本排列

{text-align: left/right/center;} 文本左/中/右对齐

文本修饰

{text-decoration: none;} 无修饰

{text-decoration: overline;} 上划线

{text-decoration: underline;} 下划线

{text-decoration: line-through;} 删除线

{text-decoration: blink;} 文本闪烁（已废弃的代码）

字体

{font-family:"Font", "Generic Family";} 修改文本为某字体族下的某字体

（具体详见课本p137 Figure7.40）

字号

{text-size: 16px} 修改文本大小为16像素

CSS链接

HTML链接的样式可以根据用户对其进行操作时所处的状态而有所不同。在CSS中定义了四个伪类（pseudo classes）来表示链接的四种状态。

a: link {} 链接未被访问时的样式

a: visited {} 访问过的页面链接的样式

a: hover {} 当有鼠标悬停在其上的链接样式

a: active {} 点击链接时的样式

注意1： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意2： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意3：伪类的名称不区分大小写。

所有四个伪类都可以用作CSS选择器。可以使用class为HTML中的<a> </a>赋予类别。

HTML备忘：

链接（HTML）

<a href="value_1" title="value_2" target="_blank"> text </a> 
<a href="value_1" title="value_2" target="_self"> text </a>
<a href="value_1" title="value_2" target="_parent"> text </a> 
<a href="value_1" title="value_2" target="_top"> text </a>

赋予text以地址为值1的超链接，光标移动至text时将显示为值2，点击后将在当前（第一行）/空白页面（第二行）跳转链接

代码示例：

<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

CSS盒子模型

在CSS中，Margin、Border和Padding是构成“盒子模型”的三个属性。其中，border属性定义了盒子周围的边框，padding属性定义了实际HTML内容(例如，图像)和border之间的空间，margin属性定义了边框和Web页面其余部分之间的空间。下图说明了盒子模型的具体代表位置。

比如，在一片灰色网页背景下，欲制作两段分隔开来的、背景为白色的正文（效果见下图），则可利用盒子模型，定义正文边框为padding，则其外围部分为border，可有代码如下：

<html>
  <head>
    <link rel="stylesheet" href="admin.css">
  </head>
  <body>
    <p>The first paragraph</p>
    <p>The second paragraph</p>
  </body>

body {
background-color: #aaaaaa;
}

p {
background-color: white;

border-style: dashed;
border-width: 3px;
border-color: #222222;

padding: 20px;

margin: 10px;
}

CSS代码中第8-10行可合并简化为：

p {
border: dashed 3px #222222;
}
最后修改：2023 年 10 月 05 日
© 禁止转载
喵~