<!--高速浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head>
<!-- meta描述性标签，他用来描述我们网站的一些信息-->
<!-- meta一般用来作SEO-->
<meta charset="UTF-8">
<meta name="keyword" content="diy网页">
<meta name="description" content="小申的网页">
<!-- 网页标题-->
<title>第一个网页</title>
</head>
<!--网页主体-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
<!--换行标签-->
这是第四段<br/>
这是第五段<br/>
这是第六段<br/>
<!--水平线标签-->
<hr/>
<hr/>
<br/>
<!--字体样式标签-->
<strong>加粗<strong/>
<em>斜体</em>>
<br/>
<!-- 特殊符号-->
空 格
<br/>
>
<br/>
<
©
</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a name="top"></a>
<!--a标签
href：（必填）表示要跳转到那个页面
target：表示窗口在哪里打开
_blank:打开一个新网页
_self:在本网页中打开-->
<a href="1我的第一个网页.html" target="_blank">回到第一个网页</a>
<a href="http://www.baidu.com" target="_self">打开百度网页</a>
<br/>
<a href="http://www.baidu.com" target="_self">
<img src="../resource/1.jpg" alt="图片" title="悬停文字"/>
</a>
<!--锚链接
需要一个锚标记
跳转到标记
#表示要跳转的位置
这里页面内容太少，使用不明显-->
<a href="#top">回到顶部</a>
<!--功能性连接：
邮件链接：mailto
qq连接：-->
<a href="744857369@qq.com">我的邮箱</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="叫我好友"/>
</a>>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!-- 视频元素 -->
<!--视频
src 资源路径
controls 控制面板
autoplay 自动播放
-->
<video src="./src/video/到过.mp4" controls width="800" height="600"></video>
<!-- 音频元素 -->
<audio src="./src/audio/起风了.mp3" controls></audio>
</body>
</html>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表表格</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
<li>linux</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
<li>linux</li>
</ul>
<!--自定义列表-->
<!--列表名称-->
<dl>
<!-- 列表标题-->
<dt>个人信息</dt>
<!-- 列表内容-->
<dd>男</dd>
<dd>22</dd>
<dd>无</dd>
</dl>
<!--表格：table-->
<!--三行三列的表格-->
<table border="1px">
<tr>
<!-- 跨列：colspan-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!-- 跨行：rowspan-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<!-- 跨行：rowspan-->
<td rowspan="2">李四</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="800" height="600"></iframe>
<!-- bilibili视频分享 -->
<iframe src="//player.bilibili.com/player.html?aid=83528862&bvid=BV1yJ411J7rc&cid=142898214&page=1"
scrolling="no" border="100" frameborder="no" framespacing="0" allowfullscreen="true"width="500"height="500">
</iframe>
<!-- 自定义跳转 在name=hello的iframe打开博客园 -->
<iframe src="" frameborder="0" name="hello" width="1000" height="500"></iframe>
<a href="https://blog.youkuaiyun.com/code34?spm=1000.2115.3001.5343" target="hello">点击进入csdn</a>
</body>
</html>
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--
header 标题头部区域的内容（用于页面或者页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容
-->
<header>
<h2>页面头部</h2>
</header>
<section>
<h3>页面身体</h3>
</section>
<footer>
<h2>页面脚部</h2>
</footer>
</body>
</html>
表单!!!!!!重点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式
get方式提交:我们可以在url中看到我们提交的信息，不安全，高效。
post :比较安全,传输大文件.
-->
<!--<form action="1我的第一个网页.html" method="get">-->
<form action="1我的第一个网页.html" method="post">
<!-- 搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
<!--文本输入框:
input type="text"
value="狂神好帅"默认初始值
maxlength="8".最长能写几个字符
size=“30”文本框的长度
placeholder 提示信息
required 非空判断
pattern 正则表达式
隐藏域hidden
只读readonly
禁用disabled
-->
<p>用户:<input type="text" name="username" placeholder="请输入用户名"></p>
<p>密码:<input type="password" name="password" placeholder="请输入密码"></p>
<!--单选框标签
input type="radio"
value :单选框的值
name :表示组
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框type="checkbox"-->
<p>爱好：
<input type="checkbox" value="game" name="hobby" checked/>游戏
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="sport" name="hobby"/>运动
</p>
<!-- 文件域
type="file"
name="files"-->
<p>上传文件：
<input type="file" name="files"/>
<input type="button" value="上传" name="upload">
</p>
<!-- 按钮
input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset"重置按钮
-->
<p>按钮:
<input type="btn1" value="点击变短"/>
<!-- <input type="image" src="../resource/1.jpg">-->
</p>
<!-- 下拉框，列表框-->
<p>班级：
<select name="列表名称">
<option value="jk1" selected>计科1班</option>
<option value="jk2">计科2班</option>
<option value="jk3">计科3班</option>
<option value="jk4">计科4班</option>
</select>
</p>
<!-- 文本域-->
<p>反馈：
<textarea name="text" cols="30" rows="10">反馈信息</textarea>
</p>
<p>
<input type="submit" name="登录">
<input type="reset" name="重置">
</p>
<!-- 验证-->
<p>邮箱验证：
<input type="email" name="email">
URL验证：
<input type="url" name="url">
数字验证
<input type="number" name="number" max="100" min="0" step="10">
</p>
<!-- 滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="10">
</p>
</form>
<!--表单元素格式
type：指定元素的类型。text、password、checkbox、radio、submit.reset、file、hidden、image和button，默认为text
name：指定表单元素的名称
value：元素的初始值。type为radio时必须指定一个值
size：指定表单元素的初始宽度。当type为text或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否是被选中
-->
</body>
</html>
扫一扫
2851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
