HTML文档采用目录树这样一种结构,基本结构如:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>
第一行声明浏览器要以标准模式解析该文档,根标签是<html></html>
,有两个子标签,<head></head>
头部不在网页内容中显示,主要用途是描述网页的信息,
<body></body>
中的内容将在网页中显示,这是一种固定的格式。
如下HTML文档将介绍基本HTML标签的使用:
<!doctype html> <!--声明浏览器要以标准模式解析该html页面 -->
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 编码方式-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content=""> <!--content属性后面接自己定义的一些关键字,便于浏览器搜索 -->
<meta name="Description" content=""> <!-- 对网页的描述信息,-->
<!-- http-equiv="Refrash" refrash属性后面呢接content="2;http://www.baidu.com/"表示两秒过后跳转到百度首页 -->
<meta http-equiv="Refresh" content="2;http://www.baidu.com/">
<link rel="icon" href="https://www.baidu.com/favicon.ico"><!-- 引用了百度的logo-->
<!-- 表示网页的标题-->
<title>html常用标签使用</title>
</head>
<body>
<!-- h1~h6 从大到小显示标题,有占行,隔行效果 属于块级标签-->
<h1>标题1</h1>
<h2>标题2</h2>
<!--段落标签,有占行、隔行的效果,也属于块级标签-->
<p>仰天大笑出门去,我辈岂是蓬蒿人</p>
<!-- 字体倾斜标签 ,内联标签-->
<em>多线程编程</em><br/><!换行标签,属于单标签-->
<!-- 字体加粗,内联标签 -->
<b> Django框架</b>
<!--删除标签-->
<del>你大爷的</del>
<!--上标,下标标签,内联标签-->
a<sup>2</sup>
H<sub>2</sub>O
<!--关于显示图片的标签, 属于内联标签,src属性值是图片URL地址,宽高各位200px,500px(像素),alt属性表示当图片不能加载后显示描述信息 title值表示当鼠标指向该图片后提示内容-->
<img src="pictures\1.jpg" height="300px" width="200px" alt="加载失败" title="V先生">
<!--a标签是内联标签,使用方法一,作为连接跳转,target="_blank"表示新建一个标签页-->
<a href="http://www.baidu.com/" target="_blank">百度</a>
<!--使用方法二,作为锚点,在本页面进行跳转,结合以下例子,在网页底部定义一个a锚点标签,点击后会跳转到p标签所在的地方-->
<p id="top">网页顶部</p>
<div style="width:200px;height:700px;background:gray;"></div>
<a href="#top">到网页顶部</a>
<!--关于列表的使用,ol有序列表,ul无序列表,dl,自定义列表,属于块级标签 了解即可-->
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
<dl>
<dt>列表标题</dt>
<dd>列表</dd>
<dd>列表</dd>
<dd>列表</dd>
</dl>
<!--表格的使用-->
<!--table属性中,width,height给表格加限制宽高,border=“1px”给表格加边框,默认是没有的,align="center"让表格居中显示,cellspacing表示单元格与单元格之间的距离,cellpadding表示单元格边框与内容之间的距离-->
<table width="200px" height="200px" border="1px" align="center" cellspacing="0px" cellpadding="4px">
<!--caption属性表示表格的标题名字-->
<caption>成绩</caption>
<tr>
<th>语文</th> <!--th标签与td标签相比可以让内容居中显示并且加粗-->
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td rowspan="2">jkj</td> <!--rowspan属性让该标签独占两行,rowspan可以让该标签独占两列-->
<td colspan="2" align="center">jkj</td>
</tr>
<tr>
<td>kjk</td>
<td>kjk</td>
</tr>
</table>
<!--form表单的使用,action属性表示提交到表单信息到那个URL,method表示提交方式-->
<form action="" method="post">
<!--input标签属于内联标签,我们可以用p标签包含该input标签表现出块级标签的效果,不同
的type属性值会展现出不同的效果,由于是以键值对的方式提交的服务器,name值表示键,value属性值会根据type类型表示该值-->
<p>用户名<input type="text" name="username"></p>
<p>密码<input type="password" name="psword"></p>
<br>
<!--复选框-->
爱好:
篮球<input type="checkbox" name="hobby" value="basketball">
足球<input type="checkbox" name="hobby" value="football">
其他游戏<input type="checkbox" name="hobby" value="playgame">
<br><br>
<!--单选框-->
男<input type="radio" name="sex" value="male">
女<input type="radio" name="sex" value="female">
<!--下拉框-->
<br>所在城市
<select name="city">
<option value="山西">山西</option>
<option value="河北">河北</option>
<option value="河北">河北</option>
<option value="河北">河北</option>
</select><hr><!--hr标签表示分割线-->
<!-- label标签与input标签结合起来使用-->
<label for="text">姓名</label>
<input id="text" type="text" name="name"><br>
<!--表单内容重置,value值表示重置按钮的值,也就是我们看到的值-->
<input type="reset" value="reset"><br>
<!--提交按钮-->
<input type="submit">
</form>
</body>
</html>
常用特殊符号在HTML文档中的表示方法;
表示一个空格
< > 表示<>
© 表示商标商标符号