前置：图片导入的路径根据自己情况定，这里就不解释了
创建p1.html
<!-- document type 表明当前文件是html5,让浏览器使用h5的语法规范进行解析 -->
<!DOCTYPE html>
<!-- 表示网页的开始与结束，是根标签 lang="en"表示当前网页首选语言是英文 zh表示中文-->
<html lang="en">
<!-- 网页头部 存放一些配置信息-->
<head>
<meta charset="UTF-8"> <!-- 配置编码 -->
<title>hhh我是标题</title> <!-- 设置网页标题-->
</head>
<!-- 存放网页显示的主体内容 -->
<body>
hhh我是内容
</body>
</html>创建p2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本处理标签</title>
</head>
<body>
<!--2.空格折叠现象:将连续多个空格与换行都折叠成一个空格进行显示-->
第2个网页 内容
<br> <!-- 3. 换行标签 -->
<!-- 1.文本基础效果标签 -->
<b>加粗文字bold</b>
<i>斜体文字italic</i>
<u>下划线文字underline</u>
<s>删除线文字</s>
<mark>高亮标记文字</mark>
<br>
<!-- 4. 转义符号
< less than 表示小于号
> greater than 表示大于号
表示空格 -->
我最喜欢吃<tom>做的 红烧肉
<!--5.标题标签 加粗 修改字号 有垂直方向的行间距 内容独占一行-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级标题</h7>
<!--6.段落标签 有垂直方向的行间距 内容独占一行-->
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<!-- 8. 分割线标签 水平 灰色 -->
<hr>
<!-- 7. 假文 输入lorem后按Tab补全 -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem enim maiores modi officiis omnis, provident repellendus soluta tenetur vitae. Aspernatur commodi doloribus, ducimus ipsum quos reprehenderit similique. Beatae, facilis.
<!-- 8.有序列表 ol(ordered list) li(list item列表项) -->
<!-- type属性修改列表项前标识符:
1阿拉伯数字(默认值) A大写字母 a小写字母 I大写罗马数字 i小写罗马数字 -->
<ol type="i">
<li>起锅开火</li>
<li>把水烧开</li>
<li>放面进去</li>
</ol>
<!-- 9.无序列表 ul(unordered list) li(list item列表项) -->
<!-- type="none"去除列表项前标识符 -->
<ul type="none">
<li>《Think in Java》</li>
<li>《Java从入门到精通》</li>
<li>《颈椎康复指南》</li>
</ul>
<hr>
<ul type="none">
<li>
热菜
<ol>
<li>西红柿牛腩</li>
<li>水煮肉片</li>
<li>宫保鸡丁</li>
<li>溜肉段</li>
</ol>
</li>
<li>
凉菜
<ol>
<li>拍黄瓜</li>
<li>凉拌三丝</li>
<li>皮蛋豆腐</li>
</ol>
</li>
<li>
主食
<ol>
<li>米饭</li>
<li>馒头</li>
</ol>
</li>
</ul>
<hr>
<h1>个人简历</h1>
<h3>基本信息</h3>
<p>姓名:<b>传奇哥</b></p>
<p>性别:男</p>
<p>爱好:<s>摄影</s></p>
<h3>个人经历</h3>
<ul>
<li>小学9年</li>
<li>中学9年</li>
<li>高中12年</li>
</ul>
<h3>获得荣誉</h3>
<ol>
<li>机甲收集达人</li>
<li>玩偶收集达人</li>
</ol>
</body>
</html>创建p3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分区元素</title>
</head>
<body>
<!-- 行内分区元素span 不会换行 用来选中一行中的一部分 -->
欢迎大家来到JSDTN2407班级的<span style="color:red;">第三教学月</span>! <br>
今晚有<span style="color:blue;">暴雨</span>预警,大家记得带好雨具!
<hr>
<!-- 块级分区元素 独占一行 默认宽度为父级宽度的100%,高度为0,高度需要靠内容撑起来 -->
<div></div>
我是文字
<div>我是文字</div>
我是文字
<hr>
<!-- 目前使用频率较高的写法 -->
<div class="header">头部</div>
<div class="main">主体内容</div>
<div class="aside">侧边栏</div>
<div class="nav">导航栏</div>
<div class="section">区块章节</div>
<div class="footer">页尾</div>
<div class="article">文章</div>
<hr>
<!-- h5新增的带有语义的分区标签 -->
<header>头部</header>
<main>主体内容</main>
<aside>侧边栏</aside>
<nav>导航栏</nav>
<section>区块章节</section>
<footer>页尾</footer>
<article>文章</article>
</body>
</html>创建p4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片插入</title>
</head>
<body>
<!-- 相对路径:从当前html文件出发去找资源
1)图片与html文件在同一级目录,直接写图片全名 1.png
2)图片在html文件的下一级目录,先写文件夹,再写图片全名 img/2.png
3)图片在html文件的上一级目录,先../回到上级,再写图片全名 ../3.png
-->
<img src="1.png">
<img src="img/2.png">
<img src="../3.png">
<!-- alt图片不能正常加载时显示的替换文字 -->
<img src="abc" alt="哎呀,图片被外星人偷走了">
<!-- width设置图片宽度 height设置图片高度 注意图片失真的问题:设置一个,另外一个跟着改 -->
<!-- px 像素 屏幕上最小的一个发光点 数值越大元素越大 -->
<img src="img/fcq.jpg" height="500px" title="这是一张帅哥的靓照">
<!-- 绝对路径:从根目录(盘符/协议)出发去找资源 -->
<img src="https://cdn.tmooc.cn/bsfile//courseImg///f93f25fba0a84f72be47f5058f84a655.png" alt="">
</body>
</html>创建p5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
<table border="1px">
<caption>讲师信息表</caption>
<tr>
<th>序号</th>
<th>讲师</th>
<th>课程</th>
</tr>
<tr>
<td style="text-align: center;">1</td>
<td>传奇</td>
<td>数据库</td>
</tr>
<tr>
<td>2</td>
<td>硕博</td>
<td>SRE</td>
</tr>
<tr>
<td>3</td>
<td>强哥</td>
<td>微服务</td>
</tr>
</table>
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<!-- colspan="n"跨列，横着合并，从当前单元格开始向右合并n个单元格 -->
<!-- rowspan="n"跨行，竖着合并，从当前单元格开始向下合并n个单元格 -->
<!-- 被合并的单元格一定得删掉!!! -->
<td colspan="2">2-1</td>
<!-- <td>2-2</td>-->
<td>2-3</td>
<td rowspan="3">2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<!-- <td>3-4</td>-->
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<!-- <td>4-4</td>-->
</tr>
</table>
<hr>
<table border="1px" style="border-collapse: collapse;">
<caption>购物车</caption>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<tr>
<td>1</td>
<td>小米Air</td>
<td>5877</td>
</tr>
<tr>
<td>2</td>
<td>华为遥遥遥遥遥遥领先</td>
<td>5877</td>
</tr>
<tr>
<td>总价:</td>
<td colspan="2">10000</td>
</tr>
</table>
</body>
</html>创建p6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="">
姓名:<input type="text"> <br>
密码:<input type="password"> <br>
爱好:
<input type="checkbox">蹦迪
<input type="checkbox">看书
<input type="checkbox">打游戏
</form>
</body>
</html>作业练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr>
<table border="1" style="border-collapse: collapse">
<caption>笔记本商品列表</caption>
<tr>
<th><input type="checkbox"></th>
<th>编号</th>
<th>图片</th>
<th>型号</th>
<th>主标题</th>
<th>规格</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><img src="今晚作业/表格作业/1.jpg" width="50px"></td>
<td>AppleMacBoo...</td>
<td>AppleMacBookAir...</td>
<td>双核i5...</td>
<td>￥6999</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><img src="今晚作业/表格作业/2.jpg" width="50px"></td>
<td>AppleMacBoo...</td>
<td>AppleMacBookAir...</td>
<td>双核i5...</td>
<td>￥6999</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><img src="今晚作业/表格作业/3.jpg" width="50px"></td>
<td>AppleMacBoo...</td>
<td>AppleMacBookAir...</td>
<td>双核i5...</td>
<td>￥6999</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><img src="今晚作业/表格作业/4.jpg" width="50px"></td>
<td>AppleMacBoo...</td>
<td>AppleMacBookAir...</td>
<td>双核i5...</td>
<td>￥6999</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><img src="今晚作业/表格作业/5.jpg" width="50px"></td>
<td>AppleMacBoo...</td>
<td>AppleMacBookAir...</td>
<td>双核i5...</td>
<td>￥6999</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><img src="今晚作业/表格作业/6.jpg" width="50px"></td>
<td>AppleMacBoo...</td>
<td>AppleMacBookAir...</td>
<td>双核i5...</td>
<td>￥6999</td>
<td>
<a href="">详情</a>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
</table>
</body>
<script>
<!-- 复选框全选-->
var
checkAll=document.querySelector("input[type='checkbox']");
var
checkBoxs=document.querySelectorAll("input[type='checkbox']");
checkAll.onclick=function(){
for(var i=0;i<checkBoxs.length;i++){
checkBoxs[i].checked=checkAll.checked;
}
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
