新手学H5——第一周
作为一个新手，要从头学习Html编程语言，需要从最基础的开始。我所使用的编程软件是Hbuilder。
1.Html文档结构
包括head和body两部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html> 注意开头必须有文档类型强调！
2.Html标签
标签是Html最基本的单位和最重要的组成。
使用<>括起来。
所有的Html标签必须是闭合标签。可以是成对的，比如<title> </title>；也可以是自闭合标签，比如：<img />; 也就是说/表示这一个或者一对标签的闭合。
3.Html标签属性
是标签的一部分，用于包含额外的信息
可以有多个属性。
以下为head中常用的标签及作用。<!-- -->中内容为注释。
<!DOCTYPE html>
<!--
文档声明：必须有，而且必须在文档页面的第一行。
Html5已经简化为以上样式
-->
<html>
<head>
<!--Head标签内的信息用于描述网页的基本信息，即元数据-->
<title>我的世界</title>
<!--网页的标题，即网页选项卡上的文字-->
<link rel="icon"href="img/111.png" />
<!--使用link标签连接网页图标
rel:声明连接文件的类型
type属性可省略
href属性：表示图片的路径地址
-->
<meta charset="UTF-8">
<meta name="keywords"content="你好,H5,高大上" />
<!--网页关键字，用半角逗号隔开-->
<meta name="description"content="--helloword哈哈哈哈" />
<!--meta标签常用属性
1.charset 设置文档字符集编码格式》》》常见字符集编码格式：utf-8万国码Unicode，GB-2312国标码,gbk扩展的国标码
2.http-equiv将我们的信息写给浏览器看,可选属性值Content-Type refresh set-cokie，配合content属性.(http-equiv属性只是表明需要设置那一部分，具体内容放到content属性中)
3.name属性：使用方法与http-equiv相同，常用属性值keywords author description
将信息写给搜索引擎看
-->
</head>
<body>
</body>
</html> 4.标签分类
块级标签：显示为块状，前后隔一行（自动换行）
行级标签：按行从左往右逐一显示。
5.常见的块级标签
<h1>标题标签</h1>
<h2></h2>
....<h6></h6>
h1最大，h6最小，自动加粗
<p></p>段落标签
<hr />水平线标签
<br/>换行标签
<blockquote cite="http://www.cnblogs.com">横眉冷对千夫指</blockquote>引用标签
cite属性表明引用来源，一般表明引用网址。浏览器显示默认首行缩进。
<pre></pre>预格式标签，浏览器显示样式
1.为等宽字体
2.代码中的换行，空格等元素在浏览器直接显示
6.基于布局的块级标签
有序列表（order list）：<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
无序列表（unorder list）：
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
定义描述列表：
<dl>
<dt>定义列表标题</dt>........标题顶格显示
<dd>描述项第一项</dd>......描述项相对标题进行缩进显示
<dd>描述项第二项</dd>
</dl>
组合标签：用于显示图片及图片标题
有两个子标签：<img/>图片
<figcaption></figcaption>图片的标题
<figure>
<img src="img/000.jpg" />
<figcaption>图片标题</figcaption>
</figure>
分区标签：
<div></div>
7.常见的行级标签
span（文本） <span></span> 无实际意义，用于包裹某部分文字，修改特定样式
em（强调）<em></em> 表示强调，强调的样式为倾斜
strong（强调) <strong></strong>强调样式加粗，强调程度比em高（Html5要求标签尽可能实现语义化）
q（短引用） <q></q> 显示内容加引号
i（倾斜） <i></i>
b（加粗） <b></b>i标签表示倾斜，没有强调效果
small（缩小字体)<small></small> 使显示的字体小一号，可多重嵌套直到字号达到下限
big(放大字体) <big></big> 与small相反
img（图片） <img />
1.src:表示引用图片的地址
（路径地址写法：1.相对路径：以当前文件为准去寻找图片地址
a.与文件同一层直接写图片名
b.图片在文件下一层：文件夹名/图片名
c.图片在文件上一层：../图片名
2.绝对路径：file:///E:/00.jpg 禁止使用
3.网络地址：网络上的图片链接 一般不用
）
2.图片的宽度高度。可用CSS代替
3.title：图片标题，当鼠标指上去显示的文字。
alt:图片无法显示时候显示的文字
a（超链接） <a href="" target=""></a>
示例见下方程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<h1>这是标题标签h1</h1>
<h2>比h1小点</h2>
<h6>标题标签有6种h1最大，h6最小</h6>
<hr />
<!--hr 水平线-->
<p>这是P标签 →空格）©→版权 代表一个段落，<br/>两个P标签，中间隔一行。br（自闭和标签）换行标签</p><br />
<p>这个也是一 个段落，用P标签包裹的</p>
<blockquote cite="http://www.jredu100.com">
这是引用标签
</blockquote>
<pre>这是pre标签。预格式
我被换行了。标签内内容格式原封不动</pre>
helloworld
<!--body 网页主题内容 注释快捷键 ctrl+/-->
<!--有序列表OL-->
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<!--无序列表UL -->
<ul>
<li style="list-style: none;">无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<!--定义描述列表-->
<dl>
<dt>这是DL的标题DT，一个DL一般只有一个</dt>
<dd>这是DL的描述项dd</dd>
<dd>这是DL的描述项dd2</dd>
</dl>
<a name="t"></a>
<!--<img src="img/tour.png" alt-->
*********分割线**************<br />
我真帅
<em>em表示强调，强调的样式为倾斜</em>
<strong>强调样式加粗</strong>
<i>i标签表示倾斜，没有强调效果</i>
<b>b标签表示加粗，没强调效果</b>
<q>表示短引用，自带双引号</q>
<s>表示有误文本删除线</s>
<cite>cite表示引用，浏览器表示为倾斜</cite>
<code>仅仅表示为代码，浏览器等宽显示</code>
<small>small比正常的标签字体小一号，可以多层嵌套，一直小到最小字体</small>
<big>big标签大一号</big>
<img src="img/111.png"title="和尚"alt="这是一张图"/>
<!--img表示图片
src 图片的地址，可以是网络图片，相对路径
title 图片标题
alt 图片不显示时显示的文字
align 设置图片文字对齐方式
-->
<a href="liebiao.html"target="_blank">
<!--
【a标签】
href表示跳转的地址。1 跳转的地址可以是网络连接
2 可以通过相对路径站内其它HTML文件，
相对路径的确定
a,如果在同意文件夹，直接写文件名
b 如果目标文件在当前文件夹下一层，直接写“文件夹名/文件名”
c 如果目标文件在当前文件上一层“../文件名”
target表示页面打开的位置：
1 _self代表自身页面打开
2 _blank新页面打开
title 超链接标题，鼠标指上去显示的提示
-->
</body>
</html>