java学习【web基础-html入门】

来源：互联网发布：工资软件编辑：程序博客网时间：2024/06/05 05:56

一：

1.1 网站基本介绍,网站分类(政府,信息集成,企业门户等等)（各种类型的网站简介）1.2 网站开发是如何分工的(项目经理、美工、程序员、测试等等)（简单介绍每个职位是做什么的）1.3 网络广告的盈利方式（按点击付费，包月广告位等）

二：HTML入门
2.1 引入
软件结构分类：
C-S结构（Client - Server 客户端-服务器端）

典型应用：    飞秋、QQ特点：    1）必须安装特定的客户端程序    2）服务器软件升级，客户端的软件同步升级！

B-S结构（Broswer-Server 浏览器-服务器端）

典型应用：    163网站，华育官网，游戏官网。。。特点：    1）不需要特定的客户（只需要浏览器软件）    2）服务器软件升级，浏览器客户端不需要升级！

结论： java就业班开发的软件，大部分都是基于BS结构的！

2.2 网站

服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。html是一门网页制作的语言。

2.3 html语言

html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。html语言由标记组成。学习html语言，掌握一些常用的标记即可！

2.4 超级文本（写一个简单的超文本演示效果）

文字变色文字大小变化显示图片........这些超级文本通过标记实现效果的。

开发软件：DreamWeaver的介绍（简单使用的介绍）

三：
3.1 基本标签的讲解

<html>  --html开始标签    <head>  -- 文件头（用户在浏览器的主体是看不到的）    </head>     <body>    --文件体（用户在浏览器的主体看得到）    </body></html> --html结束标签

3.2 head文件头
作用：告诉浏览器如何解释该html页面

<html>    <!--     html标签分类：    自闭和标签：<abc />    非自闭和：<abc></abc>    注意：标签与标签之间可以出现嵌套    --><head><!--头标签:里面写的所有东西在浏览器的展示区看不到--><title>我是一个标题</title><!-- 给浏览器设置编码--><meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--关键字：作用就是告诉搜索引擎我这个网页里面主要是什么内容。便于搜索引擎的检索SEO：搜搜引擎的优化--><meta name="keywords" content="java培训,web前端培训,运维"/><meta name="description" content="这是一家专注于it培训的公司"/></head><body><!--在浏览器的展示区是可以看到的-->hello</body></html>

3.3 文本标签(body里面的标签)

标题(h1~h6) align：设置位置水平线(hr) color：线的颜色换行(br)标签规定粗体文本(b)将文本以斜体显示(i)将文本以下划线显示(u)段落(p)(书写两段小说进行演示)段落缩进(blockquote)(主要用于解释或者强调)上下标(sup和sub)(一般用于公式)y=x2  H2O  CaCo3原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候(写一首诗，写一段代码))        好雨知时节，当春乃发生。        随风潜入夜，润物细无声。        野径云俱黑，江船火独明。        晓看红湿处，花重锦官城。marquee:behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 bgcolor:字幕背景颜色 direction:设置字幕的滚动方向down  right  left  upbgsound:src:需要播放的音乐路径  loop=-1(无限循环)  autostart="true"自动播放列表标签：有序列表ol li（type属性更改序号类型，案例：投票喜欢的女明星）    无序列表ul  li（用于条目的罗列，type属性更改序号类型，案例：学生管理系统）    项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表）    下拉选项：<select/><option/>    行内标签(span) (html中用的非常少，css中用的非常多)        块标签<div> (html中用的非常少，css中用的非常多)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>文本标签</title></head><body><!--标题标签--><h1 align="center">标题1</h1><h2 align="center">标题2</h2><h3 align="center">标题3</h3><h4 align="center">标题4</h4><h5 align="center">标题5</h5><h6 align="center">标题6</h6><hr color="#669999" /><b>我是b标签</b><br /><i>我是i标签</i><br /><u>我是u标签</u><br /><p>这是小说的第一个段这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落落</p><p>这是小说的第二个段落这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段</p><blockquote>解释说明上述文解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字字</blockquote><hr />y=x<sup>2</sup><br />H<sub>2</sub>O<br />CaCO<sub>3</sub><br /><hr /><pre>            好雨知时节，当春乃发生。            随风潜入夜，润物细无声。            野径云俱黑，江船火独明。            晓看红湿处，花重锦官城。</pre><marquee behavior="slide" bgcolor="#FF0000" direction="down">刘备</marquee><bgsound  src="" loop="-1" /><!--有序列表--><ol type="A">    <li>章子怡</li>    <li>刘亦菲</li>    <li>贾玲</li></ol><hr /><ul type="circle">    <li>章子怡</li>    <li>刘亦菲</li>    <li>贾玲</li></ul><hr /><dl><dt>财务总监</dt><dd>财务专员1</dd><dd>财务专员2</dd><dd>财务专员3</dd><dt>技术总监</dt><dd>程序员1</dd><dd>程序员2</dd><dd>程序员3</dd></dl><hr /><select><option>陕西</option><option>四川</option><option>广东</option></select><hr /><span>我是sapn标签</span><div>我是div标签</div></body></html>

2.4 超链接标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--超链接标签：<a></a>两个属性：href:设置这个超链接需要连接到的资源        target:设置打开资源的方式超链接 ：默认的协议为file://协议：    file:// 本地文件协议    http:// 网络上我们一般请求都使用的是http://，这个协议是基于请求和相应的    thunder:// 迅雷下载协议    mailto:  发送邮件的协议协议的执行流程：thunder://www.movie.com/shujiaoba.avi：会将这个超链接分为两个部分，一个是资源地址，一个协议名称，因为我们在安装每一个软件的时候，每一个软件都会在我们的注册表中注册相应的协议，找你的注册表中有哪些软件注册了该协议，那个软件注册了，就会打开那个软件http://协议的执行流程：     看图超链接的两个作用：1：链接到你想要连接的资源2：打锚点<a name="锚点名称"></a>,你想去哪里就给哪里打锚点   如何去到锚点处：<a href="#锚点名称">去到锚点处</a>    --><a name="top"></a><a href="http://www.baidu.com" target="_blank">超链接</a><br /><a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a><a href="mailto:12345@qq.com">发送邮件</a><a href="#content1">第一章节</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><a name="content1"></a>小说第一个章节的内容小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的<a href="#top">回到顶部</a></body></html>

2.5 图像标签
img 图像标签
常用属性：

src :  表示图片源位置width: 图片宽度height: 图片高度alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效title: 提示文本。当鼠标放到图片上面出现。地图（热点区域）：map热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片标签</title></head><body><img src="b.jpg" alt="我是宝强" width="100" height="100" border="0" usemap="#Map" title="我是宝强"/><map name="Map" id="Map">  <area shape="rect" coords="27,17,64,71" href="2.文本标签.html" target="_blank" />  <area shape="circle" coords="84,22,11" href="3.超链接标签.html" target="_blank" /></map></body></html>

2.6 转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，
那么就需要进行转义。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><h1>标题1</h1><!--使用转义字符将上述的内容展示在页面上<    &lt;>    &gt;&    &amp;空格  &nbsp;   需求：西部    开源商标  &reg;版权  &copy;   需求：给王老吉分别加上版权和商标-->&lt;h1&gt;标题1&lt;/h1&gt;<br/>&amp;<br /><hr />西部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开源<hr />王老吉<sup>&reg;</sup><hr />王老吉<sup>&copy;</sup></body></html>

2.7 表格标签（画图讲解表格标签中的各个位置代表的标签）
这里写图片描述
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题

常用的属性：

border  表格的边框width  宽度heigth 高度align   对齐方式。 left: 左对齐   center:居中  right：右对齐rowspan  行合并。把多行的单元格合并colspan  列合并。把多列的单元格合并

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table border="2" align="center" width="400" height="300"><caption><h1>学科成绩统计表<h1></caption><tr align="center"><th>姓名</th><th>学科</th><th>成绩</th></tr><tr align="center"><td rowspan="2">狗娃</td><td>音乐</td><td>90</td></tr><tr align="center"><td>java</td><td>60</td></tr><tr align="center"><td>狗剩</td><td>java</td><td>70</td></tr><tr align="center"><td>狗蛋</td><td>java</td><td>80</td></tr><tr align="center"><td colspan="2">平均分</td><td>70</td></tr></table></body></html>

2.8做一个练习题(图片展示需求，主要练习表格的建立和单元格的合并)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table border="2" align="center" width="400" height="300"><tr align="center"><td colspan="3">学生成绩</td></tr><tr align="center"><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr align="center"><td>数学</td><td>95</td></tr><tr align="center"><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr align="center"><td>数学</td><td>91</td></tr></table></body></html>

2.9 表单提交（画图展示整体需求和使用场景）
这里写图片描述
表单标签（重点）
作用：用于采集用户输入的数据，提交给后台程序处理

场景1：

注册用户：     -> 注册页面（输入用户名、密码、邮箱...）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库

场景2

登录：    -> 登录页面（输入用户名和密码）（通过表单标签携带用户数据） -> 系统后台，搜索数据库，判断是否存在次用户和密码

表单标签：

<form>   就是一个表单    <input type="text">  单行输入域    <input type="password"/>  密码输入域    <input type="radio"/> 单选按钮    <input type="checkbox"/> 多选按钮        <select/>  下拉选项    <input type="hidden"/>   隐藏域。特点：不会显示到html页面上，但可以携带数据。     <input type="file"/>  文件选择器    <textarea></textarea>  多行输入域    <input type="submit"/>  提交按钮    <input type="button"/> 普通按钮    <input type="reset"/> 重置按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><!--注意：form表单里面有两个属性需要大家注意：action="表单需要提交到哪个路径"method=get/post如果是get方式提交file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中如果post方式提交：我们的所有的提交参数会被封装在请求体中--><body><form action="5.转义字符.html" method="post">用户名:<input type="text" value="请输入用户名" name="username"/><br />密码:<input type="password" name="password"/><br />性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby"  value="乒乓球"/>乒乓球<br />学历:<select name="xueli"><option value="benke">本科</option><option value="shuoshi">硕士</option><option value="boshi">博士</option></select><br /><input type="hidden" /><br />上传一张你的靓照:<input type="file" name="file"/><br />请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br /><input type="submit" value="注册"/><input type="reset" value="重置"/></form></body></html>

案例：form标签和table标签的整合（这两天所学的东西所做的网页）
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table border="1" width="300" height="200" bgcolor="#FF0000" align="center"><form action="8.form表单.html" method="get"><tr><td>用户名</td><td><input type="text" name="username" value="请输入用户名" /></td></tr><tr><td>密码</td><td><input type="password"  name="password"/></td></tr><tr><td>性别</td><td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td></tr><tr><td>爱好</td><td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td></tr><tr align="center"><td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td></tr></form></table></body></html>

3.1 框架标签

frameset 框架集

    属性：        cols: 按照列的方向来划分框架     rows: 按照行的方向来划分框架     以上两个属性的值填每个框架的比例或者长度     *号表示其他框架分配完之后剩下的比例    frame 表示一个框架，框架中包含一个html页面    有2个或2个以上的frame就会包含在frameset当中。    注意：        框架标签不能放在body标签中，否则无法显示！！！

利用框架标签做一个登录注册案例（点击左边的登录，或者注册直接跳转到指定的页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><frameset rows="20%,80%"><frame src="top.html"/><frameset cols="20%,*"><frame src="left.html"/><frame name="body"/></frameset></frameset></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><a href="选课.html" target="body">1.大一选课</a><br /><a href="选课.html" target="body">2.大二选课</a><br /><a href="选课.html" target="body">3.大三选课</a><br /><a href="选课.html" target="body">4.大四选课</a><br /></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><h1 align="center">选课系统</h1></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>欢迎来上我的课</body></html>

阅读全文

0 0