初识Html

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"