java web 之 网页前端开发基础(1)

1.HTML(Hypertext Markup Language,HTML,超文本标记语言

1.1 创建第一个HTML文件

编写html语言可以通过两种方式,一种是手工编写html代码,一种是借助一些开发软件,如Dreamweaver或者微软公司的Expression Web这样的网页制作软件。在windows操作系统中,最简单的文本编辑软件就是记事本。还有notepad++,以及sublime等。

编写第一个html文件的步骤:

  1. 单击开始菜单,依次选择“程序/附件/记事本”命令;
  2. 在打开的记事本窗体中写代码
  3. 编写完成之后需要将文件保存为html格式的文件,具体步骤是选择记事本菜单栏中的文件/另存为命令,在弹出的另存为对话框中,首先在保存类型下拉菜单中选择所有文件选项,然后在文件名文本框输入一个文件名,需要注意的是,文件名的后缀应该是.htm或者.html
  4. 设置完成后,单击保存按钮,则成功生成了html文件。双击该文件就会显示该文件的内容。

1.2HTML文档结构

html文档由4个主要的标记组成,这四个标记主要有<html>\<head>\<title>\<body>,这四个元素构成了html页面最基本的元素。

1.2.1<html>标记

<html>文件是HTML文件的开头。所有html文件都是以次开头,以</html>文件结尾。html页面所有标记都要放置在<html>和</html>之间。这个标记并没有实质性的功能,但是却是html文件必不可少的内容。

1.2.2<head>标记

<head>标记是html文件的头标记,作用是放在html文件的信息。如定义css样式代码可放置在<head>与</head>标记之中。

1.2.3<title>标记

<title>标记是标题标记,可将网页的标题定义在<title>和</title>标记之中。

1.2.4<body>标记

<body>是html页面的主体标记,页面中所有内容都定义在<body>标志中。<body>标记也是成对使用的,以<body>开头,以</body>结束。<body>标记本身也有一些控制页面的一些特性,如控制页面的被禁图片和颜色等。

html文本语言还有很多其他的标记,如果在使用过程中需要用到一些其他的标记可以通过查找来使用,但是这样使用的效率会很低下。熟能生巧。

换行标记[单独标记]  <br>

段落标记   <p>。。。</p>:段落标记主要在段前和段后加一个空格,段落内的内容不受影响。

标题标记<h1>一级标题,....<h6>代表是6级标题。数字越小表示级别越高,文字的字体就越大。

 

居中标记<center>开头,</center>结尾

 

文字列表标记:将文字以列表的形式依次排列,通过这种形式能更加方便访问者。html中的列表分为有序无序两种。

(1)无序列表

无序列表是在每一个列表前面加一个圆点符号。通过符号<ul>可以创建一组无序列表,其中每一个列表项以<li>[单标记]表示。

 

(2)有序列表

有序列表和无序列表的区别是使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>,每一个列表前使用<li>,有序列表中项目是有一定的顺序的。

 

区域标记<span>:用来组合文档内的元素,它本身是没有固定的格式的,对它应用样式时,它将会对画好的区域进行渲染。

<div>标记与<span>标记类似,但是二者的区别是:<span>标签是行内元素,而<div>是块元素,<div>作用比<span>更大。

表格标记<table>是十分重要的因素,表格迎来存储数据。表格包含标题、表头、行和单元格。<table>....</table>;

标题标记<caption>...</caption>,标题也有一些属性,如align、valign等。

表头标记<th>...</th>,也可以通过align、background、colspan、valign等属性来设置表头;

表格行标记<tr>,,,</tr>,一组表示表格中一行;

单元格标记<td>。。。</td>,一个<tr>中可以包含若干个<td>;

这里就不举例了。

接下来还有html的表单标记,就是一般网页上会出现的登录页面,用户输入的文本框就是属于html中的表单的范畴;

还有下拉菜单标记等,用到记不住就查一下。

 

补充内容:

html表单设计

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文本框为空按钮不可点击

在form表单的提交中判断输入框的内容是否为空&#xff0c;如果输入框的内容为空则按钮不可点击&#xff0c;只有当输入框的内容不为空时才能点击并执行之后的提交等操作。 效果图演示 输入框为空&#xff08;按钮不可点击&#xff0c;点击无效果&#xff09; 输入框不为空时…

【youcans 的 OpenCV 学习课】7. 空间域图像滤波

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的 OpenCV 学习课】7. 空间域图像滤波 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理操作。 …

java web开发之上机指导(2)

创建一个用户注册的页面&#xff0c;让用户输入姓名、密码、电话和邮箱&#xff0c;使用javascript脚本完成密码校验、电话号码校验、邮箱校验和空格内容校验。 开发步骤如下。 &#xff08;1&#xff09;创建一个项目名为CheckInfomation&#xff0c;在WebContent文件夹下创…

小程序开发之基础知识(0)

前言&#xff1a;2016年9月21日,微信小程序正式开启内测。 2017年1月9日0点,万众瞩目的微信第一批小程序正式上线,用户可以体验到各种各样小程序提供的服务。 人类发展史大抵经历了石器时代&#xff0c;青铜器与铁器时代、工业与科技时代&#xff08;从第一次工业革命算起&…

鼠标悬浮改变背景颜色

将鼠标放在div上时div的背景颜色发生改变&#xff0c;把鼠标移走div之后&#xff0c;div的背景颜色回复原来的颜色。 效果图演示 没有将鼠标放在div上时&#xff08;lanse&#xff09; 将鼠标放在div上之后&#xff08;变为红色&#xff09; 下面看代码 由于代码较短&…

获取焦点改变输入框背景色

当输入框获取焦点时&#xff08;鼠标点到输入框时&#xff09;为红色&#xff0c;失去焦点时还原&#xff08;鼠标未点输入框内&#xff09;为白色。 效果图演示 没有获取焦点 获取焦点 代码演示 <!DOCTYPE html> <html><head lang"en"><…

【OpenCV 例程200篇】53. Scipy 实现图像二维卷积

【OpenCV 例程200篇】53. Scipy 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的条…

点击按钮切换图片

点击按钮时将当前显示的图片切换为指定要显示的图片 效果图演示 未点击更换图片之前显示的图片 点击更换图片之后 程序详解&#xff1a; 准备两张互相切换的图片给更换图片按钮添加点击事件把两张图片放在一个数组里点击按钮后执行判断如果是第一张图片就换成第二张&#…

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积

【OpenCV 例程200篇】54. OpenCV 实现图像二维卷积 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 滤波通常是指对图像中特定频率的分量进行过滤或抑制。图像滤波是在尽可能保留图像细节特征的…

【OpenCV 例程200篇】55. 可分离卷积核

【OpenCV 例程200篇】55. 可分离卷积核 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 空间滤波器是由邻域和定义的操作构成的&#xff0c;滤波器规定了滤波时采用的邻域形状及该区域内像素值的…

Anaconda 安装 Python 库(MySQLdb)的方法

转载自&#xff1a;苏皖静儿 [已解决]Anaconda 安装 Python 库&#xff08;MySQLdb&#xff09;的方法 zoerywzhou163.com http://www.cnblogs.com/swje/ 作者&#xff1a;Zhouwan 2017-12-4 安装python库的过程中&#xff0c;最重要的地方就是版本需要兼容。其中操作系统为…

获取数据库内容放入下拉框中

获取数据库里的数据放入下拉框中&#xff0c;使下拉框显示的内容是数据库里的内容 功能分析&#xff1a; 设计并实现数据库插入相关数据在登陆页面点击注册按钮时跳到Servlet中在Servlet中连接数据库查询内容放入session中传给jsp页面在jsp页面接受session内容并使用for循环输…

【OpenCV 例程200篇】56. 低通盒式滤波器

【OpenCV 例程200篇】56. 低通盒式滤波器 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理…

数据只读且无法修改

对输入框的数据进行只读不可修改的设置。 功能分析&#xff1a; 无论你是删除增加点击选中等所有操作对输入框的数据无影响&#xff0c;输入框的数据只会是原始的数据不可修改&#xff0c;一切操作无效。 先看效果图&#xff08;数据不可更改&#xff09; 要实现此效果一共有…

【OpenCV 例程200篇】57. 低通高斯滤波器

【OpenCV 例程200篇】57. 低通高斯滤波器 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像预处理…

IDEA包的分层显示

使IDEA的项目和包分层显示&#xff0c;结构更加清晰。 未设置分层显示之前的包结构 设置了分层显示之后的包结构 那么如何设置呢&#xff0c;让我们一起来看看吧&#xff01; 设置包结构分层方法 第一步&#xff08;点击像设置一样的图标出先如下菜单&#xff09; 第二部 …

【OpenCV 例程200篇】58. 非线性滤波—中值滤波

【OpenCV 例程200篇】58. 非线性滤波—中值滤波 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图像的噪声进行抑制&#xff0c;是常用的图像…

【OpenCV 例程200篇】59. 非线性滤波—双边滤波

【OpenCV 例程200篇】59. 非线性滤波—双边滤波&#xff08;Bilateral filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件下对目标图…

部门信息管理系统

实现对部门信息的分类管理&#xff0c;对不同部门人员的管理&#xff08;增删改查&#xff09;&#xff0c;新用户的注册和登陆等 功能分析&#xff1a; 实现用户的登陆实现用户的注册&#xff08;注册不同的部门和职位&#xff09;登陆之后会显示所有员工和经理的信息实现对…

【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波

【OpenCV 例程200篇】60. 非线性滤波—联合双边滤波&#xff08;Joint bilateral filter&#xff09; 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 图像滤波是在尽可能保留图像细节特征的条件…