00-html基础认识
<!--
1.web标准：
a.结构标准(html)：决定网页中的内容
b.表现标准(css)：决定网页中的内容的布局和显示样式
c.行为标准(JavaScript)：决定网页中的行为和动作（只要网页中有变化就要用到js）
2.html
a.什么是html语言
html：超文本标记语言
标记语言：通过不同的标记来显示不同的内容（以指定的格式来显示不同的内容）
超文本：除了文本以外还可以标记图片、超链接、音频、视频、flash、输入框、按钮等等
b.什么是html文件
html文件就是后缀是.html的文件，html文件可以直接用浏览器打开，看到网页效果
c.html结构
html基本结构是一个html标签中包含两个平行的head标签和body标签
head中的内容除了标题title和图标icon以外其他设置的内容都不可见，body就代表了网页的内容部分，里面的标签一般都是可见的
<html>
<head>
</head>
<body>
</body>
<html>
d.html版本
html5 -- html
注意：html中大小写不敏感
-->
<!-- 代表html版本 -->
<!DOCTYPE html>
<!-- html的基本结构 -->
<html>
<head>
<!-- head的子标签，在这儿是设置的字符编码方式(功能很强大) -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>二扬</title>
</head>
<body>
</body>
</html>
01-html标签
<!--
标签 == 标记
1.标签语法
双标签（常规标签）：<标签名 可以跟属性名1:属性值1 属性名2:属性值2...> 标签内容 </标签名>
单标签：<标签名 属性名1:属性值1 属性名2:属性值2.../> 或者 <标签名 属性名1:属性值1 属性名2:属性值2...>
说明：
a.标签名是html中已经有的标签，不能自己随便命名
b.开始标签的<和标签名还有/之间不能有空格
c.双标签放在开始标签内，属性和属性值用:连接，多个属性之间用空格隔开，属性没有位置要求
d.标签内容，双标签才有标签内容，在开始标签和结束标签之间，标签的内容可以使任意（文本、其他标签）
2.head标签中的内容
a.title：设置网页标题
b.base
c.link
d.meta：
设置网页元数据（单标签），charset设置编码方式
name： content：
keywords 包含网页的关键字，逗号隔开
description 告诉搜索引擎网站的内容
author 标注网页作者
viewport 设置浏览器网页的窗口
robots 设置爬虫的方式：none noindex nofollow all index follow
等等......了解
e.style
f.script
3.body标签
body中的标签主要用来在网页中的内容添加数据或者显示信息的
-->
<!DOCTYPE html>
<html>
<head>
<!-- 设置网页标题 -->
<title>二扬的标签</title>
<!-- 设置编码方式 -->
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
02-body_文本标签
<!--
1.标题标签
2.段落标签：一段文字就是一段p标签，一个段落使用一个p标签
3.特殊符号标签:
a.换行<br>
b.空格符号
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本标签</title>
</head>
<body>
<!--
1.标题标签：h1-h6
h1 - 大标题
h2 - 副标题
h3 - 副标题下的副标题
h4-h6以此类推
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--
2.段落标签：p标签
每个p标签中的内容显示完后会自动换行
-->
<p>哈哈哈，我是第一段文字</p>
<p>我是第二段文字</p>
<p>我是第三段文字我也是最长的一段文字</p>
a.我是直接写的内容，没有用p标签
b.我也是直接写在网页中的内容
c.这样我的我本来是三段，但是在网页中会被连在一起，所以要用p标签
<!--
3.特殊功能标签，在html文本中的换行、空格、tab等都是无效的（空白无效）
换行：<br>(单标签)
空格（符号）：
table： 
-->
<p>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
  低头思故乡。<br>
</p>
<!--
4.字体相关标签
加粗：<b>(只是加粗) <strong>(不仅加粗还有强调作用)
倾斜：<i> <em>(带有强调)
水平线：<hr>(单标签)
-->
<!-- <hr>的功能是水平线 -->
<hr >
<p>
<b>床</b>前明月光，<br>
疑<strong>是地</strong>上霜。<br>
<i>举</i>头<em>望</em>明月，<br>
<strong><em>低头</em></strong>思故乡。<br>
</p>
</body>
</html>
03-body_列表标签
<!--
列表标签：
a.有序列表
ol标签：代表整个列表
li标签：代表列表中的元素
b.无序列表
ul标签
li标签
c.自定义列表
dl标签：代表整个列表
dt标签：分组名
dd标签：分组中的内容
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
有序列表
ol标签 - 代表整个列表
li标签 - 代表列表中的元素
-->
<ol>
<li>基础语法</li>
<li>web前端</li>
<li>web后端</li>
<li>数据和人工智能</li>
<li>项目阶段</li>
</ol>
<!--
无序列表
ul标签 - 代表整个列表
li标签 - 代表列表中的元素
-->
<ul>
<li>python人工智能</li>
<li>HTML5</li>
<li>Java大数据</li>
<li>自动化测试</li>
</ul>
<!--
自定义列表
dl标签 - 代表整个列表
dt标签 - 分组名
dd标签 - 分组中的内容
-->
<dl>
<dt>python教学部</dt>
<dd>余婷</dd>
<dd>骆昊</dd>
<dd>王海飞</dd>
<dt>H5教学部</dt>
<dd>吴老师</dd>
<dd>丁老师</dd>
<dd>周老师</dd>
</dl>
</body>
</html>
04-body_图片标签和超链接
<!--
图片标签：img（单标签）
a.src属性 - 图片地址（本地图片路径或者网络图片的url）
本地图片的地址可以使绝对路径也可以是相对路径，一般将图片放在img文件夹中写相对路径
b.title - 设置图片标题（鼠标停留在图片上显示的内容）
c.alt - 设置图片加载失败的提示信息
超链接标签：<a>
a.内容- 文字
b.href - 跳转的目标地址
网页地址 - 跳转到指定的网页地址
本地的html文件地址
空（功能为刷新）
选择器 - 在当前网页中，跳转到指定的位置（列入返回顶部）
c.target:跳转的方式，默认为_self
_self 在当前页面跳转，原网页被覆盖
_blank 在新的页面中加载新的网页 ，原网页还在
c.内容 - 图片
b.href - 跳转到目标地址
网络地址 - 指定的网页地址
本地的html文件地址
空（功能为刷新）
选择器 - 在当前网页中，跳转到指定的位置（列入返回顶部）
#top 回到顶部
#id数字 回到文本标签id的位置
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
1.图片标签：img（单标签）
-->
<!-- <img src="./img/king.png" title="金木研" alt="加载失败" > -->
<!--
2.超链接标签：<a>
-->
<!-- 文字超链接 -->
<a href="https://www.baidu.com/">百度一下</a>
<!-- 图片超链接 -->
<a href="https://www.baidu.com/" target="_blank"><img src="img/king.png" ></a>
<p>第二张图片</p>
<a href="https://www.baidu.com/" id="2"><img src="img/king.png" ></a>
<!-- 本地超链接 -->
<a href="03_body列表标签.html">列表标签</a>
<!-- 什么都不写的超链接，功能为刷新 -->
<a href="">点我</a>
<!-- 选择器 -->
<a href="#top">回到顶部</a>
<a href="#2">第二张</a>
</body>
</html>
05-body_表格数据
<!--
表格：
1.table标签 - 整个表格
tr - 代表的行
td- 代表的列
2.表格边框双管的属性
border - 大的小的单元格都有一个边框
bordercolor - 颜色的值可以是英语单词也可以是RGB对应的十六进制值
cellspacing - 单元格与单元格还有边框的距离
cellpadding - 单元格内容与其边框内边距
align - 表格的对齐方式，通常为left right center
在table设置的时候回让表格在网页居中，在tr中设置会让
3.背景颜色对应的属性
bgcolor - 设置整个表格或者一行或每一个单元格的背景颜色
4.宽度和高度
width - 宽度
height - 高度
a.作用于table - 设置整个表格的宽度和高度，他会根据内容按比例去分配高度和宽度
b.作用于tr - 让整行单元格内容居中
c.作用于td - 让单个单元格内容居中
5.合并单元格
colspan 合并列
rowspan 合并行
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格</title>
</head>
<body>
<table border="1" bordercolor="pink" cellspacing="0" cellpadding="5">
<tr align="left" bgcolor="antiquewhite">
<td>FirstName</td>
<td>LastName</td>
<td>Points</td>
</tr>
<tr align="center" bgcolor="cadetblue">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr align="right">
<td bgcolor="honeydew">ErYang</td>
<td bgcolor="hotpink">FF</td>
<td bgcolor="chartreuse">100</td>
</tr>
</table>
<br>
<!--
设置细线表格
1.设置整个表格的背景颜色，也就是边框的颜色，再设置每个单元格的颜色(表格内容的颜色)，要与背景颜色不一样
2.设置cellspacing的值为边框的宽度
-->
<table bgcolor="black" width="300" height="200" cellspacing="1">
<tr bgcolor="antiquewhite">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<!-- 设置表格的宽度和高度 -->
<table bgcolor="black" width="300" height="200" cellspacing="1" cellpadding="20", align="center">
<tr bgcolor="antiquewhite" height="40" align="center">
<td width="100">姓名</td>
<td width="80">年龄</td>
<td width="50">性别</td>
</tr>
<tr bgcolor="antiquewhite">
<td align="center">二扬</td>
<td>18</td>
<td>男</td>
</tr>
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
06-body合并表格
<!--
制作复杂表格的方法
a.确定表格的最大行数,在table中用tr表示出来
b.确定每一行有多少单元格，用td表示出来
c.确定每一个单元格是否有合并现象，如果是行合并，就设置rowspan，如果是列合并就设置colspan
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>复杂表格</title>
</head>
<body>
<table bgcolor="antiquewhite" width="600" height="400">
<tr bgcolor="aliceblue">
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td rowspan="3" colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
网友评论