一、html简介超文本标记语音，标准通用标记语言下的一个应用。html不是一种编辑编程语言，而是一种标记语言，是网页制作必备。超文本就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
二、hbuilder快捷键
ctril+n 再按住w新建一个项目
ctrl+n 再按住h新建一个HTML文件
ctrl+s 保存
ctrl+x 删除一行
ctrl+R 在浏览器中打开
编辑界面输入！+tab键联想出html基本结构
三、html基本格式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
四、html常用标签
标题标签
（1）<h1>...</h1>字体最大 <h6>...</h6>字体最小
（2）段落标签
<p></p>标签表示一个段落
<em></em>标签表示斜体
<i></i>表示斜体
<br/>表示换行
<b></b>表示加粗
<s></s>表示删除线
<u></u>表示下滑线
<hr/>分割线
<sub></sub>下标线
<sup></sup>上标线
font:表示加颜色， color:加什么颜色
 :表示一个空格 ，一个 表示一个空格
a>b 表示大于
a<b 表示小于
strong和b:表示字体加粗
br：实现换行
（3）图片标签
图片标签格式：<img src= ""alt""/>
<1>直接引用网上图片，复制图片链接直接引用图片<img src="网址"alt=""/>
<2>引用本地图片：<img scr="img.jpd" alt=""/>,需要先把图片添加到img的路径下，然后加img的路径后面可以文字可加文字鼠标移到上面可以显示
"./" 表示当前位置，同一级别
"../" 表示上一级目录
../../表示上上级目录
谷歌浏览器不支持alt属性，但是可以吧属性为title
加宽属性：width ,加高属性：height
(4)链接标签
链接标签<a href=""></a>覆盖原有页面直接在href后接网址
新开窗口在网址后加target="_blank"
加图片进行链接跳转，图片加在a标签中间
死链接加#
（5）列表标签
有序标签（ordered lists）:<ol><li></li></ol>
无序标签（unordered lists）:<ul><li></li></ul>
(6)表格标签
表格标签的基本格式：
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
<th>元素中的文本通常呈现为粗体并且居中
<td>元素中的文本通常是普通的左对齐文本
表格标签：主要有行与列组成，tr代表行，td代表列
（7）快速生成表格标签
快速生成3行2列的快捷键
table>tr*3>td*2
(8)表格跨行和表格跨列
colspan="": 合并几列
rowspan="": 合并几行
（9）表单标签
表单标签格式：<form></form>
acton:开始网址 method:get 和post
表单标签：主要用来收集用户输入信息如:登入、注册、搜索商品
用户名格式：text（明文）
密码格式：password(密文)
性别：radio 性别格式，性别是单选，单位类型是radio,注意name要加上sex,不然或出现同时选择2个radio的bug
加checked表示默认值
复选框：checkbox 文本框：textarea 上传文件：file 选择框：select 按钮：button reset:重置 submit:注册
五、css层叠样式表
层叠样式表是一种用来表现html或xml等文件样式的计算机语言，css不仅可以静态装修网页，还可以配合各种脚本语言动态
地对网页各元素进行格式化
（1）层叠样式表的基本格式
1、在标签中加style属性，style就是css样式代码
<p style="color:red;">...</p>
2、在head中加style样式
<!--在head中编写style属性，作用与所有的h3标签
<style type="text/css">
h3{
color:blue;
}
</style>
3、通过外链的方式
<link rel="stylesheet" type="text/css" href="../css/test.css"/>
（2）id选择器（id 选择器，id所对应的值前面都要加#）
<style type="text/css">
#yy{
color:red;
}
</style>
（3）标签选择器
<style type="text/css">
p{
color:aquamarine;}
</style>
(4)class选择器（class所对应的值前面要加.点）
<style type="text/css">
.kk{
color:blue;
}
</style>
(5)组合选择器
<style type="tex/css">
p,em{
color:aqua;}
</style>
(6)伪类选择器
<style type="text/css">
p{
color:aquamarine;
}
P:hover{
color:red
}
</stye>
(7)字体和文本样式
<style type="text/css">
em{
font-size:50px; 字体大小
font-family:"微软雅黑" 字体
font-stylt:italic 斜体
font-weight:bold 加粗
text-decoration:underline 下滑线
text-align:center 文本内容居中
}
</style>
多测师社区 
