1. html语言的简介
- HTML编程语言是一种专门在浏览器编译与执行的编程语言
- HTML编程语言学称是 超文本标记式编程语言
作用：
- HTML编程语言通知浏览器将接收的数据以指定方式在窗口展示 [前端工程师]
- 控制浏览器请求行为[前端工程师/服务端工程师] 【重点】
2. html语法规范
2.1 语法规范
1.HTML编程语言中所有命令都是声明在标签中,比如<br>
2.HTML编程语言中所有命令都是预先定义好，不允许开发人员自行创建新的命令
3.HTML编程语言中所有命令不区分英文字母大小写，比如<BR> <br> <Br> 都是合法命令
4.HTML编程语言中命令开发时主要通过对命令中属性进行赋值实现开发目的。
属性赋值时内容可以包含一个""中，也可以包含在'',也可以省略双引号与单引号，此时
属性之间必须采用空格进行隔离
<input type="text" name="one"/>
<input type='text' name='one'/>
<input type=text name=one/>
5.HTML编程语言中命令根据书写方式分为：双目标签命令与单目标签命令
6.双目标签命令书写命令分别出现在开始标签与结束标签，比如 <tr></tr>
双目标签命令在书写时结束标签是不能省略的,比如<tr>,由于没有书写结束标签因此是一个非法命令
7.单目标签命令书写命令出现一个标签之内，比如：<br/>
单目标签命令用于表示结束"/"可以省略不写，比如 <br/>, <br> 这两个都是合法单目标签命令
2.2 常见标签
-
html 的骨架
<html> <!-- 在一个html文件中，所有的html标签命令 必须声明在<html></html> --> <!-- <html></html>:包含了两个子标签 <head></head>:设置基础参数信息 <body></body>:负责通知浏览器将指定的内容以指定的方式在窗口显示 --> <body> 下午好！ </body> </html> -
段落标签：
<!-- 段落标签<p></p> --> <html> <head> <meta charset="GBK"/> </head> <body> <p> 111 </p> <p> 1111 </p> </body> </html> -
标题标签
<html> <body> <h1>一级标题</h1> <h2>一级标题</h2> <h3>一级标题</h3> <h4>一级标题</h4> <h5>一级标题</h5> <h6>一级标题</h6> </body> </html> -
有序列表标签
<html> <body> <ol> <li>中国</li> <li>德国</li> <li>英国</li> </ol> </body> </html> -
无序列表标签
<html> <body> <ul> <li>中国</li> <li>德国</li> <li>英国</li> </ul> </body> </html> -
表格标签
<!-- 其中<tr></tr>表示行 <td></td>表示列 --> <html> <body> <table border="2" align="center"> <tr style="background-color:green"> <td>职员编号</td> <td>职员姓名</td> <td>职员职位</td> <td>职员工资</td> </tr> <tr align="center" style="background-color:yellow"> <td>10</td> <td>smith</td> <td>JAVA工程师</td> <td>13000</td> </tr> <tr align="center" style="background-color:yellow"> <td>20</td> <td>mike</td> <td>中级JAVA工程师</td> <td>35000</td> </tr> <tr align="center" style="background-color:yellow"> <td>30</td> <td>allen</td> <td>高级JAVA工程师</td> <td>55000</td> </tr> <tr align="center" style="background-color:yellow"> <td>40</td> <td>king</td> <td>架构师</td> <td>85000</td> </tr> </table> </body> </html> -
rowspan和colspan属性：
<html> <body> <table border="2" align="center"> <tr style="background-color:green"> <td>部门名称</td> <td>职员编号</td> <td>职员姓名</td> <td>职员职位</td> <td>职员工资</td> </tr> <tr align="center" style="background-color:yellow"> <td rowspan="3">金融事业部</td> <td>10</td> <td>smith</td> <td>JAVA工程师</td> <td>13000</td> </tr> <tr align="center" style="background-color:yellow"> <td>20</td> <td>mike</td> <td>中级JAVA工程师</td> <td>35000</td> </tr> <tr align="center" style="background-color:yellow"> <td>30</td> <td>allen</td> <td>高级JAVA工程师</td> <td>55000</td> </tr> <tr align="center" style="background-color:yellow"> <td>云仓库</td> <td>40</td> <td>king</td> <td>架构师</td> <td>85000</td> </tr> </table> </body> </html><html> <body> <table border=2 align="center"> <tr align="center"> <td rowspan="2">学员名称</td> <td colspan="3">学习科目</td> </tr> <tr> <td>数学</td> <td>语文</td> <td>英语</td> </tr> <tr> <td>mike</td> <td>96</td> <td>89</td> <td>100</td> </tr> <tr> <td>jones</td> <td>67</td> <td>90</td> <td>92</td> </tr> <tr> <td>allen</td> <td>78</td> <td>70</td> <td>78</td> </tr> </table> </body> </html> -
图片：
<html> <body> <center> <div> <font style="font-size:50">怀念我的恩师</font> </div> <div style="border:1px solid black;width:500;height:500"> <img src="cuicui.jpg" title="崔手凉老师" width=300 height=300 style="margin:50"/> <div> </center> </body> </html>
3. 浏览器发送请求三要素
- 1.控制浏览器发送请求地址
- 2.控制浏览器发送请求采用请求方式
- 3.控制浏览器发送请求携带请求参数
3.1 控制浏览器发送请求地址
3.1.1 采用超链接方式
1)格式: <a href="请求地址">提示信息</a>
2)工作原理: 超链接标签命令不会被浏览器自动执行。
在用户使用鼠标单击超链接标签命令时，
此时这个命令才会执行，执行要求浏览器
立刻按照href属性地址发送请求
<html>
<body>
<a href="http://www.baidu.com">百度</a><br/>
</body>
</html>
3.1.2 采用表单标签命令
1)格式:
<form action="请求地址">
<input type="submit"><!--提交按钮-->
</form>
2)工作原理:
表单标签命令不会被浏览器自动执行。
在用户单击提交按钮时，此时表单标签命令
触发执行。执行时要求浏览器立刻按照 action属性地址发送请求
<html>
<body>
<form action="http://www.sina.com">
<input type="submit" value="新浪"/>
</form>
</body>
</html>
3.2 控制浏览器发送请求采用请求方式
什么是请求方式？？
- 请求方式：决定浏览器在发送请求时行为特征
- 浏览器可以选择请求方式：7种，目前为止只考虑【POST请求方式】和【GET请求方式】
3.2.1 GET 请求方式
- 浏览器发送请求时，携带的【请求参数数量】不能超过4K
- 浏览器发送请求时，必须在浏览器地址栏上将【请求参数信息】展示出来
- 浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求头】
- 浏览器在接收到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存
如何设置GET请求方式？？
-
超链接标签命令在执行时，要求浏览器必须采用GET方式发送请求（即，采用超链接时所采用的的请求方式一定为GET）
-
表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求
<form action="请求地址" method="请求方式"> 注意： method属性默认值是GET
3.2.2 POST 请求方式
- 浏览器发送请求时，可以携带任意数量的【请求参数】
- 浏览器发送请求时，必须在浏览器地址栏上隐藏请求参数信息
- 浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求体】
- 禁止浏览器将服务器返回资源文件内容进行保存【阅后即焚】
如何设置POST请求方式？？
-
表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求
<form method="post"></form>
3.2.3 两种请求方式适用场景
-
考虑到POST请求方式，用户可以将【病毒文件内容】发送到服务器上进行攻击。因此绝大多数门户级网站拒绝接收POST请求，日常开发过程绝大多数请求都是GET。
-
在某些特殊场景下必须使用POST
1)文件上传，必须使用POST 2)发起登录验证请求，必须使用POST 3)索要服务器中实时变化数据时（股票价格，车票数量。。。）， 必须采用POST
3.3 控制浏览器发送请求携带请求参数
-
请求参数作用
比如用户通过浏览器访问服务端计算机动态资源文件Student.class class Student{ public int add(int n1,int n2){ //请求处理 int sum = n1 + n2; return sum; } } Http服务器： Student stu = new Student(); stu.add(?,?)//add方法运行时需要实参，需要由用户通过浏览器以请求参数方式提供 浏览器发送请求时需要携带调用方法需要实参（请求参数） http://www.baidu.com?n1=100&n2=200 [n1=100&n2=200]就是浏览器发送请求参数 -
请求参数格式: 请求地址?请求参数名1=值1&请求参数名2=值2
-
浏览器发送请求时携带的请求参数来源
1).通过超链接标签命令指定请求参数 2).通过表单域标签命令指定请求参数
3.3.1 采用超链接标签命令指定请求参数
如：
<a href="http://www.baidu.com?userName=mike&password=123">百度</a>
3.3.2 表单域标签命令
1)一组声明在form标签内部的标签命令
2)提示用户填写对应的【请求参数内容】，用于提供相对灵活的请求参数内容
3)所有的表单域标签都拥有两个属性【name,value】
name属性声明【请求参数名】,value属性声明【请求参数内容】
<form action="http://www.baidu.com">
<input type="text" name="userName" value="mike"/>
<input type="submit">
</form>
当用户单击submit后，浏览器发送请求信息 http://www.baidu.com?userName=mike
-
表单域标签分类：
1）<input /> 2）<select></select> 3）<textarea></textarea>
如：
<html>
<center>
<form action="http://www.baidu.com">
籍贯:<select name="home">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select><br/>
<input type="submit"/><input type="reset"/>
</form>
</center>
</html>
<!--
其中 type="radio"表示为单选
-->
<html>
<form action="http://www.baidu.com">
性别：<input type="radio" name="sex" value="mam">MAN
<input type="radio" name="sex" value="womam">WOMAN<BR/>
<INPUT TYPE="SUBMIT">
</form>
</html>
<html>
<!--
其中type="checkbox"表示多选
-->
<form action="http://www.baidu.com">
性别:<input type="radio" name="sex">男
<input type="radio" name="sex">女<br/>
爱好:<input type="checkbox" name='ck'/>JAVA<br/>
<input type="submit"/>
</form>
</html>
-
表单域标签value属性默认值
1)大多数表单域标签value属性默认值是空字符串 userName='' 2)对于radio与checkbox来说，value属性默认值'on'字符串 -
表单域标签作为请求参数的条件
1)必须声明在form标签内部 2)必须声明name属性 注意： 对于radio标签与checkbox标签来说在满足上述两个条件同时，还必须满足 第三个条件 才可以作为请求参数。。 第三个条件radio与checkbox必须在【被选中】的情况下才可以作为 请求参数。 如果表单域标签使用disabled来修饰时，失去作为请求参数条件 ***readOnly与disabled区别： readOnly：要求当前标签中value属性只能看但是不能被修改， readOnly不会影响表单域 标签作为请求参数条件 disabled：设置当前标签为不可用状态，此时标签中value属性内容 不能被修改的.disabled修饰的表单域标签是 永远都不能作为请求参数