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 ...
随机推荐
- TornadoFx实现侧边栏菜单效果
原文地址:TornadoFx实现侧边栏菜单效果 - Stars-One的杂货小窝 之前年前研究的东西,给蓝奏批量下载器重构了页面,实现了侧边栏菜单的效果,稍微总结下把 效果 实现 首先,要说明的是,总 ...
- 关于『HTML』:第二弹
关于『HTML』:第二弹 建议缩放90%食用 第二弹! 它来了! 它来了! 我竟然没有拖更,对了,你们昨天用草稿纸了么 开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这 ...
- Spring中的Bean作用域
概述 scope用来声明容器中的对象所应该处的限定场景或者说该对象的存活时间,即容器在对象进入其 相应的scope之前,生成并装配这些对象,在该对象不再处于这些scope的限定之后,容器通常会销毁这些 ...
- Typora配置阿里云图床
一.Typora安装PicGo 更新typora到最新版,打开文件-->偏好设置-->图像-->上传服务选择PicGo-Core-->下载或更新 二.注册并配置阿里云 1. ...
- 开源流程引擎camunda如何扩展
市场上基于Java语言的开源工作流引擎有:osworkflow.jbpm.activiti.flowable.camunda等,其中osworkflow.jbpm流程引擎已经过时,目前主流的开源 ...
- vue基本原理
当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访 ...
- SpringCloud Alibaba整合Sentinel
SpringCloud Alibaba整合Sentinel Sentinel 控制台 1. 概述 Sentinel 提供一个轻量级的开源控制台,它提供机器发现以及健康情况管理.监控(单机和集群),规则 ...
- VirtualBox虚拟机安装Ubuntu系统后，增加内存空间和处理器核心数
对于Linux爱好者而言,初次使用虚拟机时,一般都会使用默认的设置,例如硬盘空间.内存空间等等. 而往往在熟悉之后,安装了某些必要的软件,或者熟悉了实际的开发场景后,却发现原本给虚拟机分配的物理资源是 ...
- js 表面使用 表面学习 -输出
JavaScript 能够以不同方式"显示"数据: 使用 window.alert() 写入警告框 使用 document.write() 写入 HTML 输出 使用 innerH ...
- Pyinstaller打包pikepdf失败的问题排查
问题 最近在项目里用到了pikepdf这个库,用于实现pdf水印插入的一个小功能,源码调试阶段运行一切OK但是在出包时报了如下异常. Traceback (most recent call last) ...