第2章 HTML5网页内容展示
教学要求
书写更简洁的HTML代码 创建更简洁的Web程序
(1) 熟练掌握：结构标签、内容分组标签、文本语义级常用标签、表单交互标签和表格展示标签
(2) 一般了解：章节语义级标签、H5高级部分(2D/3D绘图，离线缓冲，本地存储，本地SQL数据库)
(3) 熟练掌握webstorm的安装(含中文语言包)，html5标签的录入操作(zen coding)
- 熟练掌握HTML5结构标签(html,head,body,title,base,link,meta,style)
- 熟练掌握HTML5内容分组标签(h1-h6,hr,p,pre,code,blockquote,ul-ol-li-dl-dt-dd,div,figure-figcaption,img,audio,video,source)
- 掌握HTML5文本语义级常用标签(span,a,br,small,sub,sup,b,em,strong,i,cite,q,s,mark,data,time,abbr,ins,del)
- 了解HTML5章节语义级标签(article,section,nav,main,aside,header,footer,address)
- 熟练掌握HTML5表单交互标签(from,fieldset,legend,label,input,datalist,select,optgroup,option,textarea,button,output,progress,meter,keygen)
- 熟练掌握HTML5表格展示标签(table,tr,th,td,thead,tbody,tfoot,col,colgroup,caption)
- 了解HTML5高级部分(2D/3D绘图canvas，离线缓冲，本地存储，本地SQL数据库)
延伸阅读
2.1 HTML5初步(概念、历史、结构)
2.1.1 HTML5概念
- page
- 网页：page=html+css+js
网页组成：内容(html5, .html)、样式(css3, .css)、行为(javascript, .js)三部分分离。
- html
- 超文本标记语言(HyperText Markup Language，HTML)。
HTML是一种规范、标准，它通过特定标记符号来标记在浏览器中展示相应的内容，如标题、段落、列表、图片、表格和超链接等，也在一定程度上描述相应内容的语义和外观。
HTML之所以称为超文本标记语言，主要因为文档中包含了“超链接”。
- html5
- 万维网的核心语言、超文本标记语言(HTML)的第五次重大修改(推荐标准)。2014年10月29日，万维网联盟(W3C
World Wide Web Consortium )宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
2.1.2 HTML5历史
- 1993年6月HTML1作为互联网工程工作小组(IETF)工作草案发布(并非标准)
- 1999年12月24日HTML4.01以W3C推荐标准发布。
- 2008年1月22日W3C公布HTML5的第一份正式草案。
- 2014年10月28日HTML5以W3C推荐标准发布。
- 2016年9月15日W3C发布了HTML5.1提案推荐标准。
2.1.3 HTML5文档结构标签 (html,head,body,meta,title)
- html5文档类型: <!DOCTYPE html> ---没有指定具体的版本表示最新的html版本
- 网页语言区域:<html lang="zh-cmn-Hans"> ---指网页内容的语言、区域，便于搜索引擎检索。zh-cmn-Hans指中文(普通话/国语)简体
- 字符集编码:<meta charset="UTF-8"> ---指网页文件本身的文字编码，便于浏览器解析。指定utf-8编码是因为教学过程中要求同学们发布网页到新浪云，而新浪云推荐的字符编码是utf-8
- html5中html,head,body三个标签允许省略，W3C组织推荐写上这些标签便于浏览器解析。
- title网页标题，浏览器标题栏显示。
字符编码
- utf-8字符集编码
- 一种针对Unicode的可变长度字符编码(8-bit Unicode Transformation Format)，现在已经标准化为RFC 3629。用1到4个字节编码UNICODE字符，在网页上可以同一页面显示中文简体、繁体及其它语言(如英文，日文，韩文)。
- gb2312字符集编码
- ......。
- gbk字符集编码
- 。。。。。。
- iso8859-1字符集编码
- ISO-8859-1编码是单字节编码，向下兼容ASCII，其编码范围是0x00-0xFF，0x00-0x7F之间完全和ASCII一致，0x80-0x9F之间是控制字符，0xA0-0xFF之间是文字符号。ISO-8859-1收录的字符除ASCII收录的字符外，还包括西欧语言、希腊语、泰语、阿拉伯语、希伯来语对应的文字符号
【实训1】webstorm安装和第1个中文网页
WebStorm是jetbrains官网下载网址(https://www.jetbrains.com/webstorm/download/)公司旗下一款web开发工具，支持html5、css3、javascript及其JQuery等框架和Zen编码输入，被广大JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。截止2016-10-20，最新安装包：WebStorm-2016.2.4.exe，中文语言包resources_cn.jar
(1) 双击安装包WebStorm-2016.2.4.exe一路next，勾选：Create Desktop shortcun(32-bit launcher)和Create associations(.js,.css,.html)，勾选Run WebStorm单击[Finish]完成。记住安装软件目录。
(2) 注册或选Evaluate for free单击[Evaluate]按钮，双击桌面[JetBrains WebStorm 2016.2.4]快捷图标，config(file) - settings - Appearance - 勾选Override default fonts by(not recommended)”，在Name里选一个中文字体: 宋体(SimSun)或微软雅黑(Microsoft Yahei),关闭[WebStorm].
(3) 复制中文语言包resources_cn.jar到安装目录\JetBrains\WebStorm 2016.2.4\lib\lib文件夹。
(4) 双击桌面[JetBrains WebStorm 2016.2.4]快捷图标，文件 - 新建 - 编辑文件模板 - HTML文件：html lang="en" -> html lang="zh-cmn-Hans" - 应用
(5) 文件 - 新建 - HTML文件 - name:输入文件名如hello, kind:html5 file - h1按tab键, ul>li*6按tab键
2.2 HTML5内容分组标签
2.2.1 标题、水平线、段落 (h1-h6,hr,p,pre,blockquote)
- h1-h6: 1-6级标题(header)
- hr：水平线(horizontal rule)，作者认为用于标题下装饰线，h5定义主要表现内容的主题变化(单标签：没有结束标签)
- p：段落(paragraph)，有段前、段后行距，中文一般需用CSS设置首行缩进2个字
- blockquote块缩进: 前后两端缩进块
- pre预格式文本(preformatted text)：原样(指空格、回车等字符)呈等宽字体输出段落，通常用于表示程序源代码。注：webstorm会把<转换成<保存到文件。
- code代码小段，等宽字体输出，不原样输出空格、回车等字符。
- q: 内联引用(quote)，一般在引用的内容前后加引号(code、q为内联元素)。
【例2】标题、水平线、段落 (h1-h6; hr; p,pre,code,blockquote,q) (h1-h6_p.html)
2.2.2 块、列表、插图(图像、图题) (div,ul-ol-li-dl-dt-dd,figure-figcaption,img)
- div: 块，主要用于动态改变块的内容或样式(css)----编程
- ul-li: 无序列表(unordered list, list item.)
- ol-li：有序列表(ordered list),属性：type:1,A,a,I,i；start:数字；reversed:降序
- dl-dt-dd：定义列表(dl:definition list)、项目(dt:definition term)、描述(dd:definition description)
- img: 图像(image)，属性：src - url地址，width - 宽度，height - 高度，alt - 当图像不可用时的替换文本
- figure-figcaption: 列表(ul,ol,dl)、代码(pre)、插图(img)、画布(canvas)、视频(vidoe)等流内容包
- details-summary:细节(details)-摘要(summary), details属性：open - 打开细节；summary按标题显示
【例3】列表、插图 (ul|ol-li,dl-dt-dd,div,figure-figcaption,img,canvas)(list_figure.html)
2.2.3 音频 (audio,source)
- 常用音频格式：mp3(压缩常用),ogg,wav(音质好文件大)
- audio常用属性：[src= ] controls(控制面板显示) autoplay(自动播放) loop(循环播放)
- source常用属性：src= type=
- type属性值：mp3--audio/mpeg, ogg--audio/ogg,wav--audio/x-wav
2.2.4 视频 (video,source)
- 常用视频格式：mp4(压缩常用),ogg,WebM(音质好文件大)
- video常用属性：[src= ] controls autoplay loop
- source常用属性：src= type=
- type属性值：mp4--video/mp4, ogg--video/ogg,wav--audio/x-wav
2.3 HTML5文本语义级常用标签
2.3.1 文本语义级常用标签(小段、超链接、回车、上标、下标、小字)
- span: 内联小段，主要用于动态改变小段的内容或样式(css)----编程
- a: 超链接(锚anchor)，属性href:目标URL --- 链接定义；属性target:_blank---新窗口|新标签页、_self---默认，本窗口|本标签页|本框架(frame)、_parent---父框架(frame)、_top---顶层(本窗口|本标签页)。属性name: 锚点名(没有href属性才能有name属性)--- 锚点定义。
- br：回车(line break)，不影响行距(单标签：没有结束标签)
- sup：上标 superscript
- sub：下标 subscript
- small：小字，h5通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。
http和url术语
- http
- HTTP是HyperText Transport Protocol(超文本传输协议)的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。
- url
- URL是Uniform Resource Locator(统一资源定位符)的缩写，是访问互联网资源位置和方法的一种简洁的表示。关于URL的详细内容请参考RFC1738。
完整的、带有授权部分的URL语法如下：协议://用户名:密码@域名或IP地址:端口号/路径/文件名.文件后缀?参数=值#标志
常用的URL协议有：http(超文本传输协议)、https(安全超文本传输协议)、ftp(文件传输协议)、mailto(电子邮件地址)、file(当地电脑或网上邻居文件分享)、telnet(网络字符终端)协议等。
【例7】文本语义级(内联元素)常用标签之一 (span,a,br,sup,sub,small) (inline1.html)
2.3.2 html5元素主要全局通用属性(id、类名、提示、内嵌样式、快捷键、tab索引、可编辑、隐藏)
html5元素全局通用属性请参考html5元素的全部全局属性参照(http://www.w3school.com.cn/tags/html_ref_standardattributes.asp)
- id: 元素(标签)的唯一标识符identifier
- class：元素的一个或多个类名(引用样式表中的类)
- title：元素的提示信息(当鼠标移动到元素之上)
- style: 元素的内联CSS样式
- accesskey激活元素的快捷键
- tabindex元素的tab键次序
- contenteditable元素内容是否可编辑
- hidden: 元素内容是否隐藏
【例8】html5元素主要全局通用属性 (id,class,title,style,accesskey,tabindex,contenteditable,hidden)(global_attributes.html)
2.3.3 文本语义级常用标签(体现：粗体、斜体、删除线、下划线、醒目)
- b：bold 显示粗体，h5表示文档中的关键字、商品名称等
- strong：显示粗体，h5表示非常重要、严重性或内容的紧迫性
- i：italic 显示斜体，表示强调不同的情绪、语录或想法，也可表示技术术语、成语、习语、生物分类等
- em：emphasis 显示斜体，用来强调重要的内容
- cite：显示斜体，HTML5表示作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的名称或标题
- s:
strike 删除线显示，HTML5表示的内容不再是准确的或不再相关的。
- del:
delete 删除的文字(中划线显示)
- u：underline 下划线显示
- ins：insert 新增的文字(下划线显示)
- abbr: abbreviation acronym, 表示术语、缩写，鼠标移动到缩写上面会有提示
- mark：记号，高亮显示文档中的文字以达到醒目的效果。
- time: 表示内容是日期/时间，或通过datetime属性标识内容相关的日期/时间。datetime格式:[yyyy|yy]-mm-dd hh:mi:ss.mmmZ[+|-]HH:MM 或其部分：年-月-日,年-月,月-日,年-月-日 时:分:秒,时:分 等
如果只是单纯的想把文字的样式显示为斜体或粗体，请不要使用这几个语义标签，W3C建议使用CSS样式定义。
【例9】文本语义级(内联元素)常用标签之二(b,strong,i,em,cite,s,del,int,abbr,mark,time) (inline2.html)
2.4 H5表格展示标签
- table：表，<thead> <tbody> <tfoot>无论前后顺序如何改变，<thead>内的元素总是在表的最上面，<tfoot>总在表的最下面
- caption：表题，紧随table标签之后。一个表只能定义一个标题，通常这个标题会被居中于表格之上显示。
- thead：表头，
- tbody：表体，
- tfoot：表脚，
- tr: 行 row
- th: 表头单元 table header
- td：单元格 table data
- colspan属性: 跨列合并
- rowspan属性：跨行合并
【例10】H5表格展示(table,caption,tr,th,td,thead,tbody,tfoot,colspan和rowspan属性) (table.html)
2.5 H5表单交互标签
2.5.1 表单交互标签(表单、标签、中划线、下划线、下标、小字)
(from,fieldset,legend,label,input,datalist,select,optgroup,option,textarea,button,output,progress),meter,keygen
- from：表单，action="处理者URL" method(方法)：get(明信片)|post(信封)
- fieldset,legend：
- label：
- input：
- select,optgroup,option：
- textarea:
- button:
- output,progress：
2.5.2 input元素类型(文字、数字、密码、电话号码、url、email、日期、时间、颜色、隐藏域、文件、提交按钮、复位按钮)
21type=hidden,text,number,range,search,password,tel,url,email,date,month,week,time,datetime-local,checkbox,radio,file,color,submit,reset,button,image
- text：文本
- number：数字
- search：搜索
- password：密码
- hidden：隐藏域
- tel,url,email：电话号码、URL、电邮
- date,month,week,time,datetime-local: 日期、月份、周、时间、本地日期时间
- checkbox,radio: 复选框、单选框
- file,color：文件、颜色
- submit,reset,button,image：提交按钮、复位按钮、按钮、图像按钮
2.5.3 input元素的属性(提示、长度、范围、步长、列表、多选、正则表达式、只读、必填)
12 Common input element attributes: placeholder,maxlength,minlength,size,max,min,step,list,multiple,pattern,readonly,required
- placeholder：提示，适用input的text,search,url,tel,email以及password。
- required: 必填(不能为空)，适用于input的text,search,url,tel,email,password,date pickers,number,checkbox,radio以及file。
- pattern：验证模式，适用input的text,search,url,tel,email,password
- maxlength,minlength,size：最大长度、最小长度、字数长度
- max,min,step：最大值、最小值、步长值，适用date pickers、number以及range标签)
- readonly：只读
- list:
- multiple：选择多个值，适用input的email和file
2.6 H5章节语义级标签(文章、节、导航、头部、脚部、侧边栏、主要、地址)
- article: article(文章)代表一个独立、完整的内容块。
一般来说article会包含header标签，有时也会包含aside标签、footer标签。
article允许嵌套，原则上来说内部article的内容是和外层article内容是相关的。主要用于表现语义没有特殊的样式
- header：header(头部)通常包含标题标签(h1-h6)、作者、发布时间、导航nav标签、相关的logo图片或简介摘要段落p标签。
可以为body、article、section和aside添加header元素。
- aside: aside(侧边栏)表示当前页面或文章的相关附属信息部分，如引用、词汇列表、友情链接(nav)或广告单元等。
- footer: footer(脚部)作为其直接父级内容区块或是一个根区块的结尾。通常包括其相关区块的附加信息，如作者、相关阅读链接以及版权信息等。在同一个页面中可以使用多个footer元素，即可以用作页面整体的页脚，也可以作为一个内容区块的结尾。
- main：main(主)元素代表了文档或应用程序的body的主要内容。
一个文档中只能包含一个main标签。
不能在article,aside,footer,header或者nav中包含main。
main中不包含网站标题、logo、主导航和版权信息
- sectionsection(节)描绘的是一个文档或者程序里的普通的节，一个主题性的内容分组。
一般来说section会包含头部标签(header)和内容块,也可能包含脚部(footer)。
一个页面里可以拆分成多个section，
- navnav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素，如在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素是最恰当的，而不需要nav元素。
- address:文档或文章的作者/拥有者的联系信息，其内字体表现为斜体
【例14】H5区块(章节)级语义标签 (article,section,nav,main,aside,header,footer,address) (article_section.html)
2.7 H5高级部分(了解: 绘图canvas，离线缓冲，本地存储，本地SQL数据库)
本地存储
离线缓冲
绘图canvas
本地SQL数据库
2.8 习题
1.填空题(概念、知识点----------讲义中醒目的关键字)
(1) 网页(page=html+css+js)，通常将网页______(html5, .html)、______(css3, .css)、______(javascript, .js)分离为三种类型的文件。
(2) 对于web程序设计者，html5应熟练掌握结构标签、内容分组标签、文本语义级常用标签、__________标签和__________标签。
(3) HTML是一种______、______，它通过标记符号来______要显示的网页中的各个部分如标题、段落和列表等等，也在______程度上描述文档的______和______。
(4) html5的文档类型标记是 <!DOCTYPE ______> ，网页内容的使用语言为中文-普通话-简体的标记是<html lang="____________"> ，网页文件本身的文字编码标记是
<meta charset="XXX">，其中便于浏览器解析。指定utf-8编码是因为教学过程中要求同学们发布网页到新浪云，而新浪云推荐的字符编码是utf-8
(5)
(6)
(7)
(8)
2.操作题(参考zen coding.txt 录入html5标签)
(1)
(2)
(3) 在WebStorm中录入 table>caption+(thead>tr>th*3)+(tbody>tr*4>td*3)+tfoot>tr>td*3 ，生成包含表题、1行表头、4行表体、1行表尾的3列表格，并填入有意义的表格数据。
(4)
3.编程题(概念、知识点)
(1) 仿照【例题2】使用(h1-6,hr,p,figure,figcaption,img)标签编写包含标题、水平线、段落、插图(图像、图题)内容、具有实际意义的网页，如个人或单位简介。
(2) 仿照【例题3】使用(ul-ol-li-dl-dt-dd,figure-figcaption,img,video)编写包含标题、列表、插图(图像、视频、图题)内容、具有实际意义的网页，如个人简历。
(3) 仿照【例题7,8】使用(span,a,br)编写包含标题、段落、回车、超链接内容、具有实际意义的网页，如请假条。
(4) 仿照【例题10】使用(table,caption,tr,th,td,thead,tbody,tfoot,colspan和rowspan属性)编写具有实际意义的表格展示网页。
(5) 仿照【例题11】使用(。。。)编写具有实际意义的表单交互网页
本章参考文献
返回目录