【Michiko】我的学习笔记之 ---前端第一讲HTML

C/s架构 c:客户端 s:服务器
桌面应用程序 （例如QQ LOL）
特点：
1，使用前必须安装
2不可以跨平台（PC端 手机端不能互通）
3软件更新的时候 服务端 客户端得同时更行
4软件采用的是自有协议 更安全

B/s架构 B:浏览器 s:服务器
特点
1 使用前不需要安装 用浏览器直接输入网址访问
2 能够跨平台
3 软件更新时 客户端不需要更新
4 采用http协议 相对不安全

网页文档的头部：包含了文档的元数据
meta是HTML中的元标签,对应了HTML的相关信息，
客户端浏览器会根据这些信息进行处理
作用:搜索引擎优化
定义页面使用语言,自动刷新并指向新的页面,为网站添加关键词、描述内容、作者。

    <!-- 定义网站的搜索关键字-->
    <meta name = "keywords" content="HTML,CSS,JS,JQUERY"/>
    <!-- 对网站的简单概述-->
    <meta name = "description" content="金硕珍是大帅哥哥"/> 
    <meta name = "author" content="michiko"/>
    <!--Link标签定义了文档与外部资源之间的关系
        Link标签通常用于链接到样式表-->
        <link rel="stylesheet" type="text/css" href="../css/index.css"/>

h1标题只能在一个网页中出现一次 除非使用hgroup标签

title:定义元素的替换文本
target:属性
_blank:在新窗口中打开链接文档
_parent:在父框架集中打开被链接文档
_top:在整个窗口中打开被链接文档
_self:默认值 在相同框架中打开被链接文档

    <!--指向万维网上页面的链接-->
    <a href="http://www.baidu.com" target="_black" title="点击去百度">度娘在此</a>
    <!--h5新特性 在本网页的某个区域显示另外的网页
        frameborder:是否显示边框 默认显示边框 0/no 不显示 1/yes显示  
    -->
    <iframe width ="200" height="200" src = "welcome.html" frameborder="no"></iframe>

插入列表
有序 ol>li
无序ul>li
自定义dl>dt>dd

插入图片
height与width属性用于设置图像的高度和宽度
alt属性用来为图像定义一串预备可以替换的文本
src:图片路径
title:鼠标放到图片上的提示信息

    <img src="../image/logo.jpg"  width="409" 
        height="200" alt="图片加载失败" title="度娘在此"/>img是行内元素哦

插入表格 tr>td
caption：表格的标题
thead标签标识表格头部元素
tbody标签标识表格表体元素
tfoot标签标识表格表尾部分
cellpadding:表格中内容和单元格之间的距离
cellspacing:表格中单元格和单元格之间的距离
在默认情况下，如果不设置表格的边界，表格不显示边界的，可以用border属性设置表格边框
border：边框
cellspacing:单元格与单元格的距离
cellpadding:内容与单元格边框线的距离
colspan:跨列(合并列 要删除本tr中的列）
rowspan:跨行(合并行 要删除本下一个tr中多余的列)

插入表单
form表单的属性
Name:表单的识别名称。通过表单的名称来辨认页面提交的是哪个表单的数据。
Action:处理表单程序的地址。action=”index.html”
Method:将表单中的数据提交到服务器的方法。Method是常用的两个取值get和post
get方法：默认的一种传递数据的方法（查询）
特点:
1.通过地址来传递表单中的数据
2.不能传递敏感的数据,如:密码
3.不能传递大量的数据,每次只能传递1024字节
4.不能上传附件。
post方法:不是通过地址传递数据,数据传给文件处理程序。(增删改)
特点:
1.相对安全
2.可以传递海量的数据
3.能上传附件
何时使用get和post?
1.如果表单提交是被动的(比如搜索引擎查询),并没有敏感信息。
当你使用get时,表单数据在页面地址栏中是可见的。比如：search.html?name=john&age=25
注：get最适合少量数据的提交，浏览器会设定容量限制。
2.如果表单正在更新数据，或者包含敏感信息。如：密码
则使用Post的安全性更好，因为在页面地址栏中被提交的数据时不可见的。

-表单元素：指不同类型的input元素。表单最重要的作用是获取用户信息。需要在表单中加入表单项。
语法：
常用的元素类型type:
text:单行文本框 (用户名)
textarea:多行文本框
password:密码文本框
submit:提交按钮
image:图片按钮
reset:重置按钮，重设表单内容。
button:普通按钮
hidden:隐藏元素
radio:单元按钮
checkbox:复选框
file:文件域
select:列表框
使用上传必须改一下表单的enctype=”multipat/form-data”

form表单中enctype属性可以用来控制对表单数据的发送前的如何进行编码
form表单中enctype属性的三种类型:
1.application/x-www-form-urlencoded 默认类型
发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码
2.multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件
3.text/plain用于发送纯文本内容，空格转换为 “+” 加号，不对特殊字符进行编码，
一般用于email之类的

HTML区块
1.块级元素：以新行来开始和结束 //独占一行
实例:h1 p ul table
2.内联元素:不会以新行开始
实例:b td a img

div元素：块级元素 可用于组合其他HTML元素的容器 div+css文档布局
span元素:内联元素:用作文本的容器

H5新特性
新的语义元素，比如 header, footer, article, section。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 canvas 和