<!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>
<strong>文字变粗</strong>
<h1>文字又大又粗</h1>
<!-- 注释的内容：为代码添加解释性、描述性信息，浏览器会忽略不解析的
快捷键：ctrl + / -->
<!-- <h1>文字又大又粗</h1> -->
<!--
标签的属性：可以给标签添加附加信息
格式：
属性名="属性值"
注意点：
1、标签的属性写在开始标签内部
2、标签上可以同时存在多个属性，属性之间空空格隔开（规范）
3、属性之间以空格隔开
4、标签名与属性之间必须以空格隔开
5、属性之间没有顺序之分
-->
<a href=""></a>
<img src="" alt="" />
<!--
标题标签：h系列标签
代码：
h1：1级标题
h2：2级标题
h3：3级标题
h4：4级标题
h5：5级标题
h6：6级标题
特点：
1、标签的文字都有加粗
2、标签的文字都有变大，从h1~h6文字逐渐减小
3、每一个标题独占一行
注意点：h1标签最为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
-->
普通的文字
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级标题</h4>
<h5>我是5级标题</h5>
<h6>我是6级标题</h6>
<!--
段落标签：p标签 双标签
特点：
1、段落之间存在间隙
2、每个段落是独占一行
-->
<h1>前端开发</h1>
<p>前端开发</p>
<!--
换行标签：br 单标签
作用：强制换行
-->
<p>换行标签</p>
<br />
<p>换行文本</p>
<!--
水平线标签：hr标签 单标签
作用：分割不同主题的水平线
-->
<hr />
<h1>前端开发</h1>
<!--
文本格式化标签：让文本有加粗、下划线、倾斜、删除线文本的格式效果
-->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br />
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
<!--
图片标签：img 单标签
作用：在网页中展示一张图片
属性：
1、src：告诉浏览器要显示哪一张图片
属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可）
2、alt：替换文本
当图片加载失败时（如：路径写错了），才显示的文字
3、title：提示文本
当鼠标悬停在图片上时，才显示的文字
4、width：图片的宽度
5、height：图片的高度
注意点：
1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放
2、如果同时设置了两个，若设置不当此时图片可能会变形
-->
<img
src="./pic.git"
alt="加载失败"
width="100"
height="100"
title="小猫好可爱"
/>
<!--
绝对路径：指的是目录下的绝对位置，可直接到达目标位置，通常以盘符开始的路径
-->
<!-- 可以是本地电脑中的绝对路径 -->
<img src="D:\day01代码\cat.gif" alt="" />
<!-- 也可以是互联网上的绝对路径 -->
<img src="https://ss1.bdstatic.com/it/u=1944675514&fm=26&gp=0.jpg" alt="" />
<!--
多媒体标签：
音频标签：audio
属性：
1、src：路径
2、controls：播放的控件
3、autoplay：自动播放（部分浏览器不支持）
4、loop：循环播放
-->
<audio src="./music.mp3" controls autoplay loop></audio>
<!--
视频标签：video
属性：
1、src：路径
2、controls：播放的控件
3、autoplay：自动播放（部分浏览器不支持）——》在谷歌浏览器中写muted可以完成静音的自动播放
4、loop：循环播放
-->
<video src="./video.mp4" controls autoplay muted loop></video>
<!--
超链接：a标签 双标签
作用：点击之后跳转网页
属性：
1、href：告诉浏览器点击之后跳转去哪一个网页
取值：路径
1、外部链接：互联网上的绝对路径
2、内部链接：推荐使用相对路径
2、target：目标网页的打开方式
取值：
1、_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖
2、_blank：在新窗口中进行跳转，原网页保留
-->
<a href="https://www.baidu.com/" target="_blank">点击之后去百度网页</a>
<a href="./15-视频标签.html" target="_blank"
>点击之后去刚刚书写的视频网页</a
>
<!--
空链接：
1、点击之后回到顶部
2、开发中不确定该链接最终跳转位置（先用空链接占个位置）
-->
<h1>我是顶部的h1标签</h1>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<a href="#">回到顶部</a>
<h1>案例</h1>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr />
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
<h2>岗位要求</h2>
<p>
5年以上前端开发经验，
<strong>精通html5/css3/javascript等</strong>
web开发技术；
</p>
<p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
<p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
<p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./images/map.jpg" alt="" />
<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项 -->
<ul>
<li>橘子</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
<!-- ol表示有序列表的整体 -->
<!-- li表示有序列表的每一项 -->
<ol>
<li>橘子</li>
<li>苹果</li>
<li>香蕉</li>
</ol>
<!-- dl表示自定义列表的整体 -->
<!-- dt表示自定义列表的主题（标题） -->
<!-- dd表示自定义列表中的每一项解释说明 -->
<dl>
<dt>自定义列表主题</dt>
<dd>自定义列表内容</dd>
</dl>
<!-- table表示表格的整体 -->
<!-- tr表示表格的每一行 -->
<!-- td表示表格的单元格 -->
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</table>
<!-- border:表格的边框 -->
<!-- width:表格的宽度 -->
<!-- height:表格的高度 -->
<table border="1" width="200" hight="50" align="center">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</table>
<!-- caption：表格整体的大标题 -->
<!-- th：表头单元格，表格一列的小标题 -->
<table border="1">
<caption border="1">
大标题
</caption>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</table>
<!-- thead：表示表格的头部 -->
<!-- tbody：表示表格的主体 -->
<!-- tfoot：表示表格的底部 -->
<table>
<thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<!-- 合并单元格 -->
<table>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr rowspan="2">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- input标签可以通过type属性值的不同表现出不同的效果 -->
<!-- 1、文本框：text（type属性的默认值） -->
<label for="">昵称</label>
<input type="text" placeholder="请输入你的昵称" /><br />
<label for="">密码</label> <input type="password" /><br />
<label for="">性别</label><label for="">男</label
><input type="radio" /><br />
<label for="">爱好</label> <input type="checkbox" /><br />
<label for="">文本选择</label><input type="file" /><br />
<label for="">提交按钮</label> <input type="submit" value="提交" /><br />
<label for="">重置按钮</label><input type="reset" value="重置" /><br />
<label for="">普通按钮</label><input type="button" value="普通按钮" /><br />
<label for="">选择</label><br />
<select name="" id="">
<option value="-1" selected>请选择城市</option>
<option value="0">济南</option>
<option value="1">青岛</option>
</select>
<br />
<label for="">文本域</label>
<br />
<textarea name="" id=""></textarea>
<br />
爱好：
<!-- 第一种 -->
<input type="checkbox" id="one" /><label for="one">敲代码</label>
<!-- 第二种 -->
<label> <input type="checkbox" />熬夜 </label>
<!-- 没有语义的布局标签 -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<!-- 有语义的布局标签 -->
<header>网页的头部</header>
<nav>网页的导航</nav>
<footer>网页的底部</footer>
<aside>网页的侧边栏</aside>
<section>网页的区块</section>
<article>网页的文章</article>
<!-- HTML空格合并现象 -->
<!-- 女孩：宝贝，靠近点~ 男孩：我离不开你~ -->
p标签长这个样子：<p></p>
<h1>案例</h1>
<table border="1" width="400" height="400">
<!-- 表格整体的大标题 -->
<caption><h3>优秀学生信息表格</h3></caption>
<!-- 表格的头部 -->
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<!-- 保留 -->
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<!-- 删除 -->
<!-- <td>高三</td> -->
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>评语</td>
<!-- 保留 -->
<td colspan="3">你们都很优秀</td>
<!-- 统统删除掉 -->
<!-- <td>你们都很优秀</td> -->
<!-- <td>你们都很优秀</td> -->
</tr>
</tfoot>
</table>
<h1>案例</h1>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form>
昵称：
<input type="text" placeholder="请输入昵称">
<br><br>
性别：
<label>
<input type="radio" name="sex" checked>男
</label>
<label>
<input type="radio" name="sex">女
</label>
<br><br>
所在城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</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" checked>性感
<input type="checkbox">御姐
<input type="checkbox">萝莉
<input type="checkbox">小鲜肉
<input type="checkbox">大叔
<br><br>
个人介绍：<br><br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox">我同意所有条款
<br><br>
<input type="submit" value="免费注册">
<input type="reset">
</form>
</body>
</html>
浙公网安备 33010602011771号