java——html
2024-05-19 15:10:37
1.标记语言中的注释:1.html 超文本标记语言2.<!DOCTYPE html> html文件的版本类型声明<!DOCTYPE html> ->html5的版本声明一个html页面中必须在首行存在版本声明3.<meta charset="UTF-8"> 告诉浏览器使用哪一种字符编码格式来解析我页面中的内容保证一个文件的编码与解码格式保证统一不会出现乱码4.html标签的分类:单标签 |自闭和标签 : 在开始标签的最后结束 <meta charset="UTF-8"/>双标签 |闭合标签 : 有开始有结束 <title>基础语法</title>
5.标签上可以添加属性开始标签上空格添加属性属性名 = '属性值'|"属性值"作用: 更完善的展示标签的作用6.标签的嵌套关系:父标签可以嵌套子标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础语法</title>
</head>
<body></body>
</html>2、常用的标签:1.<head> 页面的头部设置给浏览器看的一些设置信息2.<body> 定义一些给用户看的内容属性:bgcolor 背景颜色background 背景图片颜色的设置:1)颜色的英文单词2)颜色的十六进制值 #+6个字符3)rgb颜色三原色 rgb(0~255,0~255,0~255)3.<title> 标题标签用户能够看到为与搜索引擎优化有好处用户收藏为书签的时候,title的内容作为书签名在一个html必须存在的标签4.p 标签段落标签语义化作用上下存在一块外边距(css样式),浏览器默认提供前后换行5.a标签超链接标签属性:href : 定义连接地址相对地址绝对地址 http://www.baidu.com必填属性title 当鼠标悬停在内容上时候,显示的提示字target 打开方式_self : 原页面打开_blank : 新页面打开特点:存在下划线连接未访问: 蓝色连接已访问: 紫色行内元素标签的分类:元素: 标签+内容行内元素 : 可以和其他元素同行展示块元素 : 前后换行,独占一行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础语法</title>
</head>
<body bgcolor="#f03725" background="images/xiaoxin.png">这是p标签之前:<p>这是一段文本</p>这是p标签之后:<a href="http://www.baidu.com" title="你百度一下,没有解决不了的问题" target="_blank">百度一下你就知道</a><a href="yjxxt_html01.html">html01</a>
</body>
</html>3、img 图像标签属性:src 图片的路径相对路径绝对路径alt 当图片无法正常显示的时候,显示的提示字title 当鼠标悬停在内容上时候,显示的提示字span 帮助更方便的为元素添加样式 div 块块元素前后换行内容正常显示可以前任任意标签元素(行内|块) 路径:进入到某个路径下 /回到上一层路径 ../h1~h6标题标签根据权重不同,大小依次减小语义化所有的块元素都存在一个属性:align 水平对齐 方式leftrightcenterjustify 两端对齐列表标签:无序列表ulli 列表项修改列表项标记 在ul标签上 type="square"实心方块 circle空心圆圈 默认desc实心圆圈有序列表olli 列表项修改列表项标记 在ol标签上 type-> 1 a A i I列表可以嵌套:有序嵌套无序无序嵌套有序无序嵌套无序有序嵌套有序注意:所有的内容在列表中必须定义在列表项中ul|ol标签中直接子元素只能包含li,li中可以包含任意内容块元素中可以包含任意内容(普通文本,其他块元素,其他行内元素)行内元素中可以包含任意内容(普通文本,其他行内元素)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础语法</title>
</head>
<body bgcolor="#ff69b4"><img src="data:images/12-19112Q5012M19.jpg" alt="" title="邮..."><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf1.png" alt="网络不好..加载失败.."><p align="justify">美丽的<span style="color: blue">蓝</span>精灵【郎平回应是否继续执教：相信年轻一代的教练】中国女排总教练郎平今天接受采访时回应有关“不再执教”的问题。她表示：（教练人选）会由排球运动管理中心大家综合意见来推荐，相信年轻一nihyaohahahha代的教练。排球事业是一代接一代的，是一直向前走的。【郎平回应是否继续执教：相信年轻一代的教练】中国女排总教练郎平今天接受采访时回应有关“不再执教”的问题。她表示：（教练人选）会由排球运动管理中心大家综合意见来推荐，相信年轻一代的教练。排球事业是一代接一代的，是一直向前走的。</p>div之前<div>我是一个可爱的div</div><h1 align="right">一级标题</h1><h3 align="center">三级标题</h3><h6 align="justify">六级标题</h6><h3>我爱的吃的水果</h3><ul type="circle"><li>车厘子</li><li>草莓</li><li>提子</li><li><ol><li>杨桃</li><li>樱桃</li><li>水蜜桃</li></ol></li></ul><h3>我最不爱吃的事物</h3><ol type="I"><li>香菜</li><li>芹菜</li><li>茼蒿</li><li>苦瓜</li></ol>
</body>
</html>4、表格:table 表格标签tr 行th 表格头单元格 居中加粗td 表格体单元格属性样式:border边框bordercolor 边框颜色style="border-collapse: collapse" 双线变单线colspan跨列 ****rowspan 跨行 ****height 高度width 宽度align 对齐方式注意:先有行再有列内容需要放在单元格中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body><table border="1" width="500px" height="350px" align="center" style="border-collapse: collapse" bordercolor="hotpink" bgcolor="pink"><tr><th colspan="6">课程表</th></tr><tr bgcolor="aqua"><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr align="center"><td rowspan="3">上午</td><td>体育课</td><td bgcolor="#ffe4c4">体育课</td><td>体育课</td><td>体育课</td><td>体育课</td></tr><tr align="center"><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td></tr><tr align="center"><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td></tr><tr align="center"><td rowspan="2">下午</td><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td></tr><tr align="center"><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td><td>体育课</td></tr></table>
</body>
</html>5、form表单 : 收集用户输入的数据form 表单标签属性:action 提交位置name form表单的名字method : 提交方式get 数据拼接到url地址栏中进行发送 不安全 大小由显示 默认提交方式 效率较高post 数据在请求体中, 安全 ,大小没有限制enctype :当表单中存在文件上传,需要做修改表单元素 : 定义在form标签中的元素大部分的表单元素都是通过input标签定义input 标签type属性 :text 普通文本框 type,namepassword 密码框 加密效果radio 单选框多个单选框只能选择一个,需要把它们分成一组,name属性值相等就是一组checkbox 多选框name属性值相同分为一组,作用相同分为一组file 文件上传注意修改entype属性值 enctype="multipart/form-data"reset 重置submit 提交button 按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><h3>相亲信息表</h3><form action="http://www.baidu.com" name="form_info" enctype="multipart/form-data"><p>姓名 : <input type="text" name="username" value="zhangsan"></p><p>微信密码 : <input type="password" name="userpwd"></p><p>性别 :<input type="radio" name="gender" value="man"> 男<input type="radio" name="gender" value="woman"> 女</p><p>爱好 :<input type="checkbox" name="hobby" value="code"> 敲代码<input type="checkbox" name="hobby" value="read"> 读书<input type="checkbox" name="hobby" value="basketball"> 篮球</p><p>个人生活照 : <input type="file" name="pic"></p><p><input type="submit"><input type="button" value="按钮"><input type="reset" value="重置"></p></form>
</body>
</html>6、input type : hidden 隐藏框 textarea 多行文本域 select 下拉框option 下拉列表选项 fieldset 分组legend 分组标题label 添加标注是文本内容与表单标签进行绑定默认选中:单选框|多选框 : checked下拉列表: selectedreadonly 只读 不能修改可以提交 disabled 禁用 显示为灰色,不能修改不能提交 placeholder 提示字 required 必填属性 maxlength 最大长度 (字符个数)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body>
<fieldset><legend><h3>相亲信息表</h3></legend><form action="" name="form_info" method="post"><p>姓名 : <input type="text" name="username" required maxlength="5"></p><p>性别 :<input type="radio" name="gender" value="man" id="man" checked> <label for="man">男</label><input type="radio" name="gender" value="woman" id="woman"> <label for="woman">女</label></p><p><input type="hidden" name="隐藏框的name" value="隐藏框的值"></p>交友宣言 : <textarea name="info" placeholder="提示字"></textarea><p>理想型 : <select name="wifetype" multiple><option value="1">御姐型</option><option value="2">萝莉型</option><option value="3" selected>温柔型</option></select></p><fieldset><legend>隐私信息</legend>体重 <input type="text" name="weight">身高 <input type="text" name="height"></fieldset><p><input type="submit"><input type="button" value="按钮"><input type="reset" value="重置"></p></form></fieldset>
</body>
</html>java——html相关推荐
- springboot实现SSE服务端主动向客户端推送数据，java服务端向客户端推送数据，kotlin模拟客户端向服务端推送数据
SSE服务端推送 服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE).本文介绍它的用法. 在很多业务场景中,会涉及到服务端向客户端 ...
- Java 获取当前时间之后的第一个周几，java获取当前日期的下一个周几
Java 获取当前时间之后的第一个周几,java获取当前日期的下一个周几 //获得入参的日期 Calendar cd = Calendar.getInstance(); cd.setTime(date ...
- 在k8s中使用gradle构建java web项目镜像Dockerfile
在k8s中使用gradle构建java web项目镜像Dockerfile FROM gradle:6-jdk8 AS build COPY --chown=gradle:gradle . /home ...
- Java | kotlin 手动注入bean，解决lateinit property loginService has not been initialized异常
kotlin.UninitializedPropertyAccessException: lateinit property loginService has not been initialized ...
- SpringBoot项目使用nacos，kotlin使用nacos，java项目使用nacos，gradle项目使用nacos，maven项目使用nacos
SpringBoot项目使用nacos kotlin demo见Gitte 一.引入依赖 提示:这里推荐使用2.2.3版本,springboot与nacos的依赖需要版本相同,否则会报错. maven ...
- OpenAPI使用（swagger3），Kotlin使用swagger3，Java使用swagger3，gradle、Maven使用swagger3
OpenAPI使用(swagger3) demo见Gitte 一.背景及名词解释 OpenAPI是规范的正式名称.规范的开发工作于2015年启动,当时SmartBear(负责Swagger工具开发的公 ...
- Gradle错误提示:Java home supplied via ‘xxx.xxx.xxx‘ is invalid
Gradle错误提示:Java home supplied via 'org.gradle.java.home' is invalid 描述:在使用idea采用gradle进行依赖的管理功能,当想切换 ...
- 查看Hotspot源码，查看java各个版本源码的网站，如何查看jdk源码
java开发必知必会之看源码,而看源码的第一步则是找到源码
- java基本类型转换，随记
java基本类型转换: double double 转 long double random = Math.round(Math.random()*10000); long l = new Doubl ...
- 科学处理java.lang.StackOverflowError: null异常
java.lang.StackOverflowError: null异常处理 在项目运行中出现StackOverflowError 首先要检查在编码中是否有明显的递归编码,比如死循环或者无限循环调用. ...
最新文章
- Zookeeper watch机制
- 启动ubuntu什么时候按shift_找回消失的ubuntu启动选项
- ajax 省市级联项目中的实现
- vue-自定义组件传值
- tomcat_动态java项目的目录结构
- python- 进阶 与flask的搭配使用---定时任务框架APScheduler学习详解
- eclipse导入github项目
- 【转】C#搭建Oauth2.0认证流程以及代码示例
- java 怎么控制暂停5秒钟_java – libGDX暂停运行几秒钟
- Android 系统（87）---常见的内存泄漏原因及解决方法
- Unity如何设置两个玩家
- Linux 配置mail发送邮件
- 【2019杭电多校第四场1010=HDU6623】Minimal Power of Prime（质因子分解+思维+卡精度）
- Git笔记总结（详细） —— 廖雪峰教程
- Spring5学习笔记——【遇见狂神说】[IoC、DI、AOP]
- 语音合成 g2p 字典设计
- U盘容量变小了 -恢复U盘实际容量教程（亲试有效）
- js根据时间戳倒计时
- RFID-MFRC522射频识别S50白卡
- Android实现二维码扫描功能（四）-ZXing识别图片二维码，相册选图