04_JavaWeb回顾笔记
JavaWeb回顾笔记
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wh1nKopi-1605668744709)(F:\资料\Java\笔记\笔记\assets\javaweb阶段知识体系.png)]
Day01HTML
1.1HTML简介
HTML：
HyperText Markup Language，超文本 标记/标签 语言。
超文本: 超出了普通文本的能力
标记: 标签
W3C(World Wide Web Consortium)世界万维网联盟给我们定义好了这套标签
语法特点：
HTML文件后缀名是：.html或者.htm
不需要编译，可以使用浏览器直接打开(在浏览器中进行解释执行)
不区分大小写
HTML文件由一堆标签组成：
标签：<关键字>内容， <关键字/>自闭合标签
标签可以嵌套，但是最外层的根标签是`html`
属性：写在开始标签上，用于对标签做进一步修饰(后边会有专门的讲解)
浏览器可以对html的内容进行自动纠错
代码
HTML5页面默认声明，可以省略
html 页面根标签
head 页面的主要信息,给浏览器看
body 浏览器中显示给用户的内容
1.2文字标签
文字排版相关的标签有：
标题标签：h1~h6
默认加粗
内置字号：h1最大，h6最小
独占一行
横线标签/水平分割线：hr
color：横线的颜色
size：横线的粗细
width：横线的长短
algin：横线的水平位置。left/center（默认）/right
段落标签：p
algin：位置
换行标签：br
文字标签：font
color：文字的颜色
size：文字的大小，最小1，最大7，默认3
face：文字的字体
粗体字标签：b、strong
斜体字标签：i
1.3图片标签
属性
src：图片的路径，必须设置，而且要使用相对路径
width：图片显示的宽度
height：图片显示的高度。通常只加width或者只加height，图片会等比例缩放显示，而不会变形
title：鼠标悬浮提示
alt：图片加载不出来时，显示的文字描述
1.4列表、超链接、表格
1.超链接标签
href：跳转的路径
跳转到外部网页，一定得写协议
还能跳转到本项目的其它网页，我们同样的使用相对路径进行设置
target：在哪显示新页面，常用值有：
_self：在当前窗口显示（原页面被覆盖掉）
_blank：在新窗口显示
2.清单标签/列表标签
无序清单 - ...
disc：小圆点，默认值
circle：小圆圈
square：小方块
有序清单 - ...
1：阿拉伯数字序号
a/A：英文字母序号
i/I：罗马数字序号
3.基本表格：
作用:
展示大量数据
进行页面的布局（目前几乎不使用表格进行布局了，而会使用css+div）
table标签：表格本身
width：表格的宽度
height：表格的高度
align：表格的水平位置。left左，center中，right右
bgcolor：表格的背景颜色
cellspacing：单元格之间的间隔。设置为0，看起来是单线条
border：表格的边框
tr：行，作为table的子标签使用
bgcolor：表格的背景颜色
height：行高
align：行里内容的水平位置。left左，center中，right右
td：单元格
bgcolor：表格的背景颜色
align：单元格里内容的水平位置。left左，center中，right右
colspan：跨列
rowspan：跨行
th：表头单元格。
是一种特殊的td，用法和td完全相同
只是自带样式：内容加粗，并居中显示
caption：表格的标题
作为table的子标签使用
1.5文档声明和head标签
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>...title>
<meta name="Keywords" content="关键字1，关键字2，。。。" />
<meta name="description" content="描述。。。" />
<link rel="icon" href="http://www.jd.com/favicon.ico" type="image/x-icon" />
head>
<body>
<h1>一级标题h1>
body>
html>
1.6其它
颜色的写法
颜色的名称，比如：`red, blue, green, ...`
十六进制的色码，比如：#FF0000。如果六位数字一样，可以简写，比如：#666666简写成：#666
RGB表示法: 很少使用(255,255,255)
尺寸的写法
固定像素，比如：500px
百分比，比如：50%。 注意：根据父容器计算的百分比
路径的写法
绝对路径：
带盘符的路径（在web应用里是禁用的），比如：C:\a.jpg
url网址（要求是联网的），比如：http://www.xxx.com/aa.jpg
以/开头的路径（在web核心里有少量使用）
相对路径：
以./开头的，从当前文件夹里查找。./可以省略不写
以../开头的，从上级文件夹里查找
特殊字符的写法
有些字符是HTML 语法里需要使用的，比如：> <等等，这些字符就是特殊字符。
要使用实体字符代替特殊字符
< <
& &
> >
© ©
♠ ♠
♣ ♣
♥ ♥
♦ ♦
1.7媒体标签
1.audio 音频标签
1.8框架标签
1.框架标签：frame
框架标签在html5中已经淘汰，但后期某些项目中会使用到
2.应用场景
用于HTML4.01，框架主要用于后台管理系统的界面开发。在一个页面中引用了其它几个页面，每个页面是一个框架，整个构成了一个框架集。
3.与普通页面的区别：
1. 需要使用框架的DTD文件
2. 页面中没有body标签，而是使用frameset标签代替
4. frameset框架集的属性
rows 设置框架每1行的高度。 如：
rows="100,300,300" 表示有3行，第1行高100，第2行300，第3行300
rows="10%,90%" 表示有2行，第1行高占页面的10%，第2行占90%
rows="200,*" 表示有2行，第1行200个像素，剩下的给第2行
cols 设置框架每1列的宽度
5.frame框架的属性
属性名 作用
src 框架中显示的HTML文件
name 当前框架的名字
noresize 不能修改框架的尺寸
1.9内联框架iframe
1.iframe 元素会创建包含另外一个文档的内联框架（即行内框架），用于在一个页面中包含另一个页面或资源。可以把需要的文本放置在 之间，这样就可以应对无法理解 iframe 的浏览器。
2.
属性 值 描述
left
right
align top 不赞成使用。请使用样式代替。规定如何根据周围的元
middle 素来对齐此框架
bottom
frameborder 1/0 规定是否显示框架周围的边框。
height pixels/% 规定 iframe 的高度。
longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
""
allow-forms
allow-same-origin 启用一系列对