大家好，我是
方圆
1. 写在最前
本文参考的视频是狂神说HTML5，做一些笔记供日后回忆
2. 认识页面
<!-- 告诉浏览器 我们使用的是什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head 表示网页的头部-->
<head>
<!--meta标签 用于描述网页 一般用来做SEO（利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名）-->
<meta charset="UTF-8">
<!-- 网页的标题-->
<title>嗨～ 你来辣</title>
</head>
<!--网页的主体-->
<body>
Hello World
</body>
</html>
3. 基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="" id="top"></a>
<!--标题标签-->
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<!--分割线标签-->
<hr/>
<!--换行标签-->
“两只老虎，两只老虎，跑得快，跑得快，<br/>
一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！<br/>
两只老虎，两只老虎，跑得快，跑得快，<br/>
一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！”<br/>
<!--段落标签-->
<p>“两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！”</p>
<p>“两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！”</p>
<p>“两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！”</p>
<p>“两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，跑得快，跑得快，</p>
<p>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！”</p>
<!--字体样式标签-->
<strong>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！</strong> <br/>
<em>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！</em> <br/>
<strong><em>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！</em></strong> <br/>
<br/>
<!--特殊符号标签-->
& &&
<a href="#top">回到顶部</a>
<a id="down"></a>
</body>
</html>
4. 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--相对路径的写法 ../表示上一级目录-->
<img src="../resource/image/IMG_6876.png" alt="没加载出来" title="悬停文字" width="400" height="720">
<br/>
<!--绝对路径一直加载失败-->
<img src="/resource/image/IMG_6876.png" alt="图片加载失败 点击重试">
</body>
</html>
5. 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="top"></a>
<a href="First.html">
点我去看 Hello World
</a>
<br>
<a href="基本标签.html#down"> 点一下去底下</a>
<br>
<!--默认的targer是self，可以选择新建标签页-->
<a href="https://www.baidu.com" target="_blank"> 去百度</a>
<br>
<!--功能性链接 mailto-->
<a href="mailto:374072213@qq.com">联系我</a><br>
<!--qq推广链接-->
<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>
<a href="#top">回到顶部</a>
</body>
</html>
6. 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<!-- 跨列-->
<td colspan="3" itemid="center" style="text-align: center">学生成绩</td>
</tr>
<tr>
<!-- 跨行-->
<td rowspan="2">小王</td>
<td>前端</td>
<td>100</td>
</tr>
<tr>
<td>后端</td>
<td>100</td>
</tr>
</table>
</body>
</html>
7. 视频元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--添加控制器和自动播放-->
<video src="" controls autoplay></video>
</body>
</html>
8. 页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header> 页面头部 </header>
<footer>页面脚部</footer>
<section>页面中的部分</section>
<article>独立的文章内容</article>
<aside>常用于侧边栏</aside>
<nav>导航类辅助内容</nav>
</body>
</html>
9. iframe内连标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--bilibili 内连播放-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
<!--注意 src如果不写东西的话 说明它就是一个框框 而下方我们写上了链接的标签
并且用target表示页面出现的位置在iframe中，这样就有网页填补了这个框框
-->
<iframe src="" frameborder="0" name="iframe" width="400px" height="900px"></iframe>
<!--打开的链接是 基本标签页面 位置出现的是在内连框架中-->
<a href="基本标签.html" target="iframe">点我看看自己写的内连框架</a>
<!--这个就是用百度 来填充了这个iframe框框-->
<iframe src="https://www.baidu.com" frameborder="0" width="400px" height="900px"></iframe>
</body>
</html>
10. 表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--action 是请求的地址-->
<!--可以在开发者模式中，查看网络栏目里看一看我们提交的post包-->
<form action="基本标签.html" method="get">
<!-- label的for是和input的id绑定的；而name属性是为java后台提供的-->
<!-- readonly hidden disabled checked selected 这些默认的属性-->
<!-- label标签是增强鼠标可用性 点一下文字就能进入框框-->
<label for="userName">用户名</label>
<input type="text" name="userName" id="userName" value="默认值" maxlength="8" size="20px" readonly>
<br />
<label for="password" > 密码 </label>
<input type="password" name="pwd" id="password" placeholder="输入你已经忘了的密码" required>
<br />
<label for="male"> 性别 Male</label>
<!-- value来指定它的值-->
<input type="radio" name="sex" id="male" value="boy" disabled/>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="girl" checked/>
<br />
<!-- 多选框 checkout-->
<label> 爱好
<input type="checkbox" value="sing" name="hobby">
</label>唱
<label>
<input type="checkbox" value="dance" name="hobby" checked>
</label>跳
<label>
<input type="checkbox" value="rap" name="hobby">
</label>rap
<label>
<input type="checkbox" value="basketball" name="hobby">
</label>篮球
<br />
<!-- 下拉框-->
<label for="country"></label>
<select name="country" id="country">
<!-- selected默认选择-->
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="japan">日本</option>
</select>
<br />
<!-- 文本框-->
<label> 反馈
<textarea name="feedback" cols="18" rows="3"></textarea>
</label>
<br />
<!-- 文件域-->
<input type="file" name="file">
<br />
<!-- 邮箱验证 可以使用pattern属性应用正则表达式来验证邮箱-->
<label> 邮箱
<input type="email" name="email">
</label>
<br />
<!-- url验证-->
<label> 地址
<input type="url" name="url">
</label>
<br />
<!-- 数字 注意步进值的设置step-->
<label>
<input type="number" max="100" min="0" name="num" step="1">
</label>
<br />
<!-- 滑块儿 像个音量键一样-->
<label>
<input type="range" name="voice" max="100" min="0" step="1">
</label>
<br />
<!-- 青柠起始页用的是不是这个呢 大概率-->
<label>
<input type="search" name="search">
</label>
<br />
<!-- 建立两个按钮的标签 第二个图片的标签 同样会跳转 但是这个button不会跳转 我们什么都没给它绑定-->
<input type="button" value="点击变大">
<input type="image" src="../resource/image/IMG_6876.png" width="30px" height="10px" alt="图片加载失败">
<br />
<input type="submit" value="登陆">
<input type="reset">
</form>
<form>
</form>
</body>
</html>
加油儿！
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
