HTML5基础入门(笔记分享)

来源：互联网发布：mysql字符串长度编辑：程序博客网时间：2024/06/08 03:34

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

[笔记分享]：

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；

html标记分为容器标记(成对出现)和单一标记(如<hr/><img/>等)；
html的组成：<html></html>来标记网页的开始和结束；其中包括"头"：<head></head>和"身体"<body></body>两部分；

<!DOCTYPE html>

<html>

<title>页标题</title>

</head>

内容

</body>

</html>

标记的属性设置格式：<标记属性名称1=属性值1 属性名称2=属性值2 ……>

如：<html lang="zh-CN"> 指定网页的语言是简体中文；<meta name="keywords" content="HTML,CSS,XML,XHTML,Javascript"> meta标记用于描述网页，有利于搜索引擎快速找到网站并正确分类；

分区：html4是按照<div>标记指定id属性名称，再加上CSS语法来达到想要的结果； html5新增了部分的语义标记放在body中；(都是容器标记)，如<header>表示网站名称、主题等；<nav>表示导航条；<aside>表示侧边栏；<article>定义主内容区；<section>表示章节或段落；<footer>表示页脚；
重要的声明：<!DOCTYPE html>声明使用的标准规范；语言：<html lang="zh-CN">表示使用简体中文；编码：<meta charset="GB2312">表示使用简体中文编码，在保存文档的时候也需要修改这一项内容；使用UTF-8编码最不容易出现乱码；
文字变化和排版技巧：

① <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>表示解释上述标题；

注释与特殊符号：①注释：；[注]：在html注释之间加入条件判断可以使得IE浏览器选择性执行注释内容，其他浏览器只会当普通注释处理； ②特殊符号： < → < >→> " → " &→& 半角空格→
超链接：

格式：<a href="" target="">文字或者<img/ src=""></a>；

属性：①

href=""中的网址可以是相对路径和绝对路径；一般站外网页用绝对路径；目标网页在自己的网站中常用相对路径：下层的相对路径直接写目录名称1/目录名称2/网址；上层相对路径可以用 ../网址表示；
href=""中还可以填写E-mail超链接；格式：href="mailto:账号1;账号2"，将会打开浏览器默认的邮件打开程序；

[拓展] 在账号邮箱后紧跟 ?subject= 可以自动填写主题；紧跟 ?cc= 可以自动填写抄送账号；紧跟 ?bcc= 可以自动填写密件抄送；紧跟 ?body= 自动填写进正文开头；

Href=""中还可以填写文件链接，从而用户可以通过超链接下载文件；

②target=""属性有以下几种：a. _blank 链接的目标网页会在新窗口中打开；b. _parent 链接的目标网页会在当前窗口或者框架网页中的上层框架中打开； c. _self 默认值，会在当前网页打开；d. _top 框架网页中的所有框架都会被删除； e. 窗口名称在指定名称的窗口或者框架中打开；

表格：

格式：<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">表示将某列中的上下两行合并成一列；

表单

①架构：<form></form>

属性：例如：<form method="post" action="abc.asp">；

method有2中方式：post 和 get；get方式的数据会直接加在URL之后，安全性差，并且有255个字符的限制，适用于数据少的表单；而post是数据封装后再发送，安全性高，字符串长度没有限制；通常采用post发送；
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. 文本框 <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"/>与文本框类似的效果，只是输入后右边会自动多出一个×；

多行文本框(textarea) <textarea name="memo" cols="15" rows="2" wrap="virtual">这是多行文本框中的默认值</textarea> name文本框的名字；cols="20"文本框的宽度；rows="4"文本框的行数；wrap="virtual"输入超过时会自动换行(无需按换行键)，但传送给服务器后是一行，和soft类似，若改为pysical则输入会自动换行，并且传送给服务器就是输入的模样(包括换行)，和hard类似，若改为off则禁用自动换行；readonly属性表示用户无法输入；
密码域 <input type="password" name="t1" size="20"/> 和text类似，唯一区别是密码用*或者圆点代替；
日期域 <input type="date" name="selectdate"/> 会自动弹出日期选择窗口；
数字域 <input type="number" name="setname" value="5" min="3" max="20" />可以通过上下键选择数字；min和max用来限制范围；如果无法显示上下键则只能输入且失去限制范围的作用；

[类似]：范围域：<input type="range" name="numberrange" value="5" min="3" max="20"/>语法及其类似，只是类型变化，形式变成滚动条；

颜色域 <input type="color" name"selectcolor" value="#ff00ff" />用户选择颜色时会弹出颜色菜单；

列表组件：
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. 单选按钮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类似；
按钮组件：
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是显示在按钮上的文字；

阅读全文

0 0