0.前端简介
<!--
1. web标准
HTML - 结构/内容标准(决定网页中的内容)
CSS - 样式标准（负责网页中内容的样式和布局）
JS(javascript) - 行为标准(负责网页中内容的改变)
2.HTML(超文本标记语言) - 负责网页中的内容
网页中的内容主要有：文字、图片、视频、音频、超链接、输入框、按钮等...
1)HTML结构
<html>
<head>
</head>
<body>
</body>
</html>
html标签表示整个网页
head标签负责网页顶部的显示部分(网页图标、网页标题)
body标签负责网页主体内容部分
-->
<!-- 当前使用的html版本是: html5 -->
<!DOCTYPE html>
<html>
<head>
<!-- 设置文本编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>认识网页</title>
<style type="text/css">
#b1{
color: hsl(0,100%,50%);
}
</style>
</head>
<body>
<font id="b1" size="" color="">呵呵</font>
</body>
</html>
1.HTML基础
<!--
1. HTML基本语法
1)在html中大小写不敏感(html语法中大写和小写一样)
2)html是通过不同的标签来给网页提供不同的内容
2.标签(又叫标记)
语法：
<标签名 属性名1=属性值1 属性名2=属性值2 ...>标签内容</标签名> - 双标签语句
<标签名 属性名1=属性值1 属性名2=属性值2 ...> 或者 <标签名 属性名1=属性值1 属性名2=属性值2 .../> - 单标签语法
说明:
1)标签名 - html提供的标签的名字（不是程序员自己创建的）;
写法上不能和< 或者 > 或者 / 之间有空格（不能随意添加空格）
2)属性 - 以 属性名=值 的形式存在，多个属性之间用空格隔开;
属性有哪些是标签决定;
属性值必须用引号引起来
3)标签内容 - 只有双标签才有标签内容;
标签内容可以是任何内容：a.纯文字 b.一个或多个其他标签 c.文字和标签的结合
哪些标签是单标签哪些标签是双标签在设计html语言的时候就已经定好了，程序员无法修改。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
2.head中的标签
<!--
1.head中的标签
meta - 设置网页元数据的标签（网页设置性的操作）
title - 设置网页标题
style - 导入样式表的标签(CSS)，head和body中都可以使用
link - 导入外部文件(设置网页图标、导入外部样式表)； head和body中都可以使用，但是设置图标的功能只能在head中实现
script - 导入js代码或者js文件(JS)
-->
<!DOCTYPE html>
<html>
<head>
<!-- 1.设置文本编码方式 -->
<meta charset="utf-8">
<!-- 2.设置网页标题 -->
<title>head中标签</title>
<!-- 3.设置网页图标
1）rel - 设置被导入的文件的功能；
stylesheet（样式表）
icon（网页图标）
2）type - 指定被导入的文件的类型
text/css(后缀是css的文本文件)
text/txt(后缀是txt的文本文件)
image/png(后缀是png的图片文件)
image/ico(后缀是ico的图片文件)
3）href - 被导入的文件的路径
-->
<link rel="icon" type="image/ico" href="./img/jd_logo.ico"/>
</head>
<body>
</body>
</html>
3.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.标题标签: h1 ~ h6
h1 - 一级标题
h2 - 二级标题
h3 - 三级标题
h4 - 四级标题
h5 - 五级标题
h6 - 六级标题
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>
标题7
<!-- 2.段落标签: p
一个段落对应一个p标签
-->
<h2>2.段落标签</h2>
<p>
新京报快讯 据天津卫健委微信公众号消息，截至7月6日6时，
天机新增境外输入无症状感染者1例（中国籍），累计29例（境外输入28例），
其中解除医学观察21例、尚在医学观察5例、转为确诊病例3例。
</p>
<p>
第29例无症状感染者，女，23岁，学生，中国籍，近期居住地西班牙巴塞罗那
。自西班牙马德里乘坐航班（CA908），于7月5日抵达天津滨海国际机场。入境时体温3
6.5℃，申报无疾病症状，经海关检疫排查采样后，即转送至南开区集中隔离医学观察点；
当日核酸检测结果显示为阳性。后经市专家组确诊为我市境外输入无症状感染者，
现已转至空港医院进行隔离医学观察。全程实施闭环管理。
</p>
<!-- 3.普通文本标签: font-->
<h2>3.普通文本标签</h2>
<font>发布时间：07-0513:11</font>
<font>量子位官方帐号，万象大会年度获奖创作者,
财经领域创作者</font>
<!-- 4.空格和换行
强制换行 - br标签
空格符号 - (空一个像素)  (空一个空格键)
-->
<h2>4.空格和换行 </h2>
<p>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。<br>
</p>
<font>内容1</font> <br><br><br>
<font>内容2</font>
<p>
第29例无症状感染者，女，23岁，学生，中国籍，近期居住地西班牙巴塞罗那 。
自西班牙马德里乘坐航班（CA908），于7月5日抵达天津滨海国际机场。
入境时体温3 6.5℃，申报无疾病症状，经海关检疫排查采样后，即转送至南开区集中隔离医学观察点；
当日核酸检测结果显示为阳性。后经市专家组确诊为我市境外输入无症状感染者，
现已转至空港医院进行隔离医学观察。全程实施闭环管理。≠∞±
</p>
<p>
  第29例无症状感染者，女，23岁，学生，中国籍，近期居住地西班牙巴塞罗那 。
自西班牙马德里乘坐航班（CA908），于7月5日抵达天津滨海国际机场。
入境时体温3 6.5℃，申报无疾病症状，经海关检疫排查采样后，即转送至南开区集中隔离医学观察点；
当日核酸检测结果显示为阳性。后经市专家组确诊为我市境外输入无症状感染者，
现已转至空港医院进行隔离医学观察。全程实施闭环管理。
</p>
<!-- 5.加粗、倾斜
加粗：b标签、strong标签(有强调的作用)
倾斜：i标签、em标签(有强调的作用)
-->
<h2>5.加粗和倾斜</h2>
<p>
  第29例<b>无症状</b>感染者，女，23岁，学生，中国籍，近期居住地<strong>西班牙</strong>巴塞罗那 。
自西班牙马德里乘坐航班（CA908），于7月5日抵达天津滨海国际机场。
入境时体温3 6.5℃，申报<i>无疾病症状</i>，经海关检疫排查采样后，即转送至南开区集中隔离医学观察点；
当日核酸检测结果显示为<em>阳性</em>。后经市专家组确诊为我市境外输入无症状<b><i>感染者</i></b>，
现已转至空港医院进行隔离医学观察。全程实施闭环管理。
</p>
<!-- 6.水平线 : hr标签-->
<h2>6.水平线</h2>
<hr>
<p>
  第29例无症状感染者，女，23岁，学生，中国籍，近期居住地西班牙巴塞罗那 。
自西班牙马德里乘坐航班（CA908），于7月5日抵达天津滨海国际机场。
入境时体温3 6.5℃，申报无疾病症状，经海关检疫排查采样后，即转送至南开区集中隔离医学观察点；
当日核酸检测结果显示为阳性。后经市专家组确诊为我市境外输入无症状感染者，
现已转至空港医院进行隔离医学观察。全程实施闭环管理。
</p>
<hr>
</body>
</html>
4.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.列表标签有三个：ul标签、ol标签、dl标签
无序列表 - ul标签
有序列表 - ol标签
自定义列表 - dl
-->
<!-- 1）无序列表: ul
列表元素 - li标签
-->
<h1>1）无序列表</h1>
<ul>
<li>Python</li>
<li>高等数学</li>
<li>大学物理</li>
<li>量子力学</li>
<li>毛泽东思想邓小平理论</li>
</ul>
<!-- 2）有序列表：ol -->
<h1>有序列表:</h1>
<ol>
<li>将牛肉洗干净</li>
<li>在水中加白酒、盐、生姜、花椒，放牛肉进去煮到7分熟</li>
<li>将牛肉捞起来切片</li>
<li>油锅中入干海椒、花椒、生姜炸香后再放入牛肉炸</li>
<li>起锅前放入盐和白糖</li>
</ol>
<!-- 3）自定义列表: dl
dl标签 - 表示整个列表
dt标签 - 分类
dd标签 - 元素
-->
<h1>自定义列表：</h1>
<dl>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>绵阳市</dd>
<dd>德阳市</dd>
<dd>广元市</dd>
<dd>眉山市</dd>
<dt>辽宁省</dt>
<dd>大连市</dd>
<dd>鞍山市</dd>
<dd>铁岭市</dd>
<dd>沈阳市</dd>
</dl>
<dl>
<dt>python</dt>
<dd>语言基础阶段</dd>
<dd>html\css\js</dd>
<dd>Linux</dd>
<dd>数据库</dd>
<dd>web后端框架</dd>
<dd>爬虫</dd>
<dd>数据分析+人工智能</dd>
<dd>项目</dd>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>js、jQuery</dd>
<dd>Vue.js</dd>
<dd>Node.js</dd>
<dd>项目</dd>
</dl>
</body>
</html>
5.图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.图片标签：img
1) src属性 - 图片的地址(a.本地图片地址 b.网络图片地址)
-->
<h1 id="h1">1.图片显示</h1>
<h2 id="h2">本地图片</h2>
<img id="img1" src="img/luffy4.jpg" >
<h2 id="h3">网络图片</h2>
<img id="img2" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=609817066,648959164&fm=173&app=49&f=JPEG?w=312&h=208&s=4586FC1F4D1A71C84EE044FF03005033" >
<!--
2)title属性 - 设置图片标题（鼠标停留在图片上的时候才会显示出来）
-->
<h2>设置图片标题</h2>
<img src="img/luffy.jpg" title="路飞">
<!--
3)alt属性 - 设置图片加载失败的时候的提示信息
-->
<h2>图片加载失败</h2>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf2.png" alt="图片加载失败">
<!-- 2.超链接：a标签
1）标签内容 - 超链接中可见可点击的部分
2）href属性 - 跳转的目标地址
-->
<h1 id="h4">2.超链接</h1>
<h2>文字超链接：</h2>
<a href="https://map.baidu.com/@11586107,3567021,13z">地图</a>
<a href="https://www.baidu.com">百度</a>
<h2>图片超链接：</h2>
<a href="https://www.jd.com">
<img src="img/jd_logo.ico" >
</a>
<!-- href属性
1）网页地址 - 跳转到指定网页
2）本地html文件地址 - 在新的页面中加载指定的html文件中的内容
3）选择器 - 网页滚动到选择器选中的标签对应的位置
4）# - 页面刷新
-->
<h2>本地html文件地址</h2>
<a href="04-列表标签.html">列表</a>
<h2>选择器</h2>
<a href="#h1">回滚顶部</a>
<h2>刷新</h2>
<a href="#">刷新</a>
<!-- target属性
_self - 默认；在当前页面中直接加载新的页面（原页面会被覆盖）
_blank - 在新的网页中加载新的页面（原页面会被保留）
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>
6.table标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EzLfFnLt-1596427143923)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200707091634895.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.HTML中和表格相关的常用标签有3个：table、tr、td
table标签 - 表示整个表格
tr标签 - 表示一行
td标签 - 表示一个单元格
2.table相关的属性
1）table的属性：
border - 边框宽度
cellspacing - 单元格之间的间隙，默认是1
width - 设置整个表格的宽度
height - 设置整个表格的高等
align - 设置整个表格的对齐方式
bgcolor - 设置单元格的背景颜色
cellpadding - 设置内容和格子之间的间距
2）tr的属性：
height - 单独设置指定行的高度
align - 设置指定行中所有单元格的对齐方式
bgcolor - 设置单元格的背景颜色
3）td的属性：
width - 单独设置指定列的宽度
align - 设置指定一个单元的对齐方式
bgcolor - 设置单元格的背景颜色
-->
<h2>3行3列的表格</h2>
<table border="1" cellspacing="0" align="center" bgcolor="beige" cellpadding="20">
<!-- 第一行 -->
<tr height="40">
<!-- 第一行第一列 -->
<td width="100" align="center">第1行第1列</td>
<td width="150">第1行第2列</td>
<td width="200">第1行第3列</td>
</tr>
<!-- 第二行 -->
<tr height="60" align="right" bgcolor="cadetblue">
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<!-- 第三行 -->
<tr height="60">
<td>第3行第1列</td>
<td>第3行第2列</td>
<td bgcolor="cornflowerblue">第3行第3列</td>
</tr>
</table>
<h2>3行4列</h2>
<!-- table>tr*3>td*4 -->
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</table>
<!-- 3.合并
colspan - 列合并
rowspan - 行合并
-->
<h2>合并的表格</h2>
<table border="1" cellspacing="0" width="1000" height="500">
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
7.作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>**的个人简历</title>
<style type="text/css" >
tr
{text-align: center;}
td
{text-align: center;}
</style>
</head>
<body>
<table width="800" height="1200" border="1" cellspacing="0" align="center">
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><b>个人简历</b></td>
</tr>
<tr align="center">
<td>姓  名：</td>
<td>吴**</td>
<td>性  别</td>
<td>男</td>
<td rowspan="4" width="140" height="120"><img src="img/1.jpg" width="120" height="200" alt="上传了你也看不到" /></td>
</tr>
<tr align="center">
<td>婚姻状况：</td>
<td>未婚</td>
<td>出生年月：</td>
<td>1998/05/17</td>
</tr>
<tr align="center">
<td>名  族：</td>
<td>汉族</td>
<td>**面*：</td>
<td>**团员</td>
</tr>
<tr align="center">
<td>身  高：</td>
<td>180</td>
<td>学  历：</td>
<td>本科</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><b><u>教育背景</u></b></td>
</tr>
<tr>
<td>西华大学</td>
<td colspan="4">2014-09~2018-06</td>
</tr>
<tr>
<td>千  峰</td>
<td colspan="4">2020-06~2020-11</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><b><u>求职意向</u></b></td>
</tr>
<tr>
<td>工作类型：</td>
<td colspan="4">开发岗</td>
</tr>
<tr>
<td>工作岗位：</td>
<td colspan="4">数据分析师</td>
</tr>
<tr>
<td>到岗时间：</td>
<td colspan="4">随时到岗</td>
</tr>
<tr>
<td>发展方向：</td>
<td colspan="4">人工智能</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><b><u>工作经验</u></b></td>
</tr>
<tr>
<td colspan="5">2年运维，网页开发工作经验</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><b>个人自我评价</b></td>
</tr>
<tr>
<td colspan="5">爱钻研技术，有责任心，能够独当一面。</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><u><b>联系方式</b></u></td>
</tr>
<tr>
<td>联系电话：</td>
<td colspan="4">183********</td>
</tr>
<tr>
<td>电子邮件：</td>
<td colspan="4">8400****@qq.com</td>
</tr>
</table>
</body>
</html>
colspan=“5” bgcolor=“forestgreen” align=“center”>工作经验
</tr>
<tr>
<td colspan="5">2年运维，网页开发工作经验</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><b>个人自我评价</b></td>
</tr>
<tr>
<td colspan="5">爱钻研技术，有责任心，能够独当一面。</td>
</tr>
<tr>
<td colspan="5" bgcolor="forestgreen" align="center"><u><b>联系方式</b></u></td>
</tr>
<tr>
<td>联系电话：</td>
<td colspan="4">183********</td>
</tr>
<tr>
<td>电子邮件：</td>
<td colspan="4">8400****@qq.com</td>
</tr>
</table>
</body>
扫一扫
1642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
