HTML基础标签汇总
一、概念
HTML（ HyperText Markup Language ）超文本标记语言是一种用于创建网页的标准标记语言。
二、重要的理解
当今最为流行网页三门专用语言：HTML 、CSS、JavaScript 。
- 这三大语言作用：
- HTML 定义了网页的内容（身体）
- CSS 描述了网页的布局（ 外观衣帽）
- JavaScript 控制了网页的行为（五官感受和表达表现）
三、代码描述
下面以举例标签罗列出来，作为HTML学习开始的第一课。我直接在代码中备注或文字描述方便查看。
<!-- 文档类型声明 声明必须位于 HTML5 文档中的第一行-->
<!DOCTYPE html>
<!-- 网页语言定义 -->
<html lang="zh-cn">
<!-- 文档头部分 -->
<head>
<!-- 标题部分 -->
<title>HTML标签类型举例</title>
<!-- 定义视口标签格式 宽度等于设备的宽度 初始化大小 最大最小为1倍，用户不能缩放大小-->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 定义css文件链接 -->
<link href="css/mui.css" rel="stylesheet" />
</head>
<!-- 文件主体部分开始 -->
<body>
<!-- Javascript定义 -->
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<!-- 标题 -->
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>我的第一个段落。</p>
<p>我的第二个段落。</p>
<!-- 链接 -->
<a href="http://www.baidu.cn" target="_blank">网络链接-百度 新窗口打开</a> <br>
<a href="http://www.baidu.cn" target="_self">网络链接-百度 本窗口打开</a> <br>
<a href="#" target="_blank">网络链接-空链接 </a><br>
<a href="images/logo.rar"> --下载链接 </a><br>
<a href="#container"> --锚点链接 </a> <br>
<!-- 换行 -->
<br>
<!-- 图片显示,title为鼠标点击显示文字 width和height为图片的宽高 alt为图片没有时显示的文字-->
<img loading="logo" src="myweb/images/logo.jpg" title="tp-link的logo" width="180" height="74" /><br>
<img loading="logo" src="myweb/images/null.jpg" alt="图片找不到啊！" />
<!-- 水平线 -->
<hr>
<!-- 文本 -->
<font size="6">这是6号字体文本</font><br>
<font size="5">这是5号字体文本</font><br>
<font size="4">这是4号字体文本</font><br>
<font size="3">这是3号字体文本</font><br>
<font size="2">这是2号字体文本</font><br>
<font size="1">这是1号字体文本</font><br>
<b>加粗</b> <br>
<del>删除</del> <br>
<ins>下划线</ins><br>
<em>着重</em><br>
<i>斜体</i><br>
<small>小字号</small><br>
<strong>加重语气</strong><br>
<sub>上标</sub>
<sup>下标</sup><br>
<code>一段电脑代码 print("Hello World")</code><br>
<abbr title="World Health Organization">WHO</abbr>是个缩写
<br>
前面有2空格 <br>
<小于号 <br>
>大于号 <br>
<address>
我是一个地址
</address>
该段落文字从左到右显示。<br> <bdo dir="rtl">该段落文字从右到左显示。</bdo>
<br>
<button type="button">我是按键</button>
<!-- 表格 -->
<table align="center" border="1" cellpadding="5" cellspacing="0" height="200" width="300">
<thead>
<tr>
<th>表格第一列</th>
<th>表格第二列</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>
<!-- 列表 -->
<h4>列表:</h4>
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<ol>
<li>有序列表200</li>
<li>有序列表100</li>
<li>有序列表1 </li>
</ol>
<dl>
<dt>自定义列表头</dt>
<dd>自定义列表内容1</dd>
<dd>自定义列表内容2</dd>
</dl>
<!-- 表单 -->
<h4>表单:</h4>
<form action="demo.php" method="post" name="form1">
用户名：<input type="text" name="user" id="loginName" value="admin" maxlength="10" /><br>
密码：<input type="password" name="ps" id="userPassword" value="admin" /> <br>
性别：
<label for="male">男</label>
<input type="radio" name="sex" id="male" value="男" checked="checked" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" value="女" /><br>
多选：
<label for="eatID">吃饭</label>
<input type="checkbox" name="eat" id="eatID" value="吃饭" />
<label for="sleepid">睡觉</label>
<input type="checkbox" name="sleep" id="sleepid" value="睡觉" checked="checked" /> <br>
<select>
<option value="">广东</option>
<option value="" selected="selected">湖南</option>
<option value="">江西</option>
</select><br>
<textarea rows="4" cols="32">文本域---多行文本显示输入</textarea>
<br><br>
<!-- 按钮 -->
<input type="submit" name="" id="" value="提交按钮--将表单数据提供给后台" /> <br>
<input type="reset" value="重置按钮--将表单值重置为默认值" /><br>
<input type="button" name="" id="" value="普通按钮--配合js使用" /> <br>
<input type="file" name="" id="" value="上传文件 " /> <br>
</form>
<!-- 布局盒子 -->
<h4>布局的盒子：div 和 span </h4>
<div id="container" style="width:720px;style=height:1280px;float:left;">
<div id="header" style="background-color:#FFA500;height:100px;">
<h1 align="center" style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:500px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:500px;width:620px;float:left;">
内容在这里<br>
<span id="sp">布局span1 </span> <span id="sp2">布局span2</span>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © company.cn</div>
</div>
<br>
<!-- 主体部分结束 -->
</body>
<!-- 网页结束 -->
</html>
四、代码执行效果
五、结束
网页的学习从这里开始，万事开头难，我终于可以开始了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
