一、HTML简介
**全称为HyperText Markup Language 译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式，比如字体颜色、大小。。。。
**HTML是最基础的网页语言
**HTML是通过标签来定义的语言，代码都是由标签组成
**HTML文件后缀名为.html或者.htm
不需要编译，直接通过浏览器就可以运行
二、HTML的规范
1、html文件的开始和结束标签 <html> </html>
2、html包含两部分内容：
<head></head> 设置相关的信息 title
<body></body> 显示在页面上的内容都在body里面
3、html语言代码不区分大小写
4、有些标签没有结束标签，在标签内结束
-换行 <br/>
-水平线 <hr/>
三、HTML中常用的标签
1、文字标签 （修改文字样式）
-<font></font>
-属性
*size：文字大小，范围1-7，超出7，默认还是7
*color：文字颜色
-两种方式
**英文单词： red，green，blue，white
**使用16进制表示（RGB）：
-通过工具实现不同颜色
2、注释标签
-HTML的注释： <!--html的注释-->
3、标题标签、水平线标签、特殊字符
*标题标签
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
...
<h6>标题六</h6>
-从h1到h6依次变小，同时会自动换行
*水平线标签
-<hr>
-属性
**size：范围1-7
**color：颜色
4、特殊字符
* < : <
* > : >
* 空格 ：
* & ：&
5、列表标签
传智播客
财务部
学工部
人事部
*定义列表
**<dl></dl>: 表示列表范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>: 下层内容
-代码：
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
-想在页面上先这样的效果
1. 财务部
2.学工部
3.人事部
** <ol></ol> :有序列表的范围
-属性
type：设置排序方式 默认为 1 ，也可设置a，i
** 在<ol>标签里面 <li>具体内容</li>
<!--有序列表-->
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
**<ul type="circle"><li></li></ul> :无序列表
type:空心圆circle，实心圆disc，实心方块square，默认为disc
6、图像标签（掌握）
*<img src="图片的路径"/>
-src
-width
-height
-alt:图片上显示的文字， 把鼠标停在图片上，停留片刻显示内容
**有些浏览器不显示
路径介绍：
**绝对路径
**相对路径
-html文件和图片在同一路径下，可以直接写文件名
-当图片在html文件的子目录下，
--C:\Users\asus\Desktop\day01\code\ 4.html
--C:\Users\asus\Desktop\day01\code\ img\a.jpg
可以直接写src = “img\a.jpg”
-当图片在html文件的父目录下
--C:\Users\asus\Desktop\day01\ code\ 4.html
--C:\Users\asus\Desktop\day01\ a.jpg
可以直接写src = “../a.jpg”
上层的上层 ../../
7、超链接标签
*链接资源(zhangwo)
- <a href=“链接到资源的路径”>这是一个超链接</a>
**href :链接资源的地址
**target ：设置打方式,默认是在当前页打开_self ：
_blank表示在一个新窗口打开
当超链接不需要到任意地址直接指定href=“#”
*定位资源
**如想要定位资源，定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**<pre></pre>表示原样输出标签
8、表格标签<重要>
*可以对数据进行格式化，数据显示更清晰
*<table></table>: 表示表格的范围
**属性
-border 表示表格线的粗细
-bordercolor 表示表格线的颜色
-cellspacing 表示单元格框线和表格边框线的间隔
-weight 表示表格的宽
-height 表示表格的高
**在table标签里面 <tr></tr>:表示表格中的一行
tr的属性
-align ：left，center， right
***在tr标签里面 <td></td>:表示表格中的一个单元格
使用<th></th>也可以表示单元格 单元格设置为居中、加粗
**合并单元格
-rowspan 跨行合并
-colspan 跨列合并
**表格的标题
<caption></caption>
<table border="1" bordercolor="red">
<table border="1" bordercolor="red">
<tr>
<td colspan="3">人员信息</td>
</tr>
<tr>
<td>东方不败</td>
<td>男</td>
<td><20/td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
<td>40</td>
</tr>
</table>
9、表单标签（重要的标签）
**可以提交数据到相应的服务器，这个过程可以使用表单标签实现
*<form></form> :定义表单的范围
-action: 数提交的地址 ，默认提交到当前的页面
-method：表单的提交方式
-常用的有两种
method=“get”
method="post" ,默认是get
-面试题目 get和post的区别
1、get请求地址栏会携带提交的数据，posp不会携带
2、get请求安全级别低，post比较高
3、get请求数据有大小限制，post没有
-enctype：一般不需要做这个属性，做文件上传的时候需要设置这个属性
**输入项：可以输入的内容或者可以选择的内容的部分
-大部分都可以用 <input type="输入的类型"/>
输入项里面必须要有name属性，不然会提交不上去
***普通输入项：<input type="text"/>
***密码输入项： <input type="passsword"/>
***单选输入项： <input type="radio" name="sex"/>女<input type="radio" name="sex"/>男
-里面需要name属性
-name属性必须一样
-实现默认选中的属性
--checked=“checked”
<input type="radio" name="sex" value=“women” checked="checked"/>女<input type="radio" name="sex"/>男
默认选择女
***复选输入项：<input type="checkbox"/>
-里面需要name属性
-name属性必须一样
****文件输入项（文件上传的时候用到）
-<input type="file"/>
***下拉输入项：
<select name="birth">
<option value="1992">1992</option>
<option value ="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
--默认选中使用select属性
<option value ="1993" slected="slected">1993</option>
***文本域
<textarea cols="10" rows="5 "></textarea>
***隐藏项：不显示在页面上，但显示在源代码中
<input type="hidden"/>
***提交按钮
<input type="submit" value="注册"/>
****重置注册:回到初始状态
<input type="reset" value="重置注册"/>
***使用图片提交
<input type="imag" src="a.jpg"/>
<!--表单程序-->
<form action="hello.html" method="get">
手机号码：<input type="text" name="phone"/><br/>
创建密码：<input type="passsword" name="pwd"/><br/>
性别：<input type="radio" name="sex" value="woman"/>女<input type="radio" name="sex" value="man"/>男<br/>
爱好：<input type="checkbox" name="love" value="y"/>羽毛球<input type="checkbox" name="love" value="p"/>乒乓球<input type="checkbox" name="love" value="pp"/>排球<br/>
文件：<input type="file"/><br/>
生日：<select name=“birth”>
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value ="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
<br/>
自我描述：<textarea cols="10" rows="5" name="tex"></textarea><br/>
隐藏项：<input type="submit" value="注册"/>
<br/>
</form>
10、HTML中其他常用的标签
b s u i pre sub sup div span p
<b></b> :加粗
<s></s> :删除线
<u></u> :下划线
<i></i> :斜体
<pre></pre>:原样输出
<sub></sub>: 下标
<sup></sup>: 上标
<div></div> :自动换行
<span></span>:不换行
p ：段落标签 比br多一行
11、html头标签
-title ：表示在标签上现实的内容
-meta ：设置页面相关的信息
<meta http-equiv="refresh" content="3;url=hello.html"/>
3秒后跳转到hello.html页面
-base标签：设置超链接的基本设置:统一设置超链接的打开方式
- <a href=“链接到资源的路径”>这是一个超链接</a>
**href :链接资源的地址
**target ：设置打方式,默认是在当前页打开_self ：
_blank表示在一个新窗口打开
当超链接不需要到任意地址直接指定href=“#”
<base target="_blank"/>
-link标签：引入外部文件
可以使用link标签引入css文件
12、框架标签：
*<frameset></frameset>
-rows:按行划分
-cols:按列划分
*frame具体显示的页面
-<frame name="lower_left" src="hello.html">
**使用框架标签的时候，不能写在body里面，使用框架标签需要把body去掉
* <frameset>
<frame name="top" sr="a.html"> //把上页面划分为上下两部分
//上面页面
<frameset cols="150,*"> //把下面划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的部分
<frame name="lower_right" src="c.html"> //右边的部分
</frameset>
</frameset>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
