HTML:Hyper Type Marker Language(超文本标记语言),可以对字体,视频音频等进行渲染;但是结构不严谨,标签可以不成对出现,浏览器解析文件时会自动补全。
XML:可扩展标记语言,结构严谨,标签必须成对出现,标签可以自定义。(JavaEE核心基础中的一种)
HTML是网页内容的载体,CSS样式是表现,JavaScript是用来实现网页上的特效效果
HTML
HTML文件结构
<html>
<head>...</head>
<body>...</body>
</html>
转义字符
转义字符:
- 版权所有:
©
- 注册商标:
®
- 2个空格:
 
- 左尖括号:
<
- 右尖括号:
>
HTML文本标签与注释
注释:<!--注释文字-->
标题标签(h1–h6):<h1>标题</h1>
段落标签:<p></p>
段落缩进:<blockquote></blockquote>
是一种小引用
滚动标签:<marquee></marquee>
- 设置滚动方式,来回滚动:
<marquee behavour="alternative"></marquee>
- 设置滚动方式:滚动一次:
<marquee behavour="slide"></marquee>
- 设置滚动方向:
<marquee direction="up"></marquee>
- 设置滚动区域背景颜色:
<marquee bgcolor="pink"></marquee>
文本原样输出标签:<pre></pre>
水平线(空标签):<hr/>
上标标签:<sup></sup>
下标标签:<sub></sub>
换行标签(空标签):<br/>
居中标签:<center></center>
块内标签:<div></div>
在浏览器中占一整行,会自动换行
行内标签(用在块内标签中):<span></span>
列表标签:
-
有序列表(默认列表是实心圆点,在ul标签中使用type属性设置列表项类型:type=“circle” :空心圆点;type="square"菱形 ):
<ul> <li>XXX</li> <li>XXX</li> </ul>
-
无序列表(默认数字123,设置属性可以为type=“A”)
<ol typr="A"> <dt>XXX</dt> <dt>XXX</dt> </ol>
超链接标签:
- 默认在当前页面直接打开:
<a herf="链接地址">XXX</a>
- 在新建窗口打开:
<a herf="链接地址" target="-blank">XXX</a>
超链接的两个作用: - 1.链接资源文件/地址
- 2.作为锚链接使用(同一页面中) 步骤:
- 1)打锚点(做一个跳转目的地标记)
<a name="foot"></a>
- 2)创建跳转链接
<a herf=#锚点名称></a>
/在不同页面中:<a herf=资源链接地址#锚点名称></a>
- 1)打锚点(做一个跳转目的地标记)
常见协议:
file:// 本地文件协议
http://
mailto:邮件协议
thunder:迅雷协议
http://执行流程:
链接地址(url)就是域名,通过DNS域名解析系统得到IP地址,这个IP地址是与域名绑定的,通过运行商对目的ip服务器请求响应,获得需要的内容。
在实际url域名请求时,系统首先会找系统中的hosts文件,如果是本地文件,则对应的ip是本地回环ip
如果在本地找不到域名对应的IP,就会调用网卡进行联网操作,访问网络运用商,通过网络运营商(如移动运营商)间接向目标服务器(如百度服务器(一般是服务器集群))发起请求
图像标签:<img src=“”></img>
- 图片的高度和宽度属性(单位为像素):
height=“500px”/width="200px"
- 图片链接失效时图片的替换文本解释说明图片的文字属性:
alt="XXX"
- 鼠标悬浮图片时的文字描述属性:
title="XXX"
- 为图片标签赋ID值:
id="img1"
url/uri:uri中包含了各种网络协议,url是uri的子集
表格标签:html中没有列的概念,列是通过一个单元格td来表现
表格标签:<table></table>
- 边框:border:Xpx
- 背景色:bgcolor
- 宽度和高度:width/height
- 对齐方式:align
- 设置单元格边沿和边框线之间的空间:cellspacing
- 设置单元格和内容之间的空间:cellpading
行标签:<tr></tr>
- 对齐方式:align
单元格:<td></td>
- 合并行:rowspan
- 合并列:colspan
表头:<th></th>
自动加粗居中
表格中的标题:<caption></caption>
表格效果的呈现:table标签中包含tr标签,tr标签中包含td标签
表格标签默认拆分:
thead 头
tbody 体
tfoot 脚
因为浏览器解析引擎解析html文件时遇到table标签,会将table标签中的每一行的内容用tbody包含起来,让用户体验更好
如果不进行拆分,就会将table的整个标签加载完毕之后才能去访问里面的内容,用户体验差,开发者在表格中添加上面三个标签不会影响效果展示,将表格拆分后,每一小部分加载完毕后就可以进行访问
后期会通过表格的拆分完成一个特定的功能:CSS选择器—伪类选择器(表格中的行,经过鼠标选择后就变成其他的颜色)
输入标签:<input></input>
- 单选按钮:type=“radio” value=“XXX”
- 复选框:type=“checkbox” value=“XXX”
- 隐藏域:type=“hidden” 隐藏携带数据
- 提交:type=“submit” value=“XXX”
- 重置:type=“reset” value=“XXX”(情况input标签中的内容)
- 普通按钮:type=“button” value=“XXX”
- name属性是一个标记,若是要将当前内容提交到后台,是后台需要的具体内容,则name是必填项:name=“XX”
- 禁用输入框的输入功能:disabled=“disabled”
事件编程三要素:
1.事件源 :input标签
2.编写事件监听器:在<script></script>
标签中编写函数
3.注册事件监听器
下拉菜单功能:
<select >
<option value="XXX">xxx</option>
<option value="XXX">xxx</option>
</select >
- multiple属性:多选
文本域标签:<textarea></textarea>
- 设置文本的行数:rows
- 设置文本的一行的字符数:cols
表单标签:可以用于登陆或注册
<form action="后台服务器地址:url链接" method="提交方式:get/post">
<input type="text" id=“username” name="name"></input>
<input type="submit" value="注册"></input>
</form>
- action:提交的url地址,一般是后台地址
- method:提交方式,常用:get(在地址栏明文显示为http://localhost/xxx.htmlusername=XXX&password=XXXX,不安全,提交的数据大小有限,不超过4kb)/post(不在地址栏显示,在请求协议中以键值对的形式明文显示显示,提交数据大小无限制)
- onsubmit事件:当前表单提交是否成功:返回值为true表示提交成功,否则失败
- 给表单标签提供默认值 placeholder
- 表单标签中使用input标签组成完整的表
密码加密:MD5/SpringSecurity
框架标签
一个frame即框架标签中包含一个html页面,当包含多个html页面的时候,不能称之为frame,而是frameset即框架集,frameset标签不能和body共存
框架集标签:
- 横向划分,当前分割成几个html页面占的权重百分比:rows=“n%,n%,…”
- 竖向划分,当前分割的几个frame,所占的权重百分比:cols=“n%,*”,(*代表剩余空间)
框架标签:<frame/>
(空标签)
- 链接html页面:src=“XXX.html”
- 链接所需要的超链接位置,name属性值需要和超链接标签的target属性值一致