1.1网页的基本架构:
内容:如文字,图像等,一般由Html代码负责实现。Html(展示图片、文字、多媒体信息的超文本语言)
样式:如颜色、字体大小等修饰,一般由css代码负责实现,css是层叠样式表的缩写。
行为(动作):如一些网页特效(横幅广告)、鼠标移过表颜色、单击弹出登录框或信息提示框等,这些一般由
JavaScrip代码实现,JavaScrip是一种网页编程语言,简称JS。
1.2网页的基本信息:
1.doctype声明(
):它约束了HTML5文档架构,检验是否符合相关Web标准,同时告诉浏 览器使用哪种规范来解释这个文档中的代码。!!必须位于第一行
2.<meta>标签:描述网页具体的摘要信息,包括文档内容类型、字符编码信息、搜索关键字、网站 提供的功能和服务的详细描述等。该标签描述的内容并不显示,其目的是方便浏览器解析或利于搜索引擎搜索,它采用“名称/值”对的方式描述摘要信息。
( 1 )文档内容类型、字符编码信息,如:
<meta charset = "gb2312">
charset = "gb2312"表示文本类别的HTML5代码,字符编码为简体中文。
常见的字符集编码还有:
gb2312:简体中文,一般用于半酣中文和英文的页面。
ISO-885901:纯英文,一般用于只包含英文的页面。
big5:繁体,一般用于繁体字的页面。
utf-8:国际通用的字符编码,同样适合与中文和英文的页面。和gb2312编码相比,通用性更好,但字符编码的压缩比稍低,对网页性能 有一定影响。
注意!!:不正确的编码设置将带来网页乱码。
( 2 )搜索关键字和内容描述信息。如:
<meta name = "keywords" content = "课工厂,互联网">
<meta name = "description" content = "课工厂是......">
1.3基本HTML5标签及网站SEO应用:
网页的基本标签包括标题标签、段落标签、换行标签、图像标签、链接标签等。
1.3.1.标题标签:
~ : 一级标题~六级标题,
字号最大,
字号最小,均加粗。
1.3. 2.段落标签和换行标签:
…
段落标签表强制换行,没有结束标签,直接用
表示标签的开始和结束。
1.3.3.图像标签:
1.生活中常用图像格式:JPG,GIF,BMP,PNG。
网页中常用图像格式:JPG,GIF,PNG。
( 1 )JPG: 有损压缩会造成图像画面失真,不过压缩之后的体积很小,而且图像比较清晰,所以比较适合网页应用。
( 2 )GIF:支持透明色,这使得GIF在网页的背景和一些多层特效的显示上用的非常多,还支持动画(突出特点)。
( 3 )BMP:bitmap缩写,Windows 操作系统比较多,不支持压缩,不适用于Web。
( 4 )PNG: 兼有GIF和JPG的优势,同时具备GIF不具备的特性,但是在部分旧版本浏览器(IE5 IE6 等)不支持。
2.图像标签的基本语法:
alt: 图像无法显示时(如 图片路径错误或网速太慢等)替代的显示的文本。(限制100个字符)
通常把网站应用的图片统一存放在image或images文件夹中。
1.3.4:链接标签:
1.超链接的基本用法:
包含两部分内容: 一是链接地址,即链接的目标,它可以是某个网址或文件的路径,对应 标签的href属性;
二是链接的文本或图像,单击该文本或图像,页面将跳转到href属性指定的链接地址。
基本语法:链接文本或图像(视图形式)
target指定链接在哪个窗口打开,常用的取值有 _self( 自身窗口 )、_blank( 新建窗口 )。
链接地址:
1.绝对路径:指向目标地址的完整描述,一般指向本站点内的文件。例如http://www.sohu.com/index.html“>搜狐
2.相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要一个完整的URL地址的形式,另外(../)表上级录。
2.超链接的应用场合:
1.页面间链接:A页到B页,最常用,用于网站导航。
2.锚链接:A页的甲位置到A页的乙位置或A页的甲位置到B页的乙位置。
A甲<a href = "#marker"></a> A乙位置<a name = "marker"></a>
A甲<a href = "#marker"></a> B乙位置<a name = "B.html#marker"></a>
3.功能性链接:在页面中调用其他程序功能,如电子邮件,QQ,MSN等。
设置电子邮件链接的方法:mailto:电子邮件地址
设置电话链接的方法: tel:18340018761
设置短信链接的方法:sms:18340018761
设置QQ链接的方法:tencent://message/uin=1184861791&Site=qq&Menu=yes ( pc )
mqqwpa://im/chat?chat_type=wpa&uin=1184861791 (android )
mqq://im/chat?chat_type=wpa&uin=1184861791&version=1&src_type=web(ios)
2.1 列表
适用场合:常见的树形可折叠菜单、购物网站的商品展示等。
2.1.2列表的分类:
1.无需列表:
是一个项目列表,使用的符号标记无需的项目。各个列表项之间没有顺序级别之分,他通常是哦那个一个项目符号作为每个列表项的前缀。
2.有序列表:
也由一个个列表项组成,列表项即可使用数字标记,也可使用字母标记。
3.定义列表:
当前两表不合适时,使用该表。不仅是一个项目列表,而且项目及器注视的组合。在使用定义列表时,每一列项目前不会添加任何标记。
2.1.3列表的应用:
1.无序列表的应用:
<ul type = "项目符号"><li>列表项</li><li>列表项</li><li>列表项</li></ul>
type取值:disc( 实心圆 默认) circle(空心圆) square (实心方)
2.有序列表的应用:
<ol type = "项目符号"><li>列表项</li><li>列表项</li><li>列表项</li></ol>
type取值:1(数字顺序) a( 字母顺序 ) i(罗马顺序)
3.定义列表的应用:
<dl><dt>列表项</dt><dd>列表项内容</dd></dl>
2.2表格
使用场合:考试成绩单、选秀课课表、企业中常见的工资账单等。
2.2.1 为什么使用表格:
1.简单通用
2.结构稳定
2.2.2表格的基本结构:
1.单元格
2.表格行
3.表格列
2.2.3 表格的基本语法:
(1,1) | (1,2) |
(2,1) | (2,2) |
2.2.4表格的对齐方式:
align属性(水平对齐方式):left( 左对齐 ) center( 居中对齐 ) right( 右对齐 )
valign属性(垂直对齐方式):top( 顶端对齐 ) middle ( 居中对齐 ) bottom ( 底端对齐 ) baseline( 基线对齐 )
在实际的开发中,表格对齐方式通常会使用css样式进行控制。
2.3表单:
应用:如申请电子邮件,用户需要首先填写注册信息,然后才能提交申请。
1.登录、注册:登录时填写用户名、密码,注册时填写姓名、电话等个人信息。
2.网上订单:在网上购买商品,一般要求填写姓名、联系方式、付款方式等信息。
3.调查问卷:回答对某些问题的看法,以便于成统计数据,方便分析。
4.网上搜索:输入关键字,搜索想要的可用信息。
2.3.1表单的内容
创建表单后,就可以在表单中放置控件以接受用户的输入。这些控件通常放在
2.3.2表单标签及其属性
标签:om>表单创建; 用于输入
属性:action = “URL”
method = “post | get” post,表单上的数据会作为一个数据块发送到脚本,而不使用请求字符串。(推荐)
get,浏览器将创建一个请求,该请求包含页面URL、一个问号和表单的值。
2.3.3表单元素及格式
<input>的属性:
1.type: 指定表单元素的类型。可用的选项有text(默认)、password、checkbox、radio、submit、reset、file、hidden、image和button
2.name:标识
3.value:指定表单元素的初始值。(radio 必须指定一个值)
4.size:指定表单元素的初始宽度。(如果type是text、password,以字符为单位,其他是以像素为单位)
5.maxlength:指定在text、password中输入的最大字符数。默认值为无限大
6.checked:指定按钮是否是被选中。(radio和checkbox时,使用该属性)
1.文本框:
type="text";
2.密码框:
type="password"
3.单选框:
type="radio"
4.复选框:
type="checkbox"
5.下拉列表框:
<select name="指定列表名称">
<option></option>
</select>
6.按钮:
type:button( 普通按钮 ) submit(提交)reset(重置)
type="image" src="image/.gif"
7.多行文本域:
<textarea name=" " cols="显示列的宽度" rows="显示行数">
文本内容
</textarea>
8.文件域:
type = "file"