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的开发者 ...
随机推荐
- AP聚类算法(转)
Affinity Propagation (AP) 聚类是2007年在Science杂志上提出的一种新的聚类算法.它根据N个数据点之间的相似度进行聚类,这些相似度可以是对称的,即两个数据点互相之间的相 ...
- centos 单独安装nginx
安装包下载网址: http://nginx.org/en/download.html 进入Linux文件夹执行 wget http://nginx.org/download/nginx-1.8.0.t ...
- YII 1.0 设置关联模型
在model中设置如下 /* * 设置关联 */ public function relations(){ return array( 'cate'=>array(self::BELONGS_T ...
- 主成分分析PCA（转载）
主成分分析PCA 降维的必要性 1.多重共线性--预测变量之间相互关联.多重共线性会导致解空间的不稳定,从而可能导致结果的不连贯. 2.高维空间本身具有稀疏性.一维正态分布有68%的值落于正负标准差之 ...
- CNTV视频回看下载地址
这其实不是新方法了,这个方法早在五六年前大家就在用,至今也没失效.但是五六年前那时候这个方法可以下载到过去三个月内CNTV直播过的视频,而现在只能下到一个星期的.之所以要下载回看版本,是因为比栏目版本 ...
- js架构设计模式——前端MVVM框架设计及实现（二）
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- jquery动态加载 去除js
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- MyBatis中的大于、小于、like等符号写法
其实就是xml的特殊符号,因为它的配置就是xml,所以可以用下面这种写法转义 < < > > <> <> & & ' ...
- #DP# ----- OpenJudge数字组合
OpenJudge 2985:数字组合 总时间限制:1000ms 内存限制: 65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3, ...
- 小兔JS教程（五） 简单易懂的JSON入门
上一节的参考答案: http://xiaotublog.com/demo.html?path=homework/04/index2 本节重点来介绍一下JSON,JSON(JavaScript Obje ...