<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>HTML笔记</title>
</head>
<body>
<!--音频标签 src=音频的路径 、controls=显示播放的控件、 autoplay=自动播放（部分浏览器不支持、loop=循环播放-->
<h2>1.音频标签-《爱了很久的朋友》</h2>
<audio autoplay controls src="爱了很久的朋友.mp3"></audio>
<!--视频标签 src=视频的路径 、controls=显示播放的控件、 autoplay=自动播放（部分浏览器不支持、loop=循环播放 -->
<!--muted 需要加上这个才能自动播放（静音）音频一样的-->
<h2>2.视频标签-《惊才风逸文工团》</h2>
<br> <video autoplay controls src="惊才风逸文工团.mp4" > </video>
<!--链接标签 当开发网站初期，我们还不知道跳转地址的时候，href的值书写 #（空链接） -->
<!--href： 作用是跳转地址-->
<!--target: 目标网页的打开形式 1. _self :默认值，在当前窗口中跳转（覆盖原网页）； 2. _blank :在新的窗口中跳转（保留原网页）-->
<h2>3.超链接案例</h2>
<br><a href="http://localhost:63342/Java%20Web%20Test/web_test/sina.html?_ijt=lau9lna46310mfa4ct2qfvs72h.htm" target="_blank">3.1小民的微博作业（跳转新网页）</a>
<br><a href="http://localhost:63342/Java%20Web%20Test/web_test/sina.html?_ijt=lau9lna46310mfa4ct2qfvs72h.htm">3.2小民的微博作业（覆盖原网页） </a>
<hr>
<!--招聘案例-->
<h1>4.招聘案例-“腾讯科技高级web前端开发岗位“</h1>
<hr>
<h2> 职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
<h2> 岗位要求</h2>
<p>5年以上前端开发经验，<strong>精通html5/css3/javascrip</strong>等web开发技术； </p>
<p>熟悉bootstrap，Vue，angularjs，reactjs等框架，熟悉掌握一种以上； </p>
<p> 代码风格严谨，能高保真还原设计稿，能兼容各种浏览器；</p>
<p> 对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力； </p>
<p>责任心强，思路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。 </p>
<h2>工作地址</h2>
<p> 上海市-徐汇区-腾云大厦</p>
<img alt="地图" src="地图.png" width="800px">
<!--综合案例-跳转-->
<h1>5.综合案例-”今日热搜词“</h1>
<hr>
<h2>1、阿卡贝拉 </h2>
<p>阿卡贝拉（意大利：Acappella)即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="#" target="_blank"> 阿卡贝拉《千与千寻》</a> </p>
<h2>2、翻唱</h2>
<p>"翻唱“是指将已发表并由他人演唱的歌曲根据自己的风格从新演唱，包括从新填词，编曲。现在已有不少明星，都在翻唱他人是歌曲，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="#" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a> </p>
<!--列表标签：特点：按照行的方式，整齐显示内容； 应用场景--新闻列表（无序列表）、排行榜（有序列表）、账单（自定义列表）-->
<!--无序列表：ui-表示无序列表的整体，用于包裹li标签； li-表示无序列表的每一项，用于包含每一行的内容； 显示特点：列表每一行前默认显示圆点标识；-->
<h2>6.列表标签</h2>
<h3>6.1无序列表</h3>
<ul>
<li>榴莲</li>
<li>相机</li>
</ul>
<!--有序列表：ol-表示有序列表的整体，用于包裹li标签； li-表示有序列表的每一项，用于包含每一行的内容； 显示特点：列表的每一行前默认现实序号列表-->
<h3>6.2有序列表</h3>
<ol>
<li>张三：100</li>
<li>李四：80</li>
</ol>
<!--自定义列表 ：dl-表示自定义列表的整体，用于包裹dt/dd标签； dt-表示自定义列表的主题； dd-表示自定义列表的针对主题的每一项内容 显示特点：dd前会默认显示缩进效果-->
<h3>6.3自定义列表</h3>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
<!--表格标签：能够使用 表格相关标签和属性，实现网页中表格结构的搭建-->
<!-- border-边框宽度 （数字）； width：表格宽度（数字）； height：表格高度（数字）-->
<!--表格： table-表格整体，可用于包裹多个tr； tr-表格每行，可用于包裹td； td-表格单元格，可用于包裹内容-->
<!--表格标题和表头单元格标签：场景-在表格中表示整体大标题和一列小标题。 caption-表格大标题（写在table标签内部）； th-表头单元格；（书写在tr标签内部，用于替换td标签）-->
<!--表格结构标签 突出表格不同部分（头部、主图、底部，使词义更加清晰。 thead-表格头部、tbody-表格主体、tfoot-表格底部。 表格结构标签内部用于包裹tr标签，结构标签可以省略。-->
<!--合并单元格：跨行/跨列合并（将水平活垂直多个单元格合并成一个单元格）。 通过左上原则，确保谁删除谁（1.上下合并->只保留最上的，删除其他。2.左右合并->只保留最左的，删除其他）-->
<!--跨行合并：rowspan（将多行单元格垂直合并）；colspan（将多列单元格水平合并）；注意：只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead,tbody,tfoot）-->
<h2>7.表格标签</h2>
<table border="1" heigth ="400" width="600">
<caption><strong>学生成绩单 </strong></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
<br> <hr>
<!--表单标签（可实现网页中表单类网页结构搭建-->
<!--1.1 input系列标签的基本介绍 在网页中显示收集用户信息的表单效果，如：登录页。注册页。 input标签可以通过type属性值的不同，展示不同效果。-->
<!--text 文本框，用于输入单行文本-->
<h2>8.表单标签</h2>
<h3>8.1text 文本框</h3>
<h4>8.1.1placeholder-占位符(提示用户输入内容的文本)</h4>
<!--placeholder-占位符，提示用户输入内容的文本-->
<h4>8.1.2-提交地址 ： form action="" </h4>
<form action=""> </form>
文本框：<input type="text" placeholder="请输入文本">
<br>
<br>
<h3>8.2密码框</h3>
密码框：<input type="password" placeholder="请输入密码">
<br>
<br>
<h3>8.3单选框</h3>
<h4>8.3.1 name-分组(有相同name属性值的单选框为一组，一组中同时只能有一个被选中)</h4>
<h4>8.3.2 checked-默认选中</h4>
单选框：<input type="radio" name="gender"checked>男 <input type="radio" name="gender" >女
<br>
<br>
<h3>8.4多选框</h3>
<h4>8.4.1 checked-默认选中</h4>
多选框：<input type="checkbox"checked>
<br>
<br>
<h3>8.5文件选择，用于之后上传文件</h3>
<h4>8.5.1 multiple-多文件选择</h4>
文件选择：<input type="file" multiple>
<br>
<br>
<h3>8.6提交按钮（提交按钮（点击后提交数据给后端服务器）</h3>
<h4>8.6.1 value = "" (按钮上添加文字）</h4>
提交按钮：<input type="submit" value="免费注册">
<br>
<br>
<h3>8.7重置按钮</h3>
重置按钮：<input type="reset">
<br>
<br>
<h3>8.8普通按钮（默认无功能，配合js添加功能</h3>
普通按钮：<input type="button" value="普通按钮,无任何功能")>
<br>
<h4>8.8.1 button按钮标签页：submit：提交； reset：重置；button：普通按钮</h4>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮,无任何功能</button>
<!--select-下拉菜单标签-->
<h2>9.select：下拉菜单标签</h2>
<h3>9.1 option：下拉菜单的每一项 (selected:下拉菜单的默认选中）</h3>
<select>
<option>武汉大学</option>
<option>北京大学</option>
<option selected>西北工业大学</option>
<option>武汉大学</option>
</select>
<!--textarea 文本域标签-->
<h2>10.textarea 文本域标签</h2>
<h3>10.1cols:规定了文本域内可见宽度； rows：规定了文本域可见行数</h3>
<textarea cols="80" rows="8"> </textarea>
<!--labe标签 -->
<h2>lable标签 常用于绑定内容与表单标签的关系</h2>
<h3>使用方法一：</h3>
<h4> 1.使用label标签把内容（如：文本）包裹起来；2.在表单标签上添加id属性；3.在label标签的for属性中设置对应的id属性值。</h4>
<h3>使用方法二：</h3>
<h4> 1.使用label标签把内容（如：文本）和表单标签一起包裹起来；2.需要把label标签的for属性删除即可。</h4>
性别1：
<input type="radio" name="sex" id="nan1"> <label for="nan1">男</label>
<input type="radio" name="sex" >女
<br>
性别2：
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex" >女</label>
<!--词义化标签 没有词义布局标签（div、span-->
<h2>11.词义化标签</h2>
<h3>11.1没有词义的布局标签-div(一行只显示一个[独占一行])和span(一行可以显示多个）</h3>
<!--div-->
<h4>一、div示例：</h4>
普通文字
普通文字
<div>div文字</div>
<div>div文字</div>
<!--span-->
<h4>二、span示例：</h4>
普通文字
普通文字
<span>span文字</span>
<span>span文字</span>
<h3>11.2有词义的布局标签（显示特点与div一致，在HTML5新版本中 ，推出了一些有语义的布局标签供开发者使用，<u>适用于手机端网页布局</u>。了解即可）</h3>
<h4>*这些标签包括：header：网页头部；nav：网页导航；footer：网页底部；aside:网页侧边框；section：网页区块；article：网页文章。</h4>
<img src="词义化标签布局.jpg" alt="词义化布局图">
<h4>11.2.1网页头部</h4>
<header> 网页头部</header>
<h4>11.2.2网页导航</h4>
<nav>网页导航 </nav>
<h4>11.2.3网页底部</h4>
<footer> 网页底部</footer>
<h4>11.2.4网页侧边框</h4>
<aside>网页侧边框 </aside>
<h4>11.2.5网页区块</h4>
<section>网页区块 </section>
<h4>11.2.6网页文章</h4>
<article>网页文章 </article>
<!--字符实体 空格- -->
<h2>12.字符实体（通过 <u>字符实体</u> 在网页中显示 <u>特殊符号</u>)</h2>
<h3>12.1空格-“ ”</h3>
<!--综合案例-学生信息表-->
<h2>13.综合案例-学生信息表</h2>
<table border="1" width="500" height="300">
<caption><b>优秀学生信息表格</b></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>一班</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<td>二班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</table>
<!--综合案例-表单-->
<h2>13.综合案例-表单</h2>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action=""> </form>
昵称：<input type="text" placeholder="请输入昵称">
<br>
<br>
性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
<br>
<br>
所在城市：
<select>
<option>北京大学</option>
<option>上海大学</option>
<option selected>武汉大学</option>
</select>
<br>
<br>
结婚状况：<input type="radio" name="marry" checked>未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">保密
<br>
<br>
喜欢的类型:
<input type="checkbox"checked>可爱 <input type="checkbox">性感 <input type="checkbox"> 御姐 <input type="checkbox"> 萝莉<input type="checkbox">小鲜肉<input type="checkbox">大叔
<br>
<br>
个人介绍：
<br>
<textarea cols="80" rows="8"> </textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox">我同意所有条款
<input type="submit" value="免费注册"> <input type="reset" value="重置">
</body>
</html>
12-05
1万+
1万+
03-29
1257
1257
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
