一、html的简介

1、什么是html？

HyperText Markup Language：超文本标记语言，网页语言

超文本：超出文本的范畴，使用html可以轻松实现这样操作

标记：html所有的操作都是通过标记实现的，标记就是标签，

网页语言：

2、第一个html程序。

创建java文件.java

先编译，然后再运行(jvm)

html后缀是 .html .htm

直接通过浏览器就可以运行

代码

这是我的第一个html程序！font>

3、html的规范(遵循)

一个html文件开始标签和结束标签

html包含两部分内容：

设置相关信息

显示在页面上的内容都写在body内

htlm的标签有开始标签，也要的有结束标签。

比如：

html的代码不区分大小写

有些标签没有结束标签，在标签内结束

比如:换行

、一条横线

4、html的操作思想

网页中有很多数据，不同的数据可能需要不同的显示效果，这时候需要使用标签把操作的数据抱起来(封装起来)，通过修改标签的属性值实现标签内数据样式的变化。

一个标签相当于一个容器，需要修改容器内数据的样式，只需要修改容器的属性，就可以实现容器内数据样式的变化。

二、html中常用的标签

1、文字标签 和注释标签

文字标签：修改文字的样式

属性：

size：文字的大小，取值范围1-7，超出了7，默认是7

color：文字颜色

第一种表示方式(单词)：red、green、blue、black、white、yellow、gray…

第二种表示方式(十六进制表示)：#ffffff:RGB(#66ff99通过工具实现)

注释标签：

2、标题标签、水平线标签和特殊字符

标题标签：

...

从h1到h6，大小依次变小，同时会自动换行

水平线标签

属性

size:水平线的粗细，范围1-7

color:水平线的颜色

比如：

特殊字符：

需要随特殊字符进行转译

<:>

>: >

空格：&nbsp；

&： &amp；

3、列表标签

比如现在显示这样的效果

传智播客

财务部

学工部

人事部

标签： 表示列表的范围

在dl里面 ：上层内容

在dl里面 ：下层内容

代码

传智播客dt>财务部dd>学工部dd>人事部dd>

dl>

想要在页面上显示这样的效果

1. 财务部

2. 学工部

3. 人事部

a. 财务部

b. 学工部

c. 人事部

i. 财务部

ii. 学工部

iii. 人事部

： 有序列表的范围

属性 type：设置排序方式 1(默认) a i

在ol标签里面

具体内容

代码

1. 财务部li>
2. 学工部li>
3. 人事部li>

   ol>

   想要在页面上显示这样的效果

   特殊符号(方框) 财务部

   特殊符号(方框) 学工部

   ： 表示无序列表的范围

   属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc

   在ul里面

   代码

   • 财务部li>
   • 学工部li>
   • 人事部li>

     ul>

     4、图像标签(**)

     

     src：图片的路径

     width：图片的宽度

     height：图片的高度

     alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容

     有些浏览器下不显示(没有效果)

     5、路径的介绍

     分类：两类

     1)、绝对路径

     C:\Users\asus\Desktop\0413\day01\code\a.jpg

     http://www.baidu.com/b.jpg

     2)、相对路径

     一个文件相对于另外一个文件的位置，共三种：

     html文件和图片在一个路径下，可以直接写文件名称

     

     图片在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

     想要表示上层的上层 …/…/

     6、超链接标签(**)

     1)、链接资源(**)

     显示在页面上的内容 a>

     href：链接的资源的地址

     target：设置打开的方式 ，默认是在当前页打开

     _blank：在一个新窗口打开

     _self：在当前页打开 默认

     当超链接不需要到任何的地址，只需要在在href里面加“#”。

     这是一个超链接2a>

     2)、定位资源

     如果想要定位资源：首先定义一个位置

     顶部a>

     回到这个位置

     回到顶部a>

     引入一个标签 pre：原样输出

     7、表格标签(重要的标签)

     1)、可以对数据进行格式化，使数据显示更加清晰

     ：表示表格的范围

     border：表格线

     bordercolor：表格线的颜色

     cellspacing：单元格直接的距离

     width：表格的宽度

     height：表格的高度

     在table里面

     ，设置行。

     设置对齐方式 align： left/center/right

     在tr里面，设置每行中的的单元格。

     设置显示方式 align：left/center/right

     使用th也可以表示单元格

     表示可以实现居中和加粗

     代码

     2)、 画图分析表格的写法

     首先定义一个表格的范围使用table

     定义一行使用 tr

     定义一个单元格使用 td

     操作技巧：

     首先数有多少行 ，数每行里面有多少个单元格

     表格的标题

     合并单元格

     rowspan：跨行

     colspan：跨列

     人员信息td>人员信息td>

     8、表单标签(重要的标签)

     1)、可以提交数据到网站的服务器，这个过程可以使用表单标签实现

     ：定义一个表单的范围

     属性

     action： 提交到地址，默认提交到当前的页面

     method: 表单提交方式

     常用的有两种 get和post，默认是get请求

     面试题目：get和post区别

     1、get请求地址栏会携带提交的数据，post不会携带(在请求体里面)

     2、get请求安全级别较低，post较高

     3、get请求数据大小的限制，post没有限制

     enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性。

     2)、输入项：可以输入内容或者选择内容的部分

     大部分的输入项使用

     在输入项里面需要有一个name属性

     普通输入项：

     密码输入项：

     3)、单选输入项

     在里面需要属性name

     name的属性值必须要相同

     必须有一个value值

     实现默认选中的属性

     checked=“checked”

     4)、复选输入项

     在里面需要属性 name

     name的属性值必须要相同

     必须有一个value值

     实现默认选中的属性

     checked=“checked”

     5)、文件输入项(上传的时候用到)

     6)、下拉输入项(不是在input标签里面的)

     1991option>

     1992option>

     1993option>

     select>

     默认选择

     selected=“selected”

     7)、文本域

     textarea>

     8)、隐藏项(不会显示在页面上，但是存在于html代码里面)

     9)、提交按钮

     - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html

     ?sex=on&love=on&love=on&birth=1991

     当在输入项里面写了name属性之后

     - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html

     ?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=

     - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?

     phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=

     ?输入项name的值=输入的值&

     参数类似于key-value(map集合)形式

     10)、使用图片提交

     11)、重置按钮：回到输入项的初始状态

     12)、普通按钮

     9、案例：使用表单标签实现注册页面

     使用表格实现页面效果

     超链接不想要他有效果 href="#"

     如果表格里面的单元格没有内容， 使用空格作为占位符

     使用图片提交表单

     10、html中的其他的常用标签的使用

     b ：加粗

     s ：删除线

     u ：下划线

     i ：斜体

     pre ：原样输出

     sub ：下标

     sup ：上标

     p ：段落标签 比br标签多一行

     div ：自动换行

     span：在一行显示

     11、html的头标签的使用

     html两部分组成head和body

     在head里面的标签就是头标签

     title标签：表示在标签上显示的内容

     标签：设置页面的一些相关内容

     meta http-equiv=“refresh” content=“3;url=01-hello.html” 用于页面定时跳转，需要修改的内容是url，也就是要跳转的页面的路径。

     base标签：设置超链接的基本设置

     可以统一设置超链接的打开方式

     link标签：引入外部文件

     在css中，可以使用link标签引入css文件

     12、框架标签的使用(会用)

     1)、

     rows:按照行进行划分

     cols:按照列进行划分

     2)、

     具体显示的页面

     使用框架标签时候，不能写在body里面;使用了框架标签，需要把body去掉

     //把页面划分成上下两部分

     //上面页面

     //把下面部分划分成左右两部分

     //左边的页面

     //右边的页面

     frameset>

     frameset>

     3)、如果在左边的页面超链接，想让内容显示在右边的页面中

     设置超链接里面属性 target值设置成名称

     超链接1a>

     小结：

     学了一天，第一感觉就是要记的标签太多了。。。。。

     继续努力，再接再厉