一、什么是HTML
Hyper Text Markup Language: 超文本标签语言
由标签组成
二、标签
单标签:<标签名> 或 <标签名 />
双标签:<标签名></标签名>
1.<meta>标签
- 描述文档类型和字符编码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
- 描述搜索关键字和描述
<head>
<meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
<meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、……" />
</head>
2.块级标签:
显示为“块”状,前后隔一行
- 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 段落标签
<p></p>
- 水平线标签
<hr />
- 有序列表标签
<ol>
<li>列表项1</li>
… …
</ol>
- 无序列表标签
<ul>
<li>列表项1</li>
……
</ul>
- 标题列表标签
<dl>
<dt>标题</dt>
<dd>描述1</dd>
</dl>
- 表格标签
<table> --表格
<tr> --一行
<td>百度</td> --一列(单元格)
<td>新浪</td>
</tr> …… </dl>
- 表单标签
<form>--一般和 table使用
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
.....
</table>
</form>
- 分区标签
<div></div>
常用4种块状结构:
1、div-ul(ol)-li :常用于分类导航或菜单等
2、div-dl-dt-dd :常用于图文混编的场合
3、table-tr-td :常用于图文布局或显示数据
4、form-table-tr-td:常用于布局表单
3.行级标签:
按行逐一显示
- 图像标签
<img />
- span 标签
显示某行内的独特样式 ,前后自动换行 <p></p>
eg. <p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>
- 换行标签
<br />
标签里面可以有属性,属性一定在标签里!!
4.其他
- 浮动标签
<marquee></marquee>
使图片动起来
- 超链接
<a></a>
属性: href = "路径"
- 空格
 
三、基本规范
- 标签名和属性名称必须小写
- HTML标签必须关闭
- 属性值必须用引号括起来
- 标签必须正确嵌套
- 必须添加文档类型声明
- 声明必须位于文档的最前面
- 三种级别:Strict(严格类型) 、Trasitional(过度类型)、 Frameset(框架类型)
四、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 标签页 命名 -->
<title>one (^-^)V</title>
</head>
<!-- 标签页 内容 -->
<body style="background-image: url(../img/张万森.jpeg);"><!-- 设置 背景-->
<!-- 浮动 标签 -->
<marquee>
<!-- 插入 图片 -->
<img src = "../img/a.gif"/>
</marquee>
<hr /><!-- 水平线 -->
嗨嗨嗨,<br />这是超文本编辑语言!<!-- 换行 -->
<br />
<hr />
<!-- h1~h6 标题标签 -->
欢迎来到标题标签,总共只有六个诶,不要超出咯~
<h1> 一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<hr />
<!-- 无序列表 -->
这是 无序列表
<ul>
<li> 默认无序符号,小黑点</li>
</ul>
<ul type="circle">
<li> 无序符号之 小圆圈,空心圈(circle)</li>
</ul>
<ul type="disc">
<li> 无序符合之 小黑点(disc)</li>
</ul>
<ul type = "square">
<li> 无序符号之 小矩形(square)</li>
</ul>
<hr />
<!-- 有序列表 -->
这是有序列表
<ol type="1">阿拉伯数字
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol type="A">大写英文字母
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<ol = type="I">大写罗马数字
<li>I</li>
<li>II</li>
<li>III</li>
</ol>
<ol type="a">小写英文字母
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol type="i">小写罗马数字
<li>i</li>
<li>ii</li>
<li>iii</li>
</ol>
<hr />
<!-- 标题列表 -->
这是标题列表
<dl>
<dt>标题吖</dt><!-- 标题 -->
<dd><!-- 标题内容 -->
刘畊宏女孩<br />
王心凌男孩
</dd>
</dl>
<hr />
<!-- 超链接 -->
<h3>
<a href="one_tiao.html">hh</a>
</h3>
<hr />
接下来,请允许我再展示一首《咏鹅》
<h2>咏鹅</h2>
<!-- 空格 --><h4> 骆宾王</h4>
<!-- --><p>鹅鹅鹅,</p>
<p>曲项向天歌。</p>
<p>白毛浮绿水,</p>
<p> 红掌拨清波。</p>
</body>
</html>