HTML5学习笔记
HTML详解
1、初识HTML
什么是HTML
- Hyper Test Markup Language(超文本标记语言)
2、网页基本信息
2.1、第一个网页和网页基本标签
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="狂神说java，西部开源">
<meta name="keywords" content="这里可以学java ">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<p>青春如歌，礼赞中国”主题演讲比赛评分标准</p>
<p>一、比赛规则：演讲比赛评分：采取100分制。</p>
<p>1、主题鲜明、中心突出，结构严谨、层次清晰，内容正确、联系实际，选材典型、杜绝抄袭。</p>
<p>普通话标准，声音洪亮，语速适当，语调仰扬顿挫，富有变化。</p>
<p>表情丰富，动作得体、手势自然，服装适宜。</p>
<!--水平标线-->
<hr>
<h1>字体样式</h1>
粗体：<strong>I love you</strong>
斜体：<em>I love you</em>
<!--特殊符号-->
空 , , , , , , , , , ,格
<br>
>
<br>
<
<br>
©版权所有
</body>
</html>
2.2、图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
src:图片地址（必填）
相对地址（推荐使用），绝对地址
../ --上一级目录
alt：图片名字-->
<a name="down"></a>
<img src="../resources/坚持喜欢的人.jpg" alt="黄静雯" title="吴上旺喜欢的人儿" width="500" height="500">
</body>
<a href="链接标签.html#down">跳转 </a>
</html>
2.2、超链接标签及应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a href="top">顶部</a>
<!--
href:必填，表示要跳转到那个页面
_blank:在新的标签中打开
_self: 在自己的网页中打开
-->
<a href="1、我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<hr>
<p><a href="1、我的第一个网页.html" target="_blank">
<img src="../resources/坚持喜欢的人.jpg" alt="黄静雯" title="吴上旺喜欢的人儿" width="500" height="500">
</a></p>
<p><a href="1、我的第一个网页.html" target="_blank">
<img src="../resources/坚持喜欢的人.jpg" alt="黄静雯" title="吴上旺喜欢的人儿" width="500" height="500">
</a></p>
<p><a href="1、我的第一个网页.html" target="_blank">
<img src="../resources/坚持喜欢的人.jpg" alt="黄静雯" title="吴上旺喜欢的人儿" width="500" height="500">
</a></p>
<p><a href="1、我的第一个网页.html" target="_blank">
<img src="../resources/坚持喜欢的人.jpg" alt="黄静雯" title="吴上旺喜欢的人儿" width="500" height="500">
</a></p>
<p><a href="1、我的第一个网页.html" target="_blank">
<img src="../resources/坚持喜欢的人.jpg" alt="黄静雯" title="吴上旺喜欢的人儿" width="500" height="500">
</a></p>
<a href="#top">回到顶部</a>
<a href="图像标签.html#down">跳转</a>
<a name="down"></a>
</body>
</html>
2.3、块元素和行内元素
- 块元素
-
无论内容多少，该元素独占一行
-
（p、h1~h6）
-
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a.strong.en...）
-
2.4、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>前端</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>前端</li>
</ul>
<!--自定义列表
dl :标签
dt :列表名称
dd :列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>前端</dd>
<dd>运维</dd>
<dd>后端</dd>
</dl>
</body>
</html>
2.5、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
tr :行
td :列
-->
<table border="1px">
<tr>
<td colspan="4"> 学生成绩</td>
</tr>
<tr>
<td rowspan="2">吴上旺</td>
<td>语文</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">黄静雯</td>
<td>语文</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
2.6、媒体和音频
<body>
<!--音频和视频
src:资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../resource/video/片头.mp4" controls autoplay></video>
<audio src="../resource/萤火虫和你.mp3"></audio>
</body>
2.7、iframe内联框架
<body>
<!--iframe内联框架
src :地址
w-h :宽度高度
-->
<iframe src="" name="hello" frameborder="0" width="1000" height="800">拍一拍</iframe>
<a href="1、我的第一个网页.html" target="hello">点我拍一拍</a>
</body>
2.8、表单及应用
2.8.1、表单的post和get提交
post提交
比较安全，传输大文件
get提交
可以在url中看到我们提交的信息，不安全，高效
2.8.2、文本框和单选框
<!--
文本输入框：input type="text"
-->
<form action="1、我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="psw" placeholder="请输入密码" ></p>
<p>
<!--
单选框标签
input type="radio"
value : 单选框的值
name : 表示组，组相同才能单选
-->
性别：<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
2.8.3、按钮和多选框
<!-- 多选框 -->
<p>
爱好：<input type="checkbox" value="basketball" name="hobby">打篮球
<input type="checkbox" value="swimming" name="hobby" checked>游泳
<input type="checkbox" value="chicket" name="hobby">吃鸡
<input type="checkbox" value="TiMi " name="hobby">打王者
</p>
2.8.4、列表框文本域和文件域
<!-- 文本域-->
<p>反馈：
<textarea name="textarea" id="text" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" name="files">
</p>
2.8.5、其他应用
<!-- 邮箱验证-->
<p>邮箱
<input type="email" name="email">
</p>
<!-- URL-->
<p>url
<input type="url" name="url">
</p>
<!-- 数字-->
<p>商品数量
<input type="number" name="num" max="100" min="1" step="10">
</p>
<!-- 滑块-->
<p>音量
<input type="range" name="music" min="1" max="100">
</p>
<!-- 搜索-->
<p>搜索
<input type="search" name="ser" id="mark">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">点我试试</label>
<input type="text" >
