HTML
1.软件的结构：
C/S(Client Server)结构的软件：
比如： QQ、 极品飞车、 飞信 、 迅雷
cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。
cs结构软件的优点： 减轻服务端的压力，而且可以大量保存数据在客户端。
B/S（BrowserServer）结构的软件：
比如： 微博 、 webQQ 、 web飞信、 web迅雷
优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端而已。
缺点：增加了服务端的压力，bs结构的软件不能保存大量的 数据在用户机上。
2.网站的类别:
静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。是没有数据库提供数据给它。
动态网站: 动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的。
3.html 语言就是开发网页的基础语言：
html(超文本标记语言)
标记 : 该门语言是有标签来构成的。 学习html不用怎么去理解，只要需要记住标签的作用即可。
html语言的特点：
1.html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
2.html是不区分大小写的。
4.html语言的结构：
<html> html语言的根标签.
<head></head> 网页的头信息
<body></body> 网页的体部分
</html>
html的注释： <!-- 注释的内容 -->
5.html常用的标签：
<h1>~<h6>表示是一个标题
<p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub> 下标
<sup> 上标
<pre> 原样标签： 原样标签会保留空格和换行符。
<ol> <li> 有序的列表标签、
<ul> <li> 无序的列表标签。
项目列表标签(dl dtdd)
行内标签(span)
块标签<div> div标签的内容会独立占一行。
html的标签作用：用于描述一个网页的结构的。
如果需要操作数据的样式：通过标签的属性操作的。
标签的类型：
1.有开始标签与结束标签。 <p> </p> 需要把网页的数据内容封装到标签中。
2. 开始标签与结束标签都是在一个标签体内的。 比如：<hr/> 功能单一不需要封装数据到标签中。
6.为什么要学实体标签：
因为> < 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签。
常用的实体字符:
空格
小于号 <
大于号 >
----------------------------------------------------------
少
人民币 ¥；
版权 ©
商标 ®
-->
7.媒体标签：
<embed></embed>
hidden ： 设置隐藏插件是否隐藏。
src ：用于指定音乐的路径
<embed src="1.mp3"></embed>
<marquee> 飘动标签
direction : 指定飘动的方向
scrollamount : 指定飘动的速度。
loop :指定飘动的次数
<marquee loop="-1"scrollamount="30" direction="right"><fontsize="+6" color="red"> 我飞起来了...</font></marquee>
8. 超链接标签
<a> 超链接标签
a标签常用的属性：
href : 用于指定链接的资源
target: 设置打开新资源的目标。 _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源
file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。
格式：
file:\\\f:\美女\1.jpg
a标签的原理：
1.a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先
会在本地机器去找一个hosts文件， 如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的
dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。
3. 如果a标签的href属性值并不是以http开始，而且其他的一些协议，那么这时候浏览器就回去到我们本地的注册
表中去查找是否有处理这种协议 的应用程序，如果有，那么马上启动该应用程序处理该协议。
邮件的协议： mailTo
迅雷的协议： thunder
超链接标签的作用：
1. 可以用于链接资源。
2. 锚点点位.
1. 首先编写一个锚点 锚点的格式： <a name="锚点名字"> 数据</a>
2. 使用a标签的herf属性连接到锚点出。 href=”#锚点的名字“
9.<img>图片标签：
img标签常用的属性:
width： 设置图片宽度
height 设置图片高度
alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。
实例：
<body>
<img src="11.jpg" alt="这个是路飞"width="400" height="300" border="0"usemap="#Map" />
<map name="Map"id="Map">
<area shape="rect"coords="171,178,304,227" href="http:\\www.baidu.com"target="_blank" />
<area shape="circle"coords="189,135,27" href="2常用的标签.html"target="_blank" />
</map>
</body>
10.<table>表格标签
表格使用到的标签：
<table>表格
<tr> 行
<td> 单元格
<th> 表头 默认的样式是居中，加粗。
<caption> 表格的标题
表格常用的属性：
border 设置表格的边框
width : 设置表格的宽度
height: 设置表格的高度的。
colspan: 设置单元格占据指定的列数。
rowspan : 设置单元格占据指定的行数。
11表格作业
第一次作业
符合要求：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1px" align="center"width="400px" height="300px">
<tr>
<thcolspan="3">学生成绩</th>
</tr>
<tr>
<tdrowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<tdrowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
12.框架标签
frameSet： 一个frameSet可以把一个页面切割成多份。
只能按照行或者列切割。
frame 不能被切割的。 frame是位于frameSet中。
iframe: 在一个网页中分隔一部分的位置显示另外一个网页的的信息。
注意： frameSet标签不能用于body标签体内容。
公司主页
13. 表单标签
表单标签：表单标签的作用是用于提交数据给服务器的。
表单标签的根标签是<form>标签
常用的属性：
action:该属性是用于指定提交数据的地址。
method： 指定表单的提交方式。
get : 默认使用的提交方式。 提交的数据会显示在地址栏上。
post ： 提交的数据不会显示在地址栏上。
注意：表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。
实例：
<formaction="http://www.baidu.com" method="post">
<!--文本输入框 单行-->
用户名：<inputname="userName" type="text"/><br/>
<!-- 密码框 -->
密码：<inputname="password" type="password"/><br/>
<!-- 单选框 -->
性别： 男<inputchecked="true" value="man" name="sex" type="radio"/> 女<inputname="sex" value="woman"type="radio"/><br/>
<!-- 下拉框 -->
来自的城市：<selectname="city">
<optionvalue="BJ">北京</option>
<optionvalue="SH">上海</option>
<optionvalue="GZ">广州</option>
<optionvalue="SZ">深圳</option>
</select><br/>
<!-- 复选框 同一组的复选框name的属性值要一致 -->
兴趣爱好：java <inputvalue="java" name="hobit" checked="checked" type="checkbox" />javascript<input type="checkbox" value="javascript"name="hobit" />android <input value="android"name="hobit" type="checkbox" /><br/>
<!-- 文件上传框-->
大头照：<inputname="image" type="file" /><br/>
个人简介:
<!-- 文本域 -->
<textarea name="intro" rows="10"cols="30"></textarea><br/>
<!-- 提交按钮 -->
<input type="submit"value="注册"/>
<!-- 重置按钮 -->
<inputtype="reset" value="重置"/>
</form>
14.表单作业：
使用单选框、复选框，让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当type="checkbox" 时，控件为复选框
同一组的单选按钮，name取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP 使用
4、checked：当设置checked="checked" 时，该选项被默认选中
实例：
使用下拉列表框，节省空间
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
form表单中的label标签
小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
15表单总结：
l 表单
• 表单，在网页中主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
l 组成
• 表单标签： <form action=“” method=“” enctype=“”></form>
• 表单域 ： <input type=“” name=“” />
• 表单按钮：<input type="submit" name="..." value="...“/>
l 常见的表单域
• 文本字段 <input type=“text” name=“” value=“”/>
• 密码字段、 隐藏字段 type ="password"
• 单选按钮
type=radio 单选按钮必需要分组，分组的方法就是给标签
name属性，name属性的值必须一样。
• 多选按钮 type =checkbox，多选按钮的name属性必须一致。
• 文件选择框 type=“file”
• 下拉列表 <select ><option>
• 文本输入域 <textarea> 根据cols定义它的列，rows定义文本框的行数
参考---------------------《网上视频教程和HTML相关书籍》
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
