目前软件行业大多数的项目都是基于 B/S 架构，即在浏
览器端实现效果展示。网页编程也是每个程序员必懂的技能。
本阶段课程主要讲解 HTML5、CSS3 和 JavaScript 语言，以
及 Jquery。对于 JAVA 程序员来说，不需要像前端程序员那
样精通这部分内容，但是也需要做到熟悉。
HTML(Hyper Text Markup Language)：超文本标记语言
HTTP(HyperText Transfer Protocol)：超文本传输协议
URL(Uniform Resource Location) ：统一资源定位符
需求：（生活中遇到问题）
随着技术的发展，信息量的增大网页的数据信息没有办
法完美的、漂亮的展现到用户的面前。
意义:(作用)：
HTML是一种专门对网页信息进行规范化展示的语言。
把网页的信息格式化展现的语言
2.2 什么是 HTML？
HTML(Hyper Text Markup Language)：超文本标记语言
超文本：文本信息 、图片、声音、视频、超链接等
标记：标签的体现
2.3 学习的网站
w3cschool在线教程(网址：http://www.w3school.com.cn/)
<meta charset="utf-8" /> <title></title> <!--搜索引擎优化--> <meta name="author" content="朱自清，张三" /> <meta name="description" content="盼望着盼望着东风 来了" /> <meta name="keywords" content="东风，盼望" /> <!--自动刷新网页--> <meta http-equiv="refresh" content="5;http://www.bjsxt.com" /> <!--禁止网页缓存 (了解)--> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="expires" content="0" />
<!--标题标签 h1-h6 自动的加粗加黑 会自动的换行 align:调整标签的位置 （默认是left） --> 【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园 <h1 align="right">【新时代·幸福美丽新边疆】</h1> <h2>【新时代·幸福美丽新边疆】</h2> <h3>【新时代·幸福美丽新边疆】</h3> <h4>【新时代·幸福美丽新边疆】</h4> <h5>【新时代·幸福美丽新边疆】</h5> <h6>【新时代·幸福美丽新边疆】</h6> <!--分割线标签 width：宽度 500px:像素 color:颜 色 align:位置（默认center） size:垂直方向的大小 --> <hr width="500px" color="red" align="left" size="20px"/> <!--p段落标签 br:换行 空格--> <p> 新华网阿里5月11日电（张宸 雪珍）55岁 的白玛加布看着在<br /> 玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑 容。</p> <!--预文本标签 按照我们指定的格式输出 （灵活 性比较的大）--> <pre> 新华网阿里5月11日电（张宸 雪珍） 55岁的 白玛加布 看着在 </pre>
<!--下划线标签--> <u>北京尚学堂</u> <!--斜体标签--> <i>北京尚学堂</i> <!--加粗加黑标签--> <b>北京尚学堂</b> <!--删除线标签--> <del>北京尚学堂</del> <!--上标标签--> 2<sup>3</sup> <!--下标标签--> log<sub>7</sub> <!--字体变小标签--> <small>北京尚学堂</small> <!--字体放大--> <big>北京尚学堂</big> <!--字体标签 face：指定字体的风格--> <font color="red" size="25px" face="宋体">北京尚学堂 </font> <!--列表标签{[1]有序列表，[2]无序列表，[3]自定义列 表}--> 作用： 【1】树形菜单 【2】导航栏的布局 <!--[1]有序列表--> <ol type="I"> <li>javaSE</li> <li>javaEE</li> <li>javaME</li> </ol> <!--[2]无序列表--> <ul type="square"> <li>javaSE</li> <li>javaEE</li> <li>javaME</li> </ul> <!--[3]自定义列表--> <dl> <dt>java</dt> <dd>javaSE</dd> <dd>javaEE</dd> <dd>javaME</dd> </dl> <!--跑马灯标签--> <marquee direction="right" scrollamount="40px"> 北京尚学堂</marquee>
超链接标签的作用（不会自动换行） 【1】实现不同页面之间的跳转 href:指定跳转到目标资源的位置 target：打开网页的方式 【2】实现锚点功能 6.2 超链接标签的使用 <!--跳转到本地的资源位置--> <a href="02body中常用小标签.html" target="_blank">02小标签测试</a> <!--跳转到网络的位置--> <a href="http://www.bjsxt.com">北京尚学堂</a> 锚点功能 <a href="#bottom" name="top">返回底部</a> <a href="#top" name="bottom">返回顶部</a>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--相对路径--> <img src="img/2.jpg" /> <!--绝对路径--> <img src="C:\\Users\\my\\Documents\\HBuilderProjects\\01HTML\\img\\1.jpg" /> <!--网络路径--> <img src="https://www.baidu.com/img/bd_logo1.png" /> <hr /> <p> 6666 <a href="#"> <img src="img/1.jpg" title="图片" width="200px" height="200px" border="2px" alt="图片显示错误" align="right"/> </a> 8888 </p> </body> </html> <!-- img (不会自动的换行) src:引入图片的位置{相对路径、绝对路径、网络路径 } title：图片的标题 原始 宽和高 400px 260px 200px 130px border:图片的边框 alt：图片无法正常显示的时候显示的属性 align:图片的位置 ，必须有参照物 -->
img (不会自动的换行)
src:引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
原始 宽和高
400px 260px
200px 130px
border:图片的边框
alt：图片无法正常显示的时候显示的属性
align:图片的位置 ，必须有参照物
7.2 图片标签的使用
<!--相对路径-->
<img src="img/2.jpg" />
<!--绝对路径-->
<img
src="C:\\Users\\my\\Documents\\HBuilderProjects\\01
HTML\\img\\1.jpg" />
<!--网络路径-->
table>tr*3>th*3 :声明3行3列的表格
table表格的自适应能力 (align="center")整个的表格整
体居中
width="300px" height="300px" cellpadding：内容和单
元格的距离 cellspacing：单元格和单元格的距离
tr：行 :height
td/th：列 width
td:普通的列
th:标题列:自动的居中，加黑效果
colspan:列合并
rowspan：行合并
bgcolor：背景颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1px" align="center" cellpadding="20px" cellspacing="30px"> <tr height="100px" align="center"> <td width="100px" align="center">11</td> <td width="100px">2</td> <td width="100px">3</td> </tr> <tr height="100px"> <th>4</th> <td>5</td> <td>6</td> </tr> <tr height="100px"> <td>7</td> <td>8</td> <td>9</td> </tr> <tr height="100px"> <th>11</th> <th>12</th> <th>13</th> </tr> </table> <hr /> <table border="1px" width="300px" height="300px" bgcolor="bisque"> <tr bgcolor="aqua"> <th colspan="2" bgcolor="blue">1--2</th> <!--<th>2</th>--> <th>3</th> </tr> <tr> <th>4</th> <th>5</th> <th rowspan="2">6--9</th> </tr> <tr> <th>7</th> <th>8</th> <!--<th>9</th>--> </tr> </table> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> <!-- table>tr*3>th*3 :声明3行3列的表格 table表格的自适应能力 (align="center")整个的表格整体居中 width="300px" height="300px" cellpadding：内容和单元格的距离 cellspacing：单元格和单元格的距离 tr：行 :height td/th：列 width td:普通的列 th:标题列:自动的居中，加黑效果 colspan:列合并 rowspan：行合并 bgcolor：背景颜色 -->
https://www.baidu.com/s？键1=值1&键2=值2
action：表单提交的位置
method（get/post）：表单提交的方式
GET:
Post
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="01body中的常用标签.html" method="get"> <!--普通文本框--> <input type="text" name="wd"/> <input type="submit" value="百度一下" /> </form> </body> </html> <!-- https://www.baidu.com/s？键1=值1&键2=值2 action：表单提交的位置 method（get/post）：表单提交的方式 get:(1)参数会依附于url地址之后，(2)利用get方式提交数据，数据的长度有限制(3)利用get方式提交数据，是不安全的 post(1)请求不会依附于地址，(2)利用post处理参数不受限制（3）post提交数据比较安全 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> <!--普通文本框 value：文本框中值--> 账号： <input type="text" name="zh" value="123" /> <br /> 密码：<input type="password" name="pwd" value="123" /><br /> <!--单选框 实现单选的效果必须指定同一个name属性 checked：默认的选择--> 男：<input type="radio" name="sex" value="1" checked="checked"/> 女：<input type="radio" name="sex" value="0"/> <br /> <!--多选框--> 抽烟:<input type="checkbox" value="1" checked="checked"> 喝酒:<input type="checkbox" /> 烫头:<input type="checkbox" /><br /> <!--多行文本框--> 个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br /> <!--文件选择框--> <input type="file" name="file" /><br /> <!--隐藏框--> <input type="hidden" name="sno" value="20180607" /><br /> <!--下拉框 selected：默认的选择--> <select name="ch"> <option value="1">中国</option> <option value="2" selected="selected">美国</option> <option value="3">日本</option> <option value="4">新加坡</option> </select> <br /> <!--提交按钮--> <input type="submit" value="提交" /> <br /> <!--清除按钮,清空写好的内容--> <input type="reset" value="清除" /> <!--普通的按钮 没有提交数据的功能--> <input type="button" value="提交" /> </form> </body> </html>
原文：https://www.cnblogs.com/wq-9/p/10679741.html
