一 课堂记录代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<!-- 一个叹号就是写一些前置条件 -->
<!--1.文本标签 span-->
<span style="color: pink;">hello</span><span>demo</span>
<!--2.标题标签-->
<a name="aaa"></a>
<h1 style="color: purple;">第一个大标题</h1>
<h2>dudu</h2>
<!-- 3.div竖着布局 -->
<div>竖着布局</div>
<div>竖着</div>
<div>竖着布局</div>
<div>竖着</div> <div>竖着布局</div>
<div>竖着</div> <div>竖着布局</div>
<div>竖着</div> <div>竖着布局</div>
<div>竖着</div> <div>竖着布局</div>
<div>竖着</div> <div>竖着布局</div>
<div>竖着</div>
<div>竖着布局</div>
<div>竖着</div>
<!-- 4.段落标签+竖着（间距大） -->
<p>段落1</p>
<p>段落二</p>
<!-- 5.超链接标签 a标签，a是指令
herf是链接地址+按键名称
target设置窗口打开的方式，_self默认，在本窗口打开，
-->
<!-- 所有标签都有的属性：id，class，style -->
<a href="https://www.runoob.com/css/css-tutorial.html"target="bbb">点击就跳转教程</a>
<!-- 6.锚点标签
<a name="aaaa">锚点</a> name就是要跳到的锚点位置，herb就是要点击的地方
-->
<a href="#aaa" style="position:fixed;right: 200px;bottom: 200px;">跳转到标题</a>
<!-- 7.插入放置图片
src:引用的图片资源
路径:
绝对路径：资源的绝对位置
相对路径：访问者和被访问资源的关系
亲兄弟关系：src="kaka.jpeg"
叔侄关系：img/kaka.jpeg
表兄弟关系：../img/kaka.jpeg
../返回上一级
alt当图片不能正常展示时，显示alt里的内容
-->
<img src="img/kaka.jpeg" alt="这是一张猫咪图片" width="300px" height="200px" style="object-fit: cover;">
<img src="img/kaka.jpeg" alt="这是一张猫咪图片" style="object-fit: cover;width: 200px;height: 100px;">
<!-- 8.列表标签 ul 无序列表 ol有序列表-->
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<ol>
<li>kk</li>
<li>kk2</li>
</ol>
<!-- 9.表格标签
tr是行
td单元格 th单元格加粗居中
border 表格有边框
<table border="1" width="500px" height="400px">设置表格宽高
cellpadding="10px" 单元格填充度
cellspacing="0"单元格之间的间距0，表示挨在一起
thead tbody tfoot分别始终位于头、中、尾
rowspan 行合并
colspan 列合并
-->
<table border="1" cellpadding="10px">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr>
<td>1</td>
<td>嘟嘟</td>
<td>3</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">坡坡</td>
<td>男</td>
</tr>
<tfoot>
<tr>
<td rowspan="2">3</td>
<td>啊啊</td>
<td>3</td>
<td>男</td>
</tr>
<tr>
<td>零零</td>
<td>9</td>
<td>女</td>
</tr>
</tfoot>
</table>
<!-- 10。框架标签 iframe嵌套其他页面
src：嵌套的资源
frameborder='0' 去掉边框，把任意页面嵌入的更真实
-->
<a href="https://oiec.bnu.edu.cn/xsfw/jwxx/xmlb/dqjlxm/index.htm" target='bbb'>跳转到BNU</a>
<iframe src="https://www.xiaohongshu.com/explore" width="100px" height="200px"frameborder='0'name='bbb'style='object-fit,cover' ></iframe><br><br>
<!-- 11.音频
controls 手动播放
autoplay 自动播放
loop 循环播放
-->
<audio src="img/bj.mp3" ></audio>
<!-- 12.视频资源
controls 手动播放
autoplay 自动播放
loop 循环播放
width height设置的是播放器的长宽
-->
<video src="" ></video><br><br>
<!-- 收集用户信息的标签 -->
<form >
<input type="text">单行文本框<br><br>
<input type="password">密码<br><br>
<!-- 单选框 -->
<input type="radio" name="sex">男生 <input type="radio" name="sex">女生 <br><br>
<input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">乒乓球 <br><br>
<input type="file">文件选择器<br><br>
<input type="color">颜色选取器<br><br>
<input type="date">日期<br><br>
<input type="datetime-local">日期时间<br><br>
<input type="week">周选择器<br><br>
<input type="range" min="0" max="100" value="90">滑块
<!-- step 步长 -->
<input type="number" min="0"max="20" value="10" step="5">数值<br><br>
<select>
<option value="10">数学</option>
<option value="2">英语</option>
</select><br><br>
<!-- rows代表里面能放多少行 cols表示一行能放多少个字符-->
<textarea rows="10" cols="50"></textarea><br><br>
<!-- -->
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</form>
</body>
</html>二 内容总结及注意点
前端html、css、Javascript的关系
如果想要重置按键起效，需要加入<form></form>标签，将需要作用的内容套在里面
三 前端相关菜鸟教程链接汇总
HTML HTML 简介 | 菜鸟教程 (runoob.com)
CSS https://www.runoob.com/css/css-tutorial.html
JavaScript www.runoob.com/jquery/jquery-install.html
四 以上代码实现的页面
扫一扫
2080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
