top
根据黑马的培训课程《超全面的JavaWeb视频》day01的学习笔记
学习是一个长期的过程,每天进步一点点by匍匐向前
1.HTML的规范遵循
top
1. 一个HTML文件开始标签和结束标签<html></html>
2. HTML包含两部分内容:
* <head>
设置相关信息</head>
* <body>
显示在页面上内容都写在标签body里面</body>
3. HTML的标签又开始标签,也有结束标签
<head>/</head>
4. HTML代码不区分大小写
5. 有些标签,没有标签,在标签内结束
- 比如 换行 <br/>
水平线<hr/>
2.HTML语言的操作思想
网页有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装),通过修改标签的属性值实现标签内数据样式的变化。
3.HTML中常用的标签
1.文字标签和注释标签
文字标签:修改文字的样式
<font></font>
- 属性:
- size:文字的大小 取值范围1-7,超出了是,7默认还是7
- color:文字颜色
- 两种表达方式
- 英文单词:read green black white yellow gray……
- 使用十六进制表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
注释标签:
HTML注释:
<!-- HTML注释 -->
!-英文格式
2.标题标签水平标签和特殊字符
标题标签
<h1></h1> <h2></h2> <h3></h3>……<h6></h6>
从h1到h6,大小是一次变小,同时会自动换行
水平线标
<hr>
- 属性
size:水平线粗细 取值范围1-7
color:颜色- 属性
- 特殊字符
- 想要在页面上显示这样的内容 :是页面的开始!
- 需要对特许字符进行转义
< <
> \>
空格:
& &
@ &cope
" "
3.列表标签
比如现在显示这样的效果 传智播客 财务部 学工部 人事部
<dl></dl>
: 表示列表的范围- 在dl里面
<dt></dt>
: 上层内容 在dl里面
<dd></dd>
:下层内容
代码<dl> <dt>传智播客</dt> <dd>财务部 </dd> <dd>学工部 </dd> <dd>人事部 </dd> </dl>
<ol></ol>
:有序列表的范围
属性 type:设置排序方式 1(默认) a(a,b,c) i (i,ii,iii,)
格式<ol type="a"></ol>
在ol标签里面
<li>具体内容</li>
<ul></ul>
: 表示无序列表的范围属性:type: 空心圆circle 、实心圆disc 、实心方块square ,默认disc
格式<ol type="ciecle"></ol>
- 在ul标签里面
<li>具体内容</li>
4.图像标签
top
*<img src="图片的路径"/>
- src:图片的路劲 - width:图片的宽度 - hight:图片的高度 - alt:图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容 >> 有些浏览器不显示(没有效果),兼容性差
5.路径的介绍:绝对路径和相对路径
绝对路径
- c:\user\asue\desktop\code\logo.png
- http://www.baidu.com
相对路径
- 一个文件相对于相对于另一个文件的位置
三种:
HTML文件和图片在一个路径下,可以直接写文件名称
<img src="logo.png">
图片在HTML文件的下层目录
在HTML文件中,使用img文件夹下面的a.jpgc:\user\asue\desktop\code\ hello.html
c:\user\asue\desktop\code\ image\logo.png在HTML文件中,使用img文件夹下面logo.png
<img src="img\logo.jpg">
图片在HTML文件的上层目录 ../ 在往上…/等
<img src="../logo.jpg">
综合练习:列表一-列表的标签案列
6.超链接标签
top
* 链接资源<a href="链接到资源的路径">显示在页面上的内容</a>
* href:链接的资源的地址
* target:设置打开方式 ,默认是当前页打开_blank : 在一个新窗口打开
_self : 在当前页打开
* 当超链接不需要任何地址 在href加一个#
* 第一天学习笔记- 定位资源(例:网页里面回到顶部)
- 如果想要定位资源:定义一个位置
<a name="top">顶部</a>
- 回到这个位置
<a href="#top">回到顶部</a>
例:引入一个标签<pre>
原样输出
- 如果想要定位资源:定义一个位置
7.表格标签
top
* 可以对数据进行格式化,使数据显示更加清晰
*<table></table>
:表示表格的范围- 属性 > border:表格线 > bordercolor:表格线颜色 > cellspacing:单元格直线距离 > width:表格的宽度 > hight:表格的高度 * 在table里面\<tr>\</tr> > 设置对齐方式 `align: left center right` * 在tr里面<td></td> > 设置显示方式 `align: left center right` * 使用th也可以表示单元格 > 表示可以实现居中和加粗
- 表格程序的写法:
- 首先定义一个表格的范围用table
- 定义一行使用tr
- 定义一个单元格用td
- 操作技巧
- 先数有多少行,数每行里面有几个单元格
*表格的标题
<caption></caption>
写在table下面
- 先数有多少行,数每行里面有几个单元格
- 合并单元格
- rowspan:跨行
- colspan:跨列
8.表单标签
top
1. 可以提交数据到开心网服务器,这个过程可以使用表单标签实现
2.<form></form>
:定义一个表单的范围
- 属性:action:提交到地址,提交到当前页面
method:表单的提交方式:
* get(默认):带数据提交
* post:不带数据提交
* enctype:文件上传需要设置,一般不需要设置- 面试题:get和post的区别
get请求地址栏带数据提交,post不会携带
get请求安全级别较低,post请求较高
get请求数据不小有限制,post没有限制4.输入项:可以输入内容或者选择内容的部分
- 大部分的输入项 使用
<input type="输入项的类型"/>
- 普通输入项:
<input tpye="text"/>
- 密码输入项:
<input type="password"/>
单选输入项:
<input type="radio"/>
在里面需要属性:name
name的属性值必须相同
实现默认选中的属性:checked=”checked”复选输入项:
<input type="checkbox"/>
在里面需要属性:name
name的属性值必须相同
实现默认选中的属性:checked=”checked”- 文件输入项:
<input type="file"/>
(文件上传使用) 下拉输入项(不是input标签里面)
<select name="birth"> <option value="0">请选择</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> </select>
实现默认选中的属性:selected=”selected”
文本域
<textarea cols="10"
row="10"></textarea>clos:行
row:列隐藏项 (不会显示在页面上,但是存在与html代码里面)
<input tpye="hidden"/>`
提交按钮
<input tpye="submit"/>
<input type="submit" value="注册"/>
- 使用图片提交
<input tpye="image" sre="图片路径"/>
重置按钮 回到输入项的初始状态
<input type="reset"/>
普通按钮
<input type="button" value="">
9.其它标签的使用
top
1. b:加粗
2. u:下划线
3. i:斜体
4. s:删除线
5. pre:原样输出
6. p:段落标签,剩余部分另起一个段落,比br标签多换一行
7. sub:下标
8. sup:上标
9. div:自动换行
10. span:在一行显示
注:CSS会一直使用div和span10.HTML的头标签
top
1. HTML分为两部分:head和body
2. 在head里面的标签就是头标* title标签:表示在标签页上显示的内容 * meta标签
<mete http-equiv="refresh" content="3,utl=http://www.baidu.com">
作用:可以作为页面的定时跳转
http-equiv:模拟一个请求
refresh:页面刷新
3:3秒之后
util:跳转路径<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
作用:html文件编程utf-8格式,没有乱码
http-equiv:模拟一个请求
content-tpye:文本类型
text/html:HTML类型的文件
charset=utf-8:字符设置成utf-8格式- base标签:超链接基本设置
<base target="_blank">
当前页面,所有超链接都在新窗口打开 - link标签:引入外部文件(可以引入CSS标签)
11.框架标签
<frameset>
- rows:按照行进行划分
<frameset rows="80,*">
- cols:按照列进行划分
<frameset cols="80,*">
- rows:按照行进行划分
<frame>
- 具体显示的页面
<frame name="lower_lest" src="b.html">
- 具体显示的页面
使用框架标签的时候,不能卸载body里面,使用了框架标签,必须把body去掉
<frameset rows="80,*"> <frame name="top" sre="a.html"> <frameset cols="80,*"> <frame name="lower_left" src="b.html"> <frame name="lower_right" scr="c.html"> </frameset> </frameset>
- 如果左边的页面超链接,想让显示右边的页面中
- 设置超链接里面属性 target的值设置成名称
<a href="01-hello.html" target="right">超链接1</a>