HTML相关概念的介绍及HTML5结构和标签

最新推荐文章于 2024-08-02 20:11:41 发布

linzhiqiang_leo

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量890

点赞数 2

分类专栏： html5基础知识文章标签： html html5 标签结构

html5基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
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）

<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中有三种列表，分别是：无序列表，有序列表，自定义列表

*无序列表

无序列表组成：

属性 type="square(实心方块)/circle（空心圆）/disc（实心圆）"

*有序列表

有序列表组成：

属性 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 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 只起到跳转的作用，不进行提交,只是一个普通按钮。