动态网站开发01：网页基础
动态网站开发01
一、前言
超文本标记语言（英语：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语言的基本格式
-
-
<!DOCTYPE>声明必须是HTML文档的第一行，位于 标签之前<!DOCTYPE>声明不是HTML标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范 -
<html>标签位于<!DOCTYPE>声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，<html>标签标志着HTML文档的开始，</html>标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。 -
head标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、只是浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 -
<body>标签用于定义HTML文档所要显示的内容，也被称为主体标签。
（二） 常用的HTML标签
1、段落、行内和换行标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo02</title>
</head>
<body>
<p>相思</p> <!--段落标签：paragraph tag-->
<p>唐·王维</p> <!--诗佛-->
<p>
<span>红豆生南国，<br />春来发几枝。<br />愿君多采撷，<br />此物最相思。</span>
</p>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo02.html文件
2、文本样式标签
- 在HTML中，使用
<font>标签控制网页中文本的样式，如字体、字号和颜色 -
<font>标签的基本语法格式：<font 属性="属性值">文本内容</font> - 在文件夹中新建HTML文件
htmlDemo03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo03</title>
</head>
<body>
默认样式文本：踏青寻芳<br />
<font face="微软雅黑" size="7" color="green">微软7号绿色文本：春满人间</font>
</body>
</html>
- 运行程序，使用浏览器打开
htmlDemo03.html文件
3、表格标签
- 目标：掌握表格标签，学会使用border属性改变表格的边框
- 在HTML网页中要想创建表格，需要使用相关的表格标签才能创建表格
- 在HTML网页中创建表格的基本语法格式
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
-
注意：
<table>、<tr>和<td>是创建表格的基本标签，缺一不可。<table>用于定义一个表格，<tr>用于定义表格中的行(table row)，必须嵌套在<table>标签中，<td>用于定义表格中的单元格（table data），也可称为表格中的列，必须嵌套在<tr>标签中。 -
在文件夹中创建一个HTML文件htmlDemo04.html
4、表单标签
- 表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。
(1)表单域<form>
- 在HTML中，
<form>标签用于定义表单域，即创建一个表单。 -
<form>标签基本语法
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
-
action属性：用于指定表单提交的地址。 -
method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。
(2) 表单控件<input>
-
<intput>控件基本语法格式：<input type="控件类型" /> -
type属性为<input>控件最基本的属性，用来指定不同的控件类型。 -
<input>控件还可以定义很多其他属性，其中，比较常用的有id、name、value、size，它们分别用来指定<input>控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。 -
在
chapter01文件夹中创建一个HTML文件htmlDemo05.html，添加表单，并设置提交方式为POST，再定义一个2列的表格
- 在htmlDemo05.html中添加用户名输入控件和密码输入框控件
- 在htmlDemo05.html中添加性别选择控件和兴趣复选框控件
- 在htmlDemo05.html中添加文件上传控件、提交按钮控件和重置按钮
- 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo05</title>
</head>
<body>
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>
<td>
<!--1. 文本输入框控件-->
<input type="text" id="username" name="username" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<!--2. 密码输入框控件-->
<input type="password" id="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input type="checkbox" name="interest" value="film"/> 看电影
<input type="checkbox" name="interest" value="code"/> 敲代码
<input type="checkbox" name="interest" value="game"/> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo05.html文件
5、多行文本标签
- HTML提供了
<textarea></textarea>标签，通过此标签可以创建多行文本框。 -
<textarea></textarea>标签基本语法格式 - 在文件夹中创建一个HTML文件
htmlDemo06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo06</title>
</head>
<body>
<form action="#" method="post">
评论：<br />
<textarea cols="60" rows="5">
评论时，请注意文明用语。
</textarea>
<br /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
- 运行程序
6、列表标签
(1) 无序列表
-无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。
- 定义无序列表的基本语法格式
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 注意：
<ul></ul>标签用于定义无序列表， - 标签嵌套在
<ul></ul>标签中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。（ul:unordered list；li: list item） - 在文件夹中创建一个HTML文件
htmlDemo07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo07</title>
</head>
<body>
<font size="5">软件专业课程</font><br />
<ul>
<li>Web前端开发</li>
<!-- 指定type属性值 , disc为默认值-->
<li type="disc">Java高级程序设计</li>
<li type="square">Python面向对象</li>
<li type="circle">Spring Boot框架</li>
</ul>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo07.html文件
(2) 有序列表
- 有序列表是一种强调排列顺序的列表，使用
- 标签定义，内部可以嵌套多个
- 标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
- 定义有序列表的基本语法格式
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
- 注意：
<ol></ol>标签用于定义有序列表，<li></li>为具体的列表项，和无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。（ol:ordered list） - 在文件夹中创建一个HTML文件
htmlDemo08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo08</title>
</head>
<body>
<font size="5">软件专业课程</font>
<ol>
<li>Web前端开发</li>
<li>Java高级程序设计</li>
<li>Python面向对象</li>
<li>Spring Boot框架</li>
</ol>
</body>
</html>
- 运行程序
(3)定义列表
- 定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。
- 定义列表的基本语法格式
<dl>
<dt>名词1</dt>
<dd>dd是名词1的描述信息1</dd>
<dd>dd是名词1的描述信息2</dd>
<dt>名词2</dt>
<dd>dd是名词2的描述信息1</dd>
<dd>dd是名词2的描述信息2</dd>
</dl>
- dl:
define list；dt:efine title；dd:define description - 注意：
<dl></dl>标签用于指定定义列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中。其中，<dt></dt>标签用于指定术语名词，<dd></dd>标签用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>, 也就是说可以对一个名词进行多项解释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo09</title>
</head>
<body>
<dl>
<dt>红色</dt>
<dd>光谱的三原色和心理四色之一</dd>
<dd>代表着吉祥、喜庆、火热、幸福、豪放、
斗志、革命、轰轰烈烈、激情澎湃等</dd>
<dt>绿色</dt>
<dd>自然界中常见的颜色</dd>
<dd>绿色有无公害，健康的意思</dd>
<dd>绿色代表着生命，象征着希望</dd>
</dl>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo09.html文件
7、超链接标签
- 超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
- 使用标签创建超链接的基本语法格式：文本或图像
- 标签是一个行内标签，用于定义超链接，href和target是标签的常用属性
- 在文件夹中创建一个HTML文件htmlDemo10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo10</title>
</head>
<body>
在新窗口打开：
<a href="https://cy.ncss.cn" target="_blank">互联网+大赛</a><br />
在原窗口打开：
<a href="http://www.chinaskills-jsw.org/" target="_self">全国职业院校技能大赛</a>
</body>
</html>
- 运行程序，使用浏览器打开·htmlDemo10.html·文件
- 当单击“全国职业院校技能大赛”后，浏览器的效果
8、
- 要想在HTML网页中显示图像就需要使用图像标签
<img> -
<img>标签基本语法格式：<img src="图像URL" /> - 注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是
<img>标签的必需属性。图像源可以使本地图片文件，也可以是网络图片资源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo11</title>
</head>
<body>
本地图片：<img src="bear.png" width="160px" height="130px" border="1px"><br />
网络图片：<img src="https://pic.netbian.com/uploads/allimg/230222/005031-167699823179c9.jpg"
width="160px" height="130px" border="1px">
</body>
</html>
- 注意：width和height属性分别用来设置图像的宽度和高度，单位为像素，border属性用来设置图像的边框，border="1px"表示边框粗细为1个像素，如果设置为border=“0”，那么就表示没有边框。
- 运行程序，使用浏览器打开htmlDemo11.html文件
上一篇： 动态网站开发02：J
下一篇： 国际电商网站APP开