html的简介
1、什么是HTML
HyperText Markup Language
超文本标记语言,网页语言
*超文本:超出文本范畴,html轻松实现
*标记:html所有操作通过标记来实现,标记就是标签<标签名称>
*网页语言:
第一个HTML程序 后缀为.html
<font size="5" color="red">第一个html</fond>
HTML固定的规范(5个)
1、一个html文件开始的标签和结束的标签<html></html>
java里定义一个Java方法 { }
2、html包含两部分内容
(1)<head>设置相关信息</head>
(2)<body>显示页面上的内容都写在body里面</body>
3、html的标签有开始标签也有结束标签
<head></head>
4、html代码不区分大小写
5、有些标签没有结束标签
比如:换行<br/>在标签内结束
<hr/>一条水平线
HTML的操作思想(理解)
网页中有很多数据,不同数据可能需要不同的效果
通过修改标签的属性值实现修改标签样式的变化
一个标签相当于一个容器,想要修改容器内数据的样式只需要改变容器的属性值就可以实现容器内数据样式的变化
HTML中常用的标签
1、文字标签和注释标签
文字标签:修改文字样式的标签
<fond></fond>
属性:
-size:文字大小 取值1-7 超过7取7
-color:文字颜色
两种表达方式:
英文单词:red、green、blue
使用16进制表示 #ffffff:RGB
通过工具实现不同的颜色
注释标签
java注释有几种?3
html的注释:<!--html的注释-->
2、标题标签、水平线标签、特殊字符
标题标签:
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h6>标题六</h6>
h1到h6字体不断变小,而且自动换行
水平线标签:
</hr>
属性: size:1-7
color:
<hr size="4" color="red"/>
特殊字符
-想要在页面上显示 <html>:x xx
-想要对特殊字符进行转移
< < ;
> > ;
空格  ;
& &
<fond><;html>;x : ;xx</fond>
3、列表标签
-比如显示这样子的效果
邹泽斌
aaaaa
bbbbb
<dl></dl>表示列表的范围
<dt></dt>上层结构
<dd></dd>下层内容
代码:
<dl>
<dt>邹泽斌</dt>
<dd>aaaaa</dd>
<dd>bbbbb</dd>
</dl>
想要表示以下效果
1.aaa
2.bbb
3.ccc
a.aaa
b.bbb
c.ccc
i.aaa
ii.bbb
iii.ccc
<ol><ol>:有序列表的范围
属性:type:设置为1(默认) a i
在ol标签里面<li>具体内容</li>
<ol type="1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ol type="a">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ol type="i">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
快捷键:向前移动shift+tab 向后移动tab键
想要在页面上显示这样的效果
特殊符号(方框)aa
<ul></ul>:表示无序列表的范围
属性:type:空心圆circle 实心圆disc 实心方块square
<ul type="circle">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
4、图像标签(很重要)
<img src="图片的路径"/>
属性:src图片的路径
width:图片的宽度
height:图片的高度
alt:图片上显示文字,把鼠标移到图片上,停留片刻
5、路径的介绍
分类:两类
绝对路径
相对路径
一个文件相对于另外一个文件的位置
三种写法:
1、html文件和图片在一个路径,直接写文件名称
2、在HTML文件中,使用img文件下的a.jpg
在HTML中使用图片4.HTML和img在同一个路径中
img\a.jpg
3、图片在HTML文件的上层目录
html文件所在目录和图片是一个目录
图片和HTML文件是什么关系?
图片在HTML所在目录的上层目录 day01
怎么表示上层目录?../
../:day 01
../c.png
想要表示上层的上层 ../../
6、超链接标签
链接资源(重点)
<a href="链接到的路径">显示在页面上的内容"></a>
**href:链接资源的地址:
**target:设置打开的方式,默认是在当前页打开
_blank:在一个新窗口打开
_self:在当前页打开,默认
当超链不需要到任何的地址,只需要在href加一个#号
定位资源
如果我想要定位一个资源:
定义一个位置
<a name="top">顶部</a>
回到这个位置
<a href="#top">回到顶部</a>
引入一个标签:原样输出标签 <pre></pre>
代码:
<a name="top">顶部</a>
<pre>
内容
</pre>
<a href="#top">回到顶部</a>
7、表格标签(重要)
可以对数据进行格式化,使数据显示更加清晰
<table></table>:表示表格的范围
在table里面<tr></tr>
设置显示方式 align left center right
在tr里面 <td></td>
设置显示方式 align left center right
使用th也可以表示单元格(居中加粗)
表格的标题
<caption></caption>
首先定义一个表格的范围使用table
定义一行使用tr
定义一个单元格使用td
操作技巧:
首先数有多少行,数每行里面有多少个单元格
合并单元格
rowspan:跨行
colspan:跨列
<td colspan="3">人员信息</td>
8、表单标签(最重要)
可以提交数据到开心玩规定服务器,这个过程可以用表单标签实现
<form></form>:定义一个表单范围
-属性
action:提交到地址,默认提交到当前页面
method:表单的提交方式
常用的有两种 get和post,默认get请求
get:把数据直接显示出来
post:地址栏信息不会显示
一个笔试题目:
get和post的区别?
1、get请求地址栏会携带提交的数据,post不会带(请求体里,第7天http协议的时候)
2、get请求的安全级别较低,post较高
3、get请求有数据大小的限制,post没有限制
enctype:一般情况下不需要这个属性,在做文件上传时候需要设置这个属性(第22天的时候讲)
输入项:可以输入内容或者选择内容的部分
****在输入项里面要有一个name属性表单才能提交
大部分输入项使用 <input type="输入项类型"/>
普通输入项<input type="text"/>
密码输入项<input type="password"/>
单选输入项<input type="radio"/>
-在这里面要给一个name属性
-name的属性值必须要相同
-必须要有一个value值
单选/多选实现默认选中的属性
-checked=“checked”
下拉选框默认选中
selected="selected"
-表示单选框
复选输入项:<input type="checkbox"/>
-在这里面要给一个name属性
-name的属性值必须要相同
-必须要有一个value值
文件输入项:<input type="file"/>
文件上上传时用到
下拉输入项:(不是在input标签里)
<select name="birth">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
文本域:<textarea cols="10" rows="10"></textarea>
隐藏项:(不会显示在页面上,但是会存在html里面)
提交按钮:<input type="submit" />
<input type="submit" value="注册"/>
当全部都写了name属性的时候
问号表示后面带参数
参数之间用&隔开
参数用键值对形式进行传递
单选复选value加上的时候
?输入项name的值=输入的值&
使用图片提交
<input type="imge" src="图片路径"/>
重置效果:回到初始状态
<input type="reset"/>
普通按钮(会和js一起使用)鼠标点击事件
<input type="button" value=""/>
9、案例 完成
案例代码: