使用HTML和CSS开发Web网站（一）_《使用html和css开发web网站》-优快云博客

本文链接：https://blog.youkuaiyun.com/vipsongtaohong/article/details/94594584

本文是HTML入门教程，介绍了HTML的基本概念，包括与CSS、JavaScript的关系，HTML标签，网页结构和常用标签。此外，还涵盖了表格、列表、表单和框架的创建，帮助初学者理解网页设计的基础知识。

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

一、HTML概述与基本标签

了解WEB和HTML的关系
理解HTML标签在WEB网页中的作用
掌握HTML文档的结构
掌握常用的HTML标签

1、web概述

Web，又称为www，英文全称为world wide web，翻译为中文一般为万维网，

它是运行在互联网之上的一种服务。

1.1、万维网的三个标准---基础核心

1、统一资源标识符（URL），是一个世界通用的负责给万维网上如网页这样的资源定位的系统。

2、超文本传输协议（HTTP），负责规定浏览器和服务器怎样交流

3、超文本标记语言（HTML），定义超文本文档的结构和格式

2、什么是HTML?

是用来描述网页的一种语言 ! (超文本标记语言)

2.1、html和css、JavaScript的关系

html：名词

css：形容词

JavaScript：动词

2.2、html标签是什么？

由w3c组织定义的一系列的标签名字

2.3、html格式

<!--html5文档声明-->
<!DOCTYPE html>
<!--网页从这个地方开始-->
<html>
<!--头信息-->
<head>
<!--编码格式-->
<meta charset="utf-8" />
<!--网页标题-->
<title></title>
</head>
<!--网页正文、网页主体-->
<body>
<p>段落</p>
</body>
</html>

2.4、html储存的文件格式

文件后缀可以是: .html 或者 .htm

2.5、网页的两部分介绍

1. 头部信息: head

用来描述网页:

- title 设置标题

- meta 用来描述网页的编码, 内容

- style 用来定义样式

- script 脚本

2. 网页主体: body

属于网页的内容部分, 我们一般会在这里添加很多其他的元素, 来丰富我们的网页 .

2.6、页面主体body背景设置

1、设置网页的背景色

<body bgcolor="aqua">
<p>段落</p>
</body>

2、设置网页的背景图片

<body background="test.jpg">
<p>段落</p>
</body>

3、设置网页的背景音乐

第一种：<bgsound>标签（只适用于IE浏览器）
在< body > </ body > 里面加入<bgsound src="音乐url" loop="-1"> loop=-1意思是设置为自动播放；

第二种：<audio>标签（适合一些主流的浏览器）
在< body > </ body > 里面加入<audio src="音乐url"  autoplay="autoplay"> </audio> autoplay意思是自动播放。

2.7、常用的html标签

1、换行标签

<br/><nobr></nobr>

2、字体标签

<font size="字体大小（数字：1,2,3）" face="字体风格（默认宋体）" color="字体颜色（red、#000、#333）"></font>

3、段落标签

<p align="right"></p>

4、字体样式标签

<i>倾斜</i>

<em>倾斜</em>

<b>字体加粗</b>

<strong>字体加粗</strong>

<u>下划线</u>

<pre>预格式化</pre>

<hr /> <!--水平线-->

h1——h6<!--标题标签-->

<img src="图片url" alt="图片代替文字" width="" height="" />

<a id="" name="" href=""></a>

<sub>下标</sub>

<sup>上标</sup>

<object></object><embed/><!--嵌入多媒体-->

5、图片标签：<img/>

src : 一个url , 图片的地址(网络地址,本地绝对地址,本地相对地址)

alt : 当图片出现问题, 无法加载时, 用来替换的错误提示文本

width: 指定图片的宽度

height: 指定图片的高度

6、超链接标签：<a></a>

（1）普通跳转
    <a href="https://www.baidu.com" title="点击跳转到百度">点击去百度</a>

（2）使用新窗口打开网页
    <a href="https://www.baidu.com" target="_blank" title="点击跳转到百度">点击去百度</a>

7、层标签：<div></div>

<div>控制页面布局</div>

二、表格与列表

理解表格的结构
掌握表格相关的标签
掌握单元格合并
理解列表的分类
掌握两种列表及列表项目的标签

1、表格

1.1、表格格式

<table><!--表格根元素-->
	<thead><!--标题-->
		<tr><!--标题行-->
			<th>Header</th><!--标题列-->
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody><!--表格主体-->
		<tr><!--行-->
			<td>Data</td><!--列-->
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

1.2、表格属性

width: 指定table宽度 , 也可以指定td宽度

height: 指定table或td的高度,

border: 边框的大小, 指定数字

cellspacing：设置表格中相邻单元格之间的距离

cellpadding：设置表格中每个单元格的内容与单元格边界的距离

bordercolor: 指定表格边框的颜色

bgcolor: 指定table的背景颜色或者 td的背景颜色

background: 指定table的背景图片或者 td的背景图片

合并单元格:

在td上 , 指定单个单元格跨越的横向宽度:colspan=数字

在td上 , 指定单个单元格跨越的垂直宽度: rowspan=数字

2、列表

2.1、有序列表

<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>

2.2、无序列表

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

三、表单与表单元素

理解表单的作用
理解表单与表单元素的关系
掌握表单标签及其属性
掌握各种表单元素标签及其属性
认识表单提交

1、表单

1.1、表单格式

<form>
<input type="" value="" />
<select>
<option></option>
</select>
<textarea></textarea>
<button></button>
</form>

1.2、表单属性

action : 表单提交的地址(URL)

enctype: 表单提交时的编码格式 , 我们一般不指定, 采用网页默认编码(meta)

method : 表单提交的方式(GET /POST) 默认GET

相同的请求key 是允许存在的!

GET请求:

特点: 表单中的键值对通过在网址中拼接传递

拼接的方式:

网址与参数通过?拼接 ,

参数的key与value通过=连接

多个参数之间使用&连接

POST请求:

特点: 请求时, 参数通过请求体传递 !

可以进行文件的提交 !

1.3、表单子节点

1、input标签

属性	意义
type	表单元素的类型，可用的值为：text 、password 、radio 、checkbox 、file 、hidden 、submit 、reset 、button 、image。默认值为text
id	标签在整个页面中的唯一标识符。
name	表单元素的名称，只有设置了name属性的表单元素才能参与表单提交。对于逻辑上视为一组的多个单选按钮，它们必须设置相同的名称才能确保单选。
value	表单元素的值，即它表示的数据。
size	一般用于文本框和密码框，表示它们的宽度，以字符数度量。
maxlength	一般用于文本框和密码框，表示它们可以接受的最多字符数。
checked	只用于单选按钮和复选框，用于设置它们在初始状态下被选中。对于具有相同name属性值的一组单选按钮，最多只能给予其中之一。
src	只用于图像按钮，设置图像文件的地址。
alt	只用于图像按钮，设置图像的替代文字。
accept	只用于文件域，设置文件域可接受的文件类型。
disabled	禁用表单元素，使它无法被浏览者操作。被禁用的表单元素不参与表单提交。
readonly	使表单元素的数据无法被浏览者更改。

type属性: 表示输入组件(input)的类型:

text: 默认 , 单行文本输入框

password: 单行密码输入框, 内容会被*代替

checkbox: 多选按钮

radio: 单选按钮,在进行单选按钮编写时, 可以通过相同的name ,来完成单选的分组

file：文件上传

hidden: 隐藏的输入框

submit: 提交按钮

button: 普通按钮

reset: 重置按钮

placeholder: 提示的文本（html5）

       checked=checked:单选框radio与复选框checkbox设置默认选中项

       disabled：不可输入的文本输入框 ,添加属性 disabled , html5 boolean属性

2、textarea标签的属性

属性	意义
id	标签在整个页面中的唯一标识符。
name	多行文本域的名称，只有设置了name属性的多行文本域才能参与表单提交。
disabled	禁用多行文本域，使它无法被浏览者操作。被禁用的多行文本域不参与表单提交。
readonly	使多行文本域的数据无法被浏览者更改。
cols	设置多行文本域的宽度，以每行中可容纳的字符数度量。
rows	设置多行文本域的高度，以可见的行数度量。
wrap	设置多行文本域的自动换行模式。有三个值： off：不自动换行。文本区只有一行文本，除非浏览者回车强制换行。 virtual：虚拟换行。一行文本的宽度即将超出多行文本框宽度时自动换行，但在自动换行处不产生任何标志。 physical：物理换行。一行文本的宽度即将超出多行文本框宽度时自动换行，且在自动换行处产生换行标志。

3、select标签与option标签

   select是下拉选框的组, option是下拉选框的选项

   下拉选框标签 , 在form表单中进行数据的收集!

       select常用属性:

属性	意义
id	标签在页面内的唯一标签符。
name	列表框的名称。必须设置此属性才能参与表单提交。
disabled	禁用此列表框。
size	设置列表框中的选项显示几项。未设置此属性时，列表框为下拉形式；设置此属性后，列表框将展开为列表形式。
multiple	设置列表框的选项可被浏览者多选。

option常用属性:

属性

意义

value

选项表示的数据。

如果表单提交时，这个选项是处于被选中的状态，则整个列表框将向服务器发送这个选项的value值。

selected

设定选项在初始状态下默认被选中。

4、按钮标签的属性

属性	意义
id	标签在页面内的唯一标识符。
name	按钮的名称。
value	表单提交时，此按钮要发送的数据。注意：此属性对IE浏览器无效，表单提交时，IE浏览器会将<button></button>标签之间的文本作为此按钮的数据发送给服务器。
disabled	禁用此按钮。
type	类型，有三个值：submit , reset , button。注意：此属性的默认值在不同的浏览器之间有差别，所以应显式地为此属性赋值。

5、<label></label>标签

<label></label>标签的主要作用是为上述表单元素提供提示性的说明文字。

它的for属性可用于与某个表单元素进行绑定，这样可以在这个标签在浏览者选择【点击】时，浏览器自动将焦点转移到与它绑定的表单元素中。

一般用于单选按钮和复选框元素。

6、<fieldset></fieldset>及<legend></legend>标签

<fieldset></fieldset>标签用于将表单内的多个表单元素分成多个组。

<legend></legend>标签则用于为每个组提供一个标题。

四、框架集与框架

1、框架

理解使用框架集和框架实现浏览器窗口中多文档的显示
理解框架集与框架的关系
掌握框架集的属性
掌握框架的属性
掌握框架集的嵌套使用
掌握浮动框架
理解超链接和表单的目标框架或目标窗口
理解基准目标

当需要将多个网页组织到同一个窗口中同时显示时，需要使用框架集和框架。框架集用于描述整个浏览器中多个网页的布局方式，即把浏览器窗口分割成为多个区域。而框架则用于描述特定的某一个区域，在每个区域中放置一个独立的网页。使用<frameset></frameset>标签和<frame />标签可以分别创建框架集和框架。

框架集的属性

属性	意义
cols	框架集垂直分割成多列，描述列数和每列的列宽。单位可使用px像素，%百分比或使用*星号表示剩余部分。
rows	框架集水平分割成多行，描述行数和每行的行高。单位可使用px像素，%百分比或使用*星号表示剩余部分。

框架的属性

属性	意义
src	框架中页面的地址
name	框架的名称，与超链接或表单的target属性关联。
scrolling	框架中滚动条的显示方式。有三个值： auto：默认值，由浏览器根据框架的面积和框架中页面正文的内容所需占用的面积自动决定是否出现滚动条。 yes：框架中总是显示滚动条。 no：框架中从不显示滚动条。
noresize	设置框架不允许浏览者拖动框架之间的分割线来改变框架大小。

框架集的嵌套

<frameset></frameset>框架集标签的属性rows和cols一般是不应同时使用的，即不能期望在一个框架集中同时使用rows和cols属性将这个框架集指定成为多行多列的结构。如果要实现复杂的框架集结构，应该使用框架集嵌套的方式来实现，即框架集内部的某个框架用另外一个框架集代替以实现再次拆分。

浮动框架

想简单地在一个网页中嵌入另一个网页的内容，使用浮动框架更为容易。 <iframe ></iframe>标签用于将一个页面的内容显示在另一个页面中。可以把这两个页面的前者称为子页面，把后者称为主页面。 <iframe ></iframe>标签应位于主页面的<body></body>标签内。浮动框架又称为内嵌框架。

浮动框架的属性

属性	意义
src	浮动框架中页面的地址
name	浮动框架的名称，与超链接或表单的target属性关联。
scrolling	浮动框架中滚动条的显示方式。有三个值： auto:默认值，由浏览器根据浮动框架的面积和浮动框架中页面正文的内容所需占用的面积自动决定是否出现滚动条。 yes: 浮动框架中总是显示滚动条。 no: 浮动框架中从不显示滚动条。
width	浮动框架的宽度，可使用px像素或%百分比单位。
height	浮动框架的高度，可使用px像素或%百分比单位。

超链接和表单的目标框架或窗口

当框架页面中包含链接时，我们希望设置超链接href属性指向的目标页面在指定的框架中打开显示。此时，需要为<a></a>标签设置target属性，将属性值赋为目标框架的名称即框架的name属性值。

超链接标签的target属性的值

target属性的值	意义
frame或iframe标签的name属性的值	设置超链接所指向的页面在以此命名的框架或浮动框架中打开显示
_self	设置超链接所指向的页面在当前框架中打开
_blank	设置超链接所指向的页面在由浏览器自动新建的窗口中打开显示
_top	设置超链接所指向的页面在整个浏览器窗口中打开显示，覆盖框架集中的所有框架
_parent	设置超链接所指向的页面在当前框架所属的上级框架集所占据的区域内打开显示
自定义的窗口名称	设置超链接所指向的页面在这个自定义的窗口中打开显示，如果此窗口不存在，则由浏览器新增此窗口再在此窗口中显示