目录
HTML 基本知识
标题和段落
链接标签
图片标签
插入视频、音频
列表、表格
表单
HTML 基本知识
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
复制代码
说明:lang:HTML 标签的属性,这个属性表示这个页面的主体语言。zh-CN:lang 这个属性的值,表明这个页面的主体语言是简体中文,这个属性就是给访问用户的浏览器传输一个值:语言类型。
charset="utf-8":保证兼容性:可以保证不同的浏览器显示相同的内容。
<body></body>之间填写真正的页面内容。
复制代码
HTML 标签包括:文本标签、链接标签、多媒体标签
标签代表含义
p 段落标签,1、2、3…一次代表不同大小字体。
br (单个) 换行
hr(单个) 横线
&nbps(单个) 空格
pre 预定义文本
del(单个) 删除文本
ins(单个) 插入文本
b 粗体
u 下划线
i 斜体
big 放大字体
small 缩小字体
sup 上标
sub 下标
复制代码
链接标签
1、a标签(举例)
(target="_blank":表示在点击这个链接之后会跳转到一个新的页面而不是存在于当前的页面)
// An highlighted block
<a href="http://www.baidu.com" target="_blank">进入百度</a>
复制代码
图片标签
<img src="images/dzq2.jpg">
复制代码
插入视频、音频
这里只展示HTML5推荐使用的标签
(音频标签)
<audio controls="controls">
<source src="***.mp3" type="audio/mp3" />
</audio>
(视频标签)
<video height="***" width="***" controls="controls">
<source src="***.mp4" type="video/mp4" />
</video>
复制代码
列表、表格有序列表:ol
举例:
<!--下面表示的是一列四行-->
<ol>
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
</ol>
复制代码
无序列表:ul
举例:
<!--下面表示的是一列四行-->
<ul>
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
</ul>
复制代码
表格:
举例:
<!--border:设置边框-->
<table border="***">
<!-- 表名 -->
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>****</td>
<th>****</th>
<th>****</th>
<th>****</th>
<th>****</th>
</tr>
<tr>
<td>****</td>
<th>****</th>
<th>****</th>
<th>****</th>
<th>****</th>
</tr>
<tr>
<td>****</td>
<th>****</th>
<th>****</th>
<th>****</th>
<th>****</th>
</tr>
</tbody>
</table>
复制代码
说明: 定义表格结构:<table>...</table> 定义表格标题:<caption>...</caption> 定义表头:<th>...</th> 定义表格行:<tr>...</tr> 定义表格单元格:<td>...</td>
表单 type:文本框(text)单选框(radio)密码框(password)复选框(checkbox)多行文本框(textarea)name:文本框的名字(username)size:文本框的长度 method:方法 action:提交到什么地方
<form method="POST" action="">
<label>用户名:</label>
<input type="text" name="username" size="20">
<br>
<label>密码:</label>
<input type="password" name="password" size="20">
<br>
<label>性别:</label>
<input type="radio" name="gender" value="男"
<input type="radio" name="gender" value="女"
<br>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="">旅游
<input type="checkbox" name="hobby" value="">看书
<input type="checkbox" name="hobby" value="">游泳
<input type="checkbox" name="hobby" value="">唱歌
<br>
<label>个人介绍:</label>
<textarea name="saymyself" rows="10" cols="30"></textarea>
<br>
<label>所在地区:</label>
<select>
<option>***</option>
<option>***</option>
<option selected>***</option>
<!--默认选项:option selected-->
<option>***</option>
</select>
<br>
<input type="submit" value="提交">
</form>
复制代码
评论