网页基本信息
<!-- DOCTYPE——规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息，一般用来做SEO -->
<meta charset="UTF-8">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<body>
hello word
<!--body代表网页主体-->
</body>
</html>
网页效果如下：
网页基本标签
标题标签
在body里：
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p>这是段落标签</p>
<p>爱你孤身走暗巷</p>
<p>爱你不跪的模样</p>
<p>爱你对峙过绝望</p>
换行标签
这是换行标签，后面加不加/斜杠都行 <br/>
爱你孤身走暗巷<br/>
爱你不跪的模样
爱你对峙过绝望
水平线标签
同样加不加斜杠都可以<hr/>
爱你孤身走暗巷<hr/>
爱你不跪的模样<hr/>
爱你对峙过绝望<hr/>
粗体标签
<strong>爱你孤身走暗巷</strong> //粗体
<em>爱你不跪的模样 </em> //斜体
爱你对峙过绝望
特殊符号
- 1.空格： ；
- 2.大于号：>；
- 3.小于号：< ;
- 4.版本号：© ;
图片标签
<!--
src：表示地址，可以是相对地址，也可以是绝对地址
相对地址：../resources/image/1.gif
绝对地址：D:\ideaceshi\html\resources\image\1.gif
alt：当图片不存在时提示~
title：悬浮停留显示文字
-->
<img src="../resources/image/1.gif" alt="图片不见~" title="达咩达咩">
超链接
<!--
a标签
href：要跳转的网页，也可以图片跳转
target：表示窗口在那里弹出
_blank表示打开一个新的页面
_self表示在当前页面打开
-->
<a name="top">顶部</a>
<a href="1.我的第一个html.html" target="_blank">点击跳转</a><br/>
<a href="https:www.baidu.com" target="_self">点击跳转至百度页面</a><br/>
<!--
锚链接
1.需要一个锚链接标记 这里需要用name或者id属性进行标记
<a name="top">顶部</a>
2.跳转到标记
#
-->
<a href="#top">点击跳转至顶部</a>
<!--功能性链接
邮件链接：mailto
QQ链接：qq推广
-->
<a href="mailto:[email protected]">点击联系</a>
行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6...）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一起
- （a.strong.em...）
列表
有序ol——无序ul——自定义dl
<ol>
<li>java</li>
<li>html</li>
<li>mysql</li>
<li>mvc</li>
<li>liunx</li>
</ol>
<ul>
<li>java</li>
<li>html</li>
<li>mysql</li>
<li>mvc</li>
<li>liunx</li>
</ul>
<dl>
<dt>学科</dt>
<dd>liunx</dd>
<dd>liunx</dd>
<dd>liunx</dd>
</dl>
表格标签
<!-- 表格 table
行--tr rows
列--td
colspan-跨列 相当于word的集中单元格
rowspan--跨行 相当于word的集中单元格
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
媒体元素
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
---------------------------
video：视频
audio：音频
autoplay为什么不自动播放？
首先造成这个问题的原因在于chrome浏览器为了防止网页广告,
在2018年取消了自动播放功能,需要手动配置。”-->
<!--<video src="../resources/video/大摆锤加长版.mp4" controls autoplay></video>-->
<audio src="../resources/video/1.mp3" controls autoplay></audio>
页面结构分析
- header：标题头部区域的内容
- footer：标记底部区域的内容
- nav：导航类辅助内容
内联框架
<!--iframe Google浏览器可能将网站标记为“恶意”
iframe 内联框架
src：地址
frameborder：0和1 开启或者关闭边框
target：要跳转的界面
-->
<iframe src="1.我的第一个html.html " name="haibai" frameborder="0"
width="800px" height="800px" ></iframe>
<a href="https://www.baidu.com" target="haibai">点击跳转</a>
表单
<h1>注册页面</h1>
<!-- form：表单
action：表单提交的位置，可以是网站，也可以是请求处理的地址
method:get,post提交方式
get：可以查看到提交的信，高效但不安全
post：比较安全，传输较大的文件
submit：提交按钮
reset：重置按钮
button：普通按钮
image：图像按钮
-->
<form action="1.我的第一个html.html" method="post">
<p>姓名： <input type="text" name="username"></p>
<p>密码： <input type="password" name="psd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
<!--
value：表示默认值
radio：单选框
name：这里表示组,如果不一致则无法进行单选操作
maxlength:输入最多字符
size：文本框的长度
-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--
select:下拉框
option：选项框
-->
<p>国家
<select name="列表名称" id="1">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="rs">瑞士</option>
<option value="yd">印度</option>
</select>
<!--
文本域：textarea
cols：30行
rows：10行
-->
<p>
<textarea name="textarea" id="2" cols="30" rows="10"></textarea>
</p>
<!--
文件域:file
-->
<p>
<input type="file" name="file">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- url-->
<p>url：
<input type="url" name="url">
</p>
<!-- 数字
step:每次递增或者递减数为多少
-->
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="2">
</p>
<!-- 滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="1">
</p>
<!-- 搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
表单的应用
使用：直接输入代码即可
-
隐藏域：hidden
-
只读:readonly
-
禁用：disabled
-
提示信息：placeholder
-
非空判断：required
-
正则表达式：pattern