个人java学习路线-html初入
简单介绍
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-->
hello
world!
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<20
100>90
<!--空格的实体符号   -->
abc dfg
asd 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----请求-----》S
S-----响应----》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=value
value是唯一一种提交数据
-->
<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>
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
