HTML标签
<!--
标签 == 标记
1.双标签(常规标签)：<标签名 属性名1:属性值1 属性名2:属性值>标签内容</标签名>
单标签:<标签名 属性名1:属性值1 属性名2:属性值>
说明:
标签名 - 是html中已经有的标签，不能自己命名。标签名和,以及变签名和/之间都不能有空隙
属性 - 属性和属性值之间用:连接，多个属性之间用空格隔开
标签内容 - 在开始标签和结束标签之间，标签内容可以是任意的(可以文本也可以使其他标签)
2.head标签中的内容
head中的标签有:title,mate,base,link,style,script
title - 设置网页标题
mate - 设置网页元数据(单标签)
-->
<!DOCTYPE html>
<html>
<head>
<!-- 设置网页标题 -->
<title>html标签</title>
<!-- 设置网页内容的编码方式 -->
<mata charset="utf-8"/>
</head>
<body>
内容
</body>
</html>
文本标签
<!--
1.标题标签
-->
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title></title>
</head>
<body>
<!-- 1.标题标签 h-->
<h1>title1</h1>
<h2>title2</h2>
<h6>title6</h6>
<!-- 2.段落标签 p
一个段落使用一个p标签，每个p标签中的内容限时完成后会自动换行
-->
<p>123</p>
<p>123456</p>
<p>123456789</p>
<!--
3.特殊功能标签
html中文本的换行、空格、tab等都是无效的
换行：<br>
空格符号：
-->
<p>
床前明月光<br>
疑是地上霜<br>
举头望明月<br>
低头思故乡<br>
</p>
<!--
4.字体相关的标签
加粗：b标签/strong标签
b标签只是单纯的文字效果加粗，strong标签有强调的意思
倾斜：i标签/em标签
i标签只是单纯的文字效果倾斜，em有强调意思
水平线:<hr>
-->
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>列表标签</title>
</head>
<body>
<!-- 列表分为有序列表、无序列表和自定义列表 -->
<!--
1.有序列表:
ol标签 -- 代表整个列表
li标签 -- 代表列表中的元素
-->
<ol>
<li>基础语法</li>
<li>web前端</li>
<li>web后端</li>
<li>数据和人工智能</li>
<li>项目</li>
</ol>
<!--
无序列表
ul标签 - 代表整个列表
li标签 - 代表列表中的元素
-->
<ul>
<li>python</li>
<li>Java</li>
<li>HTML5</li>
</ul>
<!--
3.自定义列表
dl标签 - 代表整个列表
dt标签 - 分组名
dd标签 - 分组中的内容
-->
<dl>
<dt>python教学部</dt>
<dd>aa</dd>
<dd>bb</dd>
<dd>cc</dd>
</dl>
</body>
</html>
图片和超链接
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>列表标签</title>
</head>
<body>
<!--
1.图片标签:img
单标签
a.src属性 - 图片地址(可以使本地图片路径也可以是网络图片的url)
本地图片：地址可以是绝对路径也可以是相对路径。一般将图片放在img中
b.title - 设置图片标题(鼠标停留在图片上，显示的内容)
c.alt - 设置图片加载失败的提示信息
-->
<img src="./img/">
<!--
超链接标签：a标签
a.内容 - 文字、图片
b.href - 跳转的目标地址
1）网页地址 - 跳转到指定的网页
2)本地的html文件地址 - 跳转到本地的html对应的网页中
3)空 - 刷新网页
4）选择器 - 在当前网页中跳转到指定的位置
-->
<a href="www.baidu.com">百度</a>
<a href="03-列表标签.html">列表标签</a>
<a >刷新</a>
<a href="#top">回到顶部</a>
<!--
c.target - 跳转方式
_self - 默认值，在当前页面刷新或加载新的网页(原网页呗覆盖)
_blank - 在新的页面中加载新的网页(原网页还在)
-->
<a href="www.baidu.com" target="_blank">百度一下<>
数据表格
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>列表标签</title>
</head>
<body>
<!--
1.表格标签
table标签 - 整个表格
tr - 行
td - 单元格
2.边框相关的属性
border - 边框的宽度
bordercolor -设置边框颜色(颜色值是英语单词，也可以是rgb对应的16进制值)
cellspacing - 单元格与单元格之间的间隙
cellpadding - 设置内容和单元格边框之间的距离
3.背景颜色
bgcolor - 背景颜色
a.作为table属性 - 设置整个表格背景颜色
b.作为tr属性 - 设置一行的背景颜色
c.作为tb属性 - 设置某一格的背景颜色
-->
<table border= "1" bordercolor = "#ff0000" cellspacing = "0"cellpadding = "20">
<!-- 第一行 -->
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>point</td>
<!-- 第二行 -->
<tr>
<td>Tom</td>
<td>A</td>
<td>80</td>
<!-- 第三行 -->
<tr>
<td>Tony</td>
<td>B</td>
<td>70</td>
<!--
4.宽度和高度
width = ""设置整个表格的宽度
height = ""设置整个表格的高度
a.作为table属性 - 设置整个表格宽、高(会按比例分配每一行宽度与高度)
b.分别设置每一行的高度和每一列的宽度<tr height = ""><td width="">
-->
<!--
5.对齐方式
align = center居中/left/right(右对齐)
a.作用于table，让整个表格在其父标签中居中
b.作用于tr，让整行中每个单元格中的内容在单元格中居中、左右对齐
c.作用于td，在单个单元格中居中，左右对齐
-->
</body>
<html>
复杂表格
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>复杂表格</title>
</head>
<body>
<!--
1.制作复杂表格的方法：
a.确定表格的最大行数
b.确定每一行有多少个单元格，用td表示出来
c.确定每一个单元格是否有合并现象，如果有行合并就设置rowspan的值，如果是列合并就设置colspan的值
-->
<table border ="" cellspacing = "" cellpadding="">
<tr>
<td></td>
<td colspan = "2"></td>
</tr>
<tr>
<td></td>
<td rowspan = "2"></td>
<td rowspan = "2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</body>
</html>
网友评论