HTML5
今天主要学习HTML5,了解前端知识。
- HTML5:HyperText Markup Language,是超文本标记语言,是一种用于创建网页的标准标记语言
- HTML5的解释器是浏览器,windows下主要用火狐和谷歌浏览器。写代码的时候建议使用submit text3记事本来书写,注意要安装一个element模块,方便以后代码的书写。
- 今天主要学习了:文本,列表,图像,链接,表格,表单,音视频等
- 书写时时用标签<>来完成
排头
<!DOCTYPE html>选择使用哪种html语言;<html lang="en">语言;<head>头部;<meta charset="UTF-8">编码格式;<title>Document</title>标题;<body>显示的代码全部写在body里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
文本
一共有6级标题,h1------h6
<h1>hello,world!</h1>
<h2>nihaoshijie</h2>
<hr>
<!--<p>段落标签 或者是段尾<br>-->
<p><ins>床前</ins>明月光<sub>1</sub></p>
<p>疑似地上霜<sup>2</sup></p>
<p>举头望<del>明月</del></p>
<p>低头思<strong><em>故乡</em></strong></p>
<q>走的人多了,也就成了路</q>
<h3>罗浩的个人爱好</h3>
列表
列表一共有3种列表,ul无序列表,ol有序列表,dl有序和有注释列表
<ul>
<li>阅读</li>
<li>听歌</li>
<li>音乐</li>
</ul>
<dl>
<dt>
<!-- 一般不会直接在里面更改标签-->
<img src="./images/house.png" alt="房子" >
</dt>
<dt>听歌</dt>
<dd>每天12点准时收听英雌岩区</dd>
<dt>阅读</dt>
<dd>每天晚上12点阅读金瓶梅</dd>
<dd>每天晚上11点阅读英雄志</dd>
图像
<img src="./images/house.png" alt="房子" >
链接
页面链接,锚链接,功能性链接
<a id="top"></a>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="http://www.easou.com">搜一下</a>
<a href="index.html">我的首页</a>
<a href="#top">回顶部</a>
<a href="mailto:jackfrued@126.com">联系站长</a>
表格
表格里可以进行复杂的操作:比如合并同类项,合并单元格,居中对齐等等
<table border="1">
<caption>学生成绩表</caption>
<thead>
<tbody>
<tr>
<th>班级</th>
<th>姓名</th>
<th>python</th>
<th>分数</th>
</tr>
<tr>
<td rowspan="2">1801</td>
<td>张三</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>李四</td>
<td>3</td>
<td>2</td>
</tr>
<tr>
<td>1802</td>
<td>王五</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>1803</td>
<td>邹六</td>
<td>5</td>
<td>6</td>
</tr>
</thead>
</tbody>
</table>
表单
主要是对input,form等的应用
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend>必填信息</legend>
<!--value是默认值,placeholder相当于input -->
<p>
<!--单选框 -->
<input type="text" name="username" placeholder="请输入您的用户名" required"">
</p>
<p>
<input type="password" name="password" placeholder="请输入您的密码" required>
</p>
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<p>
<!--复选框 -->
<input type="checkbox" name="fave" checked>阅读
<input type="checkbox" name="fave">唱歌
<input type="checkbox" name="fave">旅游
<input type="checkbox" name="fave">游玩
<input type="checkbox" name="fave" checked>游戏
</p>
<p>
<input type="date" name="birthday">
</p>
<p>
<input type="email" name="email" placeholder="请输入您的邮箱">
</p>
<p>
<select name="provr" id="">
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<!-- selected 默认要选的值, select下拉-->
<option value="四川" selected="四川">四川</option>
</select>
</p>
<p>
<!--文本驱 -->
<textarea rows = "5" cols = "30" name = "intro"></textarea>
</p>
<p>
<input type="file" name="file"> <!--上传照片 -->
</p>
</fieldset>
<legend>可选信息</legend>
<p>
<!--submit 填写 reset 重置 -->
<input type="submit" value="立即注册">
<input type="reset" value="重新填写">
</p>
音视频
<audio controls autoplay>
<source src="./resourses/bgmusic.mp3">
</audio>
<video controls width="800">
<source src="./resourses/XXX.mp4">
</video>
网友评论