表示空格:“& nbsp;”
<br>表示换行
使用HBuilderX写出的案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<!--标题标签-->
<h1 align="center">标题1</h1>
<h2>我是2号标题</h2>
<h3>我是3号标题</h3>
<h4>我是4号标题</h4>
<h5>我是5号标题</h5>
<h6>我是6号标题</h6>
<!--列表标签
ol<orderlist> + li 有序
ul<unorderlist> + li 无序
type 定义列表符号,默认是 disc 小圆点-->
<ol>
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ol>
<ul type="square">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="disc">
<li>
<a href="http://bd.xitong18.com/" target="_blank">
中国
</a>
</li>
<li>
<a href="http://bd.xitong18.com/" target="_blank">
美国
</a>
</li>
<li>小日本</li>
</ul>
<!--图片标签-->
<img src="1.jpeg" border="2px" width="100px" height="100px"/>
<!--超链接标签
target中代表的是如何打开网页,默认当前页面打开(_self)新窗口打开(_blank)-->
<a href="http://bd.xitong18.com/" target="_blank">
<img src="1.jpeg" border="2px" width="100px" height="100px"/>
</a>
<a name="top"></a>
<!--锚定:回到一个固定位置-->
<a href="#top">返回顶部</a>
<!--输入框-->
<input type="text"/>
<input type="password" placeholder="手机号"/> <br />
<input type="number"/>
<input type="date"/><br />
<input type="radio"/> 男
<input type="checkbox"/>狼
<input type="button" value="点击"/>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试表格标签</title>
</head>
<body>
<!--table向网页中插入表格
tr表示行元素,td表示行里的列元素
bgcolor背景颜色,cellspacing:行间距
colspan:合并列 rowspan:合并列-->
<table border="3px" width="500px" height="50px"
bgcolor="pink" cellspacing="0px">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td rowspan="2">2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
<table border="2px" cellspacing="0px">
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td colspan="3">1</td>
</tr>
</table>
</body>
</html>
表单标签(form):比表格标签多了数据提交的功能,需要对提交按钮标签设置为submit
下拉框:select(下拉)+option(选项)
文件上传:<input typr="file"/>
文本域:<textarea></textarea>
综合案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>学生信息管理系统</h1>
<form>
<table>
<tr><td>姓名:</td></tr>
<tr>
<td>
<input type="text" placeholder="请输入姓名..." name="name">
</td>
</tr>
<tr><td>年龄:</td></tr>
<tr>
<td>
<input type="text" placeholder="请输入年龄" name="age">
</td>
</tr>
<tr>
<td>性别:(单选框):
<input type="radio" name="seg" value="1">男
<input type="radio" name="seg" value="0">女
</td>
</tr>
<tr>
<td>爱好:(多选框)
<input type="checkbox" name="aihao" value="1">足球
<input type="checkbox" name="aihao" value="2">篮球
<input type="checkbox" name="aihao" value="3">皮球
</td>
</tr>
<tr>
<td>学历:
<select name="grade" id="">
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">研究生</option>
<option value="4">博士</option>
</select>
</td>
</tr>
<tr>
<td>入学日期:</td>
</tr>
<tr>
<td><input type="date" value="date" name="date"></td>
</tr>
<tr>
<td>
<input type="submit" name="submit">
<input type="button" value="取消">
</td>
</tr>
</table>
</form>
</body>
</html>
视频与音频都可借助H5来使用
<audio controls="controls">
<source src="res/1.mp3"><source />
</audio>
<video controls="controls" loop="loop" width="300px">
<source src="res/1.mp4"><source/>
</video>