基础

HTML5与HTML4的差异

1、语言简化了

2、统一了嵌入影音的语法，使用<video></video>

3、新增了<header>、<footer>、<section>、<article>等语义标记

4、废除了<font>、<big>、<u>等标记

5、表单设计在原基础上大幅改动

6、新增了<canvas>标记，可以搭配JavaScript语法在网页上划线和画图

7、提供了API开发网页应用程序

html5废除的标记：

HTML5文件结构与语义标记

HTML5将网页做成了类似框架的样式。利用DIV，将页面的各个部分严格区分开来，引入了一些基础标签，使用该标签在对应的div里面进行操作（这里说的div是指内部定义的）

<header> 显示网站名称，主题或者主要信息

<nav> 网站的连接菜单

<aside> 用于侧边栏

<article> 用于定义内容区

<section> 用于章节或段落

<footer> 位于页脚，用于放置版权信息、作者等信息

<!DOCTYPE html>
<html>
<head>
<title>旅游札记</title>
</head>
<body>
    <header id="header">
        <hgroup>
            <h1>背包旅行札记</h1>
            <h4>旅行是一种休息，而休息是为了走更远的路</h4>
        </hgroup>
        <nav>
            <ul>
                <li><a href="#">关于背包</a></li>
                <li><a href="#" class="current-item">国内旅行</a></li>
                <li><a href="#">国外旅行</a></li>
                <li><a href="#">与我联系</a></li>
            </ul>
        </nav>
    </header>
    <article id="travel">
        <section>
            <h2>Hello world!</h2>
            <p>四季都是适合旅行的季节！</p>
            <p>不一定要花大钱，做点功课和多点自信，就能享受旅行的美好。</p>
        </section>
    </article>
        <aside>
            <figure>
                <img src="../images/tour_1.jpg" width="250px" height="130px" title="旅游" />
            </figure>
        </aside>
    
    <footer>
        HTML网页练习
    </footer>

</body>
</html>

View Code

HTML5声明与编码设置

声明<!DOCTYPE html>

语言和编码：在head加入

文字变化与排版效果

<p>

<pre>

<br/>

<blockquote></blockquote>标记

该标记用来引用文字，将标记内的文字换行并缩进。

blockquot的属性：属性名----cite 设置值----url网址说明----说明引用的来源

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<header>
    <h4>李商隐 锦瑟</h4>
</header>
<article>
    锦瑟无端五十弦，<br/>
    一弦一瑟思华年。<br/>
    <blockquote cite="www.baidu.com">
        庄生晓梦迷蝴蝶，
    </blockquote>
    望帝春心托杜鹃。
</article>
</body>
</html>

View Code

<hr>

<h1~h6>html5不再支持h1~h6的align属性，需要使用css样式调整标题放置的位置

文字效果:

<font>html5停用

<b>

<u>下划线

<i>删除线

<sup>上标

<sub>下标

列表

<ul>、<ol>、<dl>html5不支持使用type设置项目符号的样式，必须使用Css的list-style-type定义

html基本不建议使用字形标记，最好使用css替代。b用css的font-weight替代，i使用css的font-style，u使用css的text-decoration

注释

特殊符号不变

超链接基本不变

表单：

<form>标签新增属性：

autocomplete：用来设置input组件是否使用自动完成功能，有on和off两种选择

nocalidate：用来设置是否要在发送表单时验证表单，如需验证则填入novalidate即可。

表单主要组件以及范例如下表：

文本框text

属性： type、name、value、size、maxlength、autofocus（自动获得焦点）

多行文本框textarea

属性：name、cols、rows、wrap=“virtual”（设置文本框内的文字提交表单后是否自动换行，设置值hard表示换行，soft表示不换行）

readonly，设置只读,例如：<input type=text" value="quest" readonly />密码域password

与文本框text一样

日期域date

当用户点击日期域时会弹出日期菜单，让用户选择日期

数字域number

number组件提供min和max限制用户输入的数字范围。

颜色域color

在用户选择颜色时使用，单机颜色域，产生颜色菜单，让用户选择

<input type="color" value="#ff00ff"/>,value设置默认的颜色

范围域range

和number一样是让用户选择数字，只是range的界面是水平的滚动条

列表组件

<select>组件

<select></select>产生空的列表，<option>设置列表中的选项

属性：name、size（看到的列表项数）、multiple

datalist组件

datelist组件由<datalist></datalist>标记与<option>标记组成，必须与<input>组件的list属性一起使用。datalist组件的功能有点类似于自造列表，主要是让用户输入第一个字，就可以从列表中找出复合的词语。

<body>
<input list="browers" />
<datalist id="browers">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
</datalist>
</body>

View Code

选择组件：

单选按钮radio

属性：type、value、name、checked

复选框checkbox

属性：type、name、value、checked

按钮组件：

和html一样

表单分组：

当表单属性太长太多时，可以将表单的问题分门别类，一面用户输入数据时候眼花缭乱。用来将表单分组的标记是<fieldset></fieldset>，<legend></legend>标记可以设置分组标题。

<body>
<fieldset>
    <legend>分组标题</legend>
    分组内容
</fieldset>
</body>

View Code

testdemo：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h3>教学意见信息表</h3>
<form method="post" action="">
<fieldset>
    <legend>个人及课程资料</legend>
    <ol>
        <li>
        科目名称：<input type="text" name="subject" autofocus="autofocus" />
        </li>
        <li>
        请选择系所：
        <select size="1" name="department">
        <option>英文系</option>
        <option>法律系</option>
        <option>信息管理系</option>
        <option>电子工程系</option>
        <option>信息工程系</option>
        </select>
        </li>
        <li>
        讲师：<input type="text" name="teacher"  />
        </li>
        <li>
        性别：
        <input type="radio" name="sex" value="男生" checked="checked" />男生
        <input type="radio" name="sex" value="女生" />女生
        </li>
        <li>
        开课日期：
        <input type="date" name="startdate" />
        </li>
    </ol>
</fieldset>
<fieldset>
    <legend>意见调查</legend>
    <ol>
        <li>
        这门课你的出席情况是
        <input type="radio" name="assist" value="没有缺课" />没有缺课 
        <input type="radio" name="assist" value="缺课1-3次" />缺课1-3次 
        <input type="radio" name="assist" value="缺课4-6次" />缺课4-6次
        <input type="radio" name="assist" value="缺课6次以上" />缺课6次以上
        </li>
        <li>
        你对这门课的学习态度
        <input type="radio" name="attribute" value="很认真" />很认真
        <input type="radio" name="attribute" value="还算认真" />还算认真
        <input type="radio" name="attribute" value="很不认真" />很不认真
        </li>
        <li>
        修习这门课的原因（可复选）
        <input type="checkbox" name="reason" value="必修" />必修
        <input type="checkbox" name="reason" value="凑学分" />凑学分
        <input type="checkbox" name="reason" value="个人兴趣" />个人兴趣
        <input type="checkbox" name="reason" value="其他" />其他原因
        </li>
        <li>
        请简述你对此门课程的期望或改进的建议：<br/>
        <textarea rows="3" name="hope" cols="50"></textarea>
        </li> 
    </ol>
</fieldset>
<input type="submit" value="提交" />
<input type="reset" value="重写" />
</form>
</body>
</html>

View Code

posted @ 2016-04-28 12:11 guodaxia 阅读(227) 评论(0) 编辑收藏举报

刷新页面返回顶部

guoDaXia的博客

基础

公告