动态网站开发讲课笔记01：网页开发基础

news2024/11/15 12:22:23

文章目录

  • 零、本讲学习目标
  • 一、HTML基础
    • （一）HTML简介
      • 1、HTML
      • 2、HTML语言的基本格式
      • 3、<!DOCTYPE>声明
      • 4、html标签
      • 5、head标签
      • 6、body标签
      • 7、编写第一个网页
      • 8、关于编写HTML文件的工具
      • 9、HTML标签概述
        • （1）单标签
        • （2）双标签
        • （3）注释标签
  • 二、常用的HTML标签
    • （一）段落、行内和换行标签
    • （二）文本样式标签
    • （三）表格标签
    • （四）表单标签
      • 1、表单域\<form\>
      • 2、表单控件\<input\>
  • 三、CSS技术
  • 四、JavaScript基础
  • 五、Bootstrap框架基础
  • 六、Bootstrap框架的常用组件

零、本讲学习目标

  1. 熟悉HTML标签的使用
  2. 掌握CSS样式的引用方式
  3. 掌握CSS选择器的常用属性
  4. 熟悉DOM与BOM的相关知识
  5. 掌握JavaScript的使用
  6. 熟悉Bootstrap框架的下载与使用
  7. 掌握BootStrap框架的常用组件

在学习Java Web开发之前，读者首先需要了解一些网页开发的基础知识。说到网页，其实大家并不陌生，我们上网查询信息时就是在浏览网页。网页可以看作是承载各种网站应用和信息的容器，网站的所有可视化内容都会通过网页展示给用户。本讲将围绕HTML技术、CSS技术以及JavaScript技术对网页开发基础知识进行讲解。

一、HTML基础

（一）HTML简介

1、HTML

  • HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。

2、HTML语言的基本格式

在这里插入图片描述

3、<!DOCTYPE>声明

  • <!DOCTYPE>声明必须是 HTML 文档的第一行，位于 标签之前。<!DOCTYPE>声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范，网页在开头处使用<!DOCTYPE>声明为所有的HTML文档指定HTML版本和类型，这样浏览器将该网页作为有效的HTML文档，并按指定的文档类型进行解析。<!DOCTYPE>声明和浏览器的兼容性相关，<!DOCTYPE>声明被删除后，如何展示HTML页面的权利就交给了浏览器，即页面的显示效果由浏览器决定。

4、html标签

  • <html>标签位于<!DOCTYPE>声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，<html>标签标志着HTML文档的开始，</html>标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。

5、head标签

  • <head>标签用于定义HTML文档的头部信息，也被称为头部标签。<head>标签紧跟在<html>之后，主要用于封装其他位于文档头部的标签，如<title>、<meta>、<link>及<style>等标签。

6、body标签

  • <body>标签用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内，才能最终展示给用户。需要注意的是，一个HTML文档只能含有一对<body>标签，且<body>标签必须在<html>标签内，位于<head>标签之后，与<head>标签是并列关系。

7、编写第一个网页

  • 在D:\web_work里创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个文本文件（.txt后缀），将文件的名称更改为htmlDemo01，后缀名改为.html。
    在这里插入图片描述

  • 在htmlDemo01.html文件中编写代码
    在这里插入图片描述

  • 运行程序，使用浏览器打开htmlDemo01.html文件
    在这里插入图片描述

8、关于编写HTML文件的工具

  • 读者在编写HTML文件时，可以使用系统自带的记事本编写，也可以使用Notepad++、EditPlus、UltraEdit、HBuilder或IDEA等工具编写HTML文件，当使用工具创建HTML文件时，文件中的基本标签会被自动创建，编辑工具还会有代码颜色和代码提示功能，开发者只需根据需求完善功能代码即可，工具的使用有助于提高编码效率，减少出错率。

  • Notepad++编辑器
    在这里插入图片描述

  • HBuilder开发工具
    在这里插入图片描述

  • IDEA开发工具
    在这里插入图片描述

9、HTML标签概述

（1）单标签

  • 单标签也被称为“空标签”，是指用一个标签符号就可以完整地描述某个功能的标签。
  • 单标签基本语法格式：<标签名 />
  • 注意：在标签名与“/”之间有一个空格，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。
  • 为什么要有单标签？HTML标签的作用原理是选择网页内容进行描述，也就是说需要描述谁，就选择谁，所以才会有双标签的出现，双标签有开始和结束标签。而单标签本身就可以描述一个功能，不需要选择谁，例如水平线标签<hr />，按照双标签的语法，它应该写成“<hr></hr>”，但是水平线标签不需要选择谁，它本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称后面加一个关闭符，即为<标签名 />。

（2）双标签

  • 双标签也称体标签，是指由开始和结束两个标签符组成的标签。
  • 双标签基本语法格式：<标签名>内容</标签名>

（3）注释标签

  • 在HTML中还有一种特殊的标签——注释标签，如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。
  • 注释标签的基本语法格式：<!--注释语句-->
  • 注意：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释标签。

二、常用的HTML标签

（一）段落、行内和换行标签

  • 目标：熟悉HTML的段内、行内和换行标签
  • 在chapter01文件夹中新建HTML文件htmlDemo02.html
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo02</title>
	</head>
	<body>
		<p>相思</p>
		<p>
			<span>红豆生南国，<br />春来发几枝。<br />劝君多采撷，<br />此物最相思。</span>
		</p>
	</body>
</html>
  • 运行程序，使用浏览器打开htmlDemo02.html文件
    在这里插入图片描述

（二）文本样式标签

  • 目标：熟悉HTML的文本样式标签
  • 在HTML中，使用<font>标签控制网页中文本的样式，如字体、字号和颜色
  • <font>标签的基本语法格式：<font 属性="属性值">文本内容</font>
  • 在chapter01文件夹中新建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文件
    在这里插入图片描述

（三）表格标签

  • 目标：掌握表格标签，学会使用border属性改变表格的边框
  • 在HTML网页中要想创建表格，需要使用相关的表格标签才能创建表格
  • 在HTML网页中创建表格的基本语法格式
<table>
     <tr>
          <td>单元格内的文字</td>
     </tr>
</table>
  • 注意：<table>、<tr>和<td>是创建表格的基本标签，缺一不可。<table>用于定义一个表格，<tr>用于定义表格中的行(table row)，必须嵌套在<table>标签中，<td>用于定义表格中的单元格（table data），也可称为表格中的列，必须嵌套在<tr>标签中。
  • 在chapter01文件夹中创建一个HTML文件htmlDemo04.html
    在这里插入图片描述
  • 运行程序，使用浏览器打开htmlDemo04.html文件
    在这里插入图片描述
  • 注意：如果border属性的值发生改变，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性，将显示没有边框的表格。

（四）表单标签

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

在这里插入图片描述

1、表单域<form>

  • 在HTML中，<form>标签用于定义表单域，即创建一个表单。
  • <form>标签基本语法
<form action="url地址" method="提交方式" name="表单名称">
     各种表单控件
</form>
  • action属性：用于指定表单提交的地址。
  • method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。

2、表单控件<input>

  • 浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用<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" name="username" />	 
				   </td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<!-- 2.密码输入框控件 -->
					<td><input type="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文件
    在这里插入图片描述

三、CSS技术

四、JavaScript基础

五、Bootstrap框架基础

六、Bootstrap框架的常用组件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/351885.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【论文笔记】图像修复Learning Joint Spatial-Temporal Transformations for Video Inpainting

【论文笔记】图像修复Learning Joint Spatial-Temporal Transformations for Video Inpainting

论文地址&#xff1a;https://arxiv.org/abs/2007.10247 源码地址&#xff1a;GitHub - researchmm/STTN: [ECCV2020] STTN: Learning Joint Spatial-Temporal Transformations for Video Inpainting 一、项目介绍 当下SITA的方法大多采用注意模型&#xff0c;通过搜索参考帧…
阅读更多...
webpack 开发环境的基本配置(webpack打包样式资源、html、图片、devserver、开发环境配置、以及其他资源)

webpack 开发环境的基本配置(webpack打包样式资源、html、图片、devserver、开发环境配置、以及其他资源)

A.打包样式资源 1. 创建文件 2. 下载安装 loader 包 npm i css-loader style-loader less-loader less -D 3. 修改配置文件 /*webpack.config.js webpack的配置文件作用: 指示 webpack 干哪些活&#xff08;当你运行 webpack 指令时&#xff0c;会加载里面的配置&#xff…
阅读更多...
计算机图形学（Computer Graphics）的学习笔记

计算机图形学（Computer Graphics）的学习笔记

目录 1.计算机图形学是什么 2.计算机图形学学什么 3.计算机图形学应用举例 4.计算机图形学主要内容 5.图形的分类 6.图形要素 7.图形的表达方式 8.图形学应用生活中的例子 9.计算机图形学定义 10.用户界面发展方向 11.影视中的变形技术要点 12.虚拟现实的一些技术 …
阅读更多...
Python 之 Matplotlib xticks 的再次说明、图形样式和子图

Python 之 Matplotlib xticks 的再次说明、图形样式和子图

文章目录一. 改变 x 轴显示内容 xticks 方法再次说明1. x 轴是数值型数据2. 将 x 轴更改为字符串3. 总结二. 其他元素可视性1. 显示网格&#xff1a;plt.grid()2. plt.gca( ) 对坐标轴的操作三. plt.rcParams 设置画图的分辨率&#xff0c;大小等信息四. 图表的样式参数设置1. …
阅读更多...
CUDA C++扩展的详细描述

CUDA C++扩展的详细描述

CUDA C扩展的详细描述 文章目录CUDA C扩展的详细描述CUDA函数执行空间说明符B.1.1 \_\_global\_\_B.1.2 \_\_device\_\_B.1.3 \_\_host\_\_B.1.4 Undefined behaviorB.1.5 __noinline__ and __forceinline__B.2 Variable Memory Space SpecifiersB.2.1 \_\_device\_\_B.2.2. \_…
阅读更多...
汽车改装避坑指南：大尾翼

汽车改装避坑指南：大尾翼

今天给大家讲一个改装的误区&#xff1a;大尾翼 很多车友看到一些汽车加了大尾翼&#xff0c;非常的好看&#xff0c;就想给自己的车也加装一个。 那你有没有想过&#xff0c;尾翼这东西你真的需要吗&#xff1f; 赛车为什么加尾翼&#xff1f;尾翼主要是给车尾部的一个压低提供…
阅读更多...
三维重建基础入门之特征点检测基础（二）

三维重建基础入门之特征点检测基础（二）

前言&#xff1a;本文着眼于记录自己从普通CVer入门三维重建的学习过程&#xff0c;可能过程比较坎坷&#xff0c;都在摸索阶段&#xff0c;但争取每次学习都能进一步&#xff0c;提高自己的能力&#xff0c;同时&#xff0c;每篇文章都会按情况相应地推出B站讲解视频&#xff…
阅读更多...
在群晖上体验维格表社区版APITable

在群晖上体验维格表社区版APITable

本文是应网友 lee yong 和 shijie880500 的要求折腾的&#xff1b; 什么是 APITable &#xff1f; APITable 是 vika 维格表的社区版&#xff0c;是一个面向 API 且易于使用的可视化数据库&#xff0c;适合所有人&#xff0c;使其成为 Airtable 的最佳开源替代品。最重要的是&a…
阅读更多...
智慧城市总体解决方案和建设思路

智慧城市总体解决方案和建设思路

“智慧城市”是综合城市发展规划、城市运行管理、城市经济社会发展、新一代信息技术应用等为一体的城市发展新模式&#xff0c;是促进城市科学发展、跨越发展、和谐发展的必然选择&#xff0c;是提升现代城市综合竞争力和国际影响力的战略制高点。 建设智慧城市&#xff0c;是城…
阅读更多...
电脑文件被删除？试了十几款工具，数据恢复大师只看这一款

电脑文件被删除？试了十几款工具，数据恢复大师只看这一款

长期使用电脑办公&#xff0c;电脑肯定保存着很多数据文件。文件一多&#xff0c;我们势必是要进行整理的。要不文件太多会占用内存&#xff0c;还会影响电脑的运行速度。 整理过程中&#xff0c;重要的电脑文件被误删了怎么办&#xff1f;建议您先使用常规的方法来进行操作先…
阅读更多...
双目客流统计方案的应用原理

双目客流统计方案的应用原理

双目客流统计客流摄像头采用立体视觉技术实现高度统计功能。基于视差原理。利用双镜头摄取的两幅图像的视差&#xff0c;构建三维场景&#xff0c;在检测到运动目标后。通过计算图像对应点间的位置偏差。获取目标的三维信息&#xff0c;在深度图像中对目标的检测与追踪&#xf…
阅读更多...
Java基础二

Java基础二

目录 1. 常见类和对象 1.1 object 1.2 数组 Array 1.3 二维数组 1.6 二分查找法 1.7 字符串 1.8 包装类 1.9 日期类 1.10 工具类 1.11 比较 2. 异常 2.1介绍 2.2 基础语法 2.3 常见异常 3. 集合 3.1 介绍 3.2 常用的接口和类 3.3 ArrayList 基本操作 3.4 ArrayL…
阅读更多...
165、【动态规划】leetcode ——337. 打家劫舍 III：记忆化递归+动态规划（C++版本）

165、【动态规划】leetcode ——337. 打家劫舍 III：记忆化递归+动态规划（C++版本）

题目描述 原题链接&#xff1a;337. 打家劫舍 III 解题思路 &#xff08;1&#xff09;记忆化递归 采用后序遍历的方式&#xff0c;设置一个unordered_map型Hash表record&#xff0c;记录每个结点的情况。当遍历到该节点时&#xff0c;判定之前是否遍历过&#xff0c;如果遍…
阅读更多...
docker基本内容简单复习

docker基本内容简单复习

文章目录一、docker简介docker镜像镜像的优化二、docker网络三、docker数据卷一、docker简介 docker是管理容器的引擎&#xff0c;docker为应用打包、部署平台&#xff0c;而非单纯的虚拟化技术 docker镜像 docker镜像是分层结构&#xff1b;共享宿主机kernel&#xff1b;同一…
阅读更多...
【网安神器篇】——系统指纹探测工具finger

【网安神器篇】——系统指纹探测工具finger

作者名&#xff1a;白昼安全主页面链接&#xff1a; 主页传送门创作初心&#xff1a; 以后赚大钱座右铭&#xff1a; 不要让时代的悲哀成为你的悲哀专研方向&#xff1a; web安全&#xff0c;后渗透技术每日鸡汤&#xff1a; 我不想停下&#xff0c;因为这次出发的感觉太好了一…
阅读更多...
【双指针问题】977. 有序数组的平方

【双指针问题】977. 有序数组的平方

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…
阅读更多...
Python快速上手系列--日志模块--详解篇

Python快速上手系列--日志模块--详解篇

前言本篇主要说说日志模块&#xff0c;在写自动化测试框架的时候我们就需要用到这个模块了&#xff0c;方便我们快速的定位错误&#xff0c;了解软件的运行情况&#xff0c;更加顺畅的调试程序。为什么要用到日志模块&#xff0c;直接print不就好了&#xff01;那得写多少print…
阅读更多...
【Linux】进程的概念及操作进程

【Linux】进程的概念及操作进程

目录1.什么是进程2.描述进程 - PCB3.进程的具体操作3.1进程的属性与文件属性的关系3.2查看进程准备工作使用指令查找对应进程&#xff1a;在文件中查看进程3.3关闭进程ctrlckill3.4进程的一些特性3.5通过系统调用获取进程标识符3.6通过系统调用创建子进程1.什么是进程 背景&am…
阅读更多...
工程师手册：电源设计中的电容选用规则

工程师手册：电源设计中的电容选用规则

摘要 电源往往是我们在电路设计过程中最容易忽略的环节。作为一款优秀的设计&#xff0c;电源设计应当是很重要的&#xff0c;它很大程度影响了整个系统的性能和成本。电源设计中的电容使用&#xff0c;往往又是电源设计中最容易被忽略的地方。一、电源设计中电容的工作原理 在…
阅读更多...
前段时间公司招人，面了一个要20K的，一问自动化只会点皮毛···

前段时间公司招人，面了一个要20K的，一问自动化只会点皮毛···

前段时间公司要招2个自动化测试&#xff0c;同事面了几十个候选人&#xff0c;发现了一个很奇怪的现象&#xff0c;面试的时候&#xff0c;如果问的是框架api、脚本编写这些问题&#xff0c;基本上个个都能对答如流&#xff0c;等问到实际项目的时候&#xff0c;类似“怎么从0开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023