个人java学习路线-html初入
2024-06-02 14:12:01
个人java学习路线-html初入
- 简单介绍
- 第一个html
- html基本标签
- html实体符号
- html的表格
- 创建表格和表格简单格式
- 表格合并
- html的表格-thead tbody tfoot
- html图片和背景
- 背景
- 图片显示
- html超链接和热链接
- html列表
- 表单（*）
- 初入
- 用户注册的表单
- 下拉列表
- file控件
- readonly和disabled
- input 和maxlength
- id属性
- div和span
简单介绍
HTML：Hyper Text Markup Language(超文本标记语言)–Web用
//超文本：流媒体，图片，声音，视频…
先看看系统架构
B/S架构:
Browser/Server（浏览器和服务器的交互形式）
C/S架构
Client /Server（客服端/服务器端）
W3C：（世界万维网联盟）——制定的HTML规范
World Wide Web
注意：html是弱类型定义语言，比起java来说，编写要求宽松
第一个html
<!--1.html注释2.<!doctype html>为html5语法，不加则为html4.0语法
-->
<!doctype html>
<html><head><title>网页的标题</title></head><body>html start</body>
</html>
<!-- html语言松散，不区分大小写。 要求不高，关键部分除外 -->
<!-- </html>写成</HTML>或</HtmL>或者删掉都行 -->
html基本标签
<!doctype html>
<html><head><title>HTML的基本标签</title></head><body><!-- 段落标记--><p>“嗟乎！草木无情，有时飘零。人为动物，惟物之灵；百忧感其心，万事劳其形；有动于中，必摇其精。</p><p>而况思其力之所不及，忧其智之所不能；宜其渥然丹者为槁木，黟然黑者为星星。</p><p>奈何以非金石之质，欲与草木而争荣？念谁为之戕贼，亦何恨乎秋声！”</p><!-- 标题字：是HTML预留的格式，和word中标题字相同 --><h1>标题字</h1><h2>标题字</h2><h3>标题字</h3><h4>标题字</h4><h5>标题字</h5><h6>标题字</h6><!-- 换行标记 独目标签br-->helloworld!hello<br>world!<!-- 横线 ，独目标签--><hr><!-- color和width都是hr标签的属性，"50%"双引号还是单引号，还是没有都行--><hr color="red" width="50%"><!-- 预留格式 --> for(int i=0;i<10;i++){System.out.println("i="+1);} <pre>for(int i=0;i<10;i++){System.out.println("i="+1);}</pre> <del>删除字</del> <ins>插入字</ins><b>粗体字</b><i>斜体字</i>10<sup>2</sup>10<sub>m</sub><font color="red" size="50">字体标签</font> <!-- --></body>
</html>
html实体符号
html编程中空格引号之类的是不会直接显示的，这时就需要实体符号了
<!doctype html>
<html><head><title>HTML的实体符号</title></head><body><!--实体符号的特点是：以&开始，以;结束。< 小于号，>大于号--><!-- 大于小于实体符号-->10<20100>90 <!--空格的实体符号   -->abc dfgasd hgdfdsa </body>
</html>
html的表格
创建表格和表格简单格式
<!doctype html>
<html><head><title>HTML的表格</title></head><body><!-- table表格，tr行，td格子--><!--3列3行--><!--
<table border="1px" width="300px"> <!--设置表格的边框为1像素宽度，表格宽300像素-->--> <br><br><br><br><br>`<center><h1>什么什么表</h></center><hr><table border="1px" width="60%" height="150px"> <!--设置表格的边框为1像素宽度，表格宽60%,高150像素--><tr align="center"> <!--居中对齐 align="center" --><td>a</td><td>s</td><td>d</td></tr><tr ><td>f</td><td>g</td><td>h</td></tr><tr><td>j</td><td>k</td><td align="center">l</td></tr></tbale></body>
</html>
表格合并
<!doctype html>
<html><head><title>HTML的表格-单元格合并，th标签</title></head><body><table border="1px" width="50%"><tr><!--<td>员工编号</td><td>员工薪资</td><td>部门名称</td>--><!--th 标签也是单元格标签，比td多的是居中，加粗--><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td>
<!-- rowspan="2"融合六九单元格 row合并时删下面的 --><td rowspan="2">69</td></tr><tr>
<!-- colspan="2"融合78单元格(column) col合并时无所谓 --><td colspan="2">78</td><!--<td>8</td>--><!--<td>9</td>--></tr></table></body>
</html>
html的表格-thead tbody tfoot
<!doctype html>
<html><head> <!-- thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码--><title>HTML的表格-thead tbody tfoot</title></head><body><table border="1px" width="50%"><thead><tr><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr></tbody><tfoot><tr><td>4</td><td>5</td><td >6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></tfoot></table> </body>
</html>
html图片和背景
背景
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景颜色和背景图片</title></head><body bgcolor="blue" background="./1.png"> <!-- 同级目录下要有1.png --></body>
</html>图片显示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片img</title></head><body><img src="8470195.jpg" width="600px" title="title表示图片名称" alt="alt用在图片未找到时"><br><br><br><img src="1.jpg" width="300px"><img src="2.jpg" width="300px"/><img src="3.jpg" width="300px"></img></body>
</html>html超链接和热链接
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接 热链接</title></head><body><a href="http://www.baidu.com">百度</a><!--href:hot references 热引用 href属性后面一定时一个资源的地址href：后面的路径可以是觉得路径也可以是相对路径，可以是网络中的某个资源的路径，也可以是本地资源的路径--><a href="https://www.bilibili.com/" target="_blank"><img src="./哔哩哔哩.jpg" width="50px"></a><!--target 取值：_blank :新窗口_self :当前窗口(默认)_top :顶级窗口parent :父窗口--></body>
</html><!--超链接的作用：通过超链接可以从浏览器像服务器发送请求浏览器向服务器发送数据（请求：request）服务器向浏览器发送数据（响应：response）B/S结构的系统：每一个请求都会对应一个响应B----请求-----》SS-----响应----》B用户点击超链接和用户在浏览器地址栏上输入URL，有什么区别？本质上没有区别，都是向服务器发送请求-->
html列表
html列表有有序列表和无序列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title></head><body><!--有序列表--><ol type="1"><li>水果<ol type="I"><li>苹果</li><li>西瓜</li><li>香蕉</li></ol></li><li>蔬菜</li><ol type="a"><li>西红柿</li></ol><li>甜点</li></ol><!--无序列表--><ul type="circle"><li>中国<ul type="disc"><li>北京<ul type="square"><li>东城区</li><li>西城区</li></ul></li><li>天津</li><li>上海</li></ul></li><li>美国</li><li>日本</li></ul></body>
</html>表单（*）
初入
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单form</title></head><body><!--表单作用：收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器--><!--<form action="服务器地址" ></form>--><form action="../"><!--submit提交按钮，具有提交表单的能力--><input type="submit" value="注册"/><!--普通按钮没有提交表单的能力--><input type="button" value="设置按钮上显示的文本"/></form><form action="http://www.baidu.com"><input type="text"/><input type="submit" value="百度"/></form><form action="192.168.1.1.1/localost">用户名<input type="text"/><br>密码<input type="password" /><br><input type="submit" value="登录" /></form><!--http://localost:8080/asd/xz?usernaem=asd&userpwd=asd表单向服务器提交数据格式action?name=value&name=value&name=valuevalue是唯一一种提交数据--><form action="http://localost:8080/asd/xz"><table ><tr><td>用户名</td><td><input type="text" name="usernaem"/></td></tr><tr><td>密码</td><td><input type="password" name="userpwd"/></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" /> <input type="reset" value="清空" /></td> </tr></table></form><form></form><form></form></body>
</html>用户注册的表单
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><!--用户注册:用户名密码确认密码性别兴趣爱好学历简介--><form action="http://loaclhost:8080/jd/register" method="post"> <!--method="post"后网页提交隐藏数据-->用户名<input type="text" name="username"/><br>密码<input type="password" name="userpwd"/><br>确认密码<input type="password"/><br>性别<input type="radio" name="sex" value="1" checked/>男<input type="radio" name="sex" value="0"/>女<!-- 单选按钮的value必须手动指定--><br>兴趣爱好<input type="checkbox" name="interest" value="smoke"/>吃<br><input type="checkbox" name="interest" value="drink"/>喝<br><input type="checkbox" name="interest" value="fireHair"/>睡<br>学历<select name="grade"><option value="gz">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option><!--默认选中--><option value="ss">硕士</option></select><br>简介<!--文本域--><textarea rows="10" cols="60" name="introduce"></textarea><br /><input type="submit" value="注册" /><input type="reset" value="清空" /></form></body>
</html><!-- 提交结果http://loaclhost:8080/jd/register?username=123&userpwd=asd&sex=1&interest=smoke&interest=drink&interest=fireHair&grade=bk&introduce=asdsad
-->
下拉列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉列表支持多选</title></head><body><!--multiple="multiple"支持多选,size设置显示条数3--><select multiple="multiple" size="3"><option value="">河北省</option><option value="">河南省</option><option value="">山东省</option><option value="">山西省</option></select></body>
</html>file控件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>file控件</title></head><body><!-- fiel控件：文件上传专用--><input type="file" /><form action="http://localhost:8080/asda/asdsa"><!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器--><input type="hidden" name="userid" value="111" />用户代码<input type="text" name="usercode" /><input type="submit" value="提交" /></form></body>
</html>readonly和disabled
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly和disable</title></head><body><!-- readonly和disabled相同点,都是只读不能修改的。但是readonly可以提交给服务器，disabled数据不会提交(即使有name属性)--><form action="http://localhost:8080/asd/xzc">用户代码<input type="text" name="usercode" value="110" readonly /><br />用户姓名<input type="text" name="username" value="zhangsan" disabled /><br /><input type="submit" value="提交数据"/></form></body>
</html>input 和maxlength
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" maxlength="3" /><!-- 控制文本框中可以输的字符数量--></body>
</html>id属性
在html文档中，任何元素（节点）都有id属性，id的属性是该节点的唯一的标识，所以在同一个html文档中id值不能重复
id就是节点的身份证号，不能重复（同一个html文件中）
表单提交数据的时候，只和name有关，和id无关
div和span
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中的div和span</title></head><body><!--1.div和span都可以称之为"图层"图层的作用为了保证页面可以灵活的布局图层就是div嵌套div，盒子套盒子div和span是可以定位的，只要定下div左上角的x轴和y轴坐标即可2.以前用table进行布局，现在table被淘汰了，div是目前布局用的最多的，几乎很少使用table布局了3.div独自占用一行span不会独自占用一行--><div id="div1">我是一个DIV</div><div id="div2">我是一个DIV</div><span id="span1">我是一个SPAN标签</span><span id="span2">我是一个SPAN标签</span></body>
</html>个人java学习路线-html初入相关推荐
- java学习路线_java学习路线_我的入坑路
java详细路线: 网上有很多学习路线,当初,我就是受这个学习路线的影响入坑的. 既然看到标题为我的java学习路,那就给大家看下我是怎么走过来的. 阶段一_JavaSE 入门推荐书:java开发实战 ...
- 最新的适合0基础的Java 学习路线，（附视频教程）不仅仅是Javaweb还有大数据哦
老读者都知道,鸟哥是一个半路出家的程序员,资质平平,学历垃圾,当年靠淘宝15元一份的教程自学,入行至今.在自学编程方面多少还有自己的心得和经验.今天我就结合自己的自学经验为像我一样的菜鸟们量身制作一份 ...
- JAVA学习路线资料
java学习路线资料 该博客是摘自其它博主整理的文章,感觉各种视频和书籍链接整理的十分全面,对于初学者来说方便,打算依照博主的架构了解下JAVA开发.虽然主要做嵌入式方面,但了解下JAVA编程也有利于 ...
- 刷爆了！Java蝉联5次第一，网友：最强王者！附70k架构师Java学习路线
图片来源:视觉中国 最近在知乎上,看到一位蚂蚁金服的Java工程师分享,985硕士,校招就拿到了30w的offer.群内也有群友分享,自己通过三年的奋斗,终于年薪70w.这让很多同龄人羡慕,但是羡慕的 ...
- 人类高质量 Java 学习路线【一条龙版】
大家好,我是张讨嫌.现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了.大部分的博主推荐资源,也就是把播放量高的视频说一遍,水一期视频,没有一条很清晰的学习路线. ...
- 怒肝 Java 学习路线一条龙！
文章为转载 请关注鱼皮好友 持续获取 有效学习知识 现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了.大部分的博主推荐资源,也就是把播放量高的视频说一遍,水 ...
- 好程序员Java学习路线分享finalize()方法详解
好程序员Java学习路线分享finalize()方法详解,前言,finalize()是Object的protected方法,子类可以覆盖该方法以实现资源清理工作,GC在回收对象之前调用该方法.. fi ...
- java学习路线---大师级的，我看了明白多了
JAVA是一种平台,也是一种程序设计语言,如何学好程序设计不仅仅适用于JAVA,对C++等其他程序设计语言也一样管用.有编程高手认为,JAVA也好C也好没什么分别,拿来就用.为什么他们能达到如此境界? ...
- ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是 异步.JavaScript ...
最新文章
- lpi linux认证权威指南 pdf,LPI Linux认证指南读书笔记
- 消灭 Java 代码的“坏味道”【转】
- Visual Basic 永远29岁,Visual Basic 谢幕！
- 在Opendaylight中karaf启动的时候自动安装feature
- 富文本编辑器 - wangEditor 表情
- python硬件交互_Python操作系统库说明,pythonos,笔记
- Win11新版右键菜单用不惯？一键切换回Win10经典版！
- 变量 常量 作用域和命名规范
- bond4 交换机配置_CentOS 网卡配置bond4（LACP）
- 安卓系统校园招聘平台APP答辩PPT免费下载
- 思科ccna教材_什么是CCNA或Cisco认证网络助理？
- 火狐浏览器常用的几个插件
- 逆天的H3C Comware V7 RBAC
- conda安装本地whl文件
- adprw指令通讯案例_S71200 ModbusTCP 通讯配置向导说明
- 【数据挖掘】关联规则和Apriori算法
- 苹果电脑桌面文件不见了怎么恢复
- 数据库原理 | 第1章 概述
- 解决 pyecharts 折线图数字标签设置 formatter 参数后标签内容有问题
- SEM测试优点与特点