HTML5基础入门(笔记分享)

[整理来源]：html5+css3+jQuery Mobile (2th)

[笔记分享]：

1. HTML5 和 HTML4 差异：
  1. 简化：DOCTYPE、html、meta、script等标记被大幅度简化；<font> <big> <u>等废除；
  2. 新增：①统一内嵌影音：用<video>或者<audio>标记播放影音，替代以前需要用Flash Player 或者Quiktime Player来播放；
②新增语义标记：<header> <nav> <article> <section> <aside> <footer>; ③新增<canvas>+Javascript画线条和图形；

④表单设计：新增标记，<form> 增加了很多属性；⑤提供多种API；
1. html标记分为容器标记(成对出现)和单一标记(如<hr/><img/>等)；
2. html的组成：<html></html>来标记网页的开始和结束；其中包括"头"：<head></head>和"身体"<body></body>两部分；
<!DOCTYPE html>

<html>

<head>                                  

<title>页标题</title>        

</head>

<body>                                

内容

</body>

</html>
1. 标记的属性设置格式：<标记属性名称1=属性值1 属性名称2=属性值2 ……>
如：<html lang="zh-CN"> 指定网页的语言是简体中文；<meta name="keywords" content="HTML,CSS,XML,XHTML,Javascript"> meta标记用于描述网页，有利于搜索引擎快速找到网站并正确分类；
1. 分区：html4是按照<div>标记指定id属性名称，再加上CSS语法来达到想要的结果； html5新增了部分的语义标记放在body中；(都是容器标记)，如<header>表示网站名称、主题等；<nav>表示导航条；<aside>表示侧边栏；<article>定义主内容区；<section>表示章节或段落；<footer>表示页脚；
2. 重要的声明：<!DOCTYPE html>声明使用的标准规范；语言：<html lang="zh-CN">表示使用简体中文；编码：<meta charset="GB2312">表示使用简体中文编码，在保存文档的时候也需要修改这一项内容；使用UTF-8编码最不容易出现乱码；
3. 文字变化和排版技巧：
① <p></p>标记段落，换行并增加一个空行；<br/>换行；<pre></pre>按照原始代码的排列方式显示；<blockquote></blockquote>表示文字的引用，会将文字换行并缩进；<hr/>添加分割线；<h1>~<h6>设置段落标题的大小级别；<b></b>加粗；<i></i>斜体；<u></u>下划线；<sup></sup>上标、<sub></sub>下标；

② 列表标记：无序列表：<ul><li></li></ul> 有序列表：<ol><li></li></ol>

其中属性设置：<ol type="…" start="…" reversed="reversed">；type表示5种有序编号的方式，引号内可填写1/i//I/a/A；start表示起始编号；reversed="reversed"表示编号倒序；

③ Define List：<dl></dl>表示起始；<dt></dt>表示标题；<dd></dd>表示解释上述标题；
1. 注释与特殊符号：①注释：；[注]：在html注释之间加入条件判断可以使得IE浏览器选择性执行注释内容，其他浏览器只会当普通注释处理； ②特殊符号： < → < >→> " → " &→& 半角空格→ 
2. 超链接：
格式：<a href="" target="">文字或者<img/ src=""></a>；

属性：①
1. href=""中的网址可以是相对路径和绝对路径；一般站外网页用绝对路径；目标网页在自己的网站中常用相对路径：下层的相对路径直接写目录名称1/目录名称2/网址；上层相对路径可以用 ../网址表示；
2. href=""中还可以填写E-mail超链接；格式：href="mailto:账号1;账号2"，将会打开浏览器默认的邮件打开程序；
[拓展] 在账号邮箱后紧跟 ?subject= 可以自动填写主题；紧跟 ?cc= 可以自动填写抄送账号；紧跟 ?bcc= 可以自动填写密件抄送；紧跟 ?body= 自动填写进正文开头；
1. Href=""中还可以填写文件链接，从而用户可以通过超链接下载文件；
②target=""属性有以下几种：a. _blank 链接的目标网页会在新窗口中打开；b. _parent 链接的目标网页会在当前窗口或者框架网页中的上层框架中打开； c. _self 默认值，会在当前网页打开；d. _top 框架网页中的所有框架都会被删除； e. 窗口名称在指定名称的窗口或者框架中打开；
1. 表格：
格式：<table boder="1"> <caption>标题</caption><tr><td>列1</td></tr></table> 表示一行<tr></tr>一列<td></td>的一张表格<table></table>，并在第一个行之前有一行标题<caption></caption>;

属性：①<table boder="1">border属性用来设置是否显示表格边框；②<td nowrap>…</td> nowrap属性表示内容不换行；

③<td colspan="2"> 表示将一行中的两列合并单元格；④<td rowspan="2">表示将某列中的上下两行合并成一列；
1. 表单
①架构：<form></form>

属性：例如：<form method="post" action="abc.asp">；
1. method有2中方式：post 和 get；get方式的数据会直接加在URL之后，安全性差，并且有255个字符的限制，适用于数据少的表单；而post是数据封装后再发送，安全性高，字符串长度没有限制；通常采用post发送；
2. action：表单通常会和asp或php等数据库程序配合使用，属性action用来指出发送的目的，例子表示将表单送到abc.asp网页进行下一步处理；当然，使用邮箱也可以收集数据，语法如下：<form method="post" action="mailto:abc@mail.com?subject=xxxx enctype="text/plain""> 注意enctype是表单发送的编码方式，只有method="post"才有效，发送到电子邮件的编码方式是text/plain 否则将会乱码；上传文件的时候要用的编码方式是multipart/form-data ；
②分组： <fieldset><legend>分组标题</legend>内容</fieldset>

②组件：
1. 输入组件：
  1. 文本框 <input type="text" name="username" value="guest" size="10" maxlength="10"/> ：type输入的方式是text,上限255字符；name文本框的名字；value文本框内容的的默认值，可省略；size文本框的展示长度，默认值为20；maxlength限制文本框的字数；autofocus表示加载网页后自动将光标插入此文本框；
[类似]：搜索域 <input type="search" name="searchword"/>与文本框类似的效果，只是输入后右边会自动多出一个×；
1. 多行文本框(textarea) <textarea name="memo" cols="15" rows="2" wrap="virtual">这是多行文本框中的默认值</textarea> name文本框的名字；cols="20"文本框的宽度；rows="4"文本框的行数；wrap="virtual"输入超过时会自动换行(无需按换行键)，但传送给服务器后是一行，和soft类似，若改为pysical则输入会自动换行，并且传送给服务器就是输入的模样(包括换行)，和hard类似，若改为off则禁用自动换行；readonly属性表示用户无法输入；
2. 密码域 <input type="password" name="t1" size="20"/> 和text类似，唯一区别是密码用*或者圆点代替；
3. 日期域 <input type="date" name="selectdate"/> 会自动弹出日期选择窗口；
4. 数字域 <input type="number" name="setname" value="5" min="3" max="20" />可以通过上下键选择数字；min和max用来限制范围；如果无法显示上下键则只能输入且失去限制范围的作用；
[类似]：范围域：<input type="range" name="numberrange" value="5" min="3" max="20"/>语法及其类似，只是类型变化，形式变成滚动条；
1. 颜色域 <input type="color" name"selectcolor" value="#ff00ff" />用户选择颜色时会弹出颜色菜单；
1. 列表组件：
  1. select组件：<select><option>选项1<option><option>选项2</option></select>；属性：<select name="sport" size="1"> name表示列表的名字；size="1"表示是下拉列表，若参数改为option的数目则变成选择列表；如果添加multiple属性，则可以通过Ctrl键进行多选；
  2. datalist组件：<datalist id="browsers"><option value="Internet"></option> <option value="Firefox"></option></datalist>
是隐式的列表，需要和<input list="browsers">搭配使用，list属性名和<datalist>中的id属性名称必须一致；效果：类似于自动查词的作用，在List中输入f则会在下方自动跳出Firefox供选择；<option>中的内容和select组件也不同；
1. 选择组件：
  1. 单选按钮radio：<input type="radio" name="gender" value="女" checked />女属性：type="radio"表示单选按钮；name是组件名称，名称相同的radio组件会被认为是同一组件；value="女"是radio组件的值，但是不显示，后面的女才是显示在按钮后面的文字；checked表示已选择状态；
  2. 复选框checkbox：<input type="checkbox" name="hobbies" value="电影" checked />电影属性说明和radio类似；
2. 按钮组件：
  1. submit按钮：<input type="submit" name="s1" value="提交"/> 当点击时表单就会按照<form>的action属性进行发送；value是显示在按钮上的文字；
  2. reset按钮：<input type="reset" name="r1" value="重置"/> 当点击时就会将表单中的值重置为默认值；
  3. button按钮：<input type="button" name="back" value="上一页"/> 本身没有作用，必须搭配JavaScript才能达到想要的效果；value是显示在按钮上的文字；

HTML5基础入门(笔记分享)相关推荐

Android Studio 基础入门笔记
Android Studio 基础入门笔记 Android Studio 基础入门笔记为什么选择使用 Android Studio 而不是EclipseADT 安卓配置JDK AS如何更新常规的 ...
Python基础入门笔记（二）
前言本文主要为 Python基础入门笔记(一)内容的补充. 一.迭代器和生成器 1.1 Python迭代器迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元 ...
11岁过python1级_11岁表弟写的Python零基础入门笔记！
一.Python输入与输出输出:使用print()函数. print()函数的基本语法格式如下:print(输出内容). 输出内容可以是数字和字符串(字符串需要用引号括起来),也可以是包含运算符的表达 ...
【Python3零基础入门笔记】05 Python时间处理——time库的使用
time库的使用: time库基本情况时间获取时间格式化程序计时文本进度条实例 time库基本情况 Time库是python中处理时间的标准库计算机时间表达提供获取系统时间并格式化输出功能 ...
html5 基础入门
目录 html5 基础入门前言介绍 HTML5 兼容性 DTD 智能表单 input type 类型整理总结 input 元素属性总结 form表单控件总结新增结构标签新增多媒体标签 html5 ...
宋九九：怎么做好seo优化？SEO基础入门教程分享
宋九九:怎么做好seo优化?SEO新手基础入门教程分享! 宋九九以为一个好的SEO优化方法,需要团队的技术能力和凝聚力,SEO最根本的目的就是满足搜索引擎的规则,以达到排名前置的目的.常规seo是一个 ...
Java基础入门笔记2
Java基础入门笔记2 一. 为什么把程序出错叫做"BUG"? 1. 原因是臭虫或者虫子,现在用来指代电脑系统或者程序中隐藏的一些漏洞或者一些问题,所以现在程序出问题就叫" ...
Html5基础知识笔记
学习笔记,供个人快速查阅使用!! 公开分享,不喜勿喷! Html5基础介绍 h1标签 <h1>Hello World</h1> p标签如果想在网页上显示文章,这时就需要< ...

HTML5基础入门(笔记分享)

HTML5基础入门(笔记分享)相关推荐

最新文章

热门文章