HTML入门
一些说明
写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法
这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识
我把HTML标签分成两大类，重要的和不重要的，希望大家都能从众多标签中解脱出来！！
本文的宗旨，简明扼要！最快入门 HTML (把我给出的代码不断地敲，并且适当加点个性化的东西，HTML标记语言你就入门了)
HTML，超文本标记语言（HyperText Markup Language）只是标记，没有任何逻辑，学习起来会很快的
结构如下：
这里写了可以出现在head内的所有标签
<!DOCTYPE html> //HTML5的文档声明，现在都用这种方式了
<html> //文档的根
<head> //文档的头部信息
<meta charset="utf-8"> //表示该文档是以UTF-8编码的
<title>菜鸟教程(runoob.com)</title> //页面标题
//为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
//定义网页作者:
<meta name="author" content="Hege Refsnes">
//每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
<style>a{CSS样式}</style>
<link rel="stylesheet" type="text/css" href="xxx.css">
<script>脚本</script>
<script type="text/javascript" src="xxxx.js"></script>
<noscript></noscript>
//该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body> //网页主题部分
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
关于文档声明：(了解即可，没什么作用)
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tips:注释长啥样？<!-- html content-->
直击主题：HTML标签
来，我们来看看HTML的标签都有哪些
h1 ~ h6 , p , a , img ,audio , button , canvas , caption , datalist , dd , dl ,dt, ul ,li , fieldset , from , iframe , input , label , select , table
重点掌握的标签有（一些特别基础性的标签不在此之内）
超链接标签a：只要是a标签能包含啥，那个被包含的都是超链接
a的常用方法如下：
1、<a href = "http://xxxx.xxx" target="_blank">
2、电子邮件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
3、取消链接 <a href="javascript:void(0)">
4、锚点 <a href="#tips">可以链接到本页面id为tips的元素，用于页面内跳转
<a href="javascript:void(0)">hello</a>
图像标签img:
img[src,title,alt,width,height]
<img src="xxxx.png" width=300 height=200 title="pic" alt="person">
alt : 当图片无法加载时替代图片，一般都要写的
1、图片一个特殊用处(结合map,基本不用)
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
表格
一般我们写表格的时候，table>tr>td(th)，采用这三层结构
一个完整的表格结构是这样的
<table>
<caption></caption>
<thead>
<tr>
<th></th>
.....
</tr>
</thead>
<tbody>
<tr>
<td></td>
......
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
......
</tr>
</tfoot>
</table>
属性注意
<table border=0> //设置整个table的边框，外框和内框
<table cellpadding="10"> //相当于设置这个表格每个单元格的 padding 为 10px
<table cellspacing="10"> //相当于设置这个表格每个单元格的 margin 为 10px
<th colspan="2"> // 这个单元格跨了两列 tr也可以用
<th rowspan="2"> //这个单元格跨了两行 tr也可以用
列表
有序列表
<ol>
<li></li>
<li></li>
...
</ol>
无序列表
<ul>
<li></li>
<li></li>
...
</ul>
无序列表和有序列表，可以更改前面的标记类型，但是不常用，采用图片或者iconfont居多，可以采用list-style-image：url("xxx.png) ；来设置，这个在CSS学习笔记中会详细说明
列表支持嵌套
自定义列表
dl 注意一个dl里面最好只有一个dt，行业潜规则 原意是解释名词，
dt 一般一条信息，只解释一个名词,也就是一个dt
dd
dd
dd
dl
div -- 最具有代表性的块级标签
通常用于布局，很常见的div+css布局，为什么采用div呢？因为div是一个容器元素，div内部可以包含很多标签，
div内部可以有div的
div是块级标签，注意，任何块级标签写在页面上，宽度都是占据父容器的百分之百，除非你设置块级元素的宽度
span -- 最具有代表性的行级标签
span是一个行级标签，所谓行级标签的意思是，内容有多大，我在页面中占据的位置就有多大（内容+padding）
input --表单
表单的属性特别多，可以去W3C看一遍，这里就不详细讲了，毕竟是写个入门啦。表单主要用作数据传递，所以对表单的理解，就是要搞明白，表单的那些属性是怎么回事
一个表单完整书写
<form action="url" method="post/get" >
//文本框
<input name="username" type="text" />
//密码框
<input name="password" type="password" />
//单选框（注意name要相同,是同一类行的选择，以便后台拿到数据）
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
//多选框（注意name要相同,是同一类行的选择，以便后台拿到数据）
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
//下拉框
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
//这种是为下拉框分组
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
//文本域
<textarea name="textarea" rows="10" cols="30">
我是一个文本框。
</textarea>
//提交按钮，下面的提交按钮，默认提交到action地址
<input type="submit" value="Submit">
<button>submit</button>
//这是另外一种形式的表单，注意其中的区别即可，
//fieldset标签也只会在这种场合使用了
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
//datalist标签，input的list属性绑定到datalist的id，就可以完成这项工作了
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
//注意label标签 , 通过绑定input的id来实现在label出点击获取焦点，有两种写法
<label for="name">用户名</label>
<input id="naem" type="text" size="30">
<label>Hello<input type="text" size="30"></label>
</form>
实例如下：
用户名 Hello
注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。
output标签，顾名思义，输出标签，那么从何处输入，定义规则是怎么样的呢？
form定义规则 ，那么你可不可以写一个升级版的呢？
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 //数据源
+<input type="number" id="b" value="50"> //数据源
=<output name="x" for="a b"></output> //计算出结果
</form>
iframe --一般重要的标签
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
iframe显示的地址页面内容，制定高度和宽度，frameborder移除边框
用iframe来显示页面内部链接
<iframe src="www.baidu.com" name="iframe_a"></iframe>
<p><a href="http://www.google.com" target="iframe_a">Google</a></p>
全局属性
这些属性，基本上不怎么使用，了解即可。
accesskey 规定激活元素的快捷键。
一下元素支持accesskey属性
<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a>
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
空元素标签
br , hr
HTML5标签
不重要的标签
b（定义文本粗体） , i（定义文本斜体） , strong , em , big ,small , sub , sup , ins , del , pre , code , kbd , tt , samp , var , address(定义文档作者或拥有者的联系信息) , abbr(定义缩写) , acronym（定义只取首字母的缩写，不支持HTML5） , bdo , blockquote , q , cite , dfn , colgroup , col , center, font , dir(与ul差不多，兼容性不如ul) , frame/frameset(这两个标签已经没人用了，主要是用了这个标签，交互就做不了)
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<b>注释：</b>这些标签常用于显示计算机/编程代码。
<acronym title="World Wide Web">WWW</acronym>
<bdo dir="rtl">该段落文字从右到左显示。</bdo>
标签嵌套规则
a标签不能嵌套a标签，p标签不能嵌套块级标签
HTML入门的更多相关文章
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- Centos5.5系统备份
使用root用户切换到根目录 然后,使用下面的命令备份完整的系统: tar cvpzf backup.tgz / --exclude=/proc --exclude=/lost+found --exc ...
- 使用YUIDoc生成JS文档
其实YUIDoc主页已经写的比较清晰了,但有一些概念和细节再点出一些注意的地方. 目前最新的YUIDoc使用nodejs进行开发安装和使用都非常的方便. 我们只需要将我们的代码加上必要的注释,便可以很 ...
- Zepto.js-Ajax 请求
Ajax 请求 执行Ajax请求.它可以是本地资源,或者通过支持HTTP access control的浏览器 或者通过 JSONP来实现跨域. 引入Ajax模块 <script src=&qu ...
- C# is 运算符
is 运算符并不是说明对象是某种类型的一种方式,而是可以检查对象是否是给定的类型,或者是否可以转换为给定的类型,如果是,这个运算符就返回true.is 运算符的语法如下: <operand> ...
- 处理div 在IE6 IE7 IE8 下不居中的问题
具体处理方式如下:1 .html 顶部加入:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js记录重复字母的个数
var str = "hello"; var obj = {}; for (var i = 0; i < str.length; i++) { var v = str.cha ...
- SQL Server如何固定执行计划
SQL Server 其实从SQL Server 2005开始,也提供了类似ORACLE中固定执行计划的功能,只是好像很少人使用这个功能.当然在SQL Server中不叫"固定执行计划&qu ...
- loadrunner：web services接口测试
本文以实例讲解web services接口测试操作,内容包括:脚本生成.参数化和接口与接口间的取值关联操作. 网站"http://www.webxml.com.cn/zh_cn/web_se ...
- web前端性能调优（二）
项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...
- saiku的源码包Bulid常见问题和jar包
最近在做kylin+mondrian+saiku的二次开发的时候,Bulid saiku的源码出现了很多问题,基本上一大部分问题jar找不到问题,很多jar国内网站都找不到.这时候只有手动下载然后注册 ...