<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="页面描述" />
<!--
<meta http-equiv="refresh" content="3;URL=http://www.baidu.com/" />
-->
<meta http-equiv="pragma" content="no-cache" />

</head>
<body>
<hr />
&lt;hr /&gt;是一条直线
<h1>小标题</h1>
<h2>小标题</h2>
<!--h1至h6是小标题，标题会越来越小-->

<p>&lt;p&gt;
&lt;/p&gt;指的是段落
</p>

&lt;br /&gt;指的是换行，放在一句话的后面,重复用可以多空几行<br />
&amp;nbsp; 指的是空格。圆角状态下的空格也可以在网页中表现出来。<br />
Tab指缩进<br />
title放上去的时候会显示

<dl>
<dt>苹果</dt>
<dd>苹果是一种水果</dd>
<dt>香蕉</dt>
<dd>香蕉也是一种水果</dd>
</dl>
&lt;dl/&gt; &lt;/dl/&gt; 是指定义<br />

<table border="1" cellpadding="10" cellspacing="10">
<tr><th>姓名</th><th>性别</th><th>学科</th></tr>
<tr><td colspan="2">李培能</td><td>男</td><td>语文</td></tr>
<tr><td rowspan="2">胡习平</td><td>男</td><td>语文</td></tr>
<tr><td>王小康</td><td>男</td><td>语文</td></tr>
<tr><td>戴晓</td><td>男</td><td>语文</td></tr>
</table>
<p>表格由table标签创建，tr标签创建行，td(colspan可以横跨几列,
rowspan可以横跨几行)或th(使第一行粗一点)创建列;
border标签表示表格边框的宽度,cellpadding标签表示字和框线的距离,
cellspacing标签表示每个单元格的间距</p>

<h1>会员注册</h1>
<form action="http://www.baidu.com" target="_blank" name="form1">
姓名:<input type="text" value="李培能" disabled="disabled" /><br />
密码:<input type="password" /><br />
头像:<input type="file" /><br />
<input type="hidden" /><br />
<input type="button" value="点我" /><br />
性别:<input type="radio" id="boy1" name="sex1" checked="checked" />
<label for="boy1">男</label>&nbsp;&nbsp;
<input type="radio" id="girl1" name="sex1" />
<label for="girl1">女</label><br />
爱好:<input type="checkbox" checked="checked" />读书
<input type="checkbox" />上网
<input type="checkbox" />旅游<br />
自我介绍：<textarea cols="20" rows="3">默认填写</textarea><br />
<select name="city">
<optgroup label="中国">
<option value="武汉">武汉</option>
<option value="天门">天门</option>
<option value="深圳">深圳</option>
</optgroup>
</select>
<input type="submit" value="确认提交" />
<input type="reset" /><br />
</form>
<p>form表示表单；input标签定义表单的输入界面，通过type属性来展示不同
的输入界面，通过value来改变默认值，file可以用来上传头像,hidden表示隐
藏,button表示普通按钮，radio表示单选(但是要加name来关联)，checkbox用
来表示多选（爱好）,submit表示提交，rest表示重置;
action表示表单要提交到哪里,method表示提交方式（post和get）;
checked=“checked”表示单选或复选的默认选择,disabled="disabled"表示默认
选择无法改变，readonly=“readonly”表示只读，size表示框的长度,textarea
是双标签，表示多行输入(cols表示长度,rows表示行数)；
label用来提升用户体验，使勾选更容易(需要id和for配合使用)；
select用来创建下拉栏{用option【用disabled(不能选)，selected="selected"
（默认）,value】来配合，还有disabled，name，multiple="multiple"（展开）};
optgroup用来表示组合（用label来配合），给选项进行分组
</p>

<img src="从前有座灵剑山/灵剑山扉页08.jpg" usemap="#img1" />
<map id="img1" name="img1">
<area shape="rect" coords="440,161,570,300" href="http://ac.qq.com/Comic/ComicInfo/id/524356" target="_blank" title="从前有座灵剑山" alt="从前有座灵剑山" />
</map>
<br />
<!-- rect为矩形 circle为圆形(其坐标变现为440,161,30（半径）) 用来表示图形的一部分的超链接，坐标是相对于
图片的左上角而言，且都为正数，通过截图框来得出坐标。alt是解释。 -->

相对路径，指的就是图片的名字
./等于当前目录 ../等于上一级目录 文件夹名称/等于当前目录内的文件夹
<a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"> <img src="174330602201403241309561585826451753_014.jpg" width="50%" /> </a>
<!-- 这是用来表示图片超链接 -->
<a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"> 百度贴吧 </a>
<a href="http://tieba.baidu.com/i/164490219?fr=home" title="我的贴吧" target="_blank"><input type="button" value="点我" /></a>

<div>换行</div>
<!-- div快级元素，可以用来存放标签 -->
<span>不换行</span>
<p>我是一<span>句话</span></p>
<!-- span内联元素，以便通过css来美化它们 -->
<ul>
<li>
网友A：我喜欢小说。
<ul>
<li>
网友B：我喜欢漫画。
<ul>
<li>
网友A：小说更好看。
</li>
</ul>
</li>
</ul>
</li>
<li>列表</li>
</ul>
<ol>
<li>列表</li>
<li>列表</li>
</ol>
<marquee direction="down">向下卷动</marquee>
<!-- 我是被注释的内容，不会显示 -->
<div>ANSI格式对应的charset=“gb2312”</div>

<h1>标签写法以及嵌套的探讨</h1>
1、不容许写结束标签的元素有（单标签）：area,bass,br,col,command,embed,hr,img,
input,keygen,link,meta,paran,source,track,wbr.<br />
　&nbsp;可以省略结束标签的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup,
thead,tbody,tfoot,tr,td,th.<br />
　&nbsp;可以省略全部标签的元素有：html,head,body,colgroup,tbody.<br />
2、具有boolean值(是/否)的属性：disabled，readonly，checked.
这些元素写的话就是true，不写的话就是false<br />
属性值的引号可以省略，但属性值不可以包括空字符串，<，>,=,+<br />
3、块级元素可以嵌套内联元素，比如：<div><span>；<br />
但内联元素不可以嵌套块级元素，span不可以在div的前面；<br />
内联元素可以嵌套内联元素，比如：<a href="#"><span></span></a>；<br />
块级元素不能放在p标签内，比如：<p><ul><li></li></ul></p>是错的，
<p><div></div></p>也是错的；<br />
li内可以包含div标签和ul、ol标签；<br />
块级元素和内联元素是可以相互转化的。
<div><p></p></div>是对的。

<h1>其他标签</h1>
head中合法的标签有：bass,link,meta,title,style,script.
1、为html页面添加描述信息用于搜索引擎抓取
使用name属性，配合content来实现！（放在head中，title的下面）
<meta name="keywords" content="关键字" />
<meta name="description" content="页面描述" />
2、引入css文件
css代码是写在一个单独的文件中的
<link rel="stylesheet" href="文件位置" type="text/css" />
3、为html文档加入使用的语言，在国际化网站中使用
<html lang="zh-CN">
</html>
英文使用en
4、用html来实现网页的跳转
<meta http-equiv="refresh" content="等待秒数;URL=跳转 URL地址" />
5、告诉浏览器不要加载页面的缓存（即获取网站的最新内容）
<meta http-equiv="pragma" content="no-cache" />
6、iframe标签，框架(把一个网页以小框框的形式插入到另一个网页)
创建包含另一个文档的内联框架（即行内框架）【是在body内】。
属性：
frameborder 值：1,0 作用：规定是否显示框架周围的边框
width
scrolling 值:yes,no,auto（自动） 作用：规定是否在iframe中显示滚动条
src 规定在iframe中显示文档的URL,可以是本地的html文件，也可以是远程的html文件
<iframe src="http://www.baidu.com/" width="50%" height="600" frameborder="0">
</iframe>

</body>
</html>

Html5的一些基础知识的更多相关文章

  1. HTML5 Canvas（基础知识）

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  2. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  3. html5小游戏基础知识

    显示一个DIV和隐藏一个DIV 首先,我们要显示一个DIV和隐藏一个DIV需要使用css里面使用: .hide{ display:none;} .show{display:block;} 在需要显示或 ...

  4. HTML5培训入门基础知识了解CSS3 3D属性

    CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS3中的 ...

  5. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  6. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  7. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  8. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  9. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

随机推荐

  1. jQuery 2.0.3 源码分析 Deferred概念

    JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码 ...

  2. PHP新的垃圾回收机制:Zend GC详解

    概述 在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果re ...

  3. jQuery控制tabs打开的数量

  4. 创建 floating IP - 每天5分钟玩转 OpenStack（106）

    先复习一下前面我们讨论的知识. 当租户网络连接到 Neutron router,通常将 router 作为默认网关.当 router 接收到 instance 的数据包,并将其转发到外网时: 1. r ...

  5. android app反编译

    最新在反编译别人的apk,有时候看到别人的app有很炫的效果,就想知道别人是怎么样实现的,顺便自己参考,借鉴一下,下一次如果工作中碰到这个问题就知道怎么实现了.最近恰好放假三天,就研究了一下,一般别人 ...

  6. ios使用jspatch中需要注意的事项

    第一份代码,为了纠正原代码不显示29号的bug,先上代码 require('NSString','MCDatePickType','NSMutableArray','UIButton'); defin ...

  7. C++中的std详解

    以下内容为:本人看C++视频教程-范磊主讲(2.91G)视频学习笔记. 与大家分享下,希望可以帮助大家学习c++! 引例: #include<iostream> int main() { ...

  8. jQuery的$.getJSON方法在IE浏览器下失效的解决方案

    $.getJSON在IE下默认会使用浏览器缓存,所以导致数据不正确或者异常,解决方案就是在使用该方法前关闭缓存,使用完后再重新打开缓存即可. <?php $.ajaxSetup({ cache: ...

  9. 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)

    话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入 ...

  10. ubuntu 解决 “E: Problem with MergeList /var/lib/apt/lists/”错误

    这种错误的意思:无法解析或打开软件包的列表或是状态文件. 出现的原因:无法解析或打开软件包列表多数情况是安装的软件与本身系统有一些冲突之类的问题,或者曾在更新软件源或下载软件的时候意外中断造成的. 解 ...