HTML 基础 + CSS 初识

· · 科技·工程

Update on 2024/12/21：两处代码有误，已修正。

两个友链：

数据传输

大多数网页都是通过 HTTP 协议通信的，以下是客户端请求和服务器相应的方式：

# 发送请求
www.chnmuseum.cn.index.html
# 响应回复
返回 index.html 的页面资源

标签

以列表呈现（越上面范围越大）：

举例：

<html>
<head>
    <title>这是标题</title>
</head>
<body>
    <!--网页内容-->
</body>
</html>

HTML 标签由 < 和 > 包围的字符串组成，通常成对出现，字符串中带 / 的是结束标签。

<!--居中对齐-->
<center></center>
<!--网页背景色-->
<body bgcolor="颜色名称"></body>
<!--字体格式-->
<font face="字体名称" size="字号数值" color="颜色名称">文字</font>

超链接

超文本链接的简称，可从一个页面跳转到另一个页面，实现网站互联。链接可以是文本、图像。建立超链接的标签为 <a></a>，常见格式如下：

<a href="链接位置">链接元素</a>

例如：

<a href="https://baike.baidu.com/item/Html/97049">HTML</a>

HTML 常用标签

基本标签： |目的|代码| |:-:|:-:| |创建一个 HTML 文档|<html></html>| |设置文档头部|<bead></head>| |定义文档的主体|<body></body>|

文档整体属性： |目的|代码| |:-:|:-:| |设置标题|<title></title>| |设置背景颜色|<body bgcolor=?>| |设置文本文字颜色|<body text=?>| |设置链接颜色|<body link=?>|

文本标签： |目的|代码| |:-:|:-:| |设置不同字号的标题|<h1></h1>| |设置粗体字|<b></b>| |设置斜体字|<u></u>| |设置字体下划线|<i></i>| |设置字体大小|<font size=?></font>| |设置字体颜色|<font color=?></font>| |文字对齐方向（left 表示向左对齐，center 表示向中对齐）|<align="#">| |移动字体（走马灯）|<marquee></marquee>| |显示小字体|<small>文字</small>| |显示大字体|<big>文字</big>|

格式排版： |目的|代码| |:-:|:-:| |创建一个段落|<p></p>| |插入一个换行符|hr|

多媒体： |目的|代码| |:-:|:-:| |添加图像|<img src="..." alt="...">| |设置图像大小|>img src="..." width="宽度点数" height="高度点数">| |添加音乐|<bgsound src="音乐文件地址" loop=1>|

表格： |目的|代码| |:-:|:-:| |创建一个表格|<table></table>| |开始表格中的每一行|<tr></tr>| |开始表格中的每一列|<td></td>|

CSS 简介

CSS 即为层叠样式表（Cascading Style Sheets），用于控制网页布局和样式（美化网页）。

插入一条 div 的小知识，根据上一期，给出 div 的基本运用形式：

<div class="样式名称">...</div>

样式表的基本结构

样式表的基本结构：

<style type="text/css">
    选择符{样式属性 1:属性值 1;样式属性 2:属性值 2...}
</style>

三种添加样式表的方式

  1. 内部样式表，在 HTML 页面 <head></head> 标签中添加。
  2. 外部样式表，一般适用于需要该样式页面较多的情况，样式单独写到 CSS 文件中，在 HTML 页面的 <head></head> 中通过 <link> 标签引用。
  3. 内联样式表，在 HTML 页面 <body></body> 标签中添加，通过在 style 属性中设定 CSS，修改简单样式。其优先级最高。

CSS 语法 + 背景图 + link

基本语法：

标签选择器{属性 1:值 1;属性 2:值 2;}

背景图：

标签名{
    background-image:url('图片地址');
}

link 标签：

<link rel="stylesheet" href="css文件地址">

CSS 选择器 + 下期预告

  1. 标签选择器：选择标签，设置标签样式。
  2. 类选择器：给一些标签起相同名字，对这类同名的标签设置样式。
  3. 其他选择器（暂时不介绍）。

更多选择器以及代码写法下期再来展示，下期也会把 CSS 进一步深入，并且讲一讲 Python 与 HTML 的连接，敬请期待。

鸣谢我的老师的课件，这里的一些引用是经过他授权的，未经允许请勿转载。