JavaWeb入门-HTML和CSS3

最新推荐文章于 2024-07-16 18:23:56 发布

Ayin的学习笔记

最新推荐文章于 2024-07-16 18:23:56 发布

阅读量473

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/AyinMars/article/details/120855547

笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了HTML和CSS3的基础知识，包括HTML的结构、常用标签如字体、标题、超链接、列表、表格、图片和表单的使用。接着讨论了CSS3的选择器、样式设置，以及如何通过CSS3来控制元素的布局和表现。内容适合初学者入门，旨在帮助理解网页的构成和美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页的组成部分

页面一共由三个部分组成，分别是内容（结构）、表现、行为。

内容（结构）是我们在页面中可以看到的数据，我们称之为内容，一般用HTML来实现。

表现，指的是这些内容在页面上的表现形式，比如说：颜色、布局、大小等等，一般用CSS实现。

行为，指的是页面元素中与输入设备交互的响应，一般使用JavaScript实现。

HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

创建一个HTML文件

<!--  注释！！！ -->
<!-- DOCTYPE:  使用规范 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--  meta标签一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keyworlds" content="好好学习，天天向上。">
    <meta name="description" content="Java是世界上最好的语言">
    <!-- 网页标题标签 -->
    <title>Title</title>
</head>
<!-- body标签代表网页主体 -->
<body>
    <font color="red">Hello World！</font>
</body>
</html>

上述代码实例中，html标签表示HTML的开始，lang="zh_CN"表示中文！head标签代表网页头部，meta描述性标签，用于描述网站的一些信息，body标签代表网页主体。

可以看到HTML的代码是由一个个标签来组成的，标签的格式为两个尖括号：<标签名>封装的数据</标签名>，标签名大小写不敏感，且拥有自己的属性，分为基本属性和事件属性，基本属性就是简单的样式修改，事件属性就是可以直接设置时间响应后的代码，在分类上，也可以具体分为单标签和双标签！

常用标签

字体标签

<font> 规定文本的字体、字体尺寸、字体颜色。

color：规定字体颜色
size：规定字体大小
face：规定字体样式

<font size="3" color="red">字体大小为3，字体颜色为红色</font>
<font size="2" color="blue">字体大小为2，字体颜色为蓝色</font>
<font face="黑体" color="green">字体样式为黑体，字体颜色为绿色</font>

标题标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

align：规定标题对齐样式
- left：左对齐（默认值）
- right：右对齐
- center：居中

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

超链接

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

<a href="https://www.baidu.com/">百度</a>

href：规定链接指向的页面的URL
shape：规定链接的形状（HTML5中不支持）
target：规定如何打开链接文档
- _blank：新标签页打开链接文档

页面内跳转：

在很多页面中，可以点击页面的某个部位，就可以迅速回到页面的顶部或者底部，在绝大多数的长页面中，该功能都是十分常用的！

<p name="top"></p>
<!-- 
 ......
 -->	
<a href="#top">回到顶部</a>

图片链接：

点击图片跳转指定的页面！

title：设置鼠标悬停在图片时显示的文本

<a href=https://www.baidu.com/" target="_blank">
    <img src="1.jpg" alt="图片链接" title="点击跳转" height="600" width="400">
</a>

列表标签

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于<ul> 标签。每个列表项始于<li>。

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以

开始。每个自定义列表项的定义以

开始。

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table的属性：

border：设置表格的边框，值为0时，则为无边框
bgcolor：规定表格的背景颜色
cellpadding：规定单元边沿与其内容之间的空白
cellspacing：规定单元格之间的空白

<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

上述代码实例是创建了一个3x3的表格！

表格的表头：

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<th>Heading</th>
<th>Another Heading</th>

跨行与跨列的表格：

colspan：跨列
rowspan：跨行

<td colspan="3" >1.1</td>
<!-- 横跨3列的单元格-->
<td rowspan="2">2-1</td>
<!-- 横跨2行的单元格-->

<tr>标签的属性：

align：设置表格内容的对齐方式
- left：左对齐（默认值）
- right：右对齐
- center：居中
valign：设置表格内容的垂直对齐方式
- bottom：底边对齐（默认）
- middle：居中对齐
- top：顶部对齐
bgcolor：规定表格行的背景颜色

图片标签

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性src（source）源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

align：设置图片的对齐方式
- bottom：底边对齐（默认）
- middle：居中对齐
- top：顶部对齐
align：设置图片的浮动方式
- left：浮动到文本左侧
- right：浮动到文本右侧
height：调整图片高度
width：调整图片宽度
alt：当图片无法显示时，将会显示该属性中的文本
area：创建图像映射

定义页面背景图像：

<body background="background.jpg">

gif 和 jpg 文件均可用作 HTML 背景，如果图像小于页面，图像会进行重复。

iframe标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

align：规定如何根据周围的元素来对齐此框架
frameborder：规定是否显示框架周围的边框
- 1：显示边框
- 0：不显示边框
height：规定 iframe 的高度
width：定义 iframe 的宽度
src：规定在 iframe 中显示的文档的 URL
srcolling：规定是否在 iframe 中显示滚动条
- yes：显示滚动条
- no：不显示滚动条
- auto

<iframe src="https://www.runoob.com/" frameborder="0" height="500px" width="800px" name="change"></iframe>
<br>
<a href="https://www.runoob.com/" target="change">菜鸟驿站</a>
<a href="https://www.mycodes.net/" target="change">源码之家</a>
<a href="https://www.w3school.com.cn/" target="change">w3school</a>

特殊字符

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。


	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
’	撇号	&apos (IE不支持)	&#39
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签<form> 来设置！

action 属性

定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

method 属性

规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，可以使用GET提交方式。因为使用 GET 时，表单数据在页面地址栏中是可见的，GET 最适合少量数据的提交。浏览器会设定容量限制。

如果表单正在更新数据，或者包含敏感信息（例如密码），应该使用POST提交方式，POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

表单提交时，数据没有发送给服务器的三种情况：

表单项没有name属性
单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
表单项不在提交的form标签内

<input>

<input>是元素中最重要的表单元素，具有很多种形态，常用的形态有以下几种：

type：设置input的形态
- text：定义常规文本输入
- password：定义密码输入（隐藏）
  - value：设置默认值
  - size：设置文本框大小
  - maxlength：限制输入文本长度
  - name：规定识别表单的名称
  - readonly：规定输入字段是只读的
  - required：规定必需在提交表单之前填写输入字段
- radio：定义单选按钮输入（选择多个选择之一）
  - checkbox：定义多选按钮输入
- submit：定义提交按钮（提交表单）
- reset：设置重置按钮（重置表单）
- button：设置一个按钮
- submit：设置提交按钮
- file：设置提交文件按钮
- hidden：隐藏元素
checked：设置为默认选中
select：定义选择栏目
- selected：设置默认选中
textarea：设置多行文本输入框
- rows：设置最大列数
- col：设置最大行数

假设我们需要写一个页面，页面效果如下图，要求用表单实现！
在这里插入图片描述
具体实现代码如下：

<form>
    用户名称：<input type="text" value="默认值"><br>
    用户密码：<input type="password" ><br>
    性别：
    <input type="radio" name="sex" checked>男 
    <input type="radio" name="sex">女<br>
    兴趣爱好：
    <input type="checkbox" name="hobby">Java 
    <input type="checkbox" name="hobby">JavaScript 
    <input type="checkbox" name="hobby">Web
    <br>
    国籍：
    <select>
        <option>--请选择国籍--</option>
        <option>中国</option>
        <option>美国</option>
        <option>日本</option>
    </select>
    <br>
    <p>自我评价</p>
   <textarea name="" id="" cols="30" rows="10"></textarea> <br>
    <input type="reset">
    <input type="submit">
</form>

表单格式化：

按照上述代码实例实现的表单，可以看到表单所展示的效果和图片所示有所区别！一般而言，为了使表单更加规范，我们会将表单元素放进表格中进行格式化处理：

<form action="">
    <table width="auto">
        <tr>
            <td>用户名称</td>
            <td><input type="text" value="默认值"></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" ></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked>男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" name="hobby">Java
                <input type="checkbox" name="hobby">JavaScript
                <input type="checkbox" name="hobby">Web</td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select required>
                    <option>--请选择国籍--</option>
                    <option>中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea cols="30" rows="10"></textarea></td>
        </tr>
        <tr>
            <td><input type="reset"></td>
        </tr>
    </table>
    <tr>
        <td><input type="submit"></td>
    </tr>
</form>

特殊标签

<div>标签

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过的 class 或 id 应用额外的样式。

不必为每一个<div>都加上类或 id，虽然这样做也有一定的好处。

可以对同一个<div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

<span> 标签

<span>标签被用来组合文档中的行内元素。

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。

<p><span>some text.</span>some other text.</p>

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

可以对同一个<span>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

<p>标签

以下代码标记了一个段落：

<p>This is some text in a very short paragraph</p>

<p>标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

CSS3

CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

具体可以概括为以下几句话：

CSS 指的是层叠样式表，也称级联样式表 (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

CSS 选择器

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

举例说明，所有<p> 元素都将居中对齐，并带有红色文本颜色：

p {
  color: red;
  text-align: center;
}

CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

元素选择器

元素选择器根据元素名称来选择 HTML 元素。

以下代码实例中，将页面上的所有<p> 元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

以下这条 CSS 规则将应用于 id=“para1” 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

**注意：**id 名称不能以数字开头。

类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

在以下代码实例中，所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

—>我们也可以指定特定的HTML元素受到类的影响！

在以下的代码实例中中，只有具有 class=“center” 的

元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

—>HTML元素也可以引用多个类！

在以下代码实例中，<p> 元素将根据 class=“center” 和 class=“large” 进行样式设置：

<p class="center large">这个段落引用两个类。</p>

**注意：**类名不能以数字开头！

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  text-align: center;
  color: blue;
}

分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素，对选择器进行分组，可以最大程度地缩减代码。

在以下代码实例中，h1、h2 和 p 元素具有相同的样式定义：

h1, h2, p {
  text-align: center;
  color: red;
}

后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

当然，也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

常用样式

假设此时有一个div标签，我们需要对它进行修饰，常用的修饰样式归类如下：

color：字体颜色
border：内边框
- border-width：规定内边框的宽度
- border-style：规定内边框的样式
- border-color：规定内边框的颜色
- border-collapse：为表格设置合并边框模型
width：规定标签宽度（默认值为auto，浏览器会计算出实际的高度）
height：规定标签高度
background：背景
- background-color：规定要使用的背景颜色
- background-repeat：规定如何重复背景图像
- background-image：规定要使用的背景图像
font：字体
- font-style：规定字体样式
- font-weight：规定字体粗细
- font-size/line-height：规定字体尺寸和行高
- font-family：规定字体系列
text-align：性规定元素中的文本的水平对齐方式
- left：把文本排列到左边
- right：把文本排列到右边
- center：把文本排列到中间
margin：外边框
padding：内边距
text-decoration：文本修饰
- none：默认
- underline：定义文本下的一条线
- overline：定义文本上的一条线
- line-through：定义穿过文本下的一条线

链接

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}