<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页的字符集格式 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- name：指定数据的名称，指定元数据的名称 -->
<!-- keywords:网站的关键字,可以指定多个关键字，中间用,隔开 content：指定数据的内容 -->
<meta name="keywords" content="前端，html，css">
<!-- description:网站的描述，会显示在搜索引擎的搜索结果中 -->
<meta name="description" content="这是科小勒学习的一个记录">
<!-- 将网页重定向到另一个网站，content表示经过多长时间跳转到另一个界面 -->
<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科小勒</title>
</head>
<body>
<br> <!-- 换行 -->
<h1>html学习总结</h1>
<h2>一、字体、格式</h2>
<hr> <!--添加分割线-->
<!-- 跳转到指定位置，给底部的标签设置id，通过超链接指定跳转到的位置 -->
<a href="#first_bottom">跳转到底部</a>
<p> Hello everybody,My name is kele,Welcome to my web! Hope you have fun!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis laborum exercitationem cum veniam totam inventore vel expedita iusto error assumenda non illo ipsum, alias perferendis quam nam at minima.</p>
<p>加粗：<strong>img</strong> </p> <!--b 加粗-->
<p>斜体：<i>audio</i></p> <!--i 斜体-->
<p>下划线：<u>video</u></p> <!--u 下划线-->
<p>删除线：<del>删除了...</del></p>
<p>原始值：original</p> <!-- p:段落 -->
<!-- 表示一个长引用，会换行 -->
古人说：<blockquote>书山有路勤为径，学海无涯苦作舟</blockquote>
<!-- 表示一个短引用,不会换行 -->
杜甫说: <q>安得广厦千万间,大庇天下寒士俱欢颜</q>
<h2>二、图片，音频，视频，超链接</h2>
<h3>图片</h3>
<img src="lib/R.jpg" alt="阅读证" title="阅读证" width="500">
<!-- 可以通过base64的方式加载，和网页同时加载 -->
<h3>音频</h3>
<audio src="lib/最伟大的作品.mp3" controls loop></audio>
<!-- MP3 和 ogg两种格式 -->
<audio controls> 该浏览器不支持插件显示<source src="lib/最伟大的作品.mp3"></audio>
<!-- controls:显示音乐的控件 -->
<!-- autoplay：自动播放 -->
<!-- loop：循环播放 -->
<h3>视频</h3>
<video src="lib/最伟大的作品.mp4" controls autoplay muted loop width="500"></video>
<!-- 上传的视频通过分享，选择源代码的方式放入自己的网页中 -->
<iframe width="600" height="400" src="//player.bilibili.com/player.html?aid=57280599&bvid=BV1ux411R7Jv&cid=100014800&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!-- 谷歌浏览器可以使视频自动播放，通过muted实现静音自动播放 -->
<h3>超链接</h3>
<!-- ------超链接------ -->
<!-- a href：跳转到连接， target属性：_self：在当前窗口跳转，_blank：在新窗口中跳转（保留原网页） -->
<a href="https://www.bilibili.com/video/BV1Kg411T7t9?p=20&spm_id_from=pageDriver&vd_source=905c37f35ab330c3a98ea289ff899742" target="_blank">go to bilibili --前端学习</a>
<!-- 通过#直接回到顶部 -->
<a href="#">回到顶部</a>
<!-- 一般作为占位符，点击无任何操作 -->
<a href="javascript:;"></a>
<h3>引入其他网页作为一个小窗口</h3>
<iframe width="1000" height="400" src="https://www.bilibili.com/?spm_id_from=333.337.0.0" frameborder="0"></iframe>
<h2>三、列表使用</h2>
<!-- ul标签，用于无序列表的整体，只能包含li -->
<!-- li标签：无序列表中的每一项 可以包含加粗-->
<h3>无序列表</h3>
<ul>
<li>vivo</li>
<li>oppo</li>
<li>华为</li>
<li><u>诺基亚</u></li>
</ul>
<h3>有序列表</h3>
<!-- ol标签，用于有序列表的整体，只能包含li，默认会加序号 -->
<ol>
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
</ol>
<h3>自定义列表</h3>
<!-- dl：自定义列表的整体，dt：自定义的主题 dd:针对主题的每一项内容（dd默认显示缩进） -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<h2>四、表格</h2>
<!-- table：表格整体，tr：表格每行，td：表格的单元格 -->
<table border="1" width="500" height="200"> <!--border：表格线框的宽度 一般不在html中设置表格的宽度，高度 -->
<!-- 表格标题 -->
<caption><b>学生成绩</b></caption>
<!-- thead：用于包裹表头，tbody：用于包裹表的内容，tfoot：用于包裹表的总结等 注：可省略 -->
<thead>
<tr>
<!-- 表头 -->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>得分</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td rowspan="2">男</td> <!-- rowspan：上下合并 -->
<td>80</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>女</td>
<td>70</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td colspan="3">80</td> <!-- colspan : 左右合并 -->
</tr>
</tfoot>
</table>
<h2>五、表单标签</h2>
<!-- input标签 type属性不同，效果不同 -->
<!-- type类型
1、text：文本框
2、password：密码框，用于输入密码
3、radio：单选框
4、checkbox：多选框
5、file：文件选择，用于之后上传文件
6、submit：提交按钮，用于提交
7、reset：重置按钮，用于重置
button：普通按钮，之后配合js用于添加功能 -->
<h3>input 标签</h3>
文本框：<input type="text" placeholder="请输入姓名/邮箱"> <br><br> <!--placeholder：框中显示的内容，用来提示用户-->
密码框：<input type="password" placeholder="密码"> <br><br>
<!--1、同一个name是一个组，2、checked：默认选中-->
单选框：<input type="radio" name="genser" checked>男 <input type="radio" name="genser">女 <br><br>
多选框：<input type="checkbox" name="phone">vivo <input type="checkbox" name="phone">oppo
<input type="checkbox" name="phone"> HuaWei <br><br>
<!--默认只能上传一个文件，-multiple：可以上传多个文件-->
上传框：<input type="file" multiple> <br><br>
提交框：<input type="submit"> <br><br>
重置框：<input type="reset"> <br><br>
<!-- value：给按钮添加提示 -->
普通框：<input type="button" value="按钮提示内容"> <br><br>
<!-- form：标签域地址，例如点击重置按钮可以重置该域的数据，action是如果有提交按钮，将数据提交的地址 -->
<form action="">
密码重置 <br>
密码框：<input type="password" placeholder="密码">
<input type="reset"> <br>
</form>
<h3>button标签</h3>
<!-- button：
submit：提交按钮
reset：重置按钮
button：普通按钮 -->
<button type="submit"> button的提交按钮</button>
<button type="reset"> button的重置按钮</button>
<button type="button"> button的普通按钮</button>
<h3>下拉菜单</h3>
<!-- sellect：下拉菜单整体，
option：下拉菜单的每一项 -->
<select name="" id="">
<option>北京</option>
<option selected>深圳</option> <!--sellected：默认选中-->
<option>上海</option>
<option>广州</option>
</select>
<h3>文本域标签</h3>
<!-- textarea：文本域
cols：规定文本域内可见宽度
rows：规定了文本域的可见行数 -->
在界面可以修改文本框的大小，可以通过css禁用<br>
<textarea cols="10" rows="3"></textarea>
<h3>label标签</h3> <!-- 效果：通过点击说明选中 -->
<!-- 方式1：
1、label标签包裹内容，
2、在表单标签中加id属性
3、在label标签的for属性设置对应id的值 -->
性别：
<input type="radio" name="general" id="1"> <label for="1">男</label>
<!-- 方式二：
直接将label将表单标签包裹，删除for -->
<label><input type="radio" name="general"> 女</label>
<h2>语义化标签</h2>
<!-- div：一行只显示一个
span：一行可以显示多个 -->
<div>div标签</div>
<div>div标签</div>
<span>span标签</span><span>span标签</span>
<!-- 手机端常用的语义化标签 -->
<!-- header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章 -->
<header>手机端网页头部：header</header>
<nav>手机端网页导航：nav</nav>
<footer>手机端网页底部：footer</footer>
<aside>手机端网页侧边栏：aside</aside>
<section>手机端网页区块：section</section>
<article>手机端网页文章：article</article>
<h2>字符实体</h2>
<!-- 网页不支持多个空格 -->
字符 实体
<!--空格 --> <br>
字符 实体
<h3>标题3</h3>
<a href="#">回到顶部</a>
<h4 id="first_bottom">标题4</h4>
</body>
</html>
一份代码了解html常用label
最新推荐文章于 2024-07-19 10:24:06 发布
6904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
