<!-- 网页基本结构 -->
<!-- 声明：告诉浏览器，当前写的代码是属于html5版本的代码 -->
<!DOCTYPE html> <!--doc-->
<!--document--> 把整个浏览器当做一个文档
<html> <!-- html代码开始标签 -->
<head>
<meta charset="utf-8" /> <!--设置中文字符集，防止乱码-->
<title>页面标签</title>
</head>
<body>
文字
<img></img>
</body>
</html>
浏览器类型
IE内核
chorme内核
firefox
双核（IE和Chorme内核）
html,css，js
html 负责结构 毛坯房
css 负责美 精装修
js 负责动（互动） 智能家具
html 超文本
一种描述性的标记语言（所记既所得）
htm或html作为后缀 用dreamweaver,HBuilder,记事本打开
标记是用来描述网页内容的特定符号
学HTML就是学习各种标签
html和浏览器有容错性，写错了也会显示，但是还是要跟标准走。
HBuilder操作
新建文件目录->点击项目，右键新建
快捷键
保存 ctrl + s
剪切 ctrl + x
整行删除 ctrl + d
代码联想 alt + /
代码整理 ctl + shift + f
冲突-> 输入法 -> 属性 -> 快捷键 -> 修改
在浏览器内运行 ctl + r 在HBuilder上的服务器运行
标签
普通标签
中间文字称之为内容
标题标签
<h?> -> ?:1-6 没有h7标签，大于6的标签和普通文字一样
有大小之分（由大到小）
加粗效果
独占一行（块元素）
段落标签
特点：
- 独占一行，有段间距
- body提供多少宽度
- 段落标签宽度就是多少
缺点：换行需要换行标签实现
<p> </p>
自闭合标签
换行标签
html中没有所谓的回车 ```
```
在html中换行需要
空格也需要一些特殊写法：转义字符 需要的时候百度。
常见的转义字符
空格 &bnsp;
> >
< <
" quot;
& &
水平线标签其他文字类标签
水平线标签：<hr>
加粗标签：<strong> </strong> <b> </b>
斜体：<em> </em> <i> </i>
下划线：<u> </u>
删除线：<s> </s>
公式
下标标签：sub
H<sub>2</sub>SO<sub>4</sub>
上标标签：sup
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
练习3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div align="center">
<img src="img/pic.jpg" />
<h2>《登幽州台歌》</h2>
<h3> --陈子昂</h3>
<p>前不见古人，</p>
<p>后不见来者。</p>
<p> 念天地之悠悠，</p>
<p> 独苍然而涕下。</p>
</div>
</body>
</html>
练习4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3>各科小常识</h3>
<hr />
<h4>语文</h4>
<p>asdfoajdasdfjklajsdfljaldfjaofijaiodfjadfkjalf</p>
<hr />
<h4>数学</h4>
<p>勾股定理 直角三角形： a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<hr />
<h4>英语</h4>
<p> No pain, no gain.</p>
<hr />
<h4>化学</h4>
<p>H<sub>2</sub>SO<sub>4</sub></p>
<hr />
<h4>经济</h4>
<p>版权符号：©</p>
<p>注册商标：®</p>
</body>
</html>
属性
标签和属性大小写不敏感
属性为html提供附加信息
行内元素（标签）
可以和其他行内元素及文字共享一行
br img sub sup b i ...
块元素（标签）
独占一行
h1-h6 p hr div...
普通标签
<xxx>内容</xxx>
自闭合标签
<yyy/>
超链接
普通，行内标签
1. 站内链接（自己写的工程里面的）
2. 站外链接（别人写的工程里面的）
<a href="http://www.baidu.com">百度一下</a>
自身打开，同默认一样
<a href="http://www.baidu.com" target="_self">百度一下</a>
在新的页面打开
<a href="http://www.baidu.com" target="_blank">百度一下</a>
锚标签
找到本页面中的某个标签，让他显示在页面的最上面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3>各科小常识</h3>
<a href="#yw">语文</a>
<a href="#hx">数学 </a>
<a href="#yy">英语</a>
<a href="#hx">化学</a>
<a href="#jj">经济</a>
<hr />
<h4 id="yw">语文</h4>
<p>asdfoajdasdfjklajsdfljaldfjaofijaiodfjadfkjalf</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<h4 id="sx">数学</h4>
<p>勾股定理 直角三角形： a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<h4 id="yy">英语</h4>
<p> No pain, no gain.</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<h4 id="hx">化学</h4>
<p>H<sub>2</sub>SO<sub>4</sub></p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<h4 id="jj">经济</h4>
<p>版权符号：©</p>
<p>注册商标：®</p>
</body>
</html>
列表
属性值有区别大小写
3种
1. 有序列表
<ol type="">
<li></li>
<ol>
2. 无序列表 --> 目录
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
3. 自定义列表（少用）
<dl>
<dt></dt>
<dd></dd>
<dl>
除了a标签以外，不建议行内元素包着块元素
建议块元素包着行外元素
<ol>
<li><a href="#">111</a></li>
<ul type="disc">
<li>aaa</li>
<li>bbb</li>
</ul>
</li>
</ol>
练习5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ol>
<li><a href="#">Windows Me</a>
<li><a href="#">Windows 2003</a></li>
<ul type="disc">
<li>Windows Server 2003 Web</li>
<li>Windows Server 2003 Standard</li>
<li>Windows Server 2003 Enterprise</li>
<li>Windows Server 2003 Datacenter</li>
</ul>
</li>
</ol>
</body>
</html>
练习6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<ul>
<li>aaa</li>
<li>bbb</li>
<ul>
<li>AAA</li>
<li>BBB</li>
</ul>
</ul>
<li>333</li>
</ul>
</body>
</html>
表格
<table border="1px"> <!--表格标签 -->
<tr> <!-- 表格中的行标签 -->
<th rowspan="3">京<br/>东</th>
<th> </th> <!- 表头：居中，加粗 -->
<th> </th>
</tr>
<tr> <!-- 表格中的行标签 -->
<td> </td> <!- 表格中的单元格 -->
<td> </td>
</tr>
<tr> <!-- 表格中的行标签 -->
<td colspan="2"> </td> <!- 跨行跨列 -->
</tr>
</table>
表格填充和间距
border：边框的厚度
只可以在table设置
cellpadding:内间距，单元格填充
cellspacing:外边距，单元格间距
bgcolor:背景颜色
bordercolor:边框颜色
对齐方式
align 水平对齐方式 默认左对齐
valign 垂直对齐方式 默认居中对齐
宽度
在单元格中设置
一列中加一个就可以了，heigth类似
width