版本	年份
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"。

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

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

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

name='Bill "HelloWorld" Gates'

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

class	classname	规定元素的类名
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

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

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

创建水平线<hr /> 标签

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

样式 style 属性

改变所有 HTML 元素

也可以在css中定义

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

标签	描述
<center>	定义居中的内容。
<font> 和 <basefont>	定义 HTML 字体。
<s> 和 <strike>	定义删除线文本
<u>	定义下划线文本
属性	描述
~~align~~	定义文本的对齐方式
~~bgcolor~~	定义背景颜色
~~color~~	定义文本颜色

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

<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>

或

<style>

span.red {

color:red;

}

</style>

布局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 。

框架子窗口

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

<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" />

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

如果希望正确地显示，必须用<

<!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的更多相关文章

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

随机推荐

ORACLE查询当前连接的用户信息及操作的SQL语句
ORACLE--查询当前连接的用户信息及操作的SQL语句 select sid, status, v$session.username 用户名, last_call ...
EDM邮件群发十大技巧提升邮件群发效果
有很多人抱怨现在邮件群发没有什么效果,其实不然,每一种推广方式都有他的优势,没有看到效果说明你没有掌握好方法.个人觉得EDM邮件群发的优势在于传播速度快.不受地域限制.不受时间限制.邮件内容能够多元化 ...
从M个数中随机等可能的取出N个的问题
从0到m-1这m个数中随机取出n个(n<=m) 要求每个数被取到的可能性相等. 第一个方法是把这m个数丢到一个List里面然后用nextInt(list.size())来产生随机数然后把li ...
linux系统清理僵尸进程记录
在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / waitpid)他, 那么他将变成一个僵尸进程. 在fork()/execve()过程中,假设子进程结束时父进程仍存在, ...
批量扫描IP端口程序（适用于window&linux）
批量扫描IP端口,根据扫描IP导出IP命名的文件的结果.假设1.txt文件内容为127.0.0.1192.168.1.1然后我们获取文件内容IP进行扫描window .bat版本 :1.txt为文件名 ...
Laravel5.1之表单验证
一.生成一个验证类 1.生成 artisan make:request TestRequest 2.生成的文件在项目Http下的Requests文件夹下 3.默认生成的文件如下 class TestR ...
PHP奇偶行不同显示不同的背景
有时数据成表格状为了更加美观会将奇偶行显示不同的背景色. 实现代码: <foreach name="list" item="v" key='k'> ...
使用UI Automation实现自动化测试--2
1. 首先建立一个待测试的winform程序,即UI Automation的服务端. 下面是button事件处理程序. private void CalculateButton_Click(objec ...
linux 设置时间
1.图形界面里面点击右上角的 “时间” 2.设置,edit 找到china G8区 date发现还没有生效 3.reboot 重启才生效了
2015级C++第7周项目友元、共享数据保护、多文件结构
[项目1-成员函数.友元函数和一般函数有差别]參考解答 (1)阅读以下的程序,体会凝视中的说明(要执行程序,请找到课程主页并复制代码) //例:使用成员函数.友元函数和一般函数的差别 #include ...

每天学习30分钟新知识之html教程1