标签：重复 也会 file 超文本标记语言 背景图片 天猫 网页开发 号码 server
Browser/Server ： （浏览器/服务器的交互形式）Brower支持哪些语言：BTML 、CSS 、JavaScriptHTML、CSS、JavaScript代码的这拨人职位叫做：WEB前端开发工程师。UI设计师完成。S是服务器端Server，Server端的语言很多：C、C++、Java、Python .........HTML：Hyper Text Markup Language （超文本标记语言；超文本：流媒体、图片、声音、视频...）由大量的标签组成，每一个标签都有开始标签和结束标签。<标签>
<标签>
<标签 属性名=‘属性值‘ 属性名=‘属性值‘>
</标签>
</标签>
</标签>
HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm。HTML也有专业的开发工具，例如：DreamWeaver、HBuilder ...w3c （世界万维网联盟）制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。HTML目前最高的版本是HTML5.0，简称H5。我们这里学习HTML4.0（主要是学习一下HTML的基础用法）。<!--
1.这是HTML的注释
2.加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3.HTML不区分大小写，语法松散不严格。
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页的左上角-->
<title>页面的标题</title>
</head>
<!--体-->
<body>
页面的主体内容，欢迎学习HTML！
</body>
</html>
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--段落标记-->
<p>诗曰：混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿蒙，开辟从兹清浊辨。
覆载群生仰至仁，发明万物皆成善。欲知造化会元功，须看西游释厄传。</p>
<p>盖闻天地之数，有十二万九千六百岁为一元。</p>
<p>将一元分为十二会，乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。</p>
<p>每会该一万八百岁。且就一日而论：子时得阳气，而丑则鸡鸣；寅不通光，而卯则日出；辰时食后，而巳则挨排；</p>
<p>日午天中，而未则西蹉；申时晡而日落酉，戌黄昏而人定亥。譬于大数，若到戌会之终，则天地昏缯而万物否矣。</p>
<!--标题字：是HTML预留的格式，和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<!--换行标记,br是一个独目标记-->
hello
world
hello<br>world!
<!--横线，独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--下面的语句也是可以的，说明语法太松散了！-->
<hr color=‘green‘ width=50%>
<!--预留格式-->
<pre>
for(int i=0;i<10;i++){
System.out.println("i = " +i);
}
</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>
<!doctype html>
<html>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c
<!--实体符号的特点是：以&开始，以;结束。<是小于号 >是大于号-->
b<a>c
<!--空格符是： -->
a b
</body>
</html>
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--border="1px" 设置表格的边框为1像素宽度
width 宽度
height 高度
-->
<!--<table border="1px" width="300px">-->
<table border="1px" width="60%" height="150px">
<!--align为对齐方式-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<title>表格的单元格合并</title>
</head>
<body>
<!--注意事项
1.row合并行时，删除“下面的”单元格
2.col合并列时，对删除哪一个没有要求
-->
<table border="1px" width="50%">
<tr>
<td colspan="2">1</td>
<!--
<td>2</td>
-->
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">cf</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<!--
<td>f</td>
-->
</tr>
</body>
</html>
<!doctype html>
<html>
<head>
<title>表格的单元格合并 以及th标签</title>
</head>
<body>
<!--注意事项
1.row合并行时，删除“下面的”单元格
2.col合并列时，对删除哪一个没有要求
-->
<table border="1px" width="50%">
<!--
<tr>
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
</tr>
-->
<tr>
<!--th 标签也是单元格标签，比td多的是居中、加粗-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td colspan="2">1</td>
<!--
<td>2</td>
-->
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">cf</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<!--
<td>f</td>
-->
</tr>
</body>
</html>
<!doctype html>
<html>
<head>
<title>thead tbody tfoot在表格中不是必须的，只是便于后期的JS代码的编写</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>a</td>
<td>b</td>
<td>c</td>
</tr>
</tfoot>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面
注意：并不是在设置当前页面的字符编码方式-->
<meta charset="utf-8">
<title></title>
</head>
<!--
bgcolor:设置背景色
background:设置背景图片
以上的设置都是对背景进行设置
-->
<body bgcolor="red" background="img/u=3914148106,1251187670&fm=26&gp=0.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.设置图片宽度和高度的时候，只设置宽度，高度会进行等比例的缩放
2.img标签就是图片标签
3.src属性是图片的路径
4.width设置宽度，height设置高度
5.title是设置鼠标悬停时显示的信息。
6.alt设置图片加载失败时显示的提示信息。
-->
<img src="img/u=3914148106,1251187670&fm=26&gp=0.jpg" width="100px" title="我是Java的创始人哦" alt="图片找不到了哦!"/>
<br><br><br>
<img src="img/u=3914148106,1251187670&fm=26&gp=0.jpg"/>
</body>
</html>
<!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.12306.cn">12306</a>
<br><br>
<!--
href:hot references 热引用
href属性后面一定是一个资源的地址
href后面可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径
-->
<a href="html-图片img标签.html">图片</a>
<!--图片超链接-->
<a href="http://www.hao123.com/">
<img src="img/hao123.png" width="120"/>
</a>
<!--
超链接有一个target属性：
可取值：
_blank ：新窗口
_self ：当前窗口（默认就是这种方式）
_top ：顶级窗口
_parent ：父窗口
-->
<a href="http://www.hao123.com/" target="_self">
<img src="img/hao123.png" width="120"/>
</a>
</body>
</html>
request）response）B ---请求---> S
S ---响应---> B
url，有什么区别？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="i">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol type="1">
<li>白菜</li>
<li>胡萝卜</li>
<li>芹菜</li>
</ol>
</li>
<li>甜点</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>中国
<ul type="square">
<li>北京</li>
<li>南京
<ul type="disc">
<li>江宁区</li>
<li>栖霞区</li>
<li>建邺区</li>
</ul>
</li>
<li>杭州</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.表单有什么作用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2.怎么画一个表单？
使用form标签画表单
3.一个网页当中可以有多个表单form
4.表单最终需要提交数据给服务器，form标签有一个action属性，这个属性用来指定服务器地址。
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器中发送请求。（request）
5.action="http://192.168.111.3:8080/oa/save 这是请求路径，表单提交的数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
-->
<form action="http://192.168.111.3:8080/oa/save">
<!--画一个提交按钮，这个按钮可以提交表单-->
<!--画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
<!--对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息-->
<input type="submit" value="注册"/>
<!--这是一个普通的按钮，不具备提交表单的能力-->
<input type="button" value="设置按钮上显示的文本"/>
</form>
<!--这个按钮和超链接没有太大区别。（超链接和表单都可以向服务器发送请求，只不过表单在发送请求的同时可以携带数据）-->
<form action="http://www.baidu.com">
<input type="submit" value="百度"/>
</form>
<form action="http://localhost:8080/jd/login">
用户名<input type="text"/><br>
密码<input type="password"/><br>
<input type="submit" value="登录"/>
</form>
<!--
表单时以什么格式提交数据给服务器的？
http://localhost:8080/jd/login?username=jack&userpwd=123
格式：action?name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的，必须以这种格式提交给服务器。
重点强调：表单填写了name属性的，一律会提交给服务器。不想提交这一项的，就不要些name属性。
文本框和密码的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器。
但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。Java代码得到的是：String username="";
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
用户注册：
用户名
姓名
密码
确认密码
性别
兴趣爱好
学历
简介
form表单method属性
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上
post:采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上
当用户提交的信息中有敏感信息时，例如：密码，建议采用post方式进行提交！
method属性不指定或者指定为get，这种情况下都是get。
只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。
post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来。
超链接也可以提交数据给服务器，但是提交的数据是固定不变的。
超链接是get请求，不是post请求。
-->
<form action="http://localhost:8080/jd/register" method="post">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="username"/>
<br>
确认密码
<input type="password"/>
性别
<input type="radio" name="gender" value="1"/>男
<input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="fireHair" checked />烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option> <!--默认选中-->
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
<br>
简介 <!--文本域，文本域没有value属性，用户填写的就是value-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多选</title>
</head>
<body>
<!--multiple="multiple" 支持多选的。设置显示条目数量-->
<select multiple="multiple" size="3">
<option>江苏省</option>
<option>浙江省</option>
<option>安徽省</option>
<option>湖南省</option>
<option>四川省</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<!--file控件 文件上传专用-->
<input type="file"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏域hidden控件</title>
</head>
<body>
<form action="http://localhost:8080/oa/save">
<!--隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器-->
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly和disabled</title>
</head>
<body>
<!--
readonly和disabled相同点：都是制度不能修改
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）
-->
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="111" readonly />
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交数据" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>控件的maxlength属性</title>
</head>
<body>
<!--
maxlength 设置文本框中可输入的属性
-->
<input type="text" maxlength="3"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="mybody">
<!--
1.在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
2.注意：表单提交数据的时候，只和name有关系，和id无关。
3.id有什么作用？
javascript语言，可以对HTML文档中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4.HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要是对这颗DOM（document）树上的节点进行增删改的。
-->
<form id="myform">
<input type="text" id="username" name="username" />
<input type="password" id="userpwd" name="userpwd" />
<!--id就是节点的身份证号码，不能重复-->
<!--
<input type="text" id="username" />
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span在网页中的应用</title>
</head>
<body>
<!--
1.div和span是什么？有什么作用？
div和span都可以成为“图层”
图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子套盒子
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2.其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现在的网页开发中div使用最多，几乎很少使用table进行布局了。
3.div和span的区别？
di独自占用一行（默认情况下）
span不会独自占用一行
-->
<div id="div1">我是一个div</div>
<div id="div2">我是一个div</div>
<span id="span1">我是一个span标签</span>
<span id="span2">我是一个span标签</span>
</body>
</html>
标签：重复 也会 file 超文本标记语言 背景图片 天猫 网页开发 号码 server
原文地址：https://www.cnblogs.com/yxc-160206/p/13352478.html
