浅谈JavaWeb之HTML

最新推荐文章于 2023-11-15 21:38:37 发布

浅汐yt

最新推荐文章于 2023-11-15 21:38:37 发布

阅读量410

点赞数

分类专栏： Java html 文章标签： java html

本文链接：https://blog.csdn.net/qq_45437546/article/details/104160453

版权

Java 同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

HTML

1. 第一个HTML程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-HelloHTML</title>
</head>
<body>
Hello HTML
</body>
</html>

2. HTML介绍

HTML HyperText Markup Language 
	超文件标记语言
	
HTML标记语言是由W3C组织明确标准的。
	<b></b> <strong></strong>
	HTML5

HTML5标准的制定者
	谷歌浏览器，火狐浏览器，欧朋，Safari，IE，Edge
	可以使用360极速版浏览器

3. HTML标签规则

双边标签
	<body></body>
	开始标签和结尾标签组成，结尾标签有</>标记
单边标签
	<meta charset="UTF-8" />
	一个标签结束，通常情况下会存在 /> 结尾
HTML标签是可以带有属性的
	charset="UTF-8" 告知当前页面的解析使用编码集为UTF-8
	属性="值" or 属性='值' or 属性=值

HTML结构标签
<!DOCTYPE HTML>
<HTML>
    <head>
    	头标签
    	可以设置当前页面的解析编码集，页面关键字，页面描述，标题,JS引入，CSS
    	引入...
    </head>
    <body>
    	指整个页面
    </body>
</HTML>

4. HTML标签

4.1 meta标签和标题标签

<meta charset='UTF-8'>
	meta标签是一个多功能标签
	charset 编码集设置
	description 页面描述
	keywords 关键字
	
<title>01-HelloHTML</title>
	整个页面的标题，标题有时候也用于SEO优化

4.2 文本标签[已淘汰]

<!-- font标签已淘汰 -->
<font color="#9acd32" face="宋体" size="7">赛赛说他太年轻</font> <br>
<!--
HTML中颜色可以选择多个样式
    1. 英文 yellowgreen
    2. RGB Red Green Blue
        0 ~ 255 0 ~ 255 0 ~ 255
        #9acd32
        RGB(154, 205, 50)
-->
<!--
h1 ~ h6 都是可以用于文本标题的标签
    1. 字体加粗
    2. 文本默认换行
    3. 一般情况下，为了更好的SEO优化，这里推荐h1标签一个页面中有且只有
    一个
-->
<h1>黄焖鸡</h1>
<h2>热干面</h2>
<h3>蛋炒饭</h3>
<h4>香辣虾</h4>
<h5>肉蟹煲</h5>
<h6>冰淇淋</h6>

4.3 排版标签

<!-- 段落标签 -->
<p>
    团聚时，你选择告别并逆行；困惑时，你选择直面和公开；畏惧时，你选择坚守与担当。这一刻，你选择善意；这一刻，有你，才有胜利！
</p>
<!-- 行内标签 一般用于文本提示 -->
<span>疯狂动物城</span>
<span>星际穿越</span>
<span>霸王别姬</span>
<span>窃听风暴</span>
<span>末代皇帝</span>
<span>指环王</span>

<!--
无意义标签，但是非常重要！！！ table + HTML ==> DIV + CSS
块标签 单独成行
-->
<div>教父</div>
<div>海豚湾</div>
<div>忠犬八公</div>
<div>楚门的世界</div>

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

4.4 a链接标签

<!--
target 属性选择
    _self 表示当前页面打开新链接
    _blank 表示新标签页打开新链接
-->
<a href="https://www.baidu.com" target="_self">百度一下~~~</a> <br>
<a href="https://www.jd.com">JD.com</a> <br>
<a href="https://www.taobao.com" target="_blank">淘你喜欢</a>

<!-- 锚点 -->
<font><a href="#middle">去中间</a></font>
<a name="top"></a>
<font><a href="#bottom">去底部</a></font>

<font size="7" color="#9acd32"><a href="#top">回顶部</a></font>
<a name="middle"></a>
<font size="7" color="#9acd32"><a href="#bottom">去末尾</a></font>

<font><a href="#top">回到顶部</a></font>
<a name="bottom"></a>
<font><a href="#middle">回到中间</a></font>

4.5 列表

有序列表
	ol
无序列表
	ul
列表元素
	li
<!--
type属性修改列表样式
    square 方块
    desc 默认实心圆
    circle 空心圆
    none 什么都没有，用到比较多
-->
<ul type="none">
    <li>这个杀手不太冷</li>
    <li>黑客帝国</li>
    <li>盗梦空间</li>
    <li>泰坦尼克号</li>
    <li>辛德勒的名单</li>
</ul>

<!--
type 样式
    a A i I 1
start 可以设置从哪里开始
-->
<ol type="a" start="3">
    <li>罗马假日</li>
    <li>狮子王</li>
    <li>少年派的奇幻漂流</li>
    <li>死亡诗社</li>
    <li>拯救大兵瑞恩</li>
</ol>

4.6 img标签

<!--
src图片路径
    可以选择本地/本服务器路径
    也可以选择远程路径
-->
<img src="img/a.jpeg" width="200px" height="200px">
<img src="http://image.bitautoimg.com/a.jpg" alt="">

4.7 audio音频标签

<audio src="http://music.163.com/song/media/outer/url?id=30953009.mp3" controls loop></audio>

4.8 video使用标签

<video src="video/a.mp4" controls></video>

4.9 table表格

<!--
table 表格标签
tr 行
td 列
th 表头，默认加粗，居中

rowspan 行合并
colspan 列合并
-->
<table width="600px" align="center" border="1px">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="2">2</td>
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
</table>

5. form表单【重点】

<!--
从HTML前端页面中提交数据到后台的一种方式
method: 提交方式
action: 提交数据的目标地址

method: 提交方式
	get：
		通过URL参数传递
		1. 数据通过URL参数传递，从URL ? 开始，之后都是键值对形式的参数，
		不同的参数使用&分割
		login.do?name=骚磊&password=123456
		
		2. 方式不安全，全部明文操作 适用于 搜索功能
		3. 传输数据容量有限制 2KB
		4. 传输数据较快

	post：
		通过请求实体传递
		1. 通过请求实体传递，实际内容和URL参数内容一直，但是需要通过浏览器
		开发者工具查看
		2. 方式较为安全，可以使用一些JS脚本安全插件，加密处理
		3. 传输数据容量可以认为没有限制，上传视频音频都是POST请求，适用于 
		添加，删除，修改操作
		4. 传输速度较慢

input标签	
	核心 type属性
		text 明文文本，缺省属性
		password 密码，密文
		submit 提交
		radio 单选 【注意】 要求name属性完全一致
		checkbox 多选 
		file 文件

select 下拉操作
	option 菜单选择

textarea 文本输入框

默认选择:
	单选 raido 多选 checkbox checked
	下拉菜单 option select

form数据提交失败：
	1. 对应数据没有name属性，后台数据获取name属性和参数名字一致
	2. 提交的数据没有存在于form内
-->

浅汐yt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈JavaWeb之HTML

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫

专栏目录