动态网站开发01：网页基础
动态网站开发01
- 一、前言
- 二、笔记
- （一）HTML 到底是什么？
- 1、HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
- 2、HTML语言的基本格式
- （二） 常用的HTML标签
- 1、段落、行内和换行标签
- 2、文本样式标签
- 3、表格标签
- 4、表单标签
- (1)表单域`
- (2) 表单控件``
- 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、段落、行内和换行标签
DOCTYPE html>
<html><head><meta charset="utf-8"><title>htmlDemo02title>head><body><p>相思p> <p>唐·王维p> <p><span>红豆生南国，<br />春来发几枝。<br />愿君多采撷，<br />此物最相思。span>p>body>
html>- 运行程序，使用浏览器打开htmlDemo02.html文件
2、文本样式标签
- 在HTML中，使用
标签控制网页中文本的样式，如字体、字号和颜色 标签的基本语法格式：文本内容- 在文件夹中新建HTML文件
htmlDemo03.html
DOCTYPE html>
<html><head><meta charset="utf-8"><title>htmlDemo03title>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 row)，必须嵌套在标签中，
用于定义表格中的单元格 （table data），也可称为表格中的列，必须嵌套在标签中。 在文件夹中创建一个HTML文件htmlDemo04.html
4、表单标签
- 表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。
(1)表单域
- 在HTML中，
标签用于定义表单域，即创建一个表单。 标签基本语法
<form action="url地址" method="提交方式" name="表单名称">各种表单控件 form>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中添加文件上传控件、提交按钮控件和重置按钮
- 完整代码
DOCTYPE html> <html><head><meta charset="utf-8"><title>htmlDemo05title>head><body><form action="#" method="post"><table cellpadding="2" align="center"><tr><td align="right">用户名：td><td><input type="text" id="username" name="username" />td>tr><tr><td align="right">密码：td><td><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提供了
标签，通过此标签可以创建多行文本框。 标签基本语法格式- 在文件夹中创建一个HTML文件
htmlDemo06.html
DOCTYPE html> <html><head><meta charset="utf-8"><title>htmlDemo06title>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>列表项1li><li>列表项2li><li>列表项3li>...ul>- 注意：
- 标签嵌套在
。（ul:unordered list；li: list item） - 在文件夹中创建一个HTML文件
htmlDemo07.html
DOCTYPE html> <html><head><meta charset="utf-8"><title>htmlDemo07title>head><body><font size="5">软件专业课程font><br /><ul><li>Web前端开发li><li type="disc">Java高级程序设计li><li type="square">Python面向对象li><li type="circle">Spring Boot框架li>ul>body> html>- 运行程序，使用浏览器打开htmlDemo07.html文件
(2) 有序列表
- 有序列表是一种强调排列顺序的列表，使用
- 标签定义，内部可以嵌套多个
- 标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
- 定义有序列表的基本语法格式
<ol><li>列表项1li><li>列表项2li><li>列表项3li>...ol>- 注意：
为具体的列表项，和无序列表类似，每对。（ol:ordered list） - 在文件夹中创建一个HTML文件
htmlDemo08.html
DOCTYPE html> <html><head><meta charset="utf-8"><title>htmlDemo08title>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>名词1dt><dd>dd是名词1的描述信息1dd><dd>dd是名词1的描述信息2dd><dt>名词2dt><dd>dd是名词2的描述信息1dd><dd>dd是名词2的描述信息2dd> dl>- dl:
define list；dt:efine title；dd:define description - 注意：
并列嵌套于标签用于对名词进行解释和描述。一对可以对应多对, 也就是说可以对一个名词进行多项解释。
DOCTYPE html> <html><head><meta charset="utf-8"><title>htmlDemo09title>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>htmlDemo10title>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网页中显示图像就需要使用图像标签
- 注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是
DOCTYPE html> <html><head><meta charset="utf-8"><title>htmlDemo11title>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文件
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
