首页 > 代码库 > html
html
1、html的简介
*什么是html？
-HyperText Markup Language：超文本标记语言，网页语言
**超文本：超出文本的范畴，使用html可以轻松实现这样的操作
**标记：html所以的操作都是通过标记实现的，标记就是标签，<标签名称>
**网页语言：
*html的规范
1、一个html文件开始和结束标签<html></html>
2、html包含两部分内容
（1）<head>设置相关信息</head>
（2）<body>显示在页面上的内容都写在body里面</body>
3、html的标签又开始和结束
-<head></head>
4、html不区分大小写
5、有些标签没有结束标签，在标签内结束
比如：换行<br/>
一条线<hr/>
****html的操作思想（****************）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的内容的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html常用的标签
2、文字标签和注释标签
*文字标签：修改文字的样式
-<font></font>
-属性
*size：文字的大小 取值范围1-7
*color：文字颜色
-两种表示方式
**英文单词：red green blue
**使用十六进制数表示#ffffff：RGB
-通过工具实现不同的颜色 #66cc66
*html的注释标签
-Java注释有三种
-html注释<!--注释的内容-->
3、标题标签、水平线标签和特殊字符标签
*标题标签
-<h1></h1>
-从h1到h6，大小是依次变下，同时会自动换行
*水平线标签
-<hr/>
-属性
**size：水平线的粗细
**color：水平线的颜色
-代码
<hr size="5" color="blue" />
*特殊字符
-想要在页面上显示这样的内容 <html>:是网页的开始！
-需要对特殊字符进行转义
* < ：<
* > : >
*& : &
* 空格 ： 
4、列表标签
-比如现在显示这样的效果
**<dl></dl>:表示列表的范围
**在dl里面 <dt></dt>:上层内容
**在dl里面 <dd></dd>:下层内容
-代码
<!-- 列表标签 -->
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
-
<!-- 有序列表 -->
<ol type="i">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
5、图像标签（************）
* <img src="http://www.mamicode.com/图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
6、路径的介绍
* 分类：两类
** 绝对路径
-C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="http://www.mamicode.com/b1.jpg" alt="这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
- - C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../
7、超链接标签
*链接资源
-<a href="http://www.mamicode.com/连接到资源的路径" >显示在页面上的内容</a>
** href: 链接的资源的地址
** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认
- 当超链接不需要到任何的地址 在href里面加#
- <a href="http://www.mamicode.com/#">这是一个超链接2</a>
*定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="http://www.mamicode.com/#top">回到顶部</a>
** 引入一个标签 pre：原样输出
8、表格标签（*******重要的标签********）
* 可以对数据进行格式化，使数据显示更加清晰
* <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
** 在table里面 <tr></tr>
- 设置对齐方式 align： left center right
*** 在tr里面 <td></td>
- 设置显示方式 align： left center right
*** 使用th也可以表示单元格
- 表示可以实现居中和加粗
* 代码
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
* 画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
** 操作技巧：
- 首先数有多少行 ，数每行里面有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>
html