HTML使用详解
介绍
HTML被称之为超文本标记语言,是用来创建网页的标准标记语言,通过一系列的标识,来规范网络上的文档格式。通常我们通过HTML来建立网站,然后由浏览器来解析我们的网站HTML标签;本文主要针对于HTML的使用进行一个简要介绍。
HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页标题</title>
</head>
<body>
</body>
</html>
概述:
<!DOCTYPE html> 标签声明为 HTML5 文档
<html> 标签元素是 HTML 页面的根元素
<head> 标签元素包含了文档的元(meta)数据,如: <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 标签元素描述了文档的标题
<body> 标签元素包含了页面可见的内容
HTML常用标签的使用
1.
说明:超文本标记语言规定以<html>开始,以</html>结束
2.
说明:块级元素标签,独占一行或是一块区域;使用方式是:<div>展示的内容</div>
3.
说明:内联元素标签,使用方式是:<span>展示的内容</span>
4.
说明:超链接标签,用于网站中的链接效果;使用方式:<a href=“链接地址” target="目标" title="说明">被链接内容</a>
5.
说明:换行标签,使用方式:<br/>
6.
说明:文本标签,使用方式:<p>内容</p>
7.
说明:标题标签,着重强调,使用方式:<h1>标题内容<h1>
8.
说明:文本加粗标签,使用方式:<b> 加粗内容</b>
9.
说明:文本加粗标签,使用方式:<strong> 加粗内容</strong>
10.
说明:强调标签,使用方式:<em> 强调内容</em>
11.
说明:斜体标签,使用方式:<i> 斜体内容</i>
12.
说明:下划线标签,使用方式:<u > 下划线内容</u>
13.
说明:图片标签,使用方式:<img src="图片路径" width="175" height="47" alt="说明" />
14.
说明:水平线标签,使用方式:<hr/>
15.
说明:表单标签,使用方式<form action="" method="get">
</form>或
<form
action="" method="post"> </form>
16.
说明:表单布局中会遇到label标签的使用,使用方式:<label>文本内容</label>
17.input标签
说明:输入框标签,使用方式:<input type="输入框类型" value="value值" />
18.
说明:文本区域表单标签元素,使用方式:<textarea
name="DIVCSS5" cols="30" rows="4"> </textarea>
19.
说明:下拉表单,使用方式:
<select name="">
<option value="0">DIVCSS5</option>
<option value="1">DIVCSS5</option>
</select>
20.
说明:多选框,语法结构:<input name="Fruit" type="checkbox"
value="" />
21.
说明:单选框,语法结构:<input name="Fruit" type="radio"
value="" />
22.
说明:表格,语法结构:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
23.
说明:<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签,语法结构:
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>
24.
说明:有序列表标签元素,使用方式:
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
25.
说明:无序列表标签元素,使用方式
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
26. link标签
说明:用于引用外部样式表链接
27.
说明:放置JavaScript脚本或引用外部脚本
28.
说明:常用于关键字,网页介绍,作者,编码格式的声明
29.
说明:头部标签,主要包含:meta,title,link,script,style等标签
30.
说明:常用于定义内部样式表
31.
说明:包含网页可见的内容,除head包含外