版本 年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
XHTML 是更严谨更纯净的 HTML 版本。
HTML 5 是下一代的 HTML。
CSS 指层叠样式表（Cascading Style Sheets）。
CSS3 是最新的 CSS 标准。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
<body> 与 </body> 之间的文本是可见的页面内容

图像<img src="w3school.jpg" width="104" height="142" />



没有内容的 HTML 元素被称为空元素。在开始标签中添加斜杠，比如空行 <br />，是关闭空元素的正确方法


属性








属性总是以名称/值对的形式出现，比如：name="value"。




<h1 align="center"> 


<body bgcolor="yellow"> 


<table border="1"> 关于表格边框的附加信息。










属性值应该始终被包括在引号内。双引号是最常用的。


在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：


name='Bill "HelloWorld" Gates'




适用于大多数 HTML 元素的属性：








class
classname
规定元素的类名




id
id
规定元素的唯一 id




style
style_definition
规定元素的行内样式（inline style）




title
text
规定元素的额外信息（可在工具提示中显示）












浏览器会自动地在标题的前后添加空行。


默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。






创建水平线<hr /> 标签




当显示页面时，浏览器会移除源代码中多余的空格和空行。可以用&nbsp;








样式 style 属性


改变所有 HTML 元素


也可以在css中定义






应该避免使用下面这些标签和属性：






标签
描述




<center>
定义居中的内容。




<font> 和 <basefont>
定义 HTML 字体。




<s> 和 <strike>
定义删除线文本




<u>
定义下划线文本




属性
描述




align
定义文本的对齐方式




bgcolor
定义背景颜色




color
定义文本颜色






对于以上这些标签和属性：请使用样式代替！






<p style="font-family:verdana;color:red">




<p style="font-size:30px">This text is 30 pixels high</p>








<body style="background-color:yellow">


<h1 style="text-align:center">This is a heading</h1>








sup，可实现上标字








<pre>
保留空格和换行，常用于显示代码










所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。


三种方式来插入样式表




1.外部样式表：






<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>


2，<style> 标签定义内部样式表。








关于链接




target="_blank"新窗口打开


请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。




命名的a标签，经常用于在大型文档开始位置上创建目录




表格
行由 <tr> 标签， 每行被分割为若干单元格（由 <td> 标签定义）




表头<th> 标签


<tr> <th>Heading</th> <th>Another Heading</th> </tr>




块div将 HTML 元素组合起来。




通常会以新行来开始（和结束）。是可用于组合其他 HTML 元素的容器。没有特定的含义




另一个常见的用途是文档布局






对 HTML 进行分类，使我们能够为元素的类定义 CSS 样式。






<style>


.cities {


    background-color:black;   


}    


</style>










<div class="cities">






</div> 




或




<style>


span.red {


    color:red;


}


</style>










<span class="red">重要</span>










布局div






<style> #header {     background-color:black;     color:white;     text-align:center;     padding:5px; } #nav {     line-height:30px;     background-color:#eeeeee;     height:300px;     width:100px;     float:left;     padding:5px;  } #section {     width:350px;     float:left;     padding:10px;  } #footer {     background-color:black;     color:white;     clear:both;     text-align:center;     padding:5px;  } </style>




或使用html5的元素，比如header，nav，footer








响应式 Web 设计


可变尺寸,平板和移动设备是必需的




使用现成的 CSS 框架Bootstrap 。








框架子窗口


可以在同一个浏览器窗口中显示不止一个页面。














<frameset cols="25%,50%,25%">


  <frame src="/example/html/frame_a.html">


  <frame src="/example/html/frame_b.html">


  <frame src="/example/html/frame_c.html">




<noframes>


<body>您的浏览器无法处理框架！</body>


</noframes>




</frameset>




iframe 用于在网页内显示网页。




<iframe src="URL"></iframe>


使用 iframe 作为链接的目标，链接的 target 属性必须引用 iframe 的 name 属性：


<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>


脚本


script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。




JavaScript 最常用于图片操作、表单验证以及内容动态更新。




头部


<head> 元素是所有头部元素的容器


以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。






<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：


<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>


meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间






一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。


下面的 meta 元素定义页面的描述：


<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />


下面的 meta 元素定义页面的关键词：


<meta name="keywords" content="HTML, CSS, XML" />








有些字符是不能用的，不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。




如果希望正确地显示，必须用&lt;










<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。


如




<!DOCTYPE html>是html5声明


表单


<input> 元素是最重要的表单元素。


<input type="text"> 定义用于文本输入


<input type="radio"> 定义单选按钮。




<input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female


<input type="checkbox"> 定义复选框。


<input type="password"> 定义密码字段：




value规定默认值。






提交按钮

<input type="submit">




每个输入字段必须设置一个 name 属性。才会提交








<select> 元素（下拉列表）


按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>




<input type="button" onclick="alert('Hello World!')" value="Click Me!">






<input type="range" name="points" min="0" max="10">显示为滑块控件












HTML5 增加了如下表单元素：


  • <datalist>
    • 

  • <keygen>
    • 

  • <output>








HTML5 增加了多个新的输入类型：


  • color
    • 

  • date
    • 

  • datetime
    • 

  • datetime-local
    • 

  • email
    • 

  • month
    • 

  • number
    • 

  • range
    • 

  • search
    • 

  • tel
    • 

  • time
    • 

  • url
    • 

  • week






 <input type="email" name="email">


 <input type="url" name="homepage">






输入限制




maxlength最大字符数，但不会提供任何反馈


pattern通过其检查输入值的正则表达式


required必需填写












HTML5 为 <input> 增加了如下属性：


  • autocomplete
    • 

  • autofocus
    • 

  • form
    • 

  • formaction
    • 

  • formenctype
    • 

  • formmethod
    • 

  • formnovalidate
    • 

  • formtarget
    • 

  • height 和 width
    • 

  • list
    • 

  • min 和 max
    • 

  • multiple
    • 

  • pattern (regexp)
    • 

  • placeholder
    • 

  • required
    • 

  • step


并为 <form> 增加如需属性：


  • autocomplete
    • 

  • novalidate


												


											
每天学习30分钟新知识之html教程1的更多相关文章
	

    
								
  1. 30分钟精通React今年最劲爆的新特性——React Hooks
		
    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
    
		
    2. 
						
  2. 【原创】JDK 9-17新功能30分钟详解-语法篇-var
		
    JDK 9-17新功能30分钟详解-语法篇-var 介绍 JDK 10 JDK 10新增了新的关键字--var,官方文档说作用是: Enhance the Java Language to exten ...
    
		
    3. 
						
  3. 学习笔记之Linux Shell脚本教程：30分钟玩转Shell脚本编程
		
    Linux Shell脚本教程:30分钟玩转Shell脚本编程 http://c.biancheng.net/cpp/shell/
    
		
    4. 
						
  4. 30分钟学会如何使用Shiro
		
    本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...
    
		
    5. 
						
  5. HTML 30分钟入门教程
		
    作者:deerchao 转载请注明来源 本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hy ...
    
		
    6. 
						
  6. 30分钟groovy快速入门并掌握(ubuntu 14.04+IntelliJ 13)
		
    本文适合于不熟悉 Groovy,但想快速轻松地了解其基础知识的 Java开发人员.了解 Groovy 对 Java 语法的简化变形,学习 Groovy 的核心功能,例如本地集合.内置正则表达式和闭包. ...
    
		
    7. 
						
  7. es6属性基础教学，30分钟包会
		
    ES6基础智商划重点在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译.ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高 ...
    
		
    8. 
						
  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉
		
    前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自 ...
    
		
    9. 
						
  9. 【微信小程序项目实践总结】30分钟从陌生到熟悉  web app 、native app、hybrid app比较  30分钟ES6从陌生到熟悉  【原创】浅谈内存泄露  HTML5 五子棋 - JS/Canvas 游戏  meta 详解，html5 meta 标签日常设置  C#中回滚TransactionScope的使用方法和原理
		
    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [POI2014]Around the world
			
    题目大意: 一个环上有$n(n\le10^6)$个点,每个点之间的距离为$l_i(l_i\le10^9)$.有$m(m\le100)$架飞机,每架飞机单次最大航行距离为$d_i$.飞机只能在点上起飞. ...
    
			
    2. 
						
  2. 转：[Asp.net]常见数据导入Excel，Excel数据导入数据库解决方案，总有一款适合你！
			
    引言 项目中常用到将数据导入Excel,将Excel中的数据导入数据库的功能,曾经也查找过相关的内容,将曾经用过的方案总结一下. 方案一 NPOI NPOI 是 POI 项目的 .NET 版本.POI ...
    
			
    3. 
						
  3. Android使用FFMpeg实现推送视频直播流到服务器
			
    背景 在过去的2015年中,视频直播页的新宠无疑是户外直播.随着4G网络的普及和覆盖率的提升,主播可以在户外通过手机进行直播.而观众也愿意为这种可以足不出户而观天下事的服务买单.基于这样的背景,本文主 ...
    
			
    4. 
						
  4. Glide使用详解（一）
			
    一. 下载 在build.gradle中添加依赖: compile 'com.github.bumptech.glide:glide:3.7.0' 需要support-v4库的支持,如果你的项目没有s ...
    
			
    5. 
						
  5. ubuntu16 安装cron 以及使用
			
    https://www.cnblogs.com/intval/p/5763929.html sudo apt-get install cron 启动cron sudo service cron sta ...
    
			
    6. 
						
  6. 【Spark】SparkContext源代码解读
			
    SparkContext的初始化 SparkContext是应用启动时创建的Spark上下文对象,是进行Spark应用开发的主要接口,是Spark上层应用与底层实现的中转站(SparkContext负 ...
    
			
    7. 
						
  7. IP分类：A,B,C,D,E五类
			
    IP地址分为五类: IP地址分为五类:A类保留给政府机构,B类分配给中等规模的公司,C类分配给任何需要的人,D类用于组播,E类用于实验. 常用的三类IP地址 IP = 网路地址(网络号)+主机地址(主 ...
    
			
    8. 
						
  8. GPU hang
			
    最近做新项目 初期一直遇到个gpu hang的问题 就是command 提交过去gpu 就一直在那里 直到time out 也没什么别的错误提示 gpu debugger还抓不了 解决方案是 缩小之后 ...
    
			
    9. 
						
  9. 【转载】深入理解JVM性能调优
			
    性能问题无非就这么几种:CPU.内存.磁盘IO.网络.那我们来逐一介绍以下相关的现象和一些可能出现的问题. 一.CPU过高. 查看CPU最简单的我们使用任务管理器查看,如下图所示,windows下使用 ...
    
			
    10. 
						
  10. Linux Oracle数据库的安装
			
    // 注释 # root用户 $oracle用户 1. 关闭安全措施    # chkconfig iptables off // 永久关闭防火墙 # serviceiptables stop //  ...
    
			
    11.