DOCTYPE:是一个文档声明--- 当前HTML版本以及约束
.dsd dsd约束 约束标签的顺序
.xsd 在框架中常用的约束:schema约束
一、HTML标签
1..HTML列表标签
HTML支持有序、无序和自定义列表标签。
无序列表
<ul>
<li>文本1</li>
<li>文本2</li>
<li>文本3</li>
</ul>
有序列表
<ol>
<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>
说明:
1)无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于<ul>,每个列表项始于<li>。
2)有序列表也是一列项目,不同的是,列表项目使用数字进行标记。有序列表始于<ol>标签,列表项也始于<li>。
3)自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,浏览器效果为从每行的顶格显示。每个自定义列表项的定义以<dd>开始,浏览器效果。
4)无序和有序列表项内部都可以使用段落、换行符、图片、链接以及其它列表等等。
2.HTML块元素和内联元素
可以通过<div>和<span>将HTML块元素组合起来。
2.1 HTML块级元素
大多数HTML元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器显示时,通常会以新行来开始(结束)。例如:<h1>,<p>,<ul>,<table>。
<div>标签
定义:
<div>可定义文档中的分区或节(division/section)
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式使之关联。
如果用id/class来标记<div>,那么该标签的作用会比那的更有效。
用法:
<div id/class="属性值">内容</div>
效果:<div>是一个块级元素。这意味着它的内容自动地开始一个新行,浏览器显示它的内容自动开始一个新行。实际上,换行是<div>固有的唯一格式表现,可以通过<div>的class或者id应用额外的格式。
2.2 HTML内联元素
内联元素在显示时通常不会以新行开始。例子如:<b>,<td>,<a>,<img>。
<span>:
定义:
<span>元素是HTML的内联元素,可用作文本的容器。<span>也没有特定的定义。当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。
用法:
<span>标签被用来组合文档中的行内元素。
注意:span没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对span使用样式,那么span元素中的文本与其它文本不会产生任何视觉上的差异。
属性:
id 用于标识单独的、唯一的元素。
class 用于元素组(类似的元素,可以理解为某一类元素)
可以应用这两个属性,对span应用样式。
3.表格标签
HTML语言中,表格是没有列的概念的,列的概念由单元格来体现。
<table></table> 表格标签
<tr></tr> 行标签
<td></td> 单元格标签
<th></th> 表头标签(自动加粗并且在单元格中加粗),定义在表格第一行的行标签中。
<caption></caption>标题标签(必须紧随table标签之后,只能对一个表格定义一个标题,通常会居中于表格之上)
范例:HTML表格
<html>
<body>
<table border="1">
<caption>caption用来命名表格标题</caption>
<tr>
<th>表格的表头在行标签中定义</th>
<th>第二列</th>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
</body>
</html>
<table>表格标签的属性
属性:border 指定边框大小。如果不定义边框属性,表格将不显示边框。
属性:width/height
属性:caption 标题 必须紧跟<table>标签之后。
属性:bgcolor 背景色
属性:对齐方式:align
属性:cellspacing 单元格边沿与边框线中间的空间
属性:cellpadding 单元格边沿与内容的空间的距离
说明:
1)数据单元格的内容可以是文本、图片、列表、段落、表单、水平线、表格等等。
2)如果不定义属性(border属性),表格将不显示边框。
3)没有内容的表格单元显示的不太好,如果某个单元格是空的(没有内容),浏览器可能无法显示单元格的边框。解决办法是:在空单元格加上一个空格占位符( ),这样就可以将单元格的边框显示出来。
表格的合并与拆分
合并 行合并:rowspan 列合并:colspan="2":2个单元格合并。
默认的拆分:
thead 头 tbody 体 tfoot 脚
拆分的作用:拆分之后解决用户体验差的问题
在一些特定的需求中,开发者可以将这三个标签置入到表格中。
开发者在表格中添加上面三个标签不会影响效果显示。后期通过表格拆分来完成一个特定需求。
4.超链接标签
HTML常使用超链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面,或者在本页面内进行跳转。超链接可以是一个字,一个词,一个句子或者是一张图片。当把鼠标指针移动到网页中的某个链接上时,箭头就会变成一只小手。
<a></a>超链接标签(通过<a>标签在HTML中创建链接)
属性:
href:创建指向另一个文档的链接,跳转到另一个文档(可以是本页面,也可以是另一个文档)。
name:创建文档内的书签,跳转至当前页面的某个位置,规定锚的名称。书签不会以任何特殊方式展示,它对读者是不可见的。也可以使用id属性来替代name属性,命名锚同样有效。
target:打开目标资源的一个方式。
属性值:_blank:新建一个窗口打开
_self:在当前窗口直接打开
用法:
<a href="#另一个文档的资源地址">显示在页面上的文本</a>
<a name="锚点名称">显示在页面上的文本</a>
如:
在HTML中对锚进行命名(创建一个书签)
<a name="tips">锚点(书签点)</a>
然后,在同一个文档中创建指向该锚的链接:
<a href="#tips">跳转到锚点</a>
作用:
超链接标签有两个作用:1)链接资源文件的跳转
2)作为锚链接来使用
说明:
1)可以使用id属性替代name属性,命名锚同样有效。
2)书签不会以任何特殊方式向读者显示,它对读者是不可见的。
3)可以在本页面或者其它页面创建锚链接,锚链接的使用:
<a name="top"></a> <!--锚点-->
在该页面的某个位置写到:
<a href="#top>跳转到顶部</a>
点击“跳转到顶部”即可跳转到该页面中“<a name="top"></a>”的位置
5.HTML图像标签
img标签<img 属性=属性值>
属性:src 链接图片 属性值:图像的url地址(必需)
属性:width/height(px/百分比) 100%平铺
属性:alt 替代文本,当图片失效时,来解释图片的文字。(必需)
属性:title标题属性
属性:align:对齐方式
src:属性,通过js方式来操作img的src属性改变图片。
说明:
1)img标签是一个空标签,只包含属性,没有闭合标签。
2)浏览器将图片显示在文档中图像标签出现的地方。
3)gif和jpg均可作为HTML背景图片。body标签的background属性设置背景图片。如果图像小于页面,图像会重复。可以通过CSS样式进行设置。
一些练习的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html标签练习</title>
</head>
<body>
<a id="top"></a>
<h5>使用无序列表</h5>
<ul>
<li>Java从入门到精通</li>
<li>HTML从入门到精通</li>
<li>Java Web从入门到精通</li>
</ul>
<h5>使用有序列表</h5>
<ol>
<li>Java从入门到精通</li>
<li>HTML从入门到精通</li>
<li>Java Web从入门到精通</li>
</ol>
<h5>使用自定义列表</h5>
<dl>
<dt>Java从入门到精通</dt>
<dd>Java IO</dd>
<dd>JVM</dd>
<dt>Java Web从入门到精通</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
</dl>
<h1>一个嵌套列表:</h1>
<ul>
<li>咖啡</li>
<li>茶</li>
<dl>
<dt>红茶</dt>
<dt>绿茶</dt>
</dl>
<li>牛奶</li>
</ul>
<style>
tbody tr:hover{
color="#0F0";
}
</style>
<thead>
<table border="1" align="center" width="1300px" height="200px">
<caption>商品清单</caption>
<tr>
<th>商品</th>
<th>数量</th>
</tr>
</thead>
<!--利用表格拆分的方式-->
<tbody>
<tr align="center">
<td>牛奶</td>
<td>2</td>
</tr>
<tr align="center">
<td>鸡蛋</td>
<td>5</td>
</tr>
<tr align="center">
<td>奶茶</td>
<td>4</td>
</tr>
</tbody>
</table>
<hr />
<a href="网页时钟.html" target="_blank" text-decoration="none">跳转到网页时钟页面</a><br/>
<a name="锚点"></a>
<img src="/网页时钟/img/3.jpg" width="100%" alt="广告" >
<a href="#top">跳转[顶部]</a>
</body>
</html>
网页时钟的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页时钟</title>
</head>
<body>
当前系统时间是:<span id="spanTip"></span>
<a href="before练习.html#锚点">返回</a>
</body>
<script>
function htmlDate(){
//1.创建日期对象
var date=new Date();
//2.获取当前系统时间,拼接为字符串
var dataStr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"
+date.getMinutes()+":"+date.getSeconds();
//3.dom操作:getElementId(id属性值)
var span=document.getElementById("spanTip");
//4.设置span标签的innerHTML属性
span.innerHTML=dataStr;
}
//定义定时器
setInterval("htmlDate()",1000);
</script>
</html>
结果:
6.表单标签
HTML表单用于搜集不同类型的用户输入。应用场景有注册和登录。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等。
form标签
<form></form>
属性:
action 定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到web服务器上的网页。如果忽略action属性,则action会被设置为当前页面。
method 规定在提交表单时所用的HTTP方法(默认是get())。如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息,使用get(),GET适用于少量数据的提交。浏览器会设定容量限制;如果表单正在更新数据,或者包含敏感信息(例如密码),使用post(),post()提交的数据在页面地址栏中是不可见的。
name:规定识别表单的名称(对于DOM使用:documents.forms.name)
target 规定action属性中地址的目标(默认是_self)
accept-charset 规定在被提交表单中使用的字符集(默认页面字符集)
autocomplete 规定浏览器应该自动完成表单(默认:开启)
enctype 规定被提交数据的编码
novalidate 规定浏览器不验证表单
<input>元素--最重要的表单元素
属性:
type
属性值:
text 定义常规文本输入 注意:文本字段的默认宽度是20个字符。
radio 定义单选按钮输入(选择多个选项之一),name的属性值必须一样才能实现单选。
submit 定义提交按钮(提交表单)
name 保证浏览器正确输出
checkbox 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。
number 用于应该包含数字值的输入字段 而且可以通过min和max设置最小值和最大值。
date 用于定义包含日期的输入字段,可以通过min和max进行设置。
color 用于应该包含颜色的输入字段。根据浏览器支持,颜色选择器会出现输入字段中。
email 用于应该包含电子邮件地址的输入字段。根据浏览器支持,能够在被提交时自动对电
子邮件进行验证。
value 规定输入字段的初始值。
readonly 规定输入字段为只读(不能修改),默认值为value的值。浏览器会显示,但不会修改。
disabled 规定输入字段是禁止的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。浏览器中会显示被禁用的值(value值),如果是文本输入的话,该框为灰色。
maxlength 规定输入字段允许的最大长度。如果输入超过设置的长度,浏览器会给输入内容加上红色的下划线,并且超过此长度的输入无效。
<fieldset></fieldset>用于组合表单中的相关数据。
<legend>标题</legend>用于给<fieldset>定义标题。
<select></select>下拉列表
<option></option>定义待选择的选项。列表通常会把首个选项设置为被选选项。
属性:selected 定义预定义选项
<textarea>元素定义多行输入字段(文本域)
<button>元素定义可点击的按钮
<datalist></datalist>规定预定义选项列表。
浏览器显示为:用户会在他们输入数据时看到预定义选项的下拉列表。
注意:input元素的list属性必须引用<datalist>元素的id属性。
说明:
1)action属性定义在提交表单时的动作。向服务器提交表单的做法通常是使用提交按钮。表单通常会提交到web服务器上的网页。如果省略action属性,则action属性会被设置为当前页面。
2)method属性用于规定在提交表单时的方法(get或post),默认是get方法。二者的区别是
a.get方式提交的数据大小有限制,一般不超过4Kb。
get方式提交的数据会显示到URL地址栏中。
http://localhost:8080/xxx.htmlusername=zhangsan&password=123456
b.post方式:
提交的数据大小无限制,提交的内容不会显示到地址栏中,但是网络数据中是可以实现的。
3)name属性保证提交的正确性。如果要正确地提交,每个输入字段必须设置一个name属性。
4)fieldset元素组合表单中的相关数据,在浏览器中显示为加了一个外边框。
5)textarea元素用于定义多行输入字段。可以设置默认字段(可以修改)。在浏览器中显示为一个文本框,可以通过rows和cols属性来设置文本框大小。
6)复选框checkbox的用法 如果选中,浏览器中显示为小方框中打勾。
<input type="checkbox" name="name1" value="value1">选项1
<input type="checkbox" name="name2" value="value2">选项2
<input type="checkbox" name="name3" value="value3">选项3
7)number属性,在浏览器中显示为用户在输入数据后,可以进行上增下减的修改。
8)date属性,在浏览器中显示为用户可以自己选择之前或之后的具体日期。
9)color属性,会根据浏览器支持的颜色,供用户选择。默认为黑色。颜色选择器会出现在输入字段中。
10)email属性,如果输入不是邮箱格式,浏览器将会提示“请在电子邮箱地址中包含@”,“输入的内容”缺少@。
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html标签练习</title>
</head>
<body>
<form>
username:
<input type="text"><br/>
password:
<input type="text"><br/>
<fieldset>
<legend>您的信息</legend>
First name:<br />
<input type="text" name="first name" value="里" disabled><br />
Second name:<br />
<input type="text" name="second name" maxlength="5"><br />
国家
<input type="text" value="中国" readonly><br/>
请选择性别:
<input type="radio" name="sex" value="男" checked>男<br />
<input type="radio" name="sex" value="女" checked>女<br />
请输入年龄
<input type="number" name="age" min="18" max="50"><br />
请输入手机号
<input type="text" name="cellphone"><br />
请输入出生年月
<input type="date" name="birthday"><br/>
请选择省份
<select name="province">
<option value="henan">河南</option>
<option value="shanxi">陕西</option>
<option value="hubei">湖北</option>
<option value="hebei">河北</option>
</select><br />
请选择您喜欢的颜色
<input type="color"><br/>
请输入您的邮箱
<input type="email"><br/>
请描述您的优点:<br />
<textarea name="message" rows="10" cols="30">
The weather feels fine on Saturday.
</textarea><br />
</fieldset>
<input type="submit" value="提交">
<p>datalist的用法</p>
</form>
<form action="action_page.php">
<input list="cars">
<datalist id="cars">
<option value="Benz">
<option value="Audi">
<option value="BMW">
<option value="Ford">
</datalist>
</form>
<p>checkbox复选框的用法</p>
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
<input type="checkbox" name="vehicle" value="Car"/>I have a car<br />
<input type="submit">
</form>
</body>
</html>
效果展示: