html笔记
系统结构
B/S架构（以后主要走的方向）
Browser/Server （浏览器/服务器的交互形式）
Browser支持哪些语言 HTML CSS JavaScript 前端开发工程师
前端的图片需要ui工程师完成，ps对程序员没有太高的要求
S是服务端Server，Server端语言很多，c c++ Java python 我们们主要是java
优点 升级方便 只需要升级服务端代码即可
缺点 速度慢 体验不好 界面不炫酷
企业内部使用
C/S架构
缺点 升级麻烦 维护成本高
优点 界面炫酷 体验好 速度快 娱乐
Client/Server（客户端/服务器端的交互形式）
QQ 微信 支付宝
HTML
*html: Hyper Text Markup Language(超文本标记语言)
由大量的标签组成，每一个标签都有开始标签和结束标签
<标签>
<标签>
<标签 属性名=”属性值“ 属性名=”属性值“>
</标签>
</标签>
</标签>
超文本 流媒体 图片 声音 视频
有专业的开发工具 如 DreamWeaver、HBuilder
html 是由 世界万维网联盟规范的 （W3C）
目前最高的版本是 html5 这里学html4的基础用法
w3school是html的帮助文档
w3cschool较晚
------------5----------
<!--这是html的注释
多行注释
-->
<!doctype html>
<html>
<head>
<title>网页的标题 最顶加了表示HTML5</title>
</head>
<body>
网页的主体内容，欢迎学习
</body>
</html><!--大小写可以混合，语法松散-->
------------6----------------------------
<!doctype html>
<html>
<head>
<title>
标题
</title>
<body>
<p>内容发哈是否可见<p>撒谎附件客户发开发奥卡福好看撒法哈克安徽省发撒尽快恢复骄傲是开发哈开发
<!--被<p>表示一段--->
<!--标题字 最高6层,越高层字越小个-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行需要标记,否则是连在一起-->
helloworld
world
<br>hello
<!--横线，其中color和width是它的属性-->
<hr>
<hr color="red" width="50%"><!--双引号写不写都没问题-->
<!--pre括起来的都会保留其形式-->
<pre>for(int i =0;i<100;i++){
System.out.println("sb")
}</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2<sup><!--2出现在10的右上角-->
10<sub>2<sub><!--出现在右下角-->
<font color="red" size="50">字体标签</font><!--修改改字体颜色和大小-->
</body>
</head>
</html>
---------------------------------实体符号-----------------------
<!doctype>
<html>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c<!--<是小于号 >是大于号-->
<br>a b<!--这里加的是空格-->
</body>
</html>
----------------------------------8表格---------------------------
<!doctype>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br><br><br><br><!--一顿换行-->
<hr color="red" size="99">
<center><h1>员工信息列表</h1></center>
<!--设置表格边框为9像素宽度,还有整体像素，也可以是百分比-->
<table align="center" border="9px" width="60%" heigth="150px">
<!--align=center次方法为对齐方式-->
<tr align="center"><!--tr表示行 td表示列-->
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td align="center">g</td>
</tr>
</table>
</body>
</html>
-----------------------9 单元格合并---------------------------
<!doctype>
<html>
<head>
<title>表格单元格合并</title>
</head>
<body>
<table border="1px" width="50%">
<tr>
<td>1</td><!--<th>1</th>-此方式是自动排列中间->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td rowspan="2">7</td><><!--删除行的-->
</tr>
<tr>
<td colspan="2">8</td><!--删除列的-->
<!--<td>9</td>-->
<!--<td>10</td>合并，把这行删了,一般删下面-->
</tr>
</table>
</body>
</html>
----------------------11-------------thead tbody tfoot--------------
<!doctype>
<html>
<head>
<title>
thead tbody tfoot把代码集中一堆，方便操做
</title>
</head>
<body>
<table border="5px">
<thead><!--分割符号-->
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>员工名称</th>
</tr>
<thead>
<tbody><!--分割-->
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td colspan="2">4</td>
<!--<td>5</td>-->
<!--<td>6</td>-->
</tr>
<tbody>
</table>
</body>
</html>
----------------------12----------------背景图片------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--告诉浏览器-->
<title>背景颜色和背景图片</title>
</head>
<body bgcolor="red" background="img/微信图片_20201001155438%20-%20副本.jpg">
</body>
</html>
------------------------13-----图片img标签------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片img</title>
</head>
<body>
<img src="img/微信图片_20201001155438%20-%20副本.jpg" width="100px" title="我是美女哦" alt="图片不见啦"/>
<br><br><br><!--title是鼠标悬停在图片上显示出来的文字 alt是找不到图片时显示的-->
<img src="img/微信图片_20201001155438%20-%20副本.jpg" width="50%"></img>
</body>
</html>
------------------------14超链接----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com"/>京东</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<br><br>
<a href="微信图片_20201001155438.jpg" target="_blank"><!--新窗口打开 _self是替换当前窗口 ——top是顶级窗口 parent是父窗口-->
<img src="微信图片_20201001155438%20-%20副本.jpg" width="25px" title="赶紧点击" alt="失效"></img>美女
</a>
</body>
</html>
--------------------------------------15超链接-----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com"/>京东</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<br><br>
<a href="微信图片_20201001155438.jpg" target="_blank"><!--新窗口打开 _self是替换当前窗口 ——top是顶级窗口 parent是父窗口-->
<img src="微信图片_20201001155438%20-%20副本.jpg" width="25px" title="赶紧点击" alt="失效"></img>美女
</a>
</body>
</html>
---------------------16有序 个无序----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="square"><!--空心circle 圈实心disc 方实心square -->
啊大哥<li>大哥
<ul>中国</ul>
</li>
<li>美国</li>
</ul><!--以上无序-->
<!--此处有序-->
<ol>
<li>水果
<ol type="I"><!--有罗马 有abc 有数字 有i-->
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜</li>
<li>甜点</li>
</ol>
</body>
</html>
---------------------17表单初步-------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
</head>
<body>
<form action="http://www.hao123.com/"><!--写服务器地址-->
<a href="http://www.baidu.com">百度</a>
<input type="submit" value="登录"/><!--提交的按钮 和href属性差不多,但这个可以提供用户输入入口-->
<input type="text" /><!--文本框,在form内可以被带走-->
<input type="password"><!--密码框-->
<input type="checkbox"><!--复选框-->
<input type="radio"><!--单选按钮-->
<input type="button" value="显示按钮上的文本"/><!--普通按钮，不具备提交功能-->
</form>
<br><br>
<form action="http://www.dayun.com"/>
用户名<input type="texxt"/>
<br>密码<input type="password"/>
<input type="submit" value="登录" />
</form>
<form>
<table border="100px">
<tr>
<td>用户名</td>
<td><input type="text" name="user"/></td><!--提交的必须写name-->
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd"/> </td><!--提交的必须写name--><!--http://127.0.0.1:8848/html%20%20sss/biaodan.html?user=123&userpwd=321 -->
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录">
<input type="reset" value="清空">
</td>
</tr>
</table>
</form>
</body>
</html>
--------------------------18表单实现-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单注册实现</title>
</head>
<body>
<!--
用户注册
姓名
确认密码
性别
兴趣爱好
学历
简历
-->
<form action="http://ashjkhfsjkaf" method="post"/><!--默认get post方法提交不会显示数据-->
用户名
<input type="text" name="user"/>
<br>
密码
<input type="password" name="userpasspwd"/>
<br>
确认密码
<input type="password"/>
<br>
性别
<input type="radio" name="gender" value="1" checked/ >男<!--checked默认-->
<input type="radio" name="gender"/>女
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" />喝酒
<input type="checkbox" name="interest" value="fireHair"/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option><!--默认select-->
<option value="ss">硕士</option>
</select>
<br>
简历
<textarea rows="10" cols="30" name="introduce"></textarea>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</form><!--超链接只是不能给用户输入，也能提交-->
</body>
</html>
---------------------19下列列表多选-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉</title>
</head>
<body>
<select multiple="multiple" size="3"><!--size是显示个数-->
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>东北</option>
</select>
</body>
</html>
------------------20 form的file控件-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form 的控件</title>
</head>
<body>
<input type="file"/><!--打开文件-->
</body>
</html>
-------------------------------------------21隐藏的hidden控件----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏的hidden控件</title>
</head>
<body>
<input type="hidden" name="user" value="123"/><!--在页面上不显示-->
</body>
</html>
------------------------------------22隐藏的hidden控件2-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly和disabled</title>
</head>
<body>
<form action="124322">
<input type="text" name="312" value="321" readonly /><!--readonly可以提交 不可以修改-->
<br><input type="text" name="654" value="56" disabled /><!--disabled不可以提交，不可修改-->
</form>
</body>
</html>
-------------------------------------------24maxlength-----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input控件maxlength属性</title>
</head>
<body>
<form>
<input type="text" maxlength="3" /><!--限制用户输入数量-->
</form>
</body>
</html>
------------------------25id属性-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id属性</title>
</head>
<body>
<form id="myform">
<input type="text" id="user" maxlength="3" name="user1" /><!--id方便以后CRUD通过id获取该节点 健称dom(documen)树-->
</form>
</body>
</html>
-----------------------26 div和 span------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和 span</title>
</head>
<body>
<!--他们是布局嵌套-->
<div id="div1">我是一个div</div>
<div id="div2">我是第二个div
<div>龙的传人
<div>有木有效果</div>
</div>
</div><!--默认情况下div会独占一行-->
<span id="span1">我是一个span</span>
<span id="span2">我是一个span</span><!--可以通过坐标迅速知道位置-->
</body>
</html>
浙公网安备 33010602011771号