HTML学习笔记和基础练习

最新推荐文章于 2024-07-24 23:00:08 发布

begin 专注

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量208

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_61718994/article/details/122160005

版权

学习内容：HTML音频、视频、部分练习

HTML音频

<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

用法：

<audio src=" ./ 音频来源路径" controls></audio>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<audio src="./其实什么都没有.mp3" controls></audio>
	</body>
</html>

在火狐上运行结果：

常见属性：

src 音频的路径

sontrols 显示播放的控件

autoplay 自动播放（部分浏览器不支持）

loop 循环播放

HTML视频

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

用法：

<video src=" ./ 视频来源路径" controls></video>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<video src="ｂū会︶离开-张贤胜+金泫雅%20-%20Trouble%20Maker高清MV(超清).mp4" controls autoplay muted="">视频</video>
	</body>
</html>

在火狐上运行结果：

常见属性：

src 视频的路径

sontrols 显示播放的控件

autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）

loop 循环播放

特有的属性有：widht、height为视频定义宽、高。poster表示在用户点击播放按钮前播放器中显示的图片。

练习

练习一——招聘

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tupian {
				width: 600px;
				height: 400px;
				
			}
		</style>
	</head>
	<body>
		<h1>腾讯科技高级web前端开发工程师</h1>
		<hr >
		<h2>职位描述</h2>
		<p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
		<h2>岗位要求</h2>
		<p>
			5年以上前端开发经验，精通
		<strong>
			html5/css3/javascript等
		</strong>
		web开发技术；</p>
		<p>熟悉bootstrap，vue,angularjs,reactjs等框架，熟练掌握一种以上；</p>
		<p>代码风格严谨，能高保真还原设计稿，能兼容各种浏览器；</p>
		<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
		<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
		<p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
		<h2>工作地址</h2>
		<p>武汉市首义公园</p>
		<img src="./image1.png"class="tupian"></a>
	</body>
</html>

运行结果：

练习二——学生信息表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="600px" border="1" height="500px" >
			<caption ><h3>优秀学生信息表</h3></caption>
			<tr>
				<th>年级</th>
				<th>姓名</th>
				<th>学号</th>
				<th>班级</th>
			</tr>
			<tr>
				<td rowspan="2">高三</td>
				<td>张三</td>
				<td>110</td>
				<td>三年二班</td>
			</tr>
			<tr>
				<td>赵四</td>
				<td>120</td>
				<td>三年三班</td>
			</tr>
			<tr>
				<td>评语</td>
				<td colspan="3">你们都很优秀</td>
			</tr>
		</table>
	</body>
</html>

运行结果：

练习三——注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>青春不常在,抓紧谈恋爱</h1>
		<hr >
		<form action="" method="post">
			昵称：<input type="test" placeholder="请输入昵称" id="" value="" />
		</form>
		<table width="500">
			
			<!-- 第一行 -->
			<tr>
				<td>性别</td>
				<td>
					<input type="radio" name="sex" id="nan"><label for="nan">男</label>
					<input type="radio" name="sex"id="nv"><label for="nv">女</label>
				</td>
			</tr>
			<!-- 第二行 -->
			<tr>
				<td>生日</td>
			    <td>
				    <select>
					    <option selected>--请选择年--</option>
					    <option>1991</option>
					    <option>1992</option>
					    <option>1993</option>
					    <option>1994</option>
					    <option>1995</option>
					    <option>1996</option>
				    	<option>1997</option>
					    <option>1998</option>
					    <option>1999</option>
					    <option>2000</option>
				    </select>
				    <select>
					    <option selected>--请选择月--</option>
					    <option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
						<option>6</option>
						<option>7</option>
						<option>8</option>
						<option>9</option>
						<option>10</option>
						<option>11</option>
						<option>12</option>
					</select>
					<select>
						<option selected>--请选择日--</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
						<option>6</option>
						<option>7</option>
						<option>8</option>
						<option>9</option>
						<option>10</option>
						<option>11</option>
						<option>12</option>
						<option>13</option>
						<option>14</option>
						<option>15</option>
						<option>16</option>
						<option>17</option>
						<option>18</option>
						<option>19</option>
						<option>20</option>
						<option>21</option>
						<option>22</option>
						<option>23</option>
						<option>24</option>
						<option>25</option>
						<option>26</option>
						<option>27</option>
						<option>28</option>
						<option>29</option>
						<option>30</option>
						<option>31</option>
					</select>
				</td>
			</tr>
	        <!-- 第三行 -->
			<tr>
				<td>所在地区</td>
				<td>
					<form >
						<input type="text" value="北京思密达">
					</form>
				</td>
			</tr>
		    <!-- 第四行 -->
			<tr>
				<td>
				婚姻状况
				</td>
				<td>
					<input type="radio" name="state" id="weihun"><label for="weihun">未婚</label>
					<input type="radio" name="state" id="yihun"><label for="yihun">已婚</label>
					<input type="radio" name="state" id="lihun"><label for="lihun">离婚</label>
				</td>
			</tr>
			<!-- 第五行 -->
			<tr>
				<td>学历</td>
				<td>
					<form >
						<input type="text" value="幼儿园">
					</form>
				</td>
			</tr>
			<!-- 第六行 -->
			<tr>
				<td>
					喜欢的类型
				</td>
				<td>
					<input type="checkbox" name="leixing" id="fumei"><label for="fumei">妩媚的</label>
					<input type="checkbox" name="leixing" id="ke-ai"><label for="ke-ai">可爱的</label>
					<input type="checkbox" name="leixing" id="xiaoxianrou"><label for="lihun">小鲜肉</label>
					<input type="checkbox" name="leixing" id="laolarou"><label for="laolarou">老腊肉</label>
					<input type="checkbox" name="leixing" id="ok"><label for="ok">都喜欢</label>
				</td>
			</tr>
			<!-- 第七行 -->
			<tr>
				<td>自我介绍</td>
				<td>
					<form>
						<textarea >个人简介</textarea>
					</form>
				</td>
			</tr>
            <!-- 第八行 -->
			<tr>
				<td></td>
				<td>
                    <input type="submit"value="免费注册">
				</td>
			</tr>
			<!-- 第九行 -->
			<tr>
				<td></td>
				<td>
					<input type="checkbox" checked>我同意注册条款和会员加入标准
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<a href="#">我是会员,立刻登录</a>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<h3>我承诺</h3>
					<ul>
						<li>
							年满18岁、单身
						</li>
						<li>
							抱着严肃的态度
						</li>
						<li>
							真诚寻找另一半
						</li>
					</ul>
				</td>
			</tr>
	</body>
</html>

运行结果：

begin 专注

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记和基础练习

学习内容：HTML音频、视频、部分练习HTML音频<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。用法：<audio src=" ./ 音频来源路径" controls></audio>实例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></t
复制链接

扫一扫