html学习day01
前端学习笔记
<!DOCTYPE html> 告诉浏览器用的是html5版本
<head>
和页面相关的写在head标签中
</head>
<body>
页面的主体部分
</body>
一
-
<title></title>网页标题 -
<h1> ~ <h6>标题标签 -
<p></p>段落标签 -
<br/>换行标签 -
 一个空格 -
©版权符号 -
<hr/>水平线 -
<font color="red" size="5"></font>字体标签
练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>体育新闻</title> </head> <body> <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1> <h2>数据统计：水花兄弟合砍61分</h2> <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。 <br/> <br/> 汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场</p> <h1>兄弟对决升级：小库里给哥哥造成压力</h1> <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。<br/> <br/> 但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。<br/> <br/> 作者：李老师<br/> 2019-8-8</p> </body> </html>
结果:
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新闻案例</title> </head> <body> <h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1> <p> <br/> 2021年07月27日 10:58:26 来源：新华网 <br/> <hr/> </p> <p> 新华网上海7月26日电（记者李荣）26日13时36分至47分这一时间段，上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录，打破了此前1934年创下的40.2摄氏度的历史极值。 </p> <p> 上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份“第四高”的高温值，这使得26日的“基础”气温就很高，超过了30摄氏度，然后不断地升温。此外，26日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p> <p> 在上海历史上，出现40摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站140年来仅出现了5次记录，除了这一次的新纪录，还有就是1934年7月12日的40.2摄氏度；1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。</p> <p> 由于气温实在太高，上海26日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到15时05分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p> </body> </html>结果
![image]()
二
-
<strong></strong> <b></b>字体加粗（strong标签语义更加强烈） -
<em></em> <i></i>字体倾斜 -
<s></s>删除线 -
<u></u>下划线 -
<img src="图片的路径" title="鼠标放到图片上显示的文字" alt="图片不能显示的时候显示文字" width="图片的宽度" height="图片的高度" border="图片的边框"/> px：像素 页面中最常用的单位 一般情况下，我们不会设置图片的宽度和高度（用css来编辑页面） 绝对路径：从跟出发 相对路径：相对自身的位置
练习
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人简介</title> </head> <body> <h1>尤雨溪简介</h1> <hr/> <h2><font color="red">基本信息</font></h2> <p><strong>尤雨溪</strong>,前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js。 <br/> </p> <h2><font color="green">学习经历</font></h2> <p>尤雨溪毕业于<u>上海复旦附中</u>，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。 </p> <h2><font color="yellow">主要成就</font></h2> <p>尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。 <br/> <br/> 2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。 </p> <h2><font color="blue">社会任职</font></h2> <p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。 </p> </body> </html>
结果：
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>招聘案例</title> </head> <body> <h1>腾讯科技高级web前端开发岗位</h1> <hr /> <h2>职位描述</h2> <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p> <h2>岗位要求</h2> <p>5年以上前端开发经验， <strong>精通html5/css3/javascript等</strong> web开发技术；<br /> <br /> 熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；<br /> <br /> 代码?格严谨，能?保真还原设计稿，能兼容各种浏览?；<br /> <br /> 对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；<br /> <br /> 具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；<br /> <br /> 责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。<br /></p> <h2>工作地址</h2> <p>上海市-徐汇区-腾云大厦</p> <img src="img/map.jpg"> </body> </html>![image]()
三 超链接
<a href="" targer= "_blank"(新链接页面打开的方式)>文本/图片</a>- href="跳转的页面":必须属性
- target="_self" 在自身的窗口链接新的页面 默认值 /__blank 在新的窗口链接新的页面
练习
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<h1>欢迎访问首页</h1>
<a href="#">首页</a>
<a href="list.html">列表页</a>
<a href="detail.html">详情页</a>
<a href="product.html">产品页</a>
<br />
<br />
<br />
<img src="img/jst.jpg"/>
</body>
</html>
list.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list</title>
</head>
<body>
<h1>欢迎访问列表页</h1>
<a href="index.html">首页</a>
<a href="#">列表页</a>
<a href="detail.html">详情页</a>
<a href="product.html">产品页</a>
<br />
<br />
<br />
<img src="img/r1(1).jpg"/>
<img src="img/r2(1).jpg"/>
<img src="img/r3(1).jpg"/>
<img src="img/r4(1).jpg"/>
</body>
</html>
detail.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>detail</title>
</head>
<body>
<h1>欢迎访问详情页</h1>
<a href="index.html">首页</a>
<a href="list.html">列表页</a>
<a href="#">详情页</a>
<a href="product.html">产品页</a>
<br />
<br />
<br />
<img src="img/r1(1).jpg"/>
</body>
</html>
product.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>product</title>
</head>
<body>
<h1>欢迎访问产品页</h1>
<a href="index.html">首页</a>
<a href="list.html">列表页</a>
<a href="detail.html">详情页</a>
<a href="#">产品页</a>
<br />
<br />
<br />
<p>当前是产品的详情，此处省略一万字</p>
</body>
</html>
效果图:
index.html
list.html
detail.html
product.html
四 表格
-
表格的作用:展示数据
-
<table broder="边框" width="宽度" height="left/center/right" bgcolor="表格的背景颜色" cellspacing="规定单元格之间的空白"></table>:用于定义表格属性 <tr align="规定表格行的内容方式" bgcolor="行的背景颜色"></tr>:表示表格中行 <td></td>:表示表格中的单元格 <th></th>:表头单元格标签 字体加粗居中
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table align="center" width="500px" height="300px" border="1px">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="img/down.jpg"/></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="img/down.jpg"/></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记></td>
<td><img src="img/up.jpg"/></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="img/down.jpg"/></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="img/down.jpg"/></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="img/down.jpg"/></td>
<td>456</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简历</title>
</head>
<body>
<table width="1000" height="2000" align="center" border="1px">
<tr> <td height="120" colspan="5" align="center">个人简历</td></tr>
<tr><td bgcolor="yellow" colspan="5" >基本情况</td></tr>
<tr height="120">
<td width="110">姓名</td>
<td width="333"> </td>
<td width="110">性别</td>
<td > </td>
<td rowspan="7"> </td>
</tr >
<tr height="120">
<td>民族</td>
<td > </td>
<td>出生年月</td>
<td > </td>
</tr>
<tr height="120">
<td>政治面貌</td>
<td > </td>
<td>健康情况</td>
<td > </td>
</tr>
<tr height="120">
<td>籍贯</td>
<td > </td>
<td>学历</td>
<td > </td>
</tr>
<tr height="120">
<td>电子信箱</td>
<td > </td>
<td>联系电话</td>
<td > </td>
</tr>
<tr height="120">
<td colspan="4">毕业院校</td>
</tr>
<tr height="120">
<td colspan="4">求职意向</td>
</tr>
<tr >
<td colspan="5" bgcolor="yellow">教育情况</td>
</tr>
<tr >
<td>时间</td>
<td>院校名称</td>
<td>专业</td>
<td colspan="2">学历</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="5" bgcolor="yellow">培训经历</td>
</tr>
<tr>
<td>时间</td>
<td>培训机构</td>
<td>课程</td>
<td colspan="2">证书</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
结果:
浙公网安备 33010602011771号