JavaWEB一：HTML

已于 2022-02-21 23:02:02 修改
阅读量824 收藏 7
点赞数
分类专栏： JavaWEB 文章标签： html css css3
于 2022-02-09 14:10:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/N_ZSX/article/details/122840793
版权

HTML

一、HTML语法
  1. heml页面由一对标签组成
    <html>： 开始标签
</html>：结束标签
  2. title 表示网页的标题
    <title>： 开始标签
</title>：结束标签
<meta charset="编码格式">：设置编码格式
  3. 单标签

    开始标签和结束标签是同一个，斜杠放在单词后

    <br/>：表示换行
<hr/>：输出一条横线
  4. 段落

    不仅会自动换行，且段与段之间有段间距

    <p>： 开始标签
</p>：结束标签
  5. 图片
    <img src="图片路径" width="图片宽度" height="图片高度" alt="图片提示"/>
  6. 标题

    h1~h6：共有6个标题级别

    <h1>： 开始标签
</h1>：结束标签
  7. 列表
    <li>每个列表内容</li>

    7.1 有序列表

    <ol type="序号类型" start="开始值">
	type：A，a，I，1（大小写字母、罗马数字、阿拉伯数字(默认)）
	<ol>： 开始标签
	</ol>：结束标签

    7.2 无序列表

    <ul type="无序标识类型">
	type：disc(黑点 黑点●，默认)、circle(圆圈○)、square(方块■)
	<ul>： 开始标签
	</ul>：结束标签
  8. 单词的设置
    u 下划线 b 粗体 i 斜体 sup 上标 sub 下标
  9. 实体

    参考w3school中课程：HTML 字符实体

    小于：&lt
大于等于：&ge
版权：&copy
注册商标：&reg
  10. 块
    <span>这里面放着的是需要单独处理的内容</span>
  11. 超链接
    <a href="超链接的地址" target="打开位置">超链接的文字显示</a>
	
target:
		_self：在本窗口打开
		_blank：在新窗口打开
		_parent：在父窗口打开
		_top：在顶层打开
  12. 层
    <html>	
	<head>		
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				position:absolute;
			}
			#div1{
				background-color:#AF8;
				left:0px;
				top:0px;

			}
			#div2{
				background-color:#8BC;
				left:100px;
				top:100px;
			}
			#div3{
				background-color:#FF8;
				left:200px;
				top:200px
			}

		</style>
	</head>
    
    <body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
	</body>
</html>
二、1~11的举例
  •   <html>
  	<head>
  		<title>第一个网页（网页标题）</title>
  		<meta charset="UTF-8">
  	</head>
  	<body>
  		HELLO WORLD!<br/>你好，HTML!
  		<p>第一个段落</p>
  		<p>第二个段落</p>
  		<img src="F:\Java\JavaWEB\前端技术\girl.jpg" width="100" height="140" alt="girl"/>
  
  		<h1>第一标题</h1>
  		<h2>第二标题</h2>
  		<h3>第三标题</h3>
  		<h4>第四标题</h4>
  		<h5>第五标题</h5>
  		<h6>第六标题</h6>
  		<ol type="a" start="2">
  			<li>如来</li>
  			<li>孙悟空</li>
  			<li>观音</li>
  		</ol>
  		<ul>
  			<li>乔峰</li>
  			<li>阿朱</li>
  			<li>段誉</li>
  		</ul>
  		你是<u><b><i>喜欢</i></b></u>吃甜月饼还是<u>咸</u>月饼呢
  
  		<a href="https://www.baidu.com">百度一下</a>
  	</body>
  </html>
三、表格
  1. table：表

    border：默认为0，指表格无框线，设为1，指表格有框线
    cellspacing：设置单元格的间距，如果为0，表格间无间隙
    cellpadding：设置表格内的填充

  2. tr：行

    align：对齐格式

  3. th/td：列

    rowspan=“数量”：合并该数量的列
    colspan=“数量”：合并该数量的行

  4. 代码示例
    <html>
	<head>
		<title>表格标签的学习</title>
		<meta  charset="UTF-8">
	</head>
	<body>
		<table border="1" width="600" cellspacing="0" cellpadding="4">
			<tr>
				<th>姓名</th>
				<th>门派</th>
				<th>成名绝技</th>
				<th>内功值</th>
			</tr>
			<tr align="center">
				<td>乔峰</td>
				<td>丐帮</td>
				<td>降龙十八掌</td>
				<td>50000</td>
			</tr>
			<tr align="center">
				<td>虚竹</td>
				<td>灵鹫宫</td>
				<td>北冥神功</td>
				<td>150000</td>
			</tr>
			<tr align="center">
				<td>扫地僧</td>
				<td>少林寺</td>
				<td>七十二绝技</td>
				<td>1000000</td>
			</tr>
		</table>
		<hr/>
		<table border="1" width="600" cellspacing="0" cellpadding="4">
			<tr>
				<th>名称</th>
				<th>数量</th>
				<th>单价</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr align="center">
				<td>苹果</td>
				<td>15</td>
				<td rowspan="2">5</td>
				<td>75</td>
				<td><img src="删除图标.jpg" width="10" height="15"/></td>
			</tr>
			<tr align="center">
				<td>西瓜</td>
				<td>7</td>				
				<td>63</td>
				<td><img src="删除图标.jpg" width="10" height="15"/></td>
			</tr>			
			<tr align="center">
				<td>总计</td>
				<td colspan="4">181</td>				
			</tr>
		</table>
	</body>
</html>
四、表单
  1. 关键字：form
    <!-- 1.1 文本框 -->
<input type="text" name="自定义名称" value="输入你的名称"/>
input type="text"：表示文本框
name：该属性必须指定，不然会报错，否则这个文本框的数据将不会发送给服务器

    <!-- 1.2 密码框 -->
<input type="password" name="pwd"/>
input type="password"：表示密码框

    <!-- 1.3 单选框 -->
<input type="radio" name="gender" value="male"/>男
input type="radio"：表示单选按钮
name：name的属性值必须保持一致，这样才会达到互斥的效果

    <!-- 1.4 复选框 -->
<input type="checkbox" name="hobby" value="basketball"/>篮球
input type="checkbox"：表示复选框
name属性建议保持一致，将来服务端获取值的时候获取的是一个数组

    <!-- 1.5 下拉列表 -->
<select name="star">
	<option value="1">白羊座</option>
    <option value="2">金牛座</option>
	<option value="3">双子座</option>
</select>
select：表示下拉列表
option：每一个选项
selected：默认

    <!-- 1.6 多行文本框 -->
<textarea name="remark" rows="4" cols="50"></textarea>
textarea：表示多行文本框(或称之为文本域)

    <!-- 1.7 按钮 -->
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>
input type="submit"：表示提交按钮
input type="reset"：	表示重置按钮
input type="button"：表示普通按钮
  2. 表单的整体程序示例

    demo3.html

    <html>
	<head>
		<title>表单标签的学习</title>
		<meta  charset="UTF-8">
	</head>
	<body>
		<form action="demo4.html" method="post">
			昵称：<input type="text" name="nickName" value="请输入你的昵称"/><br/>
			密码：<input type="password" name="pwd"/><br/>
			性别：<input type="radio" name="gender" value="male"/>男
				  <input type="radio" name="gender" value="female"/>女<br/>
			爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
				  <input type="checkbox" name="hobby" value="football"/>足球
				  <input type="checkbox" name="hobby" value="earth"/>地球<br/>
			星座：<select name="star">
					<option value="1">白羊座</option>
					<option value="2" selected>金牛座</option>
					<option value="3">双子座</option>
					<option value="4">天蝎座</option>
					<option value="5">天平座</option>
				  </select><br/>
			备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
			<input type="submit" value="注册"/>
			<input type="reset" value="重置"/>
			<input type="button" value="普通按钮"/>
		</form>
	</body>
</html>

    demo4.html

    <html>
	<head>
		<title>表单标签的学习</title>
		<meta  charset="UTF-8">
	</head>
	<body>
		<h1><font color='red'>注册成功</font></h1>
	</body>
</html>
  3. 显示效果

    在这里插入图片描述

e_nanxu
关注
专栏目录
JavaWeb前端——HTML-2——HTML属性、HTML标题、HTML段落、HTML 输出
晃在云淡风轻
02-25 285
HTML属性 HTML标签可以拥有属性。属性提供了有关HTML元素的跟多的信息。 属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在HTML元素的开始标签中规定。 比如我们可以通过添加属性把一行文字居中： &lt;h1 align="center" &gt;这是一个居中的一级标题&lt;h1&gt; 我们也可以用同样的方式给网页添加背景： &lt;body bgcolor...
JavaWeb之HTML
qq_41911251的博客
12-14 822
HTML 01:初识HTML HTML Hyper Text Markup Language 超文本标记语言 超文本：文字、图片、音频、视频、动画等 W3C标准 World Wide Web Consortium（万维网联盟）是Web技术领域中立性技术标准机构 W3C标准包括： ​ 结构化标准语言(HTML、XML) ​ 表现标准语言(CSS) ​ 行为标准(DOM、ECMAScript) 常见IDE： 记事本 Dreamweaver IDEA WebStorm HTML02:网页
Web Css 绘制横线
weixin_34342992的博客
12-27 2078
2019独角兽企业重金招聘Python工程师标准>>> ...
前端设置一条横线样式,文字中设置一条横线
m0_74444744的博客
08-02 877
开发中设置横线,或给文字增加一条横线代表弃用效果样式
jsplumb 实现网页高亮文本连线 - 文本标注
Charonmomo的博客
11-22 3379
关于网页文本高亮的详细内容, 可以参考我之前的两篇文章, 详细记录了我实现网页文本高亮的过程: 文本标记1 - 高亮标记多个指定位置的文本 文本标记2 - 用户从网页上选择文本高亮 本篇文章主要介绍的是如何在网页中实现几个文本之间的连线和标注. 类似下面图片展示的功能: 最初看到这个需求时一头雾水, 没有什么思路. GitHub上查到的代码参考的价值也不是很大. 好在查了一天资料以后, 主要确定了两种实现方式: jsplumb 插件 (大体功能能实现, 但网上对于jsplumb的介绍大多都是针对流程图的
JavaWeb系列一: HTML
09-05
JavaWeb系列一: HTML
javaweb课设：网上书城
01-11
本项目是一个基于JavaWeb技术的在线书店系统，适合初学者进行实践学习，特别是对Java和HTML有一定基础但经验不足一年的开发者。这个项目不仅提供了基本的图书浏览、搜索、购买等功能，还包含了用户注册与登录、...
《融资管理系统》JavaWeb项目：HTML、JavaScript、CSS、JDBC、三层架构、Tomcat
最新发布
09-17
项目概述：电子债权凭证管理系统是一项JavaWeb项目，旨在提供企业凭证融资、凭证管理和详细查询功能，满足企业对现金流的管理需求； 主要功能：通过凭证进行融资、融资列表、融资详情、凭证列表、凭证详情、分页显示...
管理系统系列--javaweb项目：校园宿舍管理系统.zip
02-25
这个项目是一个基于JavaWeb技术的校园宿舍管理系统，旨在解决高校中宿舍管理的问题。JavaWeb是Java技术在Web开发中的应用，它结合了Servlet、JSP（JavaServer Pages）、JSTL（JavaServer Pages Standard Tag Library...
JavaWeb:JavaWeb
05-02
JSP是一种动态网页技术，它允许将静态内容（HTML、CSS、JavaScript）与动态Java代码混合在一起。JSP页面在服务器端被转换为Servlet，然后编译执行。JSP标签、脚本元素和EL（Expression Language）是其主要组成部分...
css实现中间文字 两端横线的两种方法
weixin_39060799的博客
10-25 7326
效果图 代码 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;a
在HTML中画一条横线
热门推荐
syq8023的博客
06-20 13万+
怎么画一条横线？我想到的有三种方法，但是各自样式不一，所以大家按需求来哦。 1.<hr />标签，对的，这个标签就代表一条横线，样式大概是这样的，如图（a与b之间哦）： <html> <head></head> <body> <div&g...
【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件
Coder的不平凡
10-02 1万+
首先大家国庆节快乐啊~~~ 这是我第一个在省外的国庆节，毕竟今年毕业了哇，奋斗的我们要加油~~~ 最近我会不断总结上一个WEB项目所用到的前端知识，和大家一起分享哈~~~在HTML中画一条横线和IE10支持引用的CSS文件
Web第一次作业复习准备
grandniu的博客
09-29 1万+
一、填空题 1.Web标准是一系列标准的集合，主要包括结构、表现和结构。 2.HTML中文译为超文本标记语言，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 3.HTML语言主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 4.网页的根标记是html，主体标记是body，标题标记是title。 要用尖括号和/来表示 5.尖括号!DOCTYPE尖括号标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。 6.尖括号img/尖括号标签
html加横线代码,Web前端
weixin_34486987的博客
06-07 1320
课程主题HTML5基础、CSS3基础、切图、综合项目：小U课堂、HTML5进阶、 CSS3进阶、综合项目：小U商城、综合项目：响应式布局实战项目PC端项目：小U课堂静态页面布局、移动端项目：小U商城移动端项目、响应式项目：小U商城后台管理系统培养方向1.熟练使用前端开发IDE:vscode编辑器；2.掌握HTML5基础和HTML5进阶中的常用标签；3.掌握CSS基本语法和文字字体属性；4.掌握盒模...
html中横线使用
美妙_perfect
09-21 4万+
第一种： &lt;hr style=" height:2px;border:none;border-top:2px dotted #185598;" /&gt; 园点虚线 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted 虚线 #185598 颜色 第二种： &lt;hr...
html5添加下划线虚线,web中添加下划线的方法及优缺点
weixin_42515340的博客
06-10 3321
有很多种添加下划线样式的方法。可能你还记得《Crafting link underlines on Medium》这篇文章。Medium 并没有尝试特殊的方法，只是想创建一个漂亮的看起来正常的下划线。一条纤细的黑色下划线并且与下行字母有间隙——引自 Marcin Wichary 的《 Crafting link underlines on Medium 》这是基本的下划线样式，但是尺寸适中并且避开...
7种方式实现web下划线
weixin_34088598的博客
11-01 5303
本文来自css-tricks，介绍了在不同的场景下实现下划线的7种方式。 简介 有许多种不同的方式来实现下划线，你也许还记得Crafting link underlines on Medium这篇文章。Medium也不是想做什么疯狂的事情，他们只是想让他们的文字下面好看一点。 这是一条基本的下划线，它大小合适。绝对比浏览器的默认样式好看的...
html竖直线代码,html添加一条直线 用html代码怎样画一条竖直线？
weixin_35891744的博客
05-30 8414
需要准备的材料分别有：电脑、chrome浏览器、html编辑器。首先打开html编辑器，新建一个html文件，例如：index.html。其次，在index.html的标签中，添加代码：。浏览器运行index.html页面，此时成功在html中画了一条线。在html静态页面中，用哪个标签插入一条直线？html代码中:如何输入一条长长的横线呀?用input页面标签 并将下Border设为直线 inp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

e_nanxu

感恩每一份鼓励-相逢何必曾相识

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值