1、html简介
1、web标准：
（1）结构标准（html）：决定网页内容
（2）表现标准（css）：决定网页内容的布局与样式
（3）行为标准（JavaScript）：决定网页中的行为和动作
2、html
html：超文本标记语言
标记语言：通过不同的标记指定不同的格式来显示不同的内容
超文本：html除了文本以外还可以标记音频，视频，图片等等
html文件就是以html位后缀的文件，可以使用浏览器直接打开
3、html结构
基本结构：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
head中内容除了title与icon以外的内容都不可见，body中的内容一般在网页中都能看见
html大小写不敏感
<!DOCTYPE html>
<html>
<head>
<!--设置编码格式-->
<meta charset="utf-8" />
<!--设置标题-->
<title>这是标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
</body>
</html>
2、html标签
1、标签语法：
(1)双标签：<标签名 属性名1:属性值1 属性名2:属性值2 ... 属性名n:属性值n >内容</标签名>
(2)单标签：<标签名 属性名1:属性值1 属性名2:属性值2 ... 属性名n:属性值n /> 或者 <标签名 属性名1:属性值1 属性名2:属性值2 ... 属性名n:属性值n >
说明：①标签名是html中已有的标签，不能自己随意命名
②开启式标签名与前边的 < 以及结束标签名与 / 之间不能有空格
③属性名与属性值以 : 连接，多个属性以空格隔开
④标签内容在开始标签与结束标签之间，内容可以是任意内容
2、head标签
head 是表示网页头部
head标签中的内容只要包括 title ， mate ，base ，link ，style ，script
（1）title(双标签):设置网页标题
（2）mate(单标签):设置网页元数据，mate标签有很多属性，功能很多
3、body标签
body 表示网页主题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
3、文本标签
1、标题标签(双标签) <h1></h1>
2、段落标签(双标签) <p></p>
3、特殊功能标签
(1)换行(单标签)
(2)空格(单标签)
(3)加粗 <b></b> 字体上的加粗 或者 <strong></strong> 语气强调
(4)倾斜<i></i> 字体上的倾斜 或者 <em></em> 着重强调
(5)划横线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<p>一个段落标签，
一次换行,段落与段落直接有一个空行</p>
<p><b><em>天不生仲尼</i></em>，<br><strong><i>万古如长夜</i></strong></p>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
4、列表标签
列表分为有序列表，无序列表，自定义列表
1、有序列表
ol:代表整个列表,双标签
li:列表中的元素,双标签
2、无序列表
ul:代表整个列表,双标签
li:列表中的元素,双标签
3、自定义列表
dl:代表整个列表,双标签
dt:分组名
dd:分组内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表标签</title>
</head>
<body>
<ol>
<li>python基础语法</li>
<li>web前段</li>
<li>web后端</li>
</ol>
<ul>
<li>python基础语法</li>
<li>web前段</li>
<li>web后端</li>
</ul>
<dl>
<dt>一人之下</dt>
<dd>炁体源流</dd>
<dd>逆生三重</dd>
<dt>魔道祖师</dt>
<dd>莲花坞</dd>
<dd>云深不知处</dd>
</dl>
</body>
</html>
5、图片标签与超链接
1、图片标签
img(单标签):
src属性值是图片路径,
title属性值是图片标题（鼠标停在图片上显示的内容）,
alt属性提示加载失败的显示显示信息
2、超链接
a(双标签):
内容 文字或者图片
href属性：链接地址
网页地址
本地html文件地址
空 （刷新网页）
选择器（锚）
target属性：决定跳转方式(5种方式),默认是_self
_self 在当前窗口跳转
_blank 在新的窗口跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签与超链接</title>
</head>
<body>
<img src="img/147014999.jpg" title="宝儿姐">
<br>
<a href="https://www.baidu.com" target="">百度一下</a>
<a href="">刷新</a>
</body>
</html>
6、数据表格
表格标签：
1、table标签
表示整个标签
2、tr
表格的一行
3、td
单元格
边框属性:
border:边框宽度
bordercolor:边框颜色（可以是颜色的引文单词，可使是RGB颜色,但是需要用16进制表示）
cellspacing:单元格与单元格间距
背景颜色:
bgcolor:背景颜色（可以是颜色的引文单词，可使是RGB颜色,但是需要用16进制表示），可用在table，tr，td等等
宽度与高度：
width
height
(1)作用于table，设置完成后，会自动按比例分配行列的高宽
(2)作用于tr,只能使用height
(3)作用于td,每一行只用设置一个单元格的height,width可以分别设置
对齐方式：
align="center" 居中
align="left" 左对齐
align="right" 右对齐
(1)作用于table时，是让整个表格在其父标签中对齐
(2)作用于tr td ，让单元格中内容在单元格中对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数据表格</title>
</head>
<body>
<table border="" bordercolor="red" cellspacing="0" cellpadding="6" bgcolor="azure" width="300" height="260" align="center">
<tr bgcolor="cornsilk">
<td bgcolor="coral">火之晨曦</td>
<td>暗月之潮</td>
<td>悼亡者之瞳</td>
</tr>
<tr align="left">
<td align="right">龙族</td>
<td>九州缥缈录</td>
<td>此间少年</td>
</tr>
<tr align="center">
<td>君炎</td>
<td>婆娑之舞</td>
<td>时间零</td>
</tr>
</table>
</body>
</html>
7、复杂表格
1、确定最大行数
2、确定每行列数
3、确定每个单元格是否有合并现象
colspan 列合并
rowspan 行合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复杂表格</title>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="" width="400" height="600" align="center" bgcolor="aliceblue">
<tr bgcolor="antiquewhite">
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="burlywood">
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr bgcolor="cornsilk">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<br>
<table cellspacing="0" border="1" width="800" height="400" align="center">
<tr>
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2" rowspan="3"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
网友评论