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 ...
随机推荐
- 《Unix 网络编程》05：TCP C/S 程序示例
TCP客户/服务器程序示例 系列文章导航:<Unix 网络编程>笔记 目标 ECHO-Application 结构如下: graph LR; A[标准输入/输出] --fgets--> ...
- 基于云服务MRS构建DolphinScheduler2调度系统
摘要:本文介绍如何搭建DolphinScheduler并运行MRS作业. 本文分享自华为云社区<基于云服务MRS构建DolphinScheduler2调度系统>,作者: 啊喔YeYe . ...
- 前端 关于请求地址时出现乱码， 出现%E2%80%8B的问题
做项目时,添加了新的一个接口,习惯性地复制了接口下来.然后测试发现 请求时自动添加 了几个%E2%80%8B这种乱码. 问题原因: 我输出请求地址时也是正确的,是因为复制过来的接口地址会有零宽空格 解 ...
- SAM[详细~bushi]
基础性质概念 后缀自动机:S的SAM是个DAG,每个节点叫状态,每条带字符ch边表示+ch转移,从开始节点往下,任何一条路径都会对应一个S的子串. 不过为什么要叫"后缀"自动机呢? ...
- CabloyJS微信模块、企业微信模块已出齐
前言 当Cabloy-企业微信模块完成时,加上之前已完成的Cabloy-微信模块,关于在CabloyJS中与微信/企业微信对接的任务已经完成了.这些模块的目标就是,只需填入各类服务的参数,就可以直接进 ...
- RMQ——ST表
ST表 ST表是一种解决RMQ问题的强有力工具, 可以做到O(nlogn)预处理,O(1)查询. st[i][j] 表示区间 [i, i + 2 ^ j - 1] 的最大值. 初值 st[i][0] ...
- 高通sensor理解
.1.高通为什么引入adsp? 2.adsp sensor 是如何工作起来的? 3.adsp 和ap 是如何通信的? 4.adsp 架构组成 解答: 1.高通在msm8960之前sensor 是挂在p ...
- 最简单的离散概率分布，伯努利分布 《考研概率论学习之我见》 -by zobol
上文讲了离散型随机变量的分布,我们从最简单的离散型分布伯努利分布讲起,伯努利分布很简单,但是在现实生活中使用的很频繁.很多从事体力工作的人,在生活中也是经常自觉地"发现"伯努利分布 ...
- 使用AndroidKiller进行APK反编译
安装环境 JDK 最好用JDK8,问就是坑太多了 Android Studio 官网安装即可,安装教程如下 https://www.runoob.com/android/android-studio- ...
- UiPath录制器的介绍和使用
一.录制器(Recording)的介绍 录制器是UiPath Studio的重要组成部分,可以帮助您在自动化业务流程时节省大量时间.此功能使您可以轻松地在屏幕上捕获用户的动作并将其转换为序列. 二.录 ...