动态网站开发01网页基础

动态网站开发01
一、前言
二、笔记
（一）HTML 到底是什么？
1、HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
2、HTML语言的基本格式
（二） 常用的HTML标签
1、段落、行内和换行标签
2、文本样式标签
3、表格标签
4、表单标签
(1)表单域<form>
(2) 表单控件<input>
5、多行文本标签
6、列表标签
(1) 无序列表
(2) 有序列表
(3)定义列表
7、超链接标签
8、
一、前言
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

二、笔记
（一）HTML 到底是什么？
1、HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
2、HTML语言的基本格式

声明必须是HTML文档的第一行，位于 标签之前声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范 标签位于声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，标签标志着HTML文档的开始， 标签则标志着 HTML 文档的结束，它们之间是文档的头部和主体内容。 head标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、只是浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 标签用于定义HTML文档所要显示的内容，也被称为主体标签。 （二） 常用的HTML标签 1、段落、行内和换行标签

相思

唐·王维

红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
运行程序，使用浏览器打开htmlDemo02.html文件

2、文本样式标签
在HTML中，使用标签控制网页中文本的样式，如字体、字号和颜色
标签的基本语法格式：<font 属性=“属性值”>文本内容
在文件夹中新建HTML文件htmlDemo03.html

默认样式文本：踏青寻芳
微软7号绿色文本：春满人间

1
2
3
4
5
6
7
8
9
10
11
12
运行程序，使用浏览器打开htmlDemo03.html文件

3、表格标签
目标：掌握表格标签，学会使用border属性改变表格的边框
在HTML网页中要想创建表格，需要使用相关的表格标签才能创建表格
在HTML网页中创建表格的基本语法格式

单元格内的文字

1
2
3
4
5
6
注意：

、和

是创建表格的基本标签，缺一不可。用于定义一个表格，用于定义表格中的行(table row)，必须嵌套在 标签中，标签中。 用于定义表格中的单元格（table data），也可称为表格中的列，必须嵌套在

在文件夹中创建一个HTML文件htmlDemo04.html

4、表单标签
表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。

(1)表单域
在HTML中，标签用于定义表单域，即创建一个表单。

标签基本语法 各种表单控件

1
2
3
4
action属性：用于指定表单提交的地址。
method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。
(2) 表单控件
控件基本语法格式：

type属性为控件最基本的属性，用来指定不同的控件类型。

控件还可以定义很多其他属性，其中，比较常用的有id、name、value、size，它们分别用来指定控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。

在chapter01文件夹中创建一个HTML文件htmlDemo05.html，添加表单，并设置提交方式为POST，再定义一个2列的表格

在htmlDemo05.html中添加用户名输入控件和密码输入框控件

在htmlDemo05.html中添加性别选择控件和兴趣复选框控件

在htmlDemo05.html中添加文件上传控件、提交按钮控件和重置按钮

完整代码

用户名：
密码：
性别：	男 女
兴趣：	看电影 敲代码 玩游戏
头像：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
运行程序，使用浏览器打开htmlDemo05.html文件

5、多行文本标签
HTML提供了标签，通过此标签可以创建多行文本框。

标签基本语法格式

在文件夹中创建一个HTML文件htmlDemo06.html

评论：
评论时，请注意文明用语。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
运行程序

6、列表标签
(1) 无序列表
-无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。

定义无序列表的基本语法格式

• 列表项1
• 列表项2
• 列表项3
• ...

1
2
3
4
5
6
7
注意：

标签用于定义无序列表，
标签嵌套在

标签中，用于描述具体的列表项，每对

中至少应包含一对

• 。（ul: unordered list；li: list item）
  在文件夹中创建一个HTML文件htmlDemo07.html
  软件专业课程
  
  • Web前端开发
  • Java高级程序设计
  • Python面向对象
  • Spring Boot框架

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  运行程序，使用浏览器打开htmlDemo07.html文件

  (2) 有序列表
  有序列表是一种强调排列顺序的列表，使用
  标签定义，内部可以嵌套多个
  标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
  定义有序列表的基本语法格式

  1. 列表项1
  2. 列表项2
  3. 列表项3
  4. ...

  1
  2
  3
  4
  5
  6
  7
  注意：

  标签用于定义有序列表，
• 为具体的列表项，和无序列表类似，每对
  中也至少应包含一对
• 。（ol: ordered list）
  在文件夹中创建一个HTML文件htmlDemo08.html
  软件专业课程
  1. Web前端开发
  2. Java高级程序设计
  3. Python面向对象
  4. Spring Boot框架

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  运行程序

  (3)定义列表
  定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。
  定义列表的基本语法格式

  名词1

  dd是名词1的描述信息1

  dd是名词1的描述信息2

  名词2

  dd是名词2的描述信息1

  dd是名词2的描述信息2

  1
  2
  3
  4
  5
  6
  7
  8
  9
  dl: define list；dt: efine title；dd: define description
  注意：

  标签用于指定定义列表， 和
  并列嵌套于
  中。其中， 标签用于指定术语名词，
  标签用于对名词进行解释和描述。一对 可以对应多对
  , 也就是说可以对一个名词进行多项解释。

  红色

  光谱的三原色和心理四色之一

  代表着吉祥、喜庆、火热、幸福、豪放、 斗志、革命、轰轰烈烈、激情澎湃等

  绿色

  自然界中常见的颜色

  绿色有无公害，健康的意思

  绿色代表着生命，象征着希望

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  运行程序，使用浏览器打开htmlDemo09.html文件

  7、超链接标签
  超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
  使用标签创建超链接的基本语法格式：文本或图像
  标签是一个行内标签，用于定义超链接，href和target是标签的常用属性
  在文件夹中创建一个HTML文件htmlDemo10.html

  在新窗口打开： 互联网+大赛
  在原窗口打开： 全国职业院校技能大赛

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  运行程序，使用浏览器打开·htmlDemo10.html·文件

  当单击“全国职业院校技能大赛”后，浏览器的效果

  8、
  要想在HTML网页中显示图像就需要使用图像标签
  标签基本语法格式：
  注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是标签的必需属性。图像源可以使本地图片文件，也可以是网络图片资源

  本地图片：
  网络图片：

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  注意：width和height属性分别用来设置图像的宽度和高度，单位为像素，border属性用来设置图像的边框，border="1px"表示边框粗细为1个像素，如果设置为border=“0”，那么就表示没有边框。
  运行程序，使用浏览器打开htmlDemo11.html文件

  ————————————————
  版权声明：本文为CSDN博主「ZQIR12」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
  原文链接：https://blog.csdn.net/ZQIR12/article/details/131129185