nternet 互联网:将全球的计算机连接起来所形成的网络
web 万维网:通俗的说就是网页,把各类信息通过网页的形式提供给用户
web与Internet的关系:web是internet上的一个应用
web工作原理:用户使用浏览器通过HTTP协议访问web服务器,web服务器通过HTTP协议反馈相应的信息到浏览器供用户使用
HTML:超文本标记语言
-
单标记/空标记:
<input />
-
双标记
<body></body>
<!doctype html>
<html>
<head>
<title>文档标题</title>
<body>
<h1 align="center">标题</h1>
<p valign="center">段落</p>
</body>
</head>
</html>
- <b></b>加粗<i></i>倾斜<u></u>下划线<s></s>删除线
上标下标
<div></div>块分区<span></span>行内分区<pre></pre>预格式化
-
插入图片:
<img src="1.jpg"/ width="100"> (绝对路径) <img src="../1.jpg"/ height="200"> (相对路径) width/height:设置图片宽/高,只能设置一个,否则图片会失真
-
插入链接:
<a href="http://www.------网址------">网址链接</a>
<table border="1" bgcolor="red" width="10" height="10"
cellspacing="0" cellpading="2">
<!--创建表格/增添表格线/设置表格边框颜色/设置宽/设置高/设置边框粗细/设置内容与边框距离-->
<caption>表格标题</caption> <!--设置表格标题-->
<tr > <!--创建行-->
<td>第一行,第一列</td ><!--创建单元格-->
<td>第一行,第二列</td>
<td>第一行,第三列</td>
</tr>
</table>
-
行分组:
- <thead></thead>表头行分组 - <tbody></body>表主体行分组 - <tfoot></tfoot>表尾行分组
-
单元格跨行:
- <td rowspan="2"></td> <!--跨两行-->
-
单元格跨列:
- <td colspan="3"></td><!--跨两列-->
表格嵌套:
...
<td>
<table>
....
</table>
</td>
...
- 有序列表
<ol type="列表类型" start="起始编号">
...
<li>...</li>
...
<li>...</li>
...
</ol>
type类型
1,数字(默认)
a,小写字母
A,大写字符
i,小写罗马数字
I,大写罗马数字
-
无序列表
<ul type="列表类型"> ... <li>...</li> ... <li>...</li> ... </ul> type类型 disc:实心圆(默认) circle:空心圆 square,实心矩形
-
定义列表
dl:标记定义一个定义列表
dt:标记定义了定义列表中的一个术语
dd:标记对定义列表中的术语提供定义
- 表单
<form><!--定义表单-->
<!--主要属性 action:定义表单被提交时发生的动作,通常包含服务方脚本的URL;
method:指出表单数据提交的方式,取值为get或者post;
enctype:表单数据进行编码的方式;
name:表单名称-->
<input type="text"><!--文本框-->
<input type="password"/><!--密码框-->
<!--主要属性
name:名称
value:由访问者自由输入的任何文本
maxlength:限制输入的字符数
readonly:设置文本控件只读-->
<input type="radio"/><!--单选框--> <input type="checkbox"/><!--复选框--> <!--主要属性 name:设置名称,并用于分组,一组单选框或者复选框的名称必须相同 value:文本,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器 checked:设置默认被选中-->
<input type="submit"/><!--提交按钮--> <input type="reset"/><!--重置按钮--> <input type="button"/><!--普通按钮--> <!--name:名称 value:按钮的标题文字-->
<input type="hidden"/ name="" value=""><!--隐藏域--> <input type="file"/ name=""><!--文件选择框--> <!----><input type="checkbox" name="chkHid" id="chkHid" /> <label for="chkHid">不要公开我的信息</label> <!--将文本与控件联系在一起后,单击文本,效果就同单击控件一样--> </form>
-
选项框
select:创建选项框
name:选项框命名
size:大于1,则为滚动列表
multipe:设置多选
通用选择器 *{ }
元素选择器 h1 { } 权值为1
类选择器 .color { } 权值为10
id选择器 #num { } 权值为100
内联样式 < p styple=""> 权值为 1000
群组选择器 .color,#num,h1 { }
后代选择器 body p { }
子代选择器 body>h2>p { }