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 ...
随机推荐
- 论文阅读 Dynamic Network Embedding by Modeling Triadic Closure Process
3 Dynamic Network Embedding by Modeling Triadic Closure Process link:https://scholar.google.com.sg/s ...
- 看看CabloyJS是如何实现编辑页面脏标记的
应用场景 我们在使用Word.Excel时,当修改了内容之后在标题栏会显示脏标记,从而可以明确的告知用户内容有变动.此外,如果在没有保存的情况下关闭窗口,系统会弹出提示框,让用户选择是否放弃修改 那么 ...
- ES6 伪数组转真数组
更新日志 2022年6月13日 发布. 2022年5月19日 笔记迁移到博客. 直接上代码 [...a];
- 关于kali安装输入法
之前老是被kali大小写输入恶心坏了,正好看到一篇文章写kali安装搜狗输入法的,虽然不需要输入中文,但是英文输入就很方便了. 一.切换root用户登录 1.sodu su切换为root权限 2.pa ...
- Python在函数中使用列表作为默认参数
在学习中遇到的Python的一个坑,那就是使用列表作为默认参数. 我们知道,在Python中,列表(list)是可变对象,所以列表的内容可能会在函数内改变.另一个需要注意的是,使用列表作为函数的默认参 ...
- NC14662 小咪买东西
NC14662 小咪买东西 题目 题目描述 小咪是一个土豪手办狂魔,这次他去了一家店,发现了好多好多( \(n\) 个)手办,但他是一个很怪的人,每次只想买 \(k\) 个手办,而且他要让他花的每一分 ...
- 选择结构-扩展if-else语句和练习用if语句实现考试成绩划分
判断语句3--if..else if...else if语句第三种格式: if...else if ...else if (判断条件1) { 执行语句1; } else if (判断条件2) { 执行 ...
- java 九九乘法表（for循环）
package study5ran2yl.study; public class ForDemo01 { public static void main(String[] args) { int h; ...
- NLM5系列中继采集仪的常见问题
NLM5系列中继采集采发仪常见问题 1.UART 通讯问题使用 UART 接口时一定要确认收发双方的通讯参数完全一致,包括通讯速率.数据位.校验位.停止位参数.NLM 在上电时会主动输出设备基本信息, ...
- docker容器管理操作
Docker容器的四种状态: 运行 已暂停 重新启动 已退出 1.容器的创建 容器创建:就是将镜像加载到容器的过程. 创建容器时如果没有指定容器名称,系统会自动创建一个名称. 新创建的容器默认处于停止 ...