文章目录
Web标准的构成：由计算机硬件和软件组成的有机整体（Web网页一般由若干个超链接构成）
-
结构：同于对网页元素进行整理和分类，现阶段主要学HTML
-
表现：用于设置网页元素的版式，颜色，大小等外观样式，主要指css
-
行为：网页模型的定义及交互的编写，现阶段主要学的是JavaScript
-
Web标准提出的最佳体验方体验方案：结构、样式、行为相分离
简单理解：结构写到HTML文件中，表现写到css文件中，行为写到JavaScript文件中
Web服务器也称网页，是指在因特网上提供Web访问服务的站点，通常需要为Web服务器配置IP地址和域名，才能对外提供Web服务
一、HTML
HTML文档由HTML标记和纯文本构成的文本文件。HTML是一种超文本标记语言（用来描述网页的一种语言，一套标记标签）
协议类型：//服务器地址/路径/文件名http://info.cern.ch/
-
http:超文本传输协议
-
hppts:用加密传送的超文本传输协议
-
ftp:文件传输协议
-
mailto:电子邮件地址
-
ldap:轻量目录访问协议
-
news:Usenet新闻组
-
file:本地计算机或网上分享的文件
-
gopher:因特网查找协议
二、标签
<!DOCTYPE> 文档类型声明标签
<!DOCTYPE html> 当前采取的是HTML5版本来显示
HTML文档由头部head和主体body两个部分组成
每个网页都有一个基本的结构标签（也称骨架标签），网页内容在这些基本标签上书写
1. 结构标签
<html lang=“en”>
<!--页面中最大的标签--根标签，lang用于定义当前的文档显示的语言，en为英语，zh-CN为中文-->
<head></head>
<!--文档的头部，在head标签中我们必须要设置标签title-->
<title></title>
<!--文档的标题，让网页拥有一个属于自己的网页标签-->
<body></body>
<!--文档的主体，元素包含文档的所有内容，页面内容基本都是放到body里面的-->
2. 常用标签
<h1>-<h6>
<!--标题标签，作为标题使用，并依据重要性递减，一个标题独占一行-->
<p></p>
<!--段落标签，把HTML文档割分为若干段落，段落之间保有空隙-->
<br />
<!--换行标签，单个标签，强制开始新的一行没有空隙-->
2.1 文本格式化标签
<strong></strong>或者<b></b>(加粗)
<em></em>或者<i></i>(倾斜)
<del></del>或者<s></s>(删除线)
<ins></ins>或者<u></u>(下划线)
2.2 盒子标签
<div></div>
<!--分割、分区，一行只能放一个<div>，大盒子-->
<span></span>
<!--跨度、跨距，一行上可放多个<span>，小盒子-->
2.3 图像标签
定义HTML页面中的图片
其他属性：
-
src(图片路径)：必须属性
-
alt(文本)：替换文本，图像不能显示时的文字
-
title(文本)：提示文本，鼠标放在图像上，显示文件
-
width(像素)：设置图像的宽度
-
height(像素)：设置图像的高度
-
border(像素)：设置图像的边框粗细
2.4 超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
<!--标签用于定义超链接，作用从一个页面链接到另一个页面-->
<!--href：用于指定链接目标的url地址，必须属性-->
<!--target：用于指定链接页面的打开方式，其中_self为默认值,_blank为在新窗口中打开方式-->
链接分类：
-
外部链接
<a href="[http://www.baidu.com](http://www.baidu.com/)">百度</a> -
内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可
<a href="index.html">首页</a> -
空链接：如果当时没有确定链接目标时，
<a href="#">首页</a> -
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
-
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
-
锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
-
在链接文本的href属性中，设置属性值为#名字的形式
-
找到目标位置标签，里面添加一个id属性=刚才的名字
<a href="#two">第二集</a> <h3 id="two">第二集介绍</h3>
-
3. 表格标签
表格：不用来布局页面，主要用来显示，展示数据
<table></table>(定义表格)
<tr></tr>
<!--定义表格中的行，必须嵌套在<table></table>标签中-->
<td></td>
<!--定义表格中的单元格，必须嵌套在<tr></tr>标签中-->
<th></th>
<!--表格的表头部分，和<td>不同的是文字会居中加粗-->
相关属性：
-
align(left,right,center)：规定表格相对周围元素的对齐方式
-
border(1或"“)：规定表格单元是否有边款，默认值为”"，表示没有边款
-
cellpadding(像素值)：规定单元边沿与其内容之间的空白，默认1像素
-
cellspacing(像素值)：规定单元格之间的空白，默认2像素
-
width(像素值或百分比)：规定表格的宽度
-
合并单元格：
- 跨行合并：rowspan=“合并单元格个数”
- 跨列合并：colspan=“合并单元格个数”
-
结构标签：更好的表示表格语句（放在
标签里）<thead></thead> <!--表格头部区域，<thead>内部必须拥有<tr>标签。一般位于第一行--> <tbody></tbody> <!--表格主体区域，主要用于放数据本体-->
4. 列表标签
列表：用来布局（整齐，整洁，有序）
4.1 无序列表
HTML页面中项目的无序列表，一般会以项目符号呈现列表项，无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的，<li>与</li>之间相当与一个容器，可容纳所有元素-->
4.2 有序列表
HTML页面中项目的有序列表，列表排序以数字来显示，并且使用
- 标签来定义列表项
-
<ol> <li></li> <li></li> <li></li> </ol> <!--list-style : none;清除前面序号-->4.3 自定义列表
常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl> <dt> <dd></dd> <dd></dd> <dd></dd> </dt> </dl> <!--<dl>定义描述列表或定义列表、<dt>定义项目/名字、<dd>描述每一个项目/名字，<dl>里面只能包含<dt>、<dd>，<dt>、<dd>个数没有限制，经常是一个<dt>对应多个<dd>-->5. 表单标签
表单：收集客户信息（一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3个部分构成）
5.1 表单域
包含表元素的区域，用标签来定义，以实现用户信息的收集和传递
<form method = "post"></form>属性：
-
action(url地址)：用于指定接受并处理表单数据的服务器程序的url地址
-
method(get/post)：用与设置表单数据的提交方式，取其值为get或post
-
name(名称)：用于指定表单的名称，以区分同一个页面中的多个表单域
5.2 表单控件
-
表单元素
<label for="sex">男</label> <input type="radio" name="sex" id="sex" /> <!--<label>标签为input元素定义标注，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上-->-
type属性
-
text：定义单行输入字段，用户可输入文本
-
password：定义密码字段
-
radio：单选按钮（多选一），有相同name才能多选一
-
checkbox：定义复选框（可多选）
-
submit：定义提交按钮，把表单域里的表单元素提交给后台
-
reset：定义重置按钮，清除表单中所有数据
-
button：定义可点击按钮（并不会提交数据，只会做某件事件
<input type="button" value="获取验证码"> -
file：定义输入字段和“浏览”按钮，供文件上传
-
-
name属性：由用户定义，定义input元素名称，单选和多选都要有一样的name值
-
value属性：由用户定义，规定input元素值
-
checked属性：checked，规定此input元素首次加载时应当别选中，主要针对单选按钮和多选按钮
-
maxlength属性：正整数，规定输入字段中的字符的最大长度
-
-
下拉列表
<select> <option></option> <option></option> </select> <!--在<option>中定义selected="selected"时，当前项即为默认选中--> -
多行输入
<textarea rows="3" cols="20"></textarea>-
cols：每行中的字符数
-
rows：显示行数
-
三、路径
1. 相对路径
以引用文件所在位置为参考基础，而建立出的目录路路径
- 同一级路径：img src=“tupian.gif” /
- 下一级路径：img src=“images/tupian.gif” /
- 上一级路径：img src=“…/tupian.gif” /
2. 绝对路径
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。eg:“C:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif”
-
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
