java-前端之HTML
--html网页简单使用
1.html网页的基本标签
<!doctype html><!-- 声明网页版本 -->
<html><!-- 唯一的跟元素 -->
<head><!-- 此处写网页的基本声明 -->
<meta charset="utf-8"/><!-- 声明网页编码 -->
<title>这里就是第一个网页</title><!-- 声明网页标题 -->
</head>
<body><!-- 此处写网页的所有内容 -->
此处写网页的所有内容
</body>
</html>
2.标签整理：
<!-- 1.标题（一般不会使用到6级标签，实际开发中不会有那么复杂的逻辑），超连接标签"#"代表是一个锚点 -->
<h1><a href="#cang">愿你单枪匹马，亦能所向披靡！</a></h1>
<h2><a href="#q">愿</a>你单枪匹马，亦能所向披靡！</h2>
<h3>愿你单枪匹马，亦能所向披靡！</h3>
<!-- 2.段落 -->
<p>愿你单枪匹马，亦能所向披靡！</p>
<p>愿你单枪匹马，亦能所向披靡！</p>
<!-- 3.列表 -->
<!-- 有序列表 -->
<ol>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
<li>愿你单枪匹马，亦能所向披靡！</li>
</ul>
<!-- 嵌套列表 -->
<ol>
<li>愿你单枪匹马，亦能所向披靡！
<ul>
<li>一点寒芒先到</li>
<li>一点寒芒先到</li>
<li>随后枪出如龙</li>
</ul>
</li>
<li>愿你单枪匹马，亦能所向披靡！
<ul>
<li>一点寒芒先到</li>
<li>一点寒芒先到</li>
<li>随后枪出如龙</li>
</ul>
</li>
<li>愿你单枪匹马，亦能所向披靡！
<ul>
<li>一点寒芒先到</li>
<li>一点寒芒先到</li>
<li>随后枪出如龙</li>
</ul>
</li>
</ol>
<!-- 5.行内元素 -->
<p>北京市海淀区北三环西路甲18号<span style="color: red;">钟鼎大厦</span>B座8层</p>
<!-- 6.空格折叠，默认换行和空格都合并为一个空格要想使用多个空格使用“ ” -->
<p>
Windows 操作系统的目录结构，是以<br/>
盘符为单位，C盘、D盘、E盘等等，数据<br/>
存储在 各个盘符之下，而Linux操作<br/>
</p>
<!-- 图片 -->
<!-- 1.绝对路径：从盘符开始写出图片存放的完整路径
这种方式将路径写死,一旦软件上线时,用户要求改路径甚至操作系统就都错了. -->
<!-- 2.相对路径：写出图片和网页的相对位置.软件上线时,是将整个项目拷贝给用户,他们的相对位置是不会变的-->
<p>
<!-- 图片网页平级 -->
<img src="01.jpg">
<!-- 图片在网页的下级 -->
<img src="old/02.jpg">
<!-- 图片在网页的上级 -->
<img src="../03.jpg">
<!-- 通常是使用相对路径并却资源的文件夹是同级 -->
<img src="../images/04.jpg">
</p>
<!-- 8超链接 -->
<!-- 1.基本用法 -->
<p>
<a href="http://www.tmooc.cn" >tmooc</a>
<a href="http://doc.tedu.cn" target="_blank">文档</a>
<a href="http://maven.tedu.cn" target="_blank">mavem</a>
<a href="http://code.tarena.com.cn" target="_blank">mavem</a>
<a href="demo2.html" target="_blank">demo2</a>
</p>
<!-- 链接到锚点 -->
<p>
愿你单枪匹马，亦能所向<a name="cang">披靡</a>！
</p>
<!-- 3.特例:网页的顶部,摩恩就是锚点,无名 -->
<p>
<a href="#">回到顶部</a>
</p>
<!-- 9 表格 -->
<!-- 基本的用法 -->
<table border="3dp" cellspacing="0" width="200px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- 跨行 -->
<table border="3dp" cellspacing="0" width="200px">
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- 跨列 -->
<table border="3dp" cellspacing="0" width="200px">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<!-- <td>3</td> -->
<td>4</td>
</tr>
</table>
<br/><br/><br/>
<!-- 行分组 -->
<table border="3" cellspacing="0" width="300">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color: blue;">
<tr>
<td>0001</td>
<td>鼠标</td>
<td>120</td>
</tr>
<tr>
<td>0002</td>
<td>键盘</td>
<td>1400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<td>1520</td>
</tr>
</tfoot>
</table>
day02：表单
<!-- 1.表单元素：用来声明表单的范围，只有在此范围内的数据，才能提交给服务器。 -->
<!--action:声明表单提交的目标 -->
<form action="http://www.baidu.com">
<!-- 2.表单控件:用来输入数据 -->
<!-- 1)input元素:他们type属性不同 -->
<p>
<!-- 文本框 -->
账号:<input type="text" value="qwerdf" maxlength="10" readonly="readonly"/>
</p>
<p>
<!-- 密码框 -->
密码:<input type="password" value="123456" readonly="readonly"/>
</p>
<!-- 单选 -->
<p>
单选:
<!-- name:组名,同名的radio就是一组,会互斥 -->
<!-- checked:默认选中 -->
<label><input type="radio" name="sex" checked="checked"/>男</label>
<label><input type="radio" name="sex" />女</label>
</p>
<p>
兴趣:
<!-- 多选框 -->
<!-- checked:设置默认选中 -->
<label><input type="checkbox"/>学习</label>
<label><input type="checkbox"/>社交</label>
<label><input type="checkbox" checked="checked"/>养生</label>
<label><input type="checkbox" checked="checked"/>竞技</label>
<label><input type="checkbox" checked="checked"/>美食</label>
</p>
<!-- 隐藏框 -->
<p>
<input type="hidden" value="hi"/>
</p>
<!-- 文件框 -->
<p>
头像<input type="file"/>
</p>
<p>
<input type="submit" value="update"/>
<input type="reset" value="reset"/>
<input type="button" value="as null"/>
</p>
<!-- 2)其他元素:标签名就不同 -->
<!-- label:用来管理表单中的文字,可以将文字与控件绑定为一个整体,从而增加空间的范围
id:是元素的唯一的标识.任何元素都有ID-->
<p>
<input id="cb1" type="checkbox">
<label for="cb1">我已经阅读并自愿遵守这个规则!</label>
</p>
<!-- 下拉选项
select 设置默认选中-->
<p>城市:
<select>
<option selected="selected">请选择</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
<option>北京</option>
</select>
</p>
<!-- 文本域 -->
<p>
简介:
<textarea rows="2" cols="100">愿你单枪匹马,亦能所向披靡!</textarea>
</p>
</form>
我是初学者，如有更新不好的，欢迎这位大神指出，谢谢大家！
更多精彩以后更新，转载注明！
java-前端之HTML的更多相关文章
- java前端与后端怎么选？？
想做这个行业,就应该了解职能以及技能需求,这样学习才能更高效.我知道一些刚刚入行的小伙伴不清楚前端.后端.到底指的是什么?两者直接的区别 前端开发 前端开发主要涉及网站和App,用户能够从浏览器上或A ...
- Java 前端加密传输后端解密以及验证码功能
目录(?)[-] 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 概 ...
- java前端选择
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
- Java前端Rsa公钥加密，后端Rsa私钥解密(目前还不支持中文加密解密，其他都行)
Base64工具类,可以让rsa编码的乱码变成一串字符序列 package com.utils; import java.io.ByteArrayInputStream; import java.io ...
- Java前端Rsa公钥加密，后端Rsa私钥解密（支持字符和中文）
Base64工具类,可以让rsa编码的乱码变成一串字符序列 package com.utils; import java.io.ByteArrayInputStream; import java.io ...
- java前端知识点整理
1.jsp内置对象?作用? request :客户端请求,包含来自 GET/POST,提供了几个用于获取 cookie, 和 session 的方法 response :网页传回用户端的回应 page ...
- java前端js和框架内容知识和面试
关于数据库知识和面试 关于JAVA知识和面试 一.多个ajax请求执行顺序问题 若点击一个操作内,发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 不会,这两个异步请求会同时 ...
- Java 前端模板引擎学习：thymeleaf 模板引擎
模板引擎接口 ITemplateEngine 一.后台数据与外部数据 1.处理后台数据 $表达式是个变量表达式,用于处理在 request parameters and the request, s ...
- 关于推荐库位 java前端与SQL语句后面的结合
----------------------------------------------------------------------------------- select a1.id,a1. ...
- java前端学习步骤
前端说的比较好的知乎:https://www.zhihu.com/question/22759296 网站开发绝杀技:https://ke.qq.com/course/20945?from=qqcha ...
随机推荐
- 2021.05.03【NOIP提高B组】模拟 总结
比较水的一场比赛,却不能 AK T1 有 \(n\) 次,每次给 \(A_i,B_i\) 问以 \(i\) 结尾的 \(A,B\) 的匹配中最大和的最小值 问最大和的最小值,却不用二分. 如果暴力排序 ...
- 2.2.1 用户态、内核态的形成 -《zobolの操作系统学习札记》
内核态的出现,让计算机系统的权力向操作系统高度集中了. 操作系统分出内核态和用户态,就是为了进行不同等级的权限管理, 从而更好的适应多用户多任务并发的工作环境. 用户态和内核态的来源 在早期的单进程单 ...
- JS：相等判断
1.= 赋值运算符 错误写法:a+b = c; 2.== :=== ==判断值是否相等 例: var a = 2; var b = 3; var c = a+b; var d = "2&q ...
- JavaScript有哪些数据类型，它们的区别？
基本数据类型:number.string.boolean.Undefined.NaN(特殊值).BigInt.Symbol 引入数据类型:Object NaN是JS中的特殊值,表示非数字,NaN不是数 ...
- 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布
前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: h ...
- 密码学系列之:在线证书状态协议OCSP详解
目录 简介 PKI中的CRL CRL的缺点 CRL的状态 OCSP的工作流程 OCSP的优点 OCSP协议的细节 OCSP请求 OCSP响应 OCSP stapling 总结 简介 我们在进行网页访问 ...
- CMU15445 (Fall 2019) 之 Project#2 - Hash Table 详解
前言 该实验要求实现一个基于线性探测法的哈希表,但是与直接放在内存中的哈希表不同的是,该实验假设哈希表非常大,无法整个放入内存中,因此需要将哈希表进行分割,将多个键值对放在一个 Page 中,然后搭配 ...
- browserify的standalone的含义
白话:就像Jquery的$, 把你打包后的函数挂在window下你指定的名字下 废话:白话看不懂,就看下面的废话,你不得不花更多时间理解--standalone AAA的含义$ browserify ...
- C#请求HTTPS地址的故障分析和TLS知识点总结
背景介绍 近期收到同事反馈,在C#程序中通过HTTPClient请求一个HTTPS的地址时,在本地开发环境和测试环境均能正常执行,而部署到生产环境后发生异常且稳定复现,异常提示为:[请求被中止: 未能 ...
- squareline搭档OneOS图形组件之可视化GUI开发
LVGL+OneOS! LVGL,一款很火的GUI开发库,一个高度可裁剪.低资源占用.界面美观且易用的嵌入式系统图形库.本身并不依赖特定的硬件平台,任何满足LVGL硬件配置要求的微控制器均可运行LVG ...