本文详细介绍了HTML的基本概念和元素，包括标题、样式、链接、图片、表单、框架、CSS样式等内容。讲解了HTML如何定义网页结构，如何通过meta标签设置元数据，如何使用style和link引入CSS，以及script标签的使用。此外，还涵盖了表格、列表、多媒体、表单元素、会话跟踪、Cookie、监听器和JSP相关知识，如EL和JSTL的使用。
HTML ：超文本标记语言
网页(HTML文档)的扩展名: .html或.htm
HTML是一种客户端浏览器解释的语言，不用经过编译。
模式的声明方式：
•Html5中的声明方式如下: <!DOCTYPE html> 严格模式
网页头信息使用<head>标签声明，标签内包含如下子标签：
•title标签：用来声明网页的标题
•meta标签：用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词等。
•style标签：用来内嵌css样式
•link标签：用来引入css样式文件
•script标签：用来引入javascript程序。
meta标签设置网页的搜索关键字:
keywords－关键字：当前网页关键字，能够更容易让搜索引擎搜索到
<meta name=“keywords” content="淘宝,服装">
在网页中定义CSS样式：
<style type="text/css">
body{
font-family: 楷体;
font-size: 60px;
}
</style>
链接外部样式表并设置图标:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="icon" href="img/people.ico" />
script标签：用来引入javascript程序
•src属性：规定了规定外部脚本文件的URL，一般为javascript程序文件。
•type属性：属性规定脚本的MIME 类型为text/javascript（可以省略）。<head>
<script src="js/index.js" type="text/javascript"></script>
</head>
网页中的特殊字符:
© 一个版权号
< 一个小于号
> 一个大于号
一个空格
HTML中的注释: <!--<p>abcd</p>-->
属性的声明语法:
<标签名 属性名= "属性值" 属性名= "属性值">xxx </标签名>
标签中的公共属性:
id：规定当前元素在网页上的唯一标识，一般在css、js中会根据id检索当前元素。
name：当前元素在文档上的名称，可以重复。
块级元素举例：div p h1 h2 h3 h4 form ul ol dl标签等
内联元素举例：a b br i span 标签等
网页的预设标题，h1最大，h6最小。
p标签：是段落（paragraph）的缩写，块级元素。
div标签：一般配合css对网页内大块区域进行布局。块级元素。
span标签：一般用来包裹非特殊显示文本进行，内联元素。
<u>北京中软国际</u> 下划线
<strong>北京中软国际</strong> 加粗
<em>北京中软国际</em> 斜体
<hr noshade="noshade"> 水平线不带阴影
<br> 换行
超链接：
<a href="url地址" target="打开方式" title="提示文字">内容</a>
相对路径：需要访问的网页资源与当前网页资源路径的相对位置。
"." --代表目前所在的目录。
".." --代表上一层目录。
"/" --代表根目录。
target属性:规定在何处打开链接文档，取值范围：
•_blank: 在新窗口中打开链接文档
•_self: 默认，在相同的框架中打开被链接文档。
•_parent: 在父框架集中打开被链接文档。
•_top: 在整个窗口中打开被链接文档。
加入图片:
<img title="美颜1" alt="美颜1" src="img/ad01.jpg" align="middle/top/bottom"/>顶部对齐
marquee滚动标签
◆语法<marquee>Hello, World</marquee>
◆常用事件
onMouseOut="this.start()" 当鼠标移出该区域时
onMouseOver="this.stop()" 当鼠标移入该区域时
◆常用属性
behavior alternate:来回滚动scroll:重复滚动slide:不重复滚动
bgcolor：活动字幕的背景颜色
direction：left right up down
height: 设定活动字幕的高度
width: 设定活动字幕的宽度
Loop:设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1
scrollamount: 设定活动字幕的滚动速度（像素）
scrolldelay: 设定活动字幕滚动两次之间的延迟时间（毫秒）
有序列表:
<ol type="I"><li>用户管理</li><li>部门管理</li><li>岗位管理</li></ol>
无序列表:
<ul type="circle空心圆/square正方形"><li>用户管理</li><li>部门管理</li><li>岗位管理</li></ul>
自定义列表:
<dl>
<dt>系统管理</dt>
<dd>用户管理</dd>
<dd>部门管理</dd>
<dd>岗位管理</dd>
<dt>设备管理</dt>
<dd>用户管理</dd>
<dd>部门管理</dd>
<dd>岗位管理</dd>
</dl>
表格的标签组成
•table标签：表格标签
•caption标签：表格标题
•thead标签：表头单元格容器。
•tbody标签：表体单元格容器
•tfoot标签：表尾单元格容器
•tr标签：表格中的行。
•th标签：表头中的单元格。
•td标签：表体或表尾单元格
表格属性：
•border(边框)属性：border=“number”
•background(背景)属性：background =“背景图片”
•bgcolor(背景颜色)属性：bgcolor= “颜色”
•width、height属性：width= “300”height=“200"
•align:表格的位置由<table>元素的align属性决定，可选值包括left、center、right。
•valign:表格内文字的位置是由<td>的align和valign决定的，valign可选值包括top、middle、bottom。
•cellpadding(填充)属性: 设置单元格边框与内容之间的距离。
•cellspacing(间距)属性: 设置单元格之间的距离。
表单标签介绍
•form标签：表单元素（其余标签）标签的容器标签
•input标签：用于用户信息输入的标签。
•button标签：按钮标签。
•select/option标签：下拉框标签。
•textarea标签：文本域标签。
•lable标签：修饰输入元素的文字标签。
表单元素标签公有的属性（html4标准）
•id：表单标签的唯一索引，一般在js中根据唯一索引获取表单元素。
'•name：表单标签的名称，在提交数据时，以name属性作为实际值的索引。
•disabled:禁用当前表单元素。
•readonly：规定表当前表单元素为只读元素。
•value：设定或获取当前表单元素的输入值。
readonly只针对input(text / password)和textarea有效。
disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
•method的设定
•取值范围•get:声明本次请求的目的是从服务器获取数据。
•post：声明本次请求的目的是向服务器传送数据。
•get与post的区别
•提交数据长度不同，get：不超过255个字符，post理论上不受限制。
•get在地址栏显示信息，不安全
•get请求的地址会保存到浏览器的访问历史记录中，post不会。
输入类标签
•text：文本框，type的默认值，
•password：密码框，密码框的文字以黑点方式显示。
•hidden：隐藏框，元素不显示，可以通过此标签提交用户不可见信息如id等。
输入框的的特殊属性:
size="8" ：同时显示8个汉字
maxlength="5" 最多输入5个字符
选择类标签
•checkbox：多选框。
•radio：单选框，表单中name属性相同的radio，只能有一个被选中
设置默认选中项，加入checked="checked"
定义文件选择框并设置属性：
<input id="uname" name="uname" multiple="multiple" accept="image/gif,image/jpeg" type="file"/>
multiple="multiple"： 可以选择多文件
accept="image/gif,image/jpeg" : 仅支持图片的选择
按钮类标签。
•button：按钮标签。
•submit：提交按钮标签，默认行为是提交当前form表单。
•reset：重置按钮标签，默认行为是当前表单恢复到网页初始化状态。
html5中定义按钮的方式：
<button type="button/submit/reset"><div>大家好</div></button>
定义下拉列表框:
<select name="year" id="year">
<option value="1984">1984年</option>
<option value="1985" selected="selected">1985年</option>
<option value="1986">1986年</option>
<option value="1987">1987年</option>
</select>
select标签私有属性
•multiple： 规定可选择多个选项。
•size：规定可见下拉框选项的数量。
option标签私有属性
•selected: 当前下拉明细项是否被选中。
多行文本框：
<textarea name="remark" cols="40" rows="6">个人</textarea>
textarea标签：设定多行的文本输入控件。
私有属性
•cols: 规定文本区内的可见宽度。
•rows: 规定文本区内的可见行数。
•maxlength: 文本输入的最大字符数量。
定义框架：<iframe name="f" src="http://www.4399.com" width="100%"
height="400" noresize scrolling="yes"></iframe>
<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=yes"/>
设置网页可视区域，取值如下，一般用作手机端
①width：可视区域宽度(数值/device-width)
height：可视区域高度(数值/device-height)
②initial-scale：初始缩放比例
③maximum-scale：最大缩放比例
④minimum-scale：最小缩放比例
⑤user-scalable：是否允许用户缩放(yes/no)
以黄色背景显示工资: <p>我的工资是:<mark>1000000</mark>元</p>
进度条： <progress id="p" max="100" value="0" style="width: 600px;"></progress>
加载Flash：<embed src="img/flash9017.swf" width="300" height="300"
最低0.47元/天 解锁文章
扫一扫
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
