从今天开始学习一些前端的知识，从HTML开始，争取每天都积累一点。
什么是HTML？
HTML(HyperText Markup Language,超文本标记语言)，所谓超文本就是指页面内可以包含图片、链接、甚至音乐等非文字元素，HTML不是一种编程语言，而是一种标记语言，会用到一系列的标签，用来描述网页的语言，HTML的文件的后缀名为(.html)。
HTML结构标准
一个HTML文件的基本结构如下所示：
<!doctype html> ???声明文档的类型,注意!号两边不能有空格<html> ???根标签<head> ???头标签 ???<title> ?</title> ???标题标签</head> ???<body> ???主题标签 ???</body></html>
下面就根据基本结构写一个简单的HTML文件：
<!doctype html><html><head> ???<title>hello</title></head><body>大家好！我是Frank! ???</body></html>
效果图：
HTML标签和关系分类
单标签，只有一个尖括号：
例如：<!doctyoe html> <!-- 注释标签> <img src="" alt"">
双标签，包含两个尖括号的标签，不带斜线的为标签的开始，带斜线的为标签的结束：
例如：<html></html> <head></head> <title></title>
关系分类：
嵌套关系：head标签和title标签就是一种嵌套关系，<head><title></title></head>;并列关系：head标签和body标签之间就是并列关系,<head></head><body></body>。
常用单标签
注释标签
可以使用ctrl+/将一行注释，这样浏览器在读取HTML文件的时候，会忽略被注释的行，如下：
<!-- 大家好！我是Frank! ????-->
换行标签 <br />
<body><!-- 大家好！我是Frank! ????-->大江东去，浪淘尽，千古风流人物。<br /> 故垒西边，人道是：三国周郎赤壁。</body>
效果图：
水平线标签 <hr />
<body>大江东去，浪淘尽，千古风流人物。<br /> 故垒西边，人道是：三国周郎赤壁。<hr /></body>
效果图：
图片标签
<img src="byzx.jpg">
src：图片的来源，可以为相对路径，也可以为绝对路径，建议使用相对路径，在使用相对路径的时候，使用两个点".."跳出当前目录。
alt：替换文本，当图片不显示的时候，就会显示文字。
title：提示文本，鼠标放在图片上会显示的文字。
width：图片的宽度。
height：图片的高度。
<img src="byzx.jpg" alt="白夜追凶" title="白夜追凶剧照" width="300">
效果图：
当指定的路径不正确或者图片被删除的时候,会显示替换文本：
最后注意，当只指定宽度或者高度的时候，同比例放大或者缩小（如果指定的宽度或者高度一样，图片大小不变），如果即指定了高度又指定的宽度且比例与原图片不一样，图片会变形。
超链接
<a href="byzx.jpg" title="白夜追凶" target="_blank">点我啊</a>
href：去往的路径或者是跳转的页面，必填的属性
title：提示文本，鼠标放在超链接上会显示文字
target="_blank"：打开新的页面，不关闭自身的页面，默认target等于"_self"，表示打开新的页面，关闭自身的页面。
效果图：
锚链接
当我们再浏览一个网页的时候，浏览到底部的时候，突然想返回到顶部，就可以使用锚链接来实现了。
1.第一步定义一个锚点 <p id="here">一场灭门惨案，让原本逍遥浪荡的关宏宇成了在逃的通缉嫌犯。身为刑侦支队队长的双胞胎哥哥关宏峰，誓要查出真相，但出于亲属回避的原则，警队禁止关宏峰参与灭门案的调查工作。关宏峰义愤辞职。调任了代支队长的周巡处于破案压力，也为了追寻关宏宇的下落，设计让离职的关宏峰以“编外顾问”的身份继续参与各大重案要案的调查。而警队所有人都被隐瞒了。由于罹患“黑暗恐惧症”，白天和黑夜出现在警队的“顾问关宏峰”，其实是由孪生兄弟二人白夜分饰，性格迥异的兄弟两人在警队中马脚不断，背负着随时被周巡及各路人马发现的危险，一路侦破了各种大案要案，目的只是想伺机调阅灭门案的案卷查出真相，以还清白……</p>.......(略)2.超链接到锚点<a href="#here">回到顶部</a>
效果图：
空链接
当不清楚链接到哪里的时候，可以使用空链。
<a href="#">空链</a>
效果图：
超链接的优化写法：为整个页面指定target的方式，可以在head里面指定：
<base target="_blank">
超链接可以做下载功能，但不是很推荐：
<a href="Python核心编程(第二版).zip">点此下载</a>
效果图：
常用双标签
文本内容标签 <p> </p>
<body> ???<p>今晚的长安街华光溢彩，人民大会堂嘉朋满座，喜气盎然。我们共聚于此，隆重庆祝中华人民共和国成立六十八周年。我代表党中央、国务院，向全国各族人民致以节日祝贺！向港澳同胞、台湾同胞、海外侨胞致以亲切问候！向所有关心和支持中国现代化建设的国际友人表示衷心感谢！</p></body>
p标签指定的段落文本上面会空一行。
标题标签 h1-h6
在一个页面上，h1最好只出现一次。
???<h1>李克强在庆祝建国68周年招待会上致辞</h1> ???<h2>李克强在庆祝建国68周年招待会上致辞</h2> ???<h3>李克强在庆祝建国68周年招待会上致辞</h3> ???<h4>李克强在庆祝建国68周年招待会上致辞</h4> ???<h5>李克强在庆祝建国68周年招待会上致辞</h5> ???<h6>李克强在庆祝建国68周年招待会上致辞</h6>
效果图：
文本标签 <font>文本内容</font>
<font size="6" color="red">李克强在庆祝中华人民共和国成立六十八周年招待会上的致辞</font>
可指定字体大小和字体颜色等。
效果图：
文本加粗标签
<strong></strong>或者<b></b>，建议使用strong。
???<strong>来宾们、朋友们、同志们！</strong> ???<b>来宾们、朋友们、同志们！</b>
效果图：
文本倾斜标签
<em></em> <i></i>，建议使用em。
???<em>来宾们、朋友们、同志们！</em> ???<i>来宾们、朋友们、同志们！</i>
效果图：
删除线标签
<del></del> <s></s> 建议使用del。
???<del>干杯！</del> ???<s>干杯！</s>
效果图：
下划线标签
<ins></ins> <u></u> 建议使用ins。
<ins>六十八年在人类历史上只是短暂一瞬。</ins> ?<u>六十八年在人类历史上只是短暂一瞬。</u>
效果图：
特殊字符
有的时候我们需要显示某些特殊字符，但是这些字符却被HTML语法所使用，比如尖括号，所以可以用以下字符的代码代替：
列表
无序列表
???<ul type="circle"> ???#type指定行前面显示的符号，默认为"disc"实心小圆圈，其他："circle"空心小圆圈，"square"小方块 ???????<li>白夜追凶</li> ?#列表项 ???????<li>无证之罪</li> ???????<li>好医生</li> ???????<li>美国囧案</li> ???</ul>
效果图：
有序列表
???<ol type="a" start="3"> ?#type可以为"1,a,A,i,I"，start指定了开始的位置 ???????<li>白夜追凶</li> ????#列表项 ???????<li>无证之罪</li> ???????<li>好医生</li> ???????<li>美国囧案</li> ???</ol>
效果图：
自定义列表
???<dl> ???????<dt>电视剧排行榜</dt> ???#小标题 ???????<dd>白夜追凶</dd> ????#解释标题 ???????<dd>无证之罪</dd> ???????<dd>好医生</dd> ???????<dd>美国囧案</dd> ???</dl>
效果图：
其他标签
音乐标签
<embed src="一人饮酒醉.mp3"> ?#如果想关闭播放的按钮界面，可以加入hidden="ture",隐藏播放按钮界面。
效果图（此处应有声音~~）：
滚动标签
????<marquee behavior="alternate"> ????????<img src="byzx2.gif" height="200"> ????</marquee>
其他的常用属性：
中间的内容可以是文字，图片等，可以设置高度height，宽度width，设置背景颜色bgcolor。behavior：设置滚动的方式 ???alternate:表示在两端之间来回滚； ???scroll:表示由一端滚动到另一端，会重复 ???slide:表示由一端滚动到另一端，不会重复direction：设置滚动方向 ???down：向下滚动 ???left：向左滚动 ???right：向右滚动 ???up：向上滚动loop：设置滚动次数，-1代表一直滚下去
效果图：
小练习：
实现效果如下：
实现代码：
<!DOCTYPE html><html><head> ???<title>周巡</title></head><body> ???<a href="关宏峰.html">关宏峰</a> ???<a href="周巡.html">周巡</a> ???<a href="周舒桐.html">周舒桐</a> ???<a href="高亚楠.html">高亚楠</a> ???<marquee> ???????<img src="zx.jpg"> ???</marquee></body></html><!-- 其余三个类似 -->
【HTML基础】语法1
原文地址：http://www.cnblogs.com/liubinsh/p/7618334.html