HTML5前期学习准备（一）

HTML简介

一、html的基本概念

HTML:HyperTextMarket language，超文本标记语言（所谓“超文本”就是指页面内能够包含图片、连接，甚至音乐、程序等非文字元素。）是用来描述网页语言，html使用标记标签来描述网页，因此说html是一种标记语言，而不是编程语言。

-----html先知知识-----

在学习HTML以前最早应该了解的就是html环境的搭建，那么必须从编辑器和解析器等方面作一个深刻的了解。如今为大部分开发者青睐的编程软件有sublime及visual studio code，固然现现在还有不少的集成开发软件如Dreamweaver等。
而主流的选择器内核及表明浏览器“Chrome、Safari、Firefox、Opera、IE（IEtest）；Firefox是开源的Presto（迅速的)表明做品Opera，Prefox是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Webkit Safari内核，Chrome内核原型，他是苹果公司本身的内核，也是苹果的Safari浏览器使用的内核Blink由Google和Opera Software开发的浏览器排版引擎。”

---

二、html文档的组成

完整的HTML文档是有多个HTML元素按照必定的方式组成的（此处为html5文档），以下图：

除了形式上较之前有所改变html5还增长了不少新的特性，好比：

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，好比 article、footer、header、nav、section
• 新的表单控件，好比 calendar、date、time、email、url、search

三、html元素组成

HTML元素分为单标签元素、双标签元素及属性，而元素的分类则有块级元素行内元素和其余元素。

1. 块级元素
独占一行空间，用来布局段落，列表，导航菜单，脚注等结构，不要将块级元素嵌套在行内元素中。

<p>this is paragraph1</p>            
             <p>this is paragraph2</p>

2. 行内元素
与其余元素共享一行空间，通常被嵌套在块级元素中，一般做为段落的一部分出现

<p>you are <strong>strong</strong></p>

3. 其余元素（空元素、替代元素等）
空元素：只包含单个标签，一般用于在文档中插入部份内容，例如img

<div><img src="my.jpg" alt=""></div>

替代元素：替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有<img>，<object>，<video>，<textare>，<input>，<audio>，<canvas>等。

---

刚起步阶段主要得学习html的标签使用方法，而在html5中有不少的标签。好比 p,h1,h2,h3,h4,h5,h6,ul,ol,dl,ul,img,a,table,form，div,span等

还有一些不经常使用标签（部分已被html5舍弃但书写并不出现错误）

• abrr 缩略语
• b不带任何强调意义的标记一段文字，加粗
• strong 表示重要内容，加粗
• em 表示着重强调一段文字，倾斜
• i不带任何强调意义的标记一段文字，倾斜
• cite 表示做品标题，将做品名倾斜
• del 表示从文档中删除的文字
• s表示文字已经再也不准确，也是删除线
• u不带强调意义的给一段文字加下划线
• ins 表示加入文档的文字，也是下划线
• small 表示小号字体
• sub 表示下标文字
• sup 表示上标文字
• q表示引自其它的内容，被q标签修饰的本身加引号表示引用
• pre 表示格式化一段文字，也能够用来引入一段代码
• span css中使用的添加样式的模块
• div会换行，span不会换行
• <!-- -->注释

---

表格及表单

前期学习还有一个重要的知识点便是HTML中表格和表单的使用。

1）表格（Table）：

• table 声明一个表格属性:
  1.border 边框线宽度，默认为0
  2.width 宽度
  3.cellpadding 单元格内边距，文字与内边框的距离 如：cellpadding=10
  4.cellspacing 单元格间距 默认为1 - 列表项目
• tr 行
  align（表格的排列方式/对齐方式）：center、left（默认）、right
• td 列
  1.width/height
  2.colspan 合并列，跨列向右跨
  3.rowspan 合并行，跨行向下跨
• th 表头，会加粗，而且会居中
• caption 表格的标题
• 给表格划分区域(不经常使用)
  thead、tbody（必须写）、tfoot
• 语义元素(很少用)
  1.h1~h6:表示标题
  2.header:表示头部
  3.nav:表示导航
  4.footer:表示尾部
  5.address:表示文档或article的联系信息
  6.aside:表示侧边栏
  7.section:表示主题区域
  8.article:表示一段独立的内容

2）表单（Form）：做用是能够和服务器进行交互
1、Form中的属性:
1.action:定义一个URL，当点击提交按钮时，向这个URL发送数据
2.method(get/post):用于向action URL发送数据的HTTP方法。默认是get。

注：get和post区别：
1）get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2）get方式安全级别较低，post级别较高。
3）get方式数据的长度，post支持大数据。•input 标签:定义输入字段，用户可在其中输入数据。

2、input 中 type属性:
1）type=text 文本框
2）type=password 密码
3）type=radio 单选按钮 name属性
4）type=checkbox 多选按钮
单选和多选都有默认值：checked="checked"
5）type=reset 重置按钮
6）type=submit 提交按钮
7）type=file 上传文件的输入项
8）type=button 按钮
9）type=image 图片（也是提交按钮，）
10）type=hidden 隐藏标签（用户不用看到的，可是我们开发时必需要使用的，能够把数据封装到隐藏标签中，和表单一块儿提交到后台）

3、其余标签 一、选择：select /select>选择下拉框 option 表示内容 /option 二、文本域textarea textarea 文本内容 /textareavalue属性: a.对于按钮、重置按钮和确认按钮：定义按钮上的文本。 b.对于图像按钮：定义传递向某个脚本的此域的符号结果。 c.对于复选框和单选按钮：定义 input 元素被点击时的结果。 d.对于隐藏域、密码域以及文本域：定义元素的默认值。 注：不能与 type="file" 一同使用。与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。•name属性:为 input 元素定义惟一的名称。