XHTML 指可扩展超文本标记语言(EXtensible HyperText Markup Language)。
并没有引入任何新标签或属性,唯一得区别是语法,XHTML有着更严格语法
(比如:不允许大写字母,标签必须闭合等严格规范。)
XHTML2 不向前兼容,乃至不兼容之前得 HTML。
它是一种全新得语言,赤条条来去无牵挂。这着实是一场灾祸
超文本应用技术事变组(WHATWG)。
WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
HTML5 指的是HTML的第五次重大修改(第5个版本)
2004年提出草案,2008年正式发布;
HTML5 既支持疏松语法,也支持 XHTML 1.0 版本的严格语法。
一、 HTML基本语法
常规标记(双标记) (标签 标记 元素)
<标签 属性=“属性值” 属性=“属性值 属性值”></标签>
空标记(单标记)
<标签 属性=“属性值” 属性=“属性值”/>
说明:
1.写在<>中的第一个单词叫做标记,标签,元素。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标记没有结束标签,但是必须关闭,用“/”代替。 <meta />
5.一个属性可以有多个属性值,多个属性值之间用空格隔开,不分先后顺序。
二、 HTML常用标记
1)文本标题(h1-h6)
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
2) 段落(p)
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
3)空格 ( )
(所占位置没有一个确定的值,这与当前字体字号浏览器都有关系.)
4)换行(br)
<br /> 换行是一个空标记(强制换行)
5)加粗
加粗有两个标记
1.<b>加粗内容</b>
2.<strong>加粗内容</strong> 有突出强调之意
6)倾斜
倾斜标记
1.<em></em>
2.<i></i>
标签嵌套,不可相交
7)水平线
<hr /> 空标记
8)列表(ul,ol,dl)
HTML中有三种列表,分别是:无序列表,有序列表, 自定义列表
*无序列表
无序列表组成:
<ul>
<li></li>
<li></li>
<li></li>
......
</ul>
属性 type="square(实心方块)/circle(空心圆)/disc(实心圆)"
*有序列表
有序列表组成:
<ol>
<li></li>
<li></li>
<li></li>
......
</ol>
属性 type="1/a/A/i/I" start="数字"
*自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
......
</dl>
多应用于图文混排;
9)插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下
路径:绝对路径、相对路径;
绝对路径:不需要参照物,放哪里都能找到,可以跨盘符(本地的图片不可跨电脑);
相对路径:当前文件为参照物,从当前文件出发去寻找目标文件,不可跨盘符;
*相对路径的写法:
1)当 当前文件与目标文件在同一目录下,直接书写 目标文件(文件名+扩展名);
2)当 当前文件与目标文件所处的文件夹在同一目录下,写法如下:
文件夹名/目标文件全称+扩展名;
3)当 当前文件所处的文件夹和目标文件所处的文件夹在同一目录下,写法如下:
../目标文件所处文件夹名/目标文件文件名+扩展名;
title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,
HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,
它会直接输出在原本加载图片的地方。
10)超链接的应用
语法:
<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>
属性:target 页面打开方式
属性值:_blank 新窗口打开 ; _self 当前窗口打开
<a href="#" target="_blank">新页面打开</a>
<a href="#">链接</a> 空链接
拓展:
定义书签:<a href="#one">第一处</a>
<a name="one">我在这^_^</a>
邮箱跳转:<a href="mailto:906823104@qq.com">906823104@qq.com</a>
文件下载:最好是压缩包; <a href="FeiQ.rar">下载飞秋</a>
11) 数据表格的作用及组成
作用:显示数据
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注:个tr表示一行;一个td表示一列(一个单元格)
*数据表格的相关属性
1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bgcolor="表格的背景色"
5)cellspacing="单元格与单元格之间的间距"
6)cellpadding="单元格与内容之间的空隙"
7)对齐方式:align="left/center/right";(写在td身上)
8)合并单元格属性:
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;
12) 表单
表单的作用:用来收集用户的信息的;
1、表单框
<form name="表单名称" method="post/get 提交方式" action="目标地址"> </form>
1)文本框
<input type="text" value="默认值"/>
2)密码框
<input type="password" />
<input type="password" placeholder="密码" />
placeholder 占位符
3)提交按钮
<input type="submit" value="按钮内容" />
4)单选框/单选按钮
<input type="radio" name="ral" />
<input type="radio" name="ral" />
<input type="radio" name="ral" checked="checked" />(默认选中)
5)复选框/复选按钮
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (禁用)
当属性值与属性名相同时,属性值可以省略不写
6)重置按钮
<input type="reset" value="按钮内容" />
7)下拉菜单
<select name="">
<option>菜单内容</option>
<option selected>菜单内容</option> 默认被选中
</select>
8)多行文本框(文本域)
<textarea name="textarea" cols="字符宽度" rows="行数" style="resize:none;">
</textarea>
style="resize:none;" 不可拖拽
9)普通按钮按钮
<input name="" type="button" value=“按钮内容” />
(他和submit的区别是 :
submit 是提交按钮 起到提交信息的作用,
reset 重置按钮,起到重置的作用,
button 只起到跳转的作用,不进行提交,只是一个普通按钮。
13)div的用法
<div></div> 没有语义,不携带任何默认样式
文档区域,文档布局对象
14) span的用法
<span></span>文本结点(某一小段文本,或是某一个字)
宽高由内容支撑
html的注释
<!--注释内容-->