学前了解

B/S 软件的结构

JavaSE C/S Client Server
B/S Browser Serve

前端的开发流程

网页的组成部分

页面由三部分内容组成！

分别是内容（结构）、表现、行为。

内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用 html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现
行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现

HTML

简介

Hyper Text Markup Language （超文本标记语言）简写：HTML HTML

通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，

通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

注：

Java 文件是需要先编译，再由 java 虚拟机跑起来。
但 HTML 文件它不需要编译，直接由浏览器进行解析执行。

HTML 文件的书写规范

<html> 表示整个 html 页面的开始

<head> 头信息

<title>标题</title> 标题

</head>

<body>

body 是页面的主体内容页面主体内容

</body>

</html> 表示整个 html 页面的结束

Html 的代码注释

标签介绍

1.标签的格式:

<标签名>封装的数据</标签名>

2.标签名大小写不敏感。

3.标签拥有自己的属性。

i. 分为基本属性：bgcolor="red" 可以修改简单的样式效果

ii. 事件属性： οnclick="alert('你好！');" 可以直接设置事件响应后的代码。

4.标签又分为，单标签和双标签。

i. 单标签格式： <标签名 /> br 换行 hr 水平线

ii. 双标签格式: <标签名> ...封装的数据... </标签名>

标签的语法：

正确：<div><span>早安</span></div>

错误：<div><span>晚安</div></span>

<hr />





正确：<div>早安</div>

错误：<div>早安

<hr />



正确：<br />

错误：<br>

<hr />



正确：<font color="blue">早安</font>

错误：<font color=blue>早安</font>

错误：<font color>早安</font>

<hr />



正确： <br/>

错误： -->

<hr />

注意事项：

1.html 代码不是很严谨。有时候标签不闭合，也不会报错。

常用标签介绍

font

body>



<font color="red" face="宋体" size="7">我是字体标签</font>

</body>

特殊字符

常用特殊字符表：

显示结果	显示结果	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和好	&	&
"	引号	"	"
'	撇号	&apos(IE不支持);	'

其他特殊字符表：

显示结果	显示结果	实体名称	实体编号
￠	分	¢	¢
£	镑	£	£
¥	钱	¥	¥
§	节	§	§
©	版权	©	©
®	注册商标	®	®
×	乘号	×	×
➗	除号	÷	÷

标题标签

1. <body>
2. <!-- 标题标签
3. 需求 1：演示标题 1 到 标题 6 的
4.     h1 - h6 都是标题标签
5.     h1 最大
6.     h6 最小
7.     align 属性是对齐属性
8.     left 左对齐(默认)
9.     center 剧中
10.     right 右对齐
11. -->
12. <h1 align="left">标题 1</h1>
13. <h2 align="center">标题 2</h2>
14. <h3 align="right">标题 3</h3>
15. <h4>标题 4</h4>
16. <h5>标题 5</h5>
17. <h6>标题 6</h6>
18. <h7>标题 7</h7>
19. </body>

超链接

1. <body>
2. <!-- a 标签是 超链接
3.     href 属性设置连接的地址
4.     target 属性设置哪个目标进行跳转
5.     _self 表示当前页面(默认值)
6.     _blank 表示打开新页面来进行跳转
7. -->
8. <a href="http://localhost:8080">百度</a><br/>
9. <a href="http://localhost:8080" target="_self">百度_self</a><br/>
10. <a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
11. </body>

列表标签

无序列表、有序列表

1. <body>
2. <!--需求 1：使用无序 有序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
3.     ul 是无序列表
4.     type 属性可以修改列表项前面的符号
5.     li 是列表项
6. -->
7. <!--ul 是无序列表-->
8. <ul type="none">
9. <li>赵四</li>
10. <li>刘能</li>
11. <li>小沈阳</li>
12. <li>宋小宝</li>
13. </ul>
14. 
15. <!--ol 是有序列表-->
16. 
17. <ol type="none">
18. <li>赵四</li>
19. <li>刘能</li>
20. <li>小沈阳</li>
21. <li>宋小宝</li>
22. </ol>
23. 
24. </body>

img 标签

img 标签可以在 html 页面上显示图片

1. <body>
2. <!--需求 1：使用 img 标签显示一张的照片。并修改宽高，和边框属性
3.     img 标签是图片标签,用来显示图片
4.     src 属性可以设置图片的路径
5.     width 属性设置图片的宽度
6.     height 属性设置图片的高度
7.     border 属性设置图片边框大小
8.     alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容
9. 
10. 在 JavaSE 中路径也分为相对路径和绝对路径. 相对路径:从工程名开始算
11.     绝对路径:盘符:/目录/文件名
12. 在 web 中路径分为相对路径和绝对路径两种
13.     相对路径:
14.     . 表示当前文件所在的目录
15.     .. 表示当前文件所在的上一级目录
16.     文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
17. 绝对路径:
18.     正确格式是: http://ip:port/工程名/资源路径
19. 错误格式是: 盘符:/目录/文件名
20. -->
21. <img src="1.jpg" width="200" height="260" border="1" alt="找不到"/>
22. <img src="../2.jpg" width="200" height="260" />
23. <img src="../imgs/3.jpg" width="200" height="260" />
24. <img src="../imgs/4.jpg" width="200" height="260" />
25. <img src="../imgs/5.jpg" width="200" height="260" />
26. <img src="../imgs/6.jpg" width="200" height="260" />
27. </body>

表格标签

1. <body>
2. <!--需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框
3.     需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
4.         table 标签是表格标签
5.         border 设置表格标签
6.         width 设置表格宽度
7.         height 设置表格高度
8.         align 设置表格相对于页面的对齐方式
9.         cellspacing 设置单元格间距
10.       tr 是行标签
11.       th 是表头标签
12.       td 是单元格标签
13.       align 设置单元格文本对齐方式
14.       b 是加粗标签
15. -->
16. <table align="center" border="1" width="300" height="300" cellspacing="0">
17. <tr>
18. <th>1.1</th>
19. <th>1.2</th>
20. <th>1.3</th>
21. </tr>
22. <tr>
23. <td>2.1</td>
24. <td>2.2</td>
25. <td>2.3</td>
26. </tr>
27. <tr>
28. <td>3.1</td>
29. <td>3.2</td>
30. <td>3.3</td>
31. </tr>
32. </table>
33. </body>

跨行跨列表格

1. <body>
2. <!-- 需求 1：
3.         新建一个五行，五列的表格，
4.         第一行，第一列的单元格要跨两列，
5.         第二行第一列的单元格跨两行，
6.         第四行第四列的单元格跨两行两列。
7.     colspan 属性设置跨列
8.     rowspan 属性设置跨行
9. -->
10. <table width="500" height="500" cellspacing="0" border="1">
11. <tr>
12. <td colspan="2">1.1</td>
13. <td>1.3</td>
14. <td>1.4</td>
15. <td>1.5</td>
16. </tr>
17. <tr>
18. <td rowspan="2">2.1</td>
19. <td>2.2</td>
20. <td>2.3</td>
21. <td>2.4</td>
22. <td>2.5</td>
23. </tr>
24. <tr>
25. <td>3.2</td>
26. <td>3.3</td>
27. <td>3.4</td>
28. <td>3.5</td>
29. </tr>
30. <tr>
31. <td>4.1</td>
32. <td>4.2</td>
33. <td>4.3</td>
34. <td colspan="2" rowspan="2">4.4</td>
35. </tr>
36. <tr>
37. <td>5.1</td>
38. <td>5.2</td>
39. <td>5.3</td>
40. </tr>
41. </table>
42. </body>

了解 iframe 框架标签 (内嵌窗口)

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.

1. <body>
2.     我是一个单独的完整的页面<br/><br/>
3. <!--ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
4.             ifarme 和 a 标签组合使用的步骤:
5.         1 在 iframe 标签中使用 name 属性定义一个名称
6.         2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
7.             -->
8. <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
9. <br/>
10. <ul>
11. <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
12. <li><a href="1.font 标签.html" target="abc">1.font 标签.html</a></li>
13. <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
14. </ul>
15. </body>

表单标签

什么是表单?

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

表单的显示:

1. <body>
2. <!--需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
3. 隐藏域，自我评价（多行文本域）。重置，提交。-->
4. 
5. <!--
6.         form 标签就是表单
7.         input type=text 是文件输入框 value 设置默认显示内容
8.         input type=password 是密码输入框 value 设置默认显示内容
9.         input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"
10.         input type=checkbox 是复选框 checked="checked"表示默认选中
11.         input type=reset 是重置按钮 value 属性修改按钮上的文本
12.         input type=submit 是提交按钮 value 属性修改按钮上的文本
13.         input type=button 是按钮 value 属性修改按钮上的文本
14.         input type=file 是文件上传域
15.         input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用                        隐藏域（提交的时候同时发送给服务器）
16. 
17.     select 标签是下拉列表框
18.     option 标签是下拉列表框中的选项 selected="selected"设置默认选中
19.     textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
20.     rows 属性设置可以显示几行的高度
21.     cols 属性设置每行可以显示几个字符宽度
22. -->
23. 
24. <form>
25.         用户名称：<input type="text" value="默认值"/><br/>
26.         用户密码：<input type="password" value="abc"/><br/>
27.         确认密码：<input type="password" value="abc"/><br/>
28.         性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
29. 
30.         兴趣爱好：<input type="checkbox" checked="checked" />Java<input type="checkbox"/>JavaScript<input type="checkbox" />C++<br/>
31.         国籍：<select>
32. <option>--请选择国籍--</option>
33. <option selected="selected">中国</option>
34. <option>美国</option>
35. <option>小日本</option>
36. </select><br/>
37.         自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
38. <input type="reset" value="abc" />
39. <input type="submit"/>
40. </form>
41. </body>

表单格式化:

1. <form>
2. <h1 align="center">用户注册</h1>
3. <table align="center">
4. <tr>
5. <td> 用户名称：</td>
6. <td>
7. <input type="text" value="默认值"/>
8. </td>
9. </tr>
10. <tr>
11. <td> 用户密码：</td>
12. <td><input type="password" value="abc"/></td>
13. </tr>
14. <tr>
15. <td>确认密码：</td>
16. <td><input type="password" value="abc"/></td>
17. </tr>
18. <tr>
19. <td>性别：</td>
20. <td>
21. <input type="radio" name="sex"/>男
22. <input type="radio" name="sex" checked="checked" />女
23. </td>
24. </tr>
25. <tr>
26. <td> 兴趣爱好：</td>
27. <td>
28. <input type="checkbox" checked="checked" />Java
29. <input type="checkbox" />JavaScript
30. <input type="checkbox" />C++
31. </td>
32. </tr>
33. <tr>
34. <td>国籍：</td>
35. <td>
36. <select>
37. <option>--请选择国籍--</option>
38. <option selected="selected">中国</option>
39. <option>美国</option>
40. <option>小日本</option>
41. </select>
42. </td>
43. </tr>
44. <tr>
45. <td>自我评价：</td>
46. <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
47. </tr>
48. <tr>
49. <td><input type="reset" /></td>
50. <td align="center"><input type="submit"/></td>
51. </tr>
52. </table>
53. </form>
54. </body>

表单提交细节:

1. <body>
2. <!--
3.         form 标签是表单标签
4.             action 属性设置提交的服务器地址
5.             method 属性设置提交的方式 GET(默认值)或 POST
6. 
7.         表单提交的时候，数据没有发送给服务器的三种情况：
8.             1、表单项没有 name 属性值
9.             2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
10.             3、表单项不在提交的 form 标签中
11. 
12.         GET 请求的特点是：
13.             1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
14.                         请求参数的格式是：name=value&name=value
15.             2、不安全
16.             3、它有数据长度的限制
17. 
18.         POST 请求的特点是：
19.             1、浏览器地址栏中只有 action 属性值
20.             2、相对于 GET 请求要安全
21.             3、理论上没有数据长度的限制
22. -->
23. <form action="http://localhost:8080" method="post">
24. <input type="hidden" name="action" value="login" />
25. <h1 align="center">用户注册</h1>
26. <table align="center">
27. <tr>
28. <td> 用户名称：</td>
29. <td>
30. <input type="text" name="username" value="默认值"/>
31. </td>
32. </tr>
33. 
34. <tr>
35. <td> 用户密码：</td>
36. <td><input type="password" name="password" value="abc"/></td>
37. </tr>
38. 
39. <tr>
40. <td>性别：</td>
41. <td>
42. <input type="radio" name="sex" value="boy"/>男
43. <input type="radio" name="sex" checked="checked" value="girl" />女
44. </td>
45. </tr>
46. 
47. <tr>
48. <td> 兴趣爱好：</td>
49. <td>
50. <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
51. <input name="hobby" type="checkbox" value="js"/>JavaScript
52. <input name="hobby" type="checkbox" value="cpp"/>C++
53. </td>
54. </tr>
55. 
56. <tr>
57. <td>国籍：</td>
58. <td>
59. <select name="country">
60. <option value="none">--请选择国籍--</option>
61. <option value="cn" selected="selected">中国</option>
62. <option value="usa">美国</option>
63. <option value="jp">小日本</option>
64. </select>
65. </td>
66. 
67. </tr>
68. <tr>
69. <td>自我评价：</td>
70. <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
71. </tr>
72. 
73. <tr>
74. <td><input type="reset" /></td>
75. <td align="center"><input type="submit"/></td>
76. </tr>
77. </table>
78. </form>
79. </body>

其他标签

：div、span、p 标签的演

1. <body>
2. <!--需求 1：div、span、p 标签的演示
3.             div 标签 默认独占一行
4.             span 标签 它的长度是封装数据的长度
5.             p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
6.         -->
7. <div>div 标签 1</div>
8. <div>div 标签 2</div>
9. <span>span 标签 1</span>
10. <span>span 标签 2</span>
11. <p>p 段落标签 1</p>
12. <p>p 段落标签 2</p>
13. </body>

本章笔记是观看尚硅谷的JAVAWEB的视频总结出来的笔记希望可以帮助大家，感谢大家的耐心观看如有错误请即使联系我我会及时修正

HTML的笔记和案列以及常用特殊字符

学前了解

B/S 软件的结构

前端的开发流程

网页的组成部分

HTML

简介

HTML 文件的书写规范

标签介绍

常用标签介绍

font

特殊字符

标题标签

超链接

列表标签

img 标签

表格标签

跨行跨列表格

了解 iframe 框架标签 (内嵌窗口)

表单标签

其他标签

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML的笔记和案列以及常用特殊字符

学前了解

B/S 软件的结构

前端的开发流程

网页的组成部分

HTML

简介

HTML 文件的书写规范

标签介绍

常用标签介绍

font

特殊字符

标题标签

超链接

列表标签

img 标签

表格标签

跨行跨列表格

了解 iframe 框架标签 (内嵌窗口)

表单标签

其他标签

热门文章

最新文章

相关课程

相关电子书

相关实验场景