【Java Web_01】HTML
一、浏览器介绍
1. 浏览器内核
① 五大浏览器
Edge(IE)【微软】
Firefox【火狐】
Chrome【谷歌】
Safari【苹果】
Opera【欧鹏】
② 内核
Trident ---> Edge(IE)
Gecko ---> Firefox【火狐】
Bink ---> Chrome【谷歌】
webkit ---> Safari
Presto ---> Opera【欧鹏】2. 浏览器标准
* Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
* 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
* 结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分3. web概述
① JavaWeb：
* 使用Java语言开发基于互联网的项目
② 软件架构：
* C/S: Client/Server 客户端/服务器端
⚪ 在用户本地有一个客户端程序，在远程有一个服务器端程序
如：QQ，迅雷...
⚪ 优点：
用户体验好
⚪ 缺点：
开发、安装，部署，维护 麻烦
* B/S: Browser/Server 浏览器/服务器端
⚪ 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
⚪ 优点：
开发、安装，部署，维护 简单
⚪ 缺点：
如果应用过大，用户的体验可能会受到影响
对硬件要求过高
③ B/S架构详解
* 资源分类：
⚪ 静态资源：
使用静态网页开发技术发布的资源。
特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。
浏览器中内置了静态资源的解析引擎，可以展示静态资源
⚪ 动态资源：
使用动态网页及时发布的资源。
特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器二、HTML
1. 骨架格式
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>2. 标签
① 标签分类
* 围堵标签
格式：<标签名> 内容 </标签名>
例如：<body>HelloWorld</body>
* 自闭合标签
格式：<标签名 />
例如：<br />
② 标签关系
* 嵌套关系
<head>
<title> </title>
</head>
* 并列关系
<head></head>
<body></body>
③ 文档类型
* <!DOCTYPE>
* 位于文档的最前面，用于向浏览器说明当前文档使用哪种标准规范，必需在开头处使用<!DOCTYPE>标签
为所有的XHTML文档指定HTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
④ 字符集
* <meta charset="UTF-8">
* UTF-8 包含全世界所有国家需要用到的字符
BIG5 繁体中文，港澳台等用
gb2312 简单中文，包括6763个汉字
GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
⑤ HTML标签
* 标题标签 【<hn>标题内容</hn>】 n 越大字越小
h1 标签重要，尽量少用，不要动不动扔一个h1。 一般 h1 都是给 logo 使用。
* 段落标签 【<p>文本内容</p>】
默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
* 水平线标签 【<hr />】
在网页中显示默认样式的水平线
* 换行标签 【<br />】
强制换行显示
* div/span
是没有语义，是我们网页布局主要的2个盒子
* 文本格式标签
【<b></b> <strong></strong>】 加粗
【<i></i> <em></em>】 斜体
【<s></s> <del></del>】 删除线
【<u></u> <ins></ins>】 下划线
* 标签属性 【<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>】
⚪ 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
⚪ 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
⚪ 任何标签的属性都有默认值，省略该属性则取默认值。
* 图像标签 【<img src="URL" />】
src ---> UPL ---> 图片路径
alt ---> 文本 ---> 图片不能显示
title ---> 文本 ---> 鼠标悬停时的内容
wideh ---> 像素 ---> 图片宽度
height ---> 像素 ---> 图片高度
border ---> 数字 ---> 设置图像边框的宽度
* 链接标签 【<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>】
⚪ href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
⚪ target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
⚪ 外部链接 需要添加 http://pic37.nipic.com/20140113/8800276_184927469000_2.png
⚪ 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
⚪ 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
⚪ 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
* base 标签 【<base target="目标窗口的弹出方式">】
⚪ 设置整体链接的打开状态
⚪ 位于<head> </head>之间
* 注释 【<!-- 注释语句 -->】
* 无序列表 【ul】
⚪ 无顺序级别之分，是并列的
square ---> ◾
disc ---> ●
circle ---> ○
⚪ 例如：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
* 有序标签 【ol】
⚪ 有排列顺序的列表，其各个列表项按照一定的顺序排列定义
⚪ 例如：
<ol type="A" start="4"> <!-- 用ABCD标号，从第四个开始 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
* 自定义列表
⚪ 常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
⚪ 例如：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
⑥ table 表格
* 格式
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
* table 用于定义一个表格。
* th 用户定义表中的字段
* tr 用于定义表格中的一行，必须嵌套在 table 标签中，在 table 中包含几对 tr 就有几行表格。
* td 用于定义表格中的单元格，必须嵌套在 tr 标签中，一对 tr 中包含几对 td 就表示该行中有多少列（或多少个单元格）。
* 表格属性
border ---> 像素 ---> 表格边框宽度
cellspacing ---> 像素 ---> 单元格边框之间的间距
cellpadding ---> 像素 ---> 单元格内容与边框的间距
width ---> 像素 ---> 表格宽度
height ---> 像素 ---> 表格高度
align ---> left、center、right ---> 表格对齐方式
* 其他标签
⚪ <thead></thead>：用于定义表格的头部。
必须位于 table 标签中，一般包含网页的logo和导航等头部信息。
⚪ <tbody></tbody>：用于定义表格的主体。
位于 table 标签中，一般包含网页中除头部和底部之外的其他内容。
* 合并单元格
⚪ 跨行合并：rowspan
⚪ 跨列合并：colspan
⑦ form 表单
* 表单域】
⚪ 格式
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
⚪ Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
⚪ method
用于设置表单数据的提交方式，其取值为get或post。
⚪ name
用于指定表单的名称，以区分同一个页面中的多个表单。
* input 控件
type ---> text 单行文本框
password 密码输入框
radio 单选框
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式提交按钮
file 文件域
name ---> 自定义 控件名称
value ---> 自定义 默认文本值
size ---> 正整数 显示宽度
checked ---> checked 默认选中
maxlength ---> 正整数 允许输入的最大字符数
* label标签
⚪ 用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点
⚪ 例如：
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
⚪ for 属性规定 label 与哪个表单元素绑定
* textarea控件(文本域)
⚪ 需要输入大量的信息，就需要用到 textarea 标签。通过 textarea 控件可以轻松地创建多行文本输入框
⚪ 例如：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
* 下拉菜单
⚪ 格式
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
⚪ select 中至少应包含一对 <option></option。
⚪ 在 option 中定义 selected =" selected "时，当前项即为默认选中项。3. HTML5
① 常用新属性
* placeholder
<input type="text" placeholder="请输入用户名">
占位符提供可描述输入字段预期值的提示信息
* autofocus
<input type="text" autofocus>
规定当页面加载时 input 元素应该自动获得焦点
* multiple
<input type="file" multiple>
多文件上传
* autocomplete
<input type="text" autocomplete="off">
规定表单是否应该启用自动完成功能
* required
<input type="text" required>
必填项
* accesskey
<input type="text" accesskey="s">
规定激活（使元素获得焦点）元素的快捷键
② 多媒体标签
* embed：标签定义嵌入的内容
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf"
allowFullScreen="true" quality="high" width="480" height="400" align="middle"
allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
* audio：播放音频
<audio src="URL"></audio>
* video：播放视频
<video src="URL" controls="controls"></video>
* 附加属性
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录