HTML 超文本标记语言 Hyper text mark up language
1、超文本就是指页面可以包含图片,链接,甚至音乐,程序等非文字元素
2、超文本标记语言的结构包含“头”部分,“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容
3、html和htm
html=htm,只是前一个是全称的,后一个是简写的,没什么区别的
为什么会出现两种文件格式呢?
htm源于古老的8.3文件格式,DOS操作系统下只能支持长度为3的后缀名,所以是htm,但在windows下无所谓,html是长文件的格式命名的,所以htm是为了兼容过去的DOS命 名格式存在的,但效果上没有区别的,以前htm和html作为不同的服务器上的超文本文件,现已经通用了
8.3文件格式是什么?
这是一种在老的16位win95或win98文件系统的短文件名文件格式,扩展名只限于3位,文件名只限于8位,如果要与一个15位的系统交互,你就不能用长文件名,而必须对它进行转换
4、
XML (xtentsible markup language)
可扩展标记语言,是用来定义其他语言的一种元语言,前身是SGML标准通用标记语言,没有标签集,没有语法规则,有句法规则
xml和html的区别:
(1)html不区分大小写,xml严格区分
(2)在xml中严格的树状结构,绝对不能省略掉结束标记
(3)xml中,拥有单个标记的而没有匹配的结束标记用/字符作为结尾,这样分析器就不用查找结束标记了
(4)xml中属性值必须写在引号中,在html中引号可不用
(5)在html中,可以拥有不带值的属性名,在xml中,所有属性都必须带有相应的值。
(6)在xml文档中,空白部分不会被解析自动删除,但是html会过滤掉空格。
常用标签:
1、<a> 标签定义超链接,用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性,它指定链接的目标。
在所有浏览器中,链接的默认外观如下:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
2、
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素,div独占一行
3、h1,h2,h3,h4,h5,h6,标题标签,字体逐渐变小
4、
<p> 标签定义段落。
5、
<span> 用于对文档中的行内元素进行组合。
表格:
1、边框
a.如果不定义边框属性,表格将不显示边框
b.使用边框属性来显示一个带有边框的表格,如下:
<table border="1">
</table>
2、表头 使用th标签定义
大多数浏览器会把表头显示为粗体居中的文本
<table border="1">
<tr>
<th>heading</th>
<th>another heading</th>
</tr>
3、行 用tr标签表示
单元格 用td标签表示
4、表格的标题 用<caption>标签表示
代码如下:
<table border="1">
<caption>信息表</caption>
<tr>
<td>姓名</td>
<td>电话</td>
</tr>
<tr>
<td>李雷</td>
<td>13322224567</td>
</tr>
5、跨行、跨列
跨行用rowspan标签表示
跨列用colspan标签表示
横跨两列的单元格:
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>李雷</td>
<td>123456123</td>
<td>男</td>
</tr>
浏览器效果:
横跨两行的单元格:
<table border="1">
<tr>
<th rowspan="2">姓名</th>
<td>电话</td>
</tr>
<tr>
<td>李雷</td>
</tr>
浏览器效果:
6、单元格边距 cellpading 标签来创建单元格内容与其他边距之间的空白
<h3>带有cellpadding</h3>
<table border="1" >
<tr>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>30</td>
<td>40</td>
</tr>
</table>
浏览器效果:
设置cellpadding属性值为10时的效果:
7、单元格间距,cellspacing
<h3>带有cellspacing</h3>
<table border="1" cellspacing="20">
<tr>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>30</td>
<td>40</td>
</tr>
</table>
浏览器效果:
可以清晰的看见单元格之间的距离变大了
表单
1、输入框:
多数情况下被用到的表单标签是输入标签<input>。
输入类型是由类型属性(type)定义的。
2、文本域 text
<form>
用户名:<input type="text" name="user">
</form>
placeholder 可描述字段预期值的简短的提示信息,该提示会在用户输入值之前显示在输入字段中,例:
<form>
用户名:<input type="text" name="user" placeholder="请输入用户名">
</form>
浏览器效果:
当鼠标点击到输入框中时,请输入用户名的文本就不再显示。
3、密码字段:
密码字段可以通过标签<input type="password">来定义
<form>
用户名:<input type="text" ><br>
密码: <input type="password" >
</form>
4.下拉列表 如下:
浏览器效果:
selected 属性是一个布尔属性。
selected 属性规定在页面加载时预先选定该选项,当前是蓝色为预先选定的选项。
5.复选框 checkbox
浏览器显示:
6.单选框 radio
浏览器效果:
7、按钮组:
button | 普通按钮 |
submit | 提交 |
reset | 重置 |
image | 图像形式的按钮 |
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">