Html （十三）

最新推荐文章于 2023-04-26 14:44:25 发布
最新推荐文章于 2023-04-26 14:44:25 发布
阅读量349 收藏
点赞数 1
分类专栏： 笔记 文章标签： jquery html css javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43800904/article/details/119898314
版权
本文介绍了JavaWeb前端开发的基础知识，包括HTML、CSS和JavaScript的用途，展示了不同级别的标题、段落、图片、超链接、水平线、列表、表格的使用。讲解了div、span元素的作用，以及如何处理空格折叠现象。还提供了表单的创建示例，包括输入框、单选按钮、复选框、下拉列表等。最后，给出了两个练习题目，涉及考试报名表单和社保缴费计算的表格展示。
摘要由CSDN通过智能技术生成

目录

JavaWeb前端介绍

样例代码：

使用软件：HBuilder

标签介绍：

网页举例：

div division :

空格折叠现象

span

 表格

form表单

练习：

JavaWeb前端介绍

HTML:超文本标记语言            定义页面结构

CSS：层叠样式表                    页面显示的样式            BootStrap

JS:      JavaScript                    界面交互(动态交互)       JQuery

全栈开发工程师：前端和后端都精通的工程师

样例代码：

使用软件：HBuilder

标签介绍：

 <title></title>                             网页标题名

<h1>一级标题</h1>                   如代码所表示代表六级的标题
<h2>二级标题</h2>
<h3>三级标题</h3>
 <h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

 <p>王老师是Java讲师,朱老师是Java讲师</p>            新段落

<img src="img/bd_logo1.png"/>                                导入照片

<br /> <!-- 换行 -->

 <a href="http://www.baidu.com" target="_blank">超链接跳转到Baidu</a>     超链接

  <hr /> <!-- 水平线 -->

<!-- 无序列表 ul=unordered list

         li=list item

      -->

<!-- ol=ordered list -->      有序列表

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Hello Html!!!!</title>
   </head>
   <body>
      <!-- 标题 headline -->
      <h1>一级标题</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
      <h4>四级标题</h4>
      <h5>五级标题</h5>
      <h6>六级标题</h6>
      <!-- p=paragraph -->
      <p>京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官 [1]  。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。</p>
      <p>王老师是Java讲师,朱老师是Java讲师</p>
      <img src="img/bd_logo1.png"/>
      <img src="img/bd_logo1.png" width="100px" height="100px"></img>
      <img src="img/bd_logo1.png" width="100px" height="100px"/>
      <br /> <!-- 换行 -->
      <!-- a 超链接
         target="_blank" 在新窗口打开
        -->
      <a href="http://www.baidu.com" target="_blank">超链接跳转到Baidu</a>
      
      <hr /> <!-- 水平线 -->
      
      <!-- 无序列表 ul=unordered list
         li=list item
      -->
      <ul>
         <li>北京</li>
         <li>深圳</li>
         <li>上海</li>
         <li>广州</li>
      </ul>
      <!-- ol=ordered list -->
      <ol>
         <li>北京</li>
         <li>上海</li>
         <li>广州</li>
         <li>深圳</li>
      </ol>
      <!-- 无序列表和有序列表可以嵌套 -->
      <ul>
         <li>北京</li>
         <li>上海</li>
         <li>广州</li>
         <li>深圳</li>
         <li>
           山东
           <ol>
              <li>青岛</li>
              <li>济南</li>
              <li>烟台</li>
           </ol>
         </li>
      </ul>
   </body>
</html>

网页举例：

 

div division :

div里面所有的元素都在div区域里面

代码：

<html>
   <head>
      <meta charset="UTF-8">
      <title>京东百科</title>
   </head>
   <body>
      <div align="center">
         <div>
           <img src="img/bd_logo1.png" width="200px" height="200px"/>
         </div>
         <div style="color: red;width: 1000px;">
           京东是中国的综合网络零售商，是中国电子商务领域受消费者欢迎和具有影响力的电子商务网站之一，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等12大类数万个品牌百万种优质商品。京东在2012年的中国自营B2C市场占据49%的份额，凭借全供应链继续扩大在中国电子商务市场的优势。京东已经建立华北、华东、华南、西南、华中、东北六大物流中心，同时在全国超过360座城市建立核心城市配送站。2012年8月14日，京东与苏宁开打"史上最惨烈价格战" 。2013年3月30日19点整正式切换了域名，并且更换新的logo [1]  。
           2018年1月11日，刘强东发出内部邮件，宣布京东商城将组建大快消事业群、电子文娱事业群和时尚生活事业群，并分别任命王笑松、闫小兵、胡胜利为三大事业群总裁并升任京东集团高级副总裁。 [2-3]
           2018年3月，北京市消协官网显示，北京市消协2017年在京东商城购买74种比较试验样品，其中有33种不达标，不达标率为44.6%。
         </div>
         <div style="color: blue;width: 1000px;">
           互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155
           Copyright © 2004 - 2019  京东JD.com 版权所有|消费者维权热线：4006067733经营证照|(京)网械平台备字(2018)第00003号|营业执照         
         </div>
      </div>
   </body>
</html>

网页： 

空格折叠现象

<div>

   <!-- 空格折叠现象

     普通的空格在html里面如果连续出现多个会被当成一个空格，

     如果想显示多个连续的空格就需要使用特殊的符号

     &nbsp;    Non-breaking Space

   -->

   锄禾日当&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;午<br/>

   汗滴禾下&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;土<br/>

   谁知盘中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;餐<br/>

   粒粒皆辛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;苦<br/>

</div>  

其他：

&lt;    less than    <

&gt;    great than   >

&copy;  ©

&lt;h1&gt;  在html页面输出： <h1>

span

span:功能类似于div，但是不能独占一行

块级元素：单独成为一行。h、ul、ol、div

行内元素：不能独占一行。img、a、span、input

u(underline):下划线

i(italic):斜体

b(bold):粗体

例：

<span><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span>

 表格

th:table head

tr:table row

td:table data 单元格

 代码：

1.

<body>
      <!--border：边框   cellspacing：单元格间隙-->
      <table border="1" cellspacing="0" width="400px">
         <tr>
            <th>讲师名称</th>
            <th>所教班级</th>
         </tr>
         <tr>
            <td>朱老师</td>
            <td>Java1812</td>
         </tr>
         <tr>
            <td>鞠老师</td>
            <td>H51812</td>
         </tr>
         <tr>
            <td>秦老师</td>
            <td>UI1812</td>
         </tr>
      </table>
   </body>

2.

<table border="1" cellspacing="0" width="400px">
   <tr>
      <th>讲师名称</th>
      <th>所教班级</th>
   </tr>
   <tr>
      <td rowspan="2">朱老师</td>
      <td>Java1812</td>
   </tr>
   <tr>
      <!--<td>鞠老师</td>-->
      <td>H51812</td>
   </tr>
   <tr>
      <td>秦老师</td>
      <td>UI1812</td>
   </tr>
</table>

 3.

<table border="1" cellspacing="0" width="400px">
   <tr>
      <th>讲师名称</th>
      <th>所教班级</th>
   </tr>
   <tr>
      <td colspan="2">朱老师</td>
      <!--<td>Java1812</td>-->
   </tr>
   <tr>
      <td>鞠老师</td>
      <td>H51812</td>
   </tr>
   <tr>
      <td>秦老师</td>
      <td>UI1812</td>
   </tr>
</table>

form表单

form表单相关的标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" >
			<table border="1" cellspacing="0" cellpadding="">
				<tr>
					<th>用户名：	</th> 
					<td>
						<input type="text" name="" id="" value="张三" />
					</td>
				</tr>
				<tr>
					<th>密码	</th>
					<td>
						<input type="password" name="" id="" value="" />
					</td>
				</tr>
				<tr>
					<th>性别	</th>
					<td>
						<input type="radio" name="gender" id="" value="" />男
						<input type="radio" name="gender" id="" value="" checked="true"/>女
						<input type="radio" name="gender" id="" value="" />未知
					</td>
					
				</tr>
				<tr>
					<td>城市</td>
					<td>
						<select name="">
							<option value="">---请选择---</option>
							<option value="">---青岛---</option>
							<option value="">---济南---</option>
							<option value="">---烟台---</option>
						</select>
					</td>
				</tr>
				
				<tr>
					<td>兴趣爱好</td>
					<td>
						<input type="checkbox" namebox="" id="" value="" />音乐<br/>
						<input type="checkbox" namebox="" id="" value="" />看书<br/>
						<input type="checkbox" namebox="" id="" value="" />爬山<br/>
					</td>
				</tr>
				<tr>
					<td>自我介绍</td>
					<td>
						<textarea rows="" cols="">我嫩爹</textarea>
					</td>
				</tr>
				
				<tr>
					<td colspan="2">
						<input type="checkbox" name="" id="" value="" />同意该协议
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" name="" id="" value="提交" />
					</td>
					<td>
						<input type="reset" name="" id="" value="重置" />
					</td>
				</tr>
			</table>
	<!-- 		用户名：<input type="text" name="" id="" value="" />
			<br/>
			密码：<input type="password" name="" id="" value="" /> -->

		</form>
	</body>
</html>


练习：

作业：

1、完成如下效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>统一建模语言理论考试</h1>
		<h3>考试科目：统一建模语言</h3>
		<h3>时间：100分钟</h3>
		<h3>得分：</h3>
		<table >
		<tr>
			<th>班级（必填）：</th>
			<td>
				<input type="text" name="" id="" value="" />
			</td>
		</tr>
		
		<tr>
			<th>学号（必填）：</th>
			<td>
				<input type="text" name="" id="" value="" />
			</td>
		</tr>
		
		<tr>
			<th>姓名（必填）：</th>
			<td>
				<input type="text" name="" id="" value="" />
			</td>
		</tr>
		</table>
		<h3>一、填空题（每空五分，共20分）</h3>
		<tr>
			<td>
				1.UML的中文全称是：
			</td>
			<br/>
			<td>
				<input type="text" name="" id="" value="" />
			</td>
		</tr>
		<br/>
		<tr>
			<td>
				2.对象的突出特征是：
			</td>
			<br/>
			<td>
				<input type="text" name="" id="" value="" />
				<input type="text" name="" id="" value="" />
				<input type="text" name="" id="" value="" />
			</td>
		</tr>
		<h3>二、选择题（每空10分，共20分）</h3>
		<tr>
			<td>1.UML与软件工程的关系是：</td>
			<br/>
			<td>
				<input type="radio" name="t1" id="" value="" />(A)UML就是软件工程  <br>
				<input type="radio" name="t1" id="" value="" />(B)UML参与到软件工程中软件开发的几个阶段<br>
				<input type="radio" name="t1" id="" value="" />(C)UML与软件工程无关<br>
				<input type="radio" name="t1" id="" value="" />(D)UML是软件工程中的一部分<br>

			</td>
		</tr>
		
		<tr>
			<td>2.Java语言支持：</td>
			<br/>
			<td>
				<input type="radio" name="t1" id="" value="" />(A)单继承 <br>
				<input type="radio" name="t1" id="" value="" />(B)多继承<br>
				<input type="radio" name="t1" id="" value="" />(C)单继承和多继承都支持 <br>
				<input type="radio" name="t1" id="" value="" />(D)单继承和多继承都不支持<br>
		
			</td>
		</tr>
		
		<h3>三、多项选择题（每空10分，共20分）</h3>
		<tr>
			<td>1.用例的粒度分为以下哪三种:</td>
			<br/>
			<td>
				<input type="checkbox" name="" id="" value="" />(A)概述级<br>
				<input type="checkbox" name="" id="" value="" />(B)需求级<br>
				<input type="checkbox" name="" id="" value="" />(C)用户目标级<br>
				<input type="checkbox" name="" id="" value="" />(D)子功能级<br>
			</td>
		</tr>
		<tr>
			<td>2.类图由以下哪三部分组成:</td>
			<br/>
			<td>
				<input type="checkbox" name="" id="" value="" />(A)名称( Name )<br>
				<input type="checkbox" name="" id="" value="" />(B)属性( Attribute )<br>
				<input type="checkbox" name="" id="" value="" />(C)操作( OPration )<br>
				<input type="checkbox" name="" id="" value="" />(D)方法( Function )<br>
			</td>
		</tr>
		
		<h3>四、判断题（每空10分，共20分）</h3>
		<tr>
			<td>1.用例图只是用于和客户交流和共同的,用于确定需求。</td>
			<input type="radio" name="t1" id="" value="" />true
			<input type="radio" name="t1" id="" value="" />false
			
		</tr>
		<h3>五、简答题（每空10分，共20分）</h3>
		<tr>
			<td>1.简述什么是模型以及模型的表现形式?</td>
			<td><textarea rows="" cols=""></textarea></td>
		</tr>
		<br/>
		<br/>
		<!-- <button type="button">计算成绩</button> -->
		<tr>
			<td>
				<input type="submit" name="" id="" value="计算成绩" />
			</td>
		</tr>
	</body>
</html>

2、完成如下效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="">
			<tr>
				<th rowspan="2">缴费项目</th><th rowspan="2">社保基数</th>
				<th colspan="2">个人缴纳</th><th colspan="2">企业缴纳</th>
			</tr>
			<tr>
				<th>缴纳比例</th><th>缴纳金额</th><th>缴纳比例</th><th>缴纳金额</th>
			</tr>
			<tr>
				<td>养老保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
			</tr>
			<tr>
				<td>失业保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
			</tr>
			<tr>
				<td>工伤保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
			</tr>
			<tr>
				<td>生育保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
			</tr>
			<tr>
				<td>医疗保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
			</tr>
			<tr>
				<td>公积金</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
			</tr>
			<tr>
				<td></td><td></td><td>个人共缴纳</td><td>527.53</td><td>企业共缴纳</td><td>527.53</td>
			</tr>
		</table>
		
	</body>
</html>

嘟嘟°深深的眷恋づ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML（三）
Toxic_Girl的博客
10-28 306
（接第二周）
HTML基础（三）
weixin_45455252的博客
07-18 639
文章目录
注册页面html代码省份,html form表单实现注册页面
weixin_35474542的博客
06-03 693
#浏览器向服务器提交数据的两种方式：form表单，Ajax，form表单是将数据统一打包发送给server，而Ajax是填写一条数据就发送一次，做一次验证Title注册页面 #action指定表单提交的server端的路径，每一个路径都有一个处理的函数,method是提交方式，默认get，get是提交到表头，post是提交到里面,enctype="multipart/form-data"分段往...
js省级联动
aimaonu2505的博客
02-16 1769
1.webform页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Sslt.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http...
Android中Menu的基本用法
热门推荐
BerMaker
05-21 10万+
一、 使用xml定义Menu 菜单资源文件必须放在res/menu目录中。菜单资源文件必须使用标签作为根节点。除了标签外，还有另外两个标签用于设置菜单项和分组，这两个标签是和。 标签没有任何属性，但可以嵌套在标签中，表示子菜单的形式。不过标签中不能再嵌入标签。 1.标签的属性含义如下: Id：表示菜单项的资源ID menuCategory：同种菜单项的种类。该属性可取4个值：contai
RSS ＜item＞ 元素用法
gzxiaomei的博客
10-22 306
正如前面提到的，每个 <item> 元素可定义 RSS feed 中的一篇文章或 story"。 <item> 元素拥有三个必需的子元素： <title> - 定义项目的标题。（比如 RSS 教程） <link> - 定义到达项目的超链接。（比如 http://www.dgyuewei.cn/rss） <description> - 描述此项目（比如 菜鸟教程 Rss 教程） 此外，存在若干个 <item> 的可选的子元素，我们会在
android xml一次添加多个<item>元素标签,《Android编程权威指南》第21、23~25章读书笔记...
weixin_30290131的博客
05-26 450
隐式Intent隐式Intent可以启动其它应用的Activity。使用隐式Intent需要向OS描述清楚意图。典型组成：1.要执行的操作通常以Intent类常量来表示。如发送邮件，使用INTENT_SEND；2.要访问的数据的位置可能是设备外的资源，如某个网页的URL；或者指向某个文件的URI；或者指向ContentProvider中某条记录的content URI；3.操作涉及的数据类型MIM...
十三种html的loading样式
11-03
下面将详细介绍十三种常见的HTML loading样式及其相关知识点： 1. **纯文本样式**：最基础的加载样式，如“加载中...”，可以通过CSS控制文字颜色、大小、动画效果等。 2. **旋转图标**：例如经典的加载小菊花，...
九十三
02-14
【标题】"九十三"可能是指某个特定的项目版本或者编码编号，但在这个上下文中，没有足够的信息来详细解释这个标题的含义。然而，既然标签是"HTML"，我们可以聚焦在HTML（超文本标记语言）这个广泛使用的网页制作语言...
三十八款HTML动态壁纸壁纸源码.zip
最新发布
09-03
本压缩包“三十八款HTML动态壁纸壁纸源码.zip”包含了三十八个不同的HTML动态壁纸设计，涵盖了各种风格和主题，是学习和应用HTML5动画效果的良好资源。 1. **HTML基础知识**：HTML（超文本标记语言）是网页内容的...
html好看的登录页面1（十三种风格登录源码）
06-15
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有...
十三、JSP动作
01-08
利用JSP动作可以动态地插入文件、重用JavaBean组件、把用户重定向到另外的页面、为Java插件生成HTML代码。 JSP动作包括： jsp:include：在页面被请求的时候引入一个文件。 jsp:useBean：寻找或者实例化一个JavaBean...
【HTML】HTML 表单 ① ( input 表单控件 | input 标签语法 | input 标签属性 | type 属性 | value 属性 | name 属性 | checked 属性 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-22 4255
一、HTML 表单 二、input 表单控件 1、input 标签语法 2、input 标签属性 3、type 属性 5、value 属性 6、name 属性 7、checked 属性
初学前端开发——HTML
lucasde的博客
04-26 379
使用表单的目的是为了收集用户信息在我们网页中，我们也需要跟用户进行交互，手机用户资料，此时就需要表单。
手拉手一起学HTML(下)——表格标签和列表标签，表单标签
weixin_68773927的博客
11-09 2663
一.表格标签1.1表格的主要作用1.2表格的基本语法 1.3表头单元格标签1.4表格属性1.6合并单元格（把多个单元格合并成一个单元格） 二.列表标签2.1无序列表2.2有序列表2.3自定义列表（重点）3.表单标签3.1为什么需要表单3.2表单的组成 3.3表单域是一个包含扁担元素的区域3.4表单控制(表单元素）3.4.1 input 表单元素 3.4.2 标签3.4.3 select 下拉表单元素3.4.4表单元素 表格是实际开发中非常常用的标签
HTML表单（属性/元素/输入类型/输入属性）：看这一篇就够了
Vec_Kun的博客
02-09 3120
autocomplete 属性适用于 以及如下 类型：text、search、url、tel、email、password、datepickers、range 以及 color。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.formmethod 属性适用于 type="submit" 以及 type="image"。
前端HTML<form>表单的属性和使用
冯小东
10-06 2万+
1.表单的作用 表单用于显示、收集信息，并将信息提交给服务器 2.表单的元素 1、语法                                    允许出现表单控件                          2、属性                1、action                     定义表单被提交时发生的动作
解决IDEA控制台无法输入问题
qq_43800904的博客
07-28 3927
解决 IDEA控制台中不能输入数据 idea控制台不能输入 如果在使用IDEA中,发现在使用junit测试的时候,不能在控制台进行输入,则需要进行如下的修改,即可配置成功 第一步:工具类中help --Edit Constom VM Options… 第二步: 打开配置,添加-Deditable.java.test.console=true 配置成功,重新启动IDEA,问题即可解决 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值