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. GitHub分支项目不支持搜索问题解决：Sorry, forked repositories are not currently searchable.

    错误如下: 在GitHub上的项目,如果是分支项目的星星数没有超过父项目,就不会去索引从而不会进行代码搜索. 解决方法: 1.要在搜索结果中包含分支,需要添加fork:true或fork:only查询 ...

  2. 【Java】基本类型和引用类型（值传递）

    [关键词] [问题] · 加深对基本类型和引用类型的理解: [效果图] [分析] 參见最后的[參考资料] [解决方式] [代码] public void test() throws Exception ...

  3. javascript中的Base64.UTF8编码与解码详解

    javascript中的Base64.UTF8编码与解码详解 本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...

  4. luogu2429 制杖题

    题目大意 求不大于 m 的. 质因数集与给定有n个元素的质数集有交集的自然数之和. 数据范围 1 2 3 n*m<=10^7 4 5 n<=2,m<=10^9 6 7 n<=2 ...

  5. c14---排序，查找

    // // main.c // 冒泡排序 // // Created by xiaomage on 15/6/10. // Copyright (c) 2015年 xiaomage. All righ ...

  6. strlen和mb_strlen

    在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果不看手册,也许不太清楚其中的区别.下面通过例子,讲解这两者之间的区别. 先看例子: <?php // ...

  7. Gym-101915A Printing Books 模拟

    题面 题意:给你N,X,   X表示这本书从X开始编号,每个X是几位数,计数器就加几, 然后问你如果从X,开始编号,计数器为N的时候,翻了几页,不能刚好为N输出-1. (例如,5 99,答案为2,因为 ...

  8. 用Webpack构建Vue项目

    开始之前,需要安装node环境.(安装过程在此就不啰嗦了)   1.创建基本结构 首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录. 创建一个没有任何依赖关系的pack ...

  9. Super超级ERP系统---(6)采购管理--入库上架

    采购商品入库完成后,下一步就是上架操作.所谓上架就是把入库放到移动托盘的商品转移到固定货架上,货架上有货位号,可以把商品放到指定的货位上.主要分两步操作,上架操作主要是移动PDA上完成的  1.扫描移 ...

  10. 4.Projects and Scenes介绍

    1.Project 一个项目是由一系列的文件(如图片.音频.几何).场景以及vzp文件组成.这些文件被导入到项目对应的文件夹中.项目外部资源在场景中被使用后,会导入项目中,除非该资源被标记为外部引用. ...