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 的连接，敬请期待。

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