HTML的概述
HTML:Hyper Text Markup Language --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
HTML的作用
HTML是用来制作页面(静态页面).
HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
HTML的使用
HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
* 01.html
HTML的结构标签
* 跟标签:<html></html>
* <head> -- html的头标签
* <body> -- html的体标签
HTML的字体标签
<font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
* <标签 属性名=”属性值” 属性名=”属性值”></标签>
* 属性:
* color属性:字体颜色
* 英文单词设置:black,red,green,blue...
* 使用16进制数设置:#FFFFFF , #FFF
* size属性:字体的大小
* face属性:字体
* 基本使用：
<font color="red">我是HTML！</font><br/>
<font color="#FF0000" size="1">我是小红！</font><br/>
HTML的排版标签
标题标签：h标签<h1>...<h6>
段落标签：p标签
字体加粗标签：b标签
字体斜体标签：i标签
字体下划线：u标签
居中标签：<center>标签
横线标签：<hr/>
原生标签：<pre>
HTML的图片标签
图片标签:<img>
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
* 如果引入的图片和html文件在同一级路径。
* 直接写文件名或者./文件名
<img src="cs10006.jpg" />
<img src="./cs10006.jpg" />
* 如果引入的图片在html文件的上一级路径。
* <img src="../cs10006.jpg" />
* 如果引入的图片在html文件的下一级路径。
* <img src="img/cs10006.jpg" />
<body>
<img src="logo2.png" usemap="#Map" />
<map name="Map">
<area coords="0, 0 , 100, 100" href="特殊字符标签补充.html"/>
</map>
</body>
HTML的列表标签
有序列表
<ol>
<li></li>
</ol>
无序列表的属性:
* type属性
* 1 ：数字类型
* a ：英文类型
* i :罗马字符
* start属性
无序列表
<ul>
<li></li>
</ul>
无序列表的属性:
* type属性
* disc ：实心点.
* circle ：空心圆
* square ：方块.
HTML的超链接标签
HTML的超链接标签：<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
超链接的target属性:
* _self
* _blank
* _parent
HTML的表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left
* center
* right
<td>的属性:
* colspan=”列数”
* rowspan=”行数”
HTML的表单标签（*****）
HTML的表单标签：<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本域.
HTML5扩展的表单标签
<input type=”email”>
<input type=”date”>
<input type=”number”>
<input type=”color”>
HTML的框架标签
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签，frame代表切分的每个部分.
代码实现：
<frameset rows="15%,*">
<frame src="top.html" name="top"/>
<frameset cols="15%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
特殊字体
空格：
< ：<
> ：>
版权号：©
商标：™
##补充
1.双击不能打开html文件,拖动到浏览器即可
2.使用HBuilder不能正常打开html文件,到文件目录下面双击打开
Hbuilder常用快捷键
运行: Ctrl + R
代码提示: Alt + /
删除当前行: Ctrl + D
复制当前行: Ctrl + Shift + R
向下移动行: Ctrl + 向下箭头
开启关闭注释: Ctrl + /
代码格式化: Ctrl + Shift + F
误操作后退: Ctrl + Z
多媒体标签
<body>
<!-- 不同浏览器页面展示效果不同 -->
<embed src="music.mp3" width="300" height="400" hidden="true"></embed><br />
<!-- 只支持IE -->
<bgsound src="music.mp3"></bgsound>
<!-- HTML5展示方式 -->
<audio src="music.mp3" controls autoplay></audio>
<video controls autoplay>
<source src="Calling Lights.mp4" type="audio/mp4"></source>
</video>
</body>
跑马灯效果
1.滚动方向direction（包括4个值：up、 down、 left和 right）
语法：<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior
（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
语法: <marquee behavior="滚动方式">...</marquee>
<body>
<marquee direction="right" behavior="alternate" >
<font>跑马灯效果</font>
</marquee>
<marquee><font>Hello,World</font></marquee>
</body>
fieldset 标签
<body>
<fieldset> <!-- 域 -->
<legend > 用户信息</legend> <!-- 域标题 -->
<font>用户名</font><br />
<font>昵称</font><br />
<font>性别</font>
</fieldset>
</body>