1.web是运行在Internet之上的最流行的应用之一，把各种类型的信息和服务无缝连接，提供生动的图形用户界面也可以称为文档。
2.Web的主要功能有：-提交请求；-作为HTML的解释器和内嵌脚本执行器；-用图形化的方式显示HTML文档。
3.Web的相关技术可以分为两种：①服务器端技术；②客户端技术。其中客户端技术主要包括HTML、CSS、JavaScript，由浏览器来解释运行。
4,.HTML的语言相对简单，主要是由标记元素，及元素中的属性和值组成。
5.文档头部内容中的元数据元素<meta>用于定义网页的基本信息，需要多留意。
6.URL与URI的区别：
①URL(Uniform Resource Locator):统一资源定位器，用来标识网络中的任何资源，也称路径，又分为三种：相对路径，绝对路径，根相对路径。
②URI(Uniform Resource Identifier):统一资源标识符，用来定位Web上的可用资源，一般由三部分组成：存放资源的主机名、片段标识符、相对URI。URI是以一种抽象的，高层次概念定义统一资源标识，而URL和URN则是具体的资源标识的方式。URL和URN都是一种URI。
总结一下：URL是一种具体的URI，它不仅唯一标识资源，而且还提供了定位该资源的信息。URI是一种语义上的抽象概念，可以是绝对的，也可以是相对的，而URL则必须提供足够的信息来定位，所以，是绝对的，而通常说的relative URL，则是针对另一个absolute URL，本质上还是绝对的。
以下是课堂笔记：
HTML文档结构
1、声明文档类型
2、<html></html>
3、<head></head>
a) <title>网页标题</title>
b) <meta /> 元数据
4、<body></body>
a) Body属性：bgcolor 背景颜色
i. 颜色可以用关键字表示：red、green、blue……
ii. 可以用颜色值代码：#ff0000 十六进制的RGB颜色代码
R：red 红 G：green 绿 B：blue 蓝 三原色
# ff 00 00 1,2,3,....9,a,b,c...f
R G B #ffffff #000000 #999966 #333333
形如 #AABBCC 的颜色值，可以在CSS中简写为#ABC
#ff0000=#f00 #336699=#369 #f0f0f0
b) 转义字符用于表现网页中的特殊字符
空格
® 注册商标
& &符号
XHTML推荐用转义字符表达页面中的特殊字符。
c) 文本样式：用于制作特殊样式的文本。
<br />强制换行
<nobr> </nobr>强制不换行
<b></b>、<u></u>、<s></s>、<i></i>…… XTHML不推荐
XHTML推荐用<strong></strong>、<em></em>
标题字样式：<hn></hn> n=1,2,3,4,5,6
正文：<p></p>
水平线：<hr/> width 宽 size 高 color 颜色
居中标签：<center></center> XTHML不推荐
分区标签：<div></div> 块分区元素 <span></span>行内分区元素
预格式化标签：<pre></pre> 让网页中的文字与源代码中格式一样
d) 块元素：独占一行，与上下内容会自动换行 div、hn、p
行内元素：不会换行，一行中可以放多个行内元素 span、b、u、s、……
e) 文本样式标签：<font></font> color 文字颜色 face 字体 size 字号
XTHML不推荐
f) URL：统一资源定位器，也就是路径
路径的表达方式有两种：
（1）绝对路径
http:// www.sohu.com /images/1/ page.jpg
协议名+ 主机名 +目录名 +文件名
用于指向另一个主机上的文件或是互联网上的某个网址
（2）相对路径
在同一级目录下，直接写文件名
在子文件夹下，写“文件夹名/文件名”，例如images/page.jpg
在上一级目录，写../ 一个../表示向上一级。例如 ../../images/page.jpg
只能用来指向本站点内的文件
g) 图像：<img />
属性：src 图像路径
width 宽度，可以为像素或百分比。
只指定宽度表示定宽，高度会等比例自动调整
Height 高度，可以为像素或百分比。
只指定高度表示定高，宽度会等比例自动调整
Alt 替代文字，当图像无法显示时，显示替代文字。会被搜索引擎抓取
Title 说明文字，鼠标指在图像上时显示。会被搜索引擎抓取
h) 链接：<a>添加链接的内容</a> 链接、超链接、连接 link、HyperLink
属性：href 链接到的路径
Target 链接打开的浏览器窗口，默认为_self，_blank为新开窗口
Name 命名，创建一个命名锚记，然后可以链接指向该锚点。
命名锚记 <a name=”name”></a> 可以为空，中间不包含内容
使用href=#name 链接到命名锚记；
使用href=”page.html#name” 链接到指定页面的命名锚记
Title 为链接添加描述文字
链接可以指向图片、文档、压缩文件、多媒体文件等，也可以指向电子邮箱
邮件链接：mailto:xxxx@126.com?subject=hello!
空链接：# 会让页面自动跳到最顶端
Javascript:; 空javascript语句，可作为空链接使用。
i) 表格：<table></table>
属性：width、height、bgcolor、background
Border：边框宽度
Bordercolor：边框颜色
Bordercolordark 暗边框色 bordercolorlight 亮边框色
如果要实现边框凹陷，单元格突出的效果，需要将light设置为深色，dark为浅色。（仅支持旧版本的IE）
Cellspacing：单元格间距
Cellpadding：单元格填充
Align：表格与浏览器的相对对齐方式
单元行：<tr></tr>
属性：不推荐为tr加高、背景色等属性
单元格：<td></td>
属性：width、height、bgcolor、background
Align：单元格内容水平对齐方式
Valign：单元格内容垂直对齐方式 top、middle、bottom
Colspan：跨列，即合并同一行的其它单元格
Rowspan：跨行，即合并同一列的其它单元格
表格标题：caption 只能有一个，并只能位于<table>标记下方
表头：th 位于tr标签内，可替代td，文字会加粗
表格行分组标签：thead、tbody、tfoot 用于对表格内容进行分组管理
j) HTML5结构标记
<header></header> 页眉（头部内容） 可重复使用，利用率较高
<section></section> 内容（内容分块） 可重复使用，利用率较高
<footer></footer> 底部、页脚 可重复使用，利用率较高
<nav></nav> 导航
<aside></aside> 边栏、广告
<aticle></aticle> 文章、注解、评论
k) 列表
有序列表：<ol></ol>
属性：start 列表项目起始数字
Type 列表项样式，可以是1、A、a、I、i
无序列表：<ul></ul>
属性：type 列表项样式，可以是disk（默认）、circle、square
列表项标签：<li></li>
列表可以嵌套。
定义列表：<dl></dl> 多用于制作名词解释、注解说明之类的内容
定义标题：<dt></dt>
定义内容：<dd></dd> 可以有多个
l) 表单
<form></form>
如果要为表单排版，可以将排版元素嵌套在form内
属性：method 提交方式
get 将内容附加到浏览器地址栏提交
Post 将内容打包后提交
Action 提交的动作
通常是提交到服务器端处理表单数据的文档。
也可以提交到邮件，用mailto的方式。
Enctype 表单可提交的数据类型
Name 表单名，作为服务器端程序识别表单用
i. <input />
Type text 普通文本框 password 密码框
email 邮件框（提交表单时，谷歌和火狐会验证邮件地址是否合法）
Size 字符宽度 maxlength 最大字符数 name 文本框名 value 文本框初始值
disabled required readonly
Radio 单选框 checkbox 多选框
Checked 默认选中
name 选框组名（一组单选按钮必须有相同的name）
Value 选项对应的值，传送到服务器上用
<label></label> 文本标签，用for属性与选框的ID绑定
file 文件域，上传文件用
Hidden 隐藏域，用于不希望用户看到的内容
Submit 提交按钮 reset 重置按钮 button 普通按钮
Value值为按钮上的文字 可用disabled属性
image 图像按钮，可代替提交按钮
Src：图像路径 title：图像说明文字 width：宽 height：高
ii. <select></select> 菜单/列表
用<option></option>添加选项
Value 选项对应的值 selected 默认选中
Size：行数。多行的select为列表，用multiple属性允许多选
用name属性指定菜单的名称。
iii. <textarea></textarea> 多行文本框
Rows：行数
Cols：列数
写在一对textarea中间的内容为多行文本框的默认值
m) 其它常用标签
i. <iframe></iframe> 用于在页面指定位置嵌入另一个页面。
src 嵌入页面的路径
Width 宽 height 高
Frameborder 0=不显示边框 1=显示边框
Scrolling no=不显示滚动条 yes=显示滚动条
name iframe的框架名
可以在a标记的target属性中，指定链接在iframe中打开（target=”框架名”）
ii. <details></details> 细节、详情。实现效果为可折叠收缩的内容
用<sammary></sammary>定义标题，sammary必须位于details下
<details>
<sammary>标题</sammary>
……详情内容
</details>
只有Chrome支持
iii. <meter></meter> 度量衡，表达百分比，如电量、投票比例
属性：min 最小值 max 最大值 value 当前值 title 提示文字
iv. <time></time> 定义时间
Timedate 属性 定义具体日期及时间，日期与时间中间用T间隔
例：今天是<time datetime="2015-4-1T17:18">愚人节</time>
v. <mark></mark> 标记重点，为内容加上黄色背景色。
扫一扫
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
