HTML简介
1、html
<html >
<head>
<title>fuck</title>
</head>
<body>
<font size="5" color="red"> this is my first app </font><br/>
<hr/>
</body>
</html>
<br>:换行
<hr>:横线
2、文字标签：修改文字样式
<font> </font>
-属性：
size：文字大小，取值范围1-7
color：颜色
-两种表示方式
** 英文单<hr/>
-注释标签：
-html注释：<!-- -->
3、标题标签、水平标签和特殊字符
8标题标签
<h1></h1> <h2></h2> <h3></h3> .....
-从h1到h6自动换行
*水平线标签
-<hr/>
-属性
*<size>粗细
*<color>颜色
-代码
<hr size="5" color="red"/>
*特殊字符
-转义字符
* < <；
* > >
*空格  ；
4、列表标签
* 想要在页面上显示这种效果
分区
一区
二区
** <dl> </dl>;表示列表范围
**在dl里面 <dt></dt>;上层内容
**在dl里面 <dd></dd>;下层内容
-代码
<dl>
<dt>分区</dt>
<dd>一区</dd>
<dd>二区</dd>
</dl>
* 想要在页面上显示这种效果
1.一区
2.二区
3.三区
a.一区
b.二区
c.三区
i.一区
ii.二区
iii.三区
** <ol> </ol>;有序列表范围
-属性 type：设置排序方式 1（默认） a i
**在ol里面 <li>具体内容</li>
-代码
<ol type="a">
<li>一区</li>
<li>二区</li>
<li>三区</li>
</dl>
* 想要在页面上显示这种效果
特殊符号（方框）一区
特殊符号（方框）二区
** <ul> </ul>;表示无序列表范围
属性：type：空心圆circle、实心圆disc、实心方块square ，默认disc
在ul里面 <li></li>
-代码
<ul type="square">
<li>part1</li>
<li>part2</li>
<li>part3</li>
</ul>
5、图像标签
*<img src="图片路径"/>
-src；图片的路径
-width：宽度
-heigth：高度
-alt：图片上显示的文字，鼠标在图片上停留片刻，显示文字(有些浏览器不显示)
6、路径介绍
*分类
-绝对路径
c:\User\desktop
http://www.baidu.com/b.jpg
-相对路径
一个文件相对于另外一个文件的位置
-三种
** html和图片在同一路径下
-<img src="图片路径"/>
** 图片在html下层目录
在html文件中，使用img文件夹下的a.jpg
--C:\Users\Administrator\Desktop\学习笔记\day1\ html.html
--C:\Users\Administrator\Desktop\学习笔记\day1\ img\a.jpg
***在html中使用图片图片在html.html和img在一个路径下
<img src="img\a.jpg"/>
** 图片在html上层目录
--C:\Users\Administrator\Desktop\学习笔记\ day1\ html.html
--C:\Users\Administrator\Desktop\学习笔记\ a.jpg
***html文件所在的目录和图片是一个目录 学习笔记
<img src="..\a.jpg"/>
7、案例一(列表标签案例)
8、超链接标签
*链接资源
- <a href="链接到资源的路径">显示在页面上的内容</a>
**属性
-href：链接的资源的地址
-target：设置打开方式，默认当前页打开
--—_blank：在一个新窗口打开
--self：当前页打开（默认）
*定位资料
**如果想要定位资源，定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**pre标签 原样输出
9、表格标签
*对数据进行格式化，使数据更加清晰
*<table></table> 表示表格范围
**在table里面<tr></tr> 行
** tr里面<td></td> 单元格
<!-- th 表头标签，加粗居中-->
*表格标题
caption
*table属性：
border :线条粗细
bordercolor :线条颜色
cellspacing :线条间隙
width :宽度
hright ；高度
*tr设置显示方式
align="center" ：居中
align="lift" ：居左
align="right" ：居右
-代码 <table border="1" bordercolor="blue" cellspacing="0">
<tr>
<td>..</td>
</tr>
..
..
</table>
*合并单元格
-rowspan 跨行
-colspan 跨列
*caption 表格信息，紧跟table之后
上
10、表单标签
*<form></form>:定义一个表单标签
-属性
acction="路径" 提交到地址，默认提交到当前的页面
method：表单提交方式
-常用 get和post，默认get请求
面试题目 get和post区别
1、get请求地址栏会显示提交的数据，post不会
2、get请求安全级别较低，post较高
3、get请求有数据大小限制，post理论上没有限制
enctype:一般请求下不需要这个属性，做文件上传需要
**输入项：可以输入内容或选择内容的部分
-大部分的输入项 使用<input type="输入项的内容"/>
*** 普通输入项 ：<input type="text" name="phone"/>
*** 密码输入项 ：<input type="password" name="password"/>
*** 单选输入项 ：<input type="radio"/>
-需要加name属性
-那么属性值必须相同
-必须有一个value值
****实现默认选中
--checked="checked"
*** 复选输入项： <input type="checkbox"/>
-需要加name属性
-那么属性值必须相同
-必须有一个value值
****实现默认选中
--checked="checked"
***文件输入项： <input type="file"/>
***下拉输入项： <select name="birth">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1991">1992</option>
<option value="1991">1993</option>
</select>
****默认选中selected="selected"
***文本域： <textarea cols="列" rows="行">
</textarea>
***隐藏项： <input type="hidden"/>
***提交按钮： <input type="submit" value="注册"/>
当在输入项写了name属性之后
?phone=123&phone=231&sex=nan&like=chifan&like=yundong&birth=1991&tex=%09%09%09%09%09wqe
***使用图片提交
<input type="iamge" src="提交按钮.png"/>
***重置按钮
<input type="reset" />
***普通按钮
<input type="button" value=""/>
11、案例：使用表单标签实现注册页面
-使用表格实现页面效果
-超链接不想要有效果 href=“#”
-如果表格里面的单元格没有内容，使用空格作为占位符  ；
-使用图片提交表单 <input type="image" src="图片的路径"/>
12、html中的其他常用标签的使用
b 加粗
s 删除线
u下划线
i 斜体
pre 原样输出
sub 下标 例：3<sub>2</sub>
sup 上标
p 段落标签 比br多一行
===css使用
div 自动换行
span 在一行显示
13、html的头标签的使用
*html两部分组成 head和body
**在head里面的标签就是头标签
**title标签：表示在标签上显示的内容
**<meta>标签：设置页面的一些相关内容
<meta name="keywords" content="fuck,shit">
页面跳转：<meta http-equiv="refresh" content="3;url=html示例.html">
**base标签 设置超链接的基本设置
可以统一设置超链接的打开方式
<base target="_blank"/>
**link标签 引入外部文件（引入css文件）
14、框架标签
*<frameset>
-rows: 按行进行划分
**<frameset rows="80,*">（上面80，下面全部）
-cols：按列进兴划分
**<frameset cols="80,*">（左边80，右边全部）
*<frame>
-具体显示的页面
**<frame name="part_1" src="a.html"/>
*使用框架标签，不能写在body里，使用需删除body
<frameset rows="100,*"> //把页面划分成上下两部分
<frame name="part1" src="aa.html"/> //上面页面
<frameset cols="80,*"> //把下面页面划分成上下两部分
<frame name="left" src="bb.html"/> //左边的页面
<frame name="right" /> //右边的页面
</frameset>
</frameset>
*如果在左边的页面超链接，想让内容显示在右边的页面中
-设置超链接里面的属性 target值设置成名称
-<a href="html示例.html" target="right"> button1</a>
