HTML5学习

HTML5的基本结构

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World!</title>
</head>
<body>
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</body>
</html>

注释

<!--注释文字 -->

标签式样,语法为标题文本,x可取1到6

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
</body>

斜体与加粗

<em>需要斜体的文本</em>
<strong>需要加粗的文本</strong>

利用设置单独的样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

短文本引用(加双引号)

<q>引用文本</q>

长文本引用(加缩进)

<blockquote>引用文本</blockquote>

在html文本中想输入回车换行,输入

<br />

想输入空格,输入

&nbsp;

加水平线,输入

<hr />

为网页加入地址或邮件信息

<address>联系地址信息</address>

加入代码

<code>代码语言</code>

加入大段代码

<pre>语言代码段</pre>

有序列表

<ol>
<li>我的第一个列表信息。</li>
<li>我的第一个列表信息。</li>
</ol>

无序列表

<ul>
<li>我的第一个列表信息。</li>
<li>我的第一个列表信息。</li>
</ul>

给网页的独立的版块添加“标记”

<div id="名称一">
<h2>标题</h2>
<ul>
<li>列表一 </li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>

创建表格

创建表格的四个元素:table、tbody、tr、th、td。

<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行
<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列
<th>…</th>:表格的头部的一个单元格,表格表头
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</tbody>
</table>

在head中加入如下代码可以出现方框

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

为表格添加摘要

<table summary="摘要内容">

为表格添加标题

<caption>标题文本</caption>

因此,一个简单的表格代码为:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量(个) </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>

网页链接

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

但a标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开,则需要

<a href="目标网址" target="_blank">click here!</a>

加入图片

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

交互表格

语法为

<form>
<input type="text/password" name="名称" value="文本" />
</form>

当type="text"时,输入框为文本输入框;当type="password"时, 输入框为密码输入框。name:为文本框命名,以备后台程序ASP 、PHP使用。value:为文本输入框设置默认值。(一般起到提示作用)

多文本输入的语法:

<textarea  rows="行数" cols="列数">文本</textarea>

单选框复选框语法:

<input type="radio/checkbox"  value="值" name="名称" checked="checked"/>

当 type="radio" 时,控件为单选框,当 type="checkbox" 时,控件为复选框.value:提交数据到服务器的值(后台程序PHP使用.name:为控件命名,以备后台程序 ASP、PHP 使用.checked:当设置 checked="checked" 时,该选项被默认选中.注意:同一组的单选按钮,name 取值一定要一致

下拉框语法:

<option value="向服务器提交的值">显示的值</option>

若设置默认值,则需要在option中添加

selected="selected"

若设置多选,则在select标签中设置multiple="multiple"属性,就可以实现多选功能。

提交和重置数据的语法:

<input type="submit" value="确定"  name="submit" />
<input type="reset" value="重置" name="reset" />

因此,一个简单的统计表为:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>
</head>
<body>
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" /><br />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" /> <br />
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" /><br />
<label>爱好:</label>
<select multilpe="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物" selected="selected">购物</option>
</select><br />
<label>你对什么运动感兴趣</label>
<br />
<lable for="run">慢跑</label>
<input type="checkbox" name="sparts" id="run" />
<br />
<lable for="rclimb">登山</label>
<input type="checkbox" name="sparts" id="climb" />
<br />
<lable for="basketball">篮球</label>
<input type="checkbox" name="sparts" id="rbasketball" />
<br />
<label>个人简介:</label><br />
<textarea cols="50" rows="10">在这里输入内容...</textarea><br />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>

相关网站

HTML5学习(一)的更多相关文章

  1. HTML5 学习总结(一)——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  2. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  3. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  4. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  5. [HTML5] 飞龙天惊-HTML5学习系列

    飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...

  6. HTML5 学习笔记--------》HTML5概要与新增标签!

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  7. HTML5学习笔记(一):HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  8. HTML5学习参考资料整理

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...

  9. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  10. html和html5学习

    html和html5学习 chorme.safari中的input或textarea html超链接(a)详细讲解 html5新增及删除标签 html表格 图片加alt属性 input的type属性 ...

随机推荐

  1. 优化系列 | DELETE子查询改写优化

    0.导读 有个采用子查询的DELETE执行得非常慢,改写成SELECT后执行却很快,最后把这个子查询DELETE改写成JOIN优化过程 1.问题描述 朋友遇到一个怪事,一个用子查询的DELETE,执行 ...

  2. 框架统一出参数DTO格式

    这个可以没必要定义. 每个接口返回自己的数据格式就好

  3. cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第0步---知识点总结&amp;效果预览&amp;设计思路

    /* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏.这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写.第一别全然照搬代码:第二能够说 ...

  4. SQL SERVER读书笔记:TempDB

    每次SQL SERVER启动的时候,会重新创建. 用于 0.临时表 1.排序 2.连接(merge join,hash join) 3.行版本控制 临时表与表变量的区别: 1)表变量是存储在内存中的, ...

  5. camera table表编译

    mmm -j8 vendor/mediatek/proprietary/hardware/mtkcam/v1/common/paramsmgr/ 2>&1 | tee ft.lib.lo ...

  6. 如何卸载Win10自带Xbox、人脉、天气等应用?

    Win10中的Modern应用一般可在右键菜单中进行卸载,不过某些自带的Modern应用,比如Xbox.天气.人脉.照片等应用是无法在右键菜单中进行卸载的.如果你有卸载这些应用的需求,可参考下面的方法 ...

  7. guice基本使用,常用的绑定方式(四)

    guice在moudle中提供了良好的绑定方法. 它提供了普通的绑定,自定义注解绑定,按名称绑定等. 下面直接看代码: package com.ming.user.test; import com.g ...

  8. LCA 离线的Tarjan算法 poj1330 hdu2586

    LCA问题有好几种做法,用到(tarjan)图拉算法的就有3种.具体可以看邝斌的博客.http://www.cnblogs.com/kuangbin/category/415390.html 几天的学 ...

  9. Ext未定义问题解决

    做的项目用到EXT.NET,调试时候没问题,发布到IIS上出现EXT未定义,把项目的应用程序池改为Classic 模式就可以了.

  10. 三维投影总结:数学原理、投影几何、OpenGL教程、我的方法

    如果要得到pose视图,除非有精密的测量方法,否则进行大量的样本采集时很耗时耗力的.可以采取一些取巧的方法,正如A Survey on Partial of 3d shapes,描述的,可以利用已得到 ...