Web前端 - HTML
1、系统结构
(1)B/S架构:
Browser / Server (浏览器/服务器的交互形式。)
Browser支持哪些语言:HTML、CSS、JavaScript
写HTML、CSS、JavaScript代码的这波人职位叫做:WEB前端开发工程师。(Java程序员目前来看也需要会一些前端的东西。)
前端页面上的图片需要UI设计师完成。(PS对java程序员来说没有太高的要求。)
服务器端Server,Server端的语言很多:C C++ Java python.....(我们主要是使用Java语言完成服务器端的开发)
B/S架构的系统有什么优点和缺点?
优点:升级方便,只升级服务器端代码即可。维护成本低。
缺点:速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统
不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业
内部更注重维护的成本。
B/S架构的系统有哪些代表?
京东
百度
天猫
....
(2)C/S架构
Client / Server (客户端/服务器端的交互形式。)
缺点:升级麻烦,维护成本较高。
优点:速度快,体验好,界面炫酷。(娱乐型的系统多数是C/S架构的。)
常见的C/S架构的系统:
QQ
微信
支付宝
....
2、软件环境准备
世界五大主流浏览器:
Internet Explorer 简称ie
google chrome浏览器
firefox 浏览器
safari浏览器
opera浏览器
1、安装其中的谷歌浏览器、火狐浏览器、IE(电脑自带的有)
2、安装HBuilderX,进行前端方面的开发
网页制作三贱客:Dreamweaver、Firework、Flash
也可以安装一下Dreamweaver8,看一下
3、什么是HTML?怎么开发HTML?怎么运行HTML?
* HTML: Hyper Text Markup Language (超文本标记语言)
由大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名1="属性值1" 属性名2="属性值2" ...>
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频....
* HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具,例如:DreamWeaver、HBuilder.....
* 直接采用浏览器打开HTML文件就是运行。
4、HTML是谁制定的?
W3C:万维网联盟。World Wide Web Consortium
W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是:HTML5.0,简称H5.
这里学习HTML4.0(主要是学习一下HTML的基础用法。)
W3C制定了很多规范:
HTML/XML/http协议/https协议......
为了方便中国web前端程序员的开发,提供大量的帮助文档。为开发提供方便。
w3school:先出现的,和W3C没有关系
w3cschool:后出现的,和W3C没有关系
5、开始写代码
1、前6个例子最好手写(用文本编辑器写),练习一下,然后再用专门工具写
2、使用工具:HBuilderX,写后面的
开发工具有提示功能,会方便很多
6、第一个HTML
(1)主要强调HTML的标签都是成对儿的,有开始标签,一般都会有对应的结束标签。
(2)强调代码的合理缩进
(3)强调HTML语法松散不严格
(4)强调HTML不区分大小写
(5)强调标签的属性,每个属性都包括属性名和属性值,属性值可以使用单引号括起来,也可以使用双引号括起来。
(6)强调HTML中的注释怎么写
(7)<meta charset="UTF-8"/>解决乱码问题
乱码产生是因为文件采用UTF-8方式,但浏览器打开该文件时采用GBK方式打开的,所以乱码。
该行代码的作用就是告诉浏览器采用哪一种字符编码打开该文件。
<!--
1、这是HTML的注释
2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3、HTML不区分大小写,语法松散不严格。
(比如最后面的</html>,可以写成大写的、小写的、大小写混合的,甚至是不写,都可以打开这个html网页)
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题,显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容,欢迎学习HTML!
</body>
<!--
</HTML>
-->
<!--
</Html>
-->
7、【基本标签】!!!
段落标记 <p></p>
标题 h1~h6
换行 <br>
水平线 <hr>
字体标签 <font color="green" size="50">hello</font>
预留格式 <pre>要显示的计算机源码</pre>
粗体字 <b>粗体字</b>
斜体字 <i>斜体字</i>
插入字 <ins>插入字</ins>
删除字 <del>删除字</del>
右上角加字 <sup></sup>
右下角加字 <sub></sub>
<!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标签的属性-->
<hr color="red" width="50%">
<!--语法很松散-->
<hr color='green' width=30%>
<!--字体标签-->
<font color="green" size="50">字体标签</font>
<!--预留格式:
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签常用来表示计算机的源代码。-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>
<b>粗体字</b>
<i>斜体字</i>
<ins>插入字</ins>
<del>删除字</del>
<!--右上角加字:显示10的2次方-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>m</sub>
</body>
</html>
8、实体符号
在 HTML 中,某些字符是预留的。HTML 中的预留字符必须被替换为实体符号。
实体符号特点是:以&开始,以;结束。
空格
小于号 <
大于号 >
例如:在 HTML 中不能直接使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
<!doctype html>
<html>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c <br>
<!-- < 是小于号 > 是大于号 -->
b<a>c <br>
a bc <br>
<!-- 多个空格,使用多个 -->
a bc
</body>
</html>
9、【表格】!!!
1、基本表格的标签
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格的单元格。
2、单元格合并
<td rowspan="合并的行数">
<td colspan="合并的行数">
合并的时候,它跨越的单元格应该被删除。
3、thead、tbody、tfoot标签
thead、tbody、tfoot 在table中不是必须的,只是这样做便于后期的JS代码的编写
例1:
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br>
<center><h1>这个表格有一个标题,在下方</h1></center>
<hr>
<!--
align="对齐方式"
border="像素" ---表格边框的宽度
width="像素或百分比" ---表格的宽度。
height="像素或百分比"> ---表格的高度。
-->
<table align="center" border="4px" width="60%" height="150px">
<caption>xxxx表</caption>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr align="center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td align="center">x</td>
<td>y</td>
<td>z</td>
</tr>
</table>
</body>
</html>
例2:
<!doctype html>
<html>
<head>
<title>表格单元格合并,以及th标签</title>
</head>
<body>
<!--注意事项:
<td rowspan="合并的行数">
<td colspan="合并的行数">
合并的时候,它跨越的单元格应该被删除。
-->
<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>
<td rowspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
<!-- <td> 9 </td> -->
</tr>
</table>
</body>
</html>
例3:
<!doctype html>
<html>
<head>
<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意:并不是设置当前页面的字符编码方式。-->
<meta charset="gbk">
<title>thead、tbody、tfoot 在table中不是必须的,只是这样做便于后期的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>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>root1</td>
<td>root2</td>
<td>root3</td>
</tr>
</tfoot>
</table>
</body>
</html>
10、背景颜色和背景图片
bgcolor : 设置背景颜色
background : 设置背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<body bgcolor="red" background="img/bd_logo1.png">
background="img/bd_logo1.png"————需要在当前目录下面新建一个img文件夹,里面存放对应的照片 <br />
注意,背景图片太小之后,一张图片在浏览器中铺不满的话,它会重复,直到铺满
</body>
</html>
11、图片
1、设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放,不建议设置高度,设置高度容易失真。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片img</title>
</head>
<body>
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
<img src="img/sdsdsds.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>
<br><br><br>
<img src="img/bd_logo1.png" />
</body>
</html>
12、【超链接】!!!
href:hot references 热引用
(0)超链接的特点:
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
(1)超链接的作用
向服务器发送请求,链接到某个资源
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统:每一个请求都会对应一个响应。
(2)链接到网络中的某个资源
<a href="http://www.baidu.com"></a>
(3)链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径都可以"></a>
(4)图片做超链接
<a href=""><img/></a>
(5)超链接的target属性,可取值:
_blank : 新窗口
_self : 当前窗口(默认就是这种方式。)
_top : 顶级窗口
_parent : 父窗口
(6)用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果,只不过超链接更傻瓜式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--href后面的路径可以是网络中的某个资源-->
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com/">京东商城</a>
<br><br>
<!--href后面的路径可以是也可以是本地资源的路径。-->
<a href="007-背景颜色和背景图片.html">007本地资源的路径</a>
<!--图片超链接-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px"/>
</a>
<!--target="_blank": 以新窗口的形式打开链接 -->
<a href="https://www.hao123.com/" target="_blank">
<img src="img/hao123.png" width="120px"/>
</a>
</body>
</html>
13、列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
<li>小白菜</li>
</ol>
</li>
<li>甜点</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
14、【表单】!!!
1、表单
(1)表单有什么用?
收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
(2)怎么画一个表单?
使用form标签画表单。
(3)一个网页当中可以有多个表单form。
(4)表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
(5)http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给:
192.168.111.3机器上的8080端口对应的软件。
(6)重点强调:表单项写了name属性的,一律会提交给服务器。不想提交这一项,就不要写name属性。
2、第一个表单:
<form action="http://192.168.101.2:8080/crm/login">
用户名<input type="text" name="uname" />
密码 <input type="password" name="pwd"/>
<input type="submit" value="登录"/>
<!--普通按钮不具备提交表单的能力-->
<input type="button" value="登录"/>
</form>
<!--submit放到form外部无法提交表单-->
<input type="submit" value="登录"/>
(1)action属性等同于超链接的href属性,填写请求的url
(2)input标签属于输入域标签,input标签的type属性是text,表示文本框,是password,表示密码框
(3)input标签的type是submit表示提交按钮,该按钮可以提交表单,所谓表单的提交是发送请求url,并携带数据给服务器。
(4)所有按钮的value属性都是用来设置按钮上显示的文本内容
(5)发送请求并提交数据时,数据格式遵循HTTP协议,所有浏览器都会采用这种格式:
url?name=value&name=value&name=value...,其中name是input标签的name属性,value是input标签的value属性
(6)文本框和密码框的value不需要开发人员指定,用户填写的数据就是value。
(7)submit按钮放到form标签外面无法提交表单
(8)普通按钮不具备提交表单的能力。
3、表单项包括:
(1)用户名
<input type="text" name="username" />,value属性不需要写,用户填写的数据就是value
(2)密码
<input type="password" name="pwd" />,value属性不需要写,用户填写的数据就是value
(3)性别
男<input type="radio" name="gender" value="m"/>,性别是单选按钮,用户只能选,所以该标签需要添加value属性
女<input type="radio" name="gender" value="f" checked/>,checked默认选中
同一组的单选按钮,name必须相同
提交给服务器的数据是:gender=m 或者 gender=f
(4)兴趣
运动<input type="checkbox" name="aihao" value="sport"/>
音乐<input type="checkbox" name="aihao" value="music" />
跳舞<input type="checkbox" name="aihao" value="dance" checked/>,checked表示默认选中
同一组的复选框,name相同
以上三项都被选中的话,提交的数据是:aihao=sport&aihao=music&aihao=dance
(5)学历
学历
<select name="xueli">
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk" selected>本科</option>
</select>
selected默认选中
当选中本科时,提交的数据为:xueli=bk
(6)简介
<textarea cols="列数" rows="行数" name="jianjie"></textarea>,文本域没有value属性,用户填写的内容就是value
(7)注册按钮
<input type="submit" value="注册"/>:该标签放在form标签内部才起作用
(8)重置按钮
<input type="reset" value="重置" />
(9)再次强调表单提交时的数据格式
action?name=value&name=value&name=value&name=value...
这是HTTP协议中规定的,这些有规律的数据提交给服务器之后,以后服务器端的java程序要解析这段数据的。
4、form表单的method属性
(1)method不写或写上get都属于get请求,method写post才是post请求
(2)get请求在HTTP协议的请求行上提交数据,最终提交的数据会显示在浏览器地址栏上
(3)post请求在HTTP协议的请求体中提交数据,最终提交的数据不会显示到浏览器地址栏上
(4)只有当使用form表单,并且method属性设置为post才是post请求,其他请求均为get,超链接也是get请求。
5、下拉列表支持多选
(1)支持多选:multiple="multiple"
(2)显示多个条目:size="3"
<!-- multiple="multiple" 支持多选的 size设置显示条目数量。另外注意在选的时候要按住ctrl键才能多选-->
<select name="address" multiple="multiple" size="2">
<option value="hb">河北省</option>
<option value="hn">河南省</option>
<option value="sd">山东省</option>
<option value="sx">山西省</option>
</select>
6、file控件、hidden控件
(1)file控件:文件上传专用
<input type="file" />
(2)hidden控件。隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器
<input type="hidden" name="userid" value="111" />
7、readonly 和 disabled
readonly和disabled相同点:都是只读不能修改。
但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交。)
用户代码<input type="text" name="usercode" value="110" readonly />
用户姓名<input type="text" name="username" value="zhangsan" disabled />
8、input控件的maxlength属性
maxlength属性:规定输入字段的最大长度,以字符个数计。
<input type="text" maxlength="3" />
例:用户注册的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!--
用户注册:
用户名
密码
确认密码
性别
兴趣爱好
学历
简介
-->
<form action="http://localhost:8080/jd/register" method="get">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpwd" />
<br>
确认密码
<input type="password"/>
<br>
性别 <!--单选按钮:radio-->
<input type="radio" name="gender" value="1" />男 <!--单选按钮的value必须手动指定-->
<input type="radio" name="gender" value="0" checked/>女 <!--checked 默认选中-->
<br>
兴趣爱好 <!--复选框:checkbox-->
<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> 元素-->
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option> <!--selected 默认选中-->
<option value="ss">硕士</option>
</select>
<br>
简介 <!--文本域,文本域没有value属性,用户填写的内容就是value-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="清空" />
</form>
<br>
<!--超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。-->
<!--超链接是get请求。不是post请求。-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
</body>
</html>
<!--
http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
-->
15、HTML中元素的id属性
1、在HTML文档当中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意:表单提交数据的时候,只和name有关系,和id无关。
3、id有什么用?
javascript语言:可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。
id的存在让我们获取元素(节点)更方便。
4、HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。
<input type="text" id="userId" name="username"/>
<input type="password" id="pwdId" name="userpwd"/>
16、HTML中的div和span
1、div和span是什么?有什么用?
* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子,div嵌套div就是盒子套盒子。
* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的,但是table不灵活,太死板。
现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。
3、div和span的区别?
div独自占用一行(默认情况下)
span不会独自占用一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中的div和span</title>
</head>
<body>
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个SPAN标签--</span>
<span id="span2">我是一个SPAN标签--</span>
<div id="div3">
<div>
<div>test</div>
</div>
</div>
</body>
</html>
【总结——思维导图】
传送门
下一章:Web前端 - CSS