01-knowingHTML5 初识HTML5
02-basicStructure 基本结构
03-textLabels 文本标签
04-listLabels 列表标签
05-imagesAndHyperlinks 图片和超链接
06-tableLabels 表格标签
07-complexTabel 复杂的表格
01-knowingHTML5 初识HTML5
<!-- 1.w3c(万维网) -->
<!--
w3c对web开发制定的标准：
内容标准 - html
结构标准 - css
行为标准 - JavaScript（js）
<!-- 2.html -->
a.什么是html（就像markdown语法）
html叫超文本标记语言（超文本，除了文本还可以显示其他内容,包括：图片、视频、音频、图形等）
html是标记语言，不是编程语言
b.html版本
html1.0-html2.0 - ...- html5
html5.0:狭义概念，html标记语言的第5个大版本；广义的html5：指html5+css3+js
c.html的结构
网页的内容可以看成一个树的结构：
<html>
<head>
负责网页中看不到的设置型的东西（灵魂）
</head>
<body>
负责网页所有显示的内容（树干）
</body>
</html>
d.html标记（标签、元素）
1）常规标记
<标记 属性=属性值(可以有多个)> 内容 </标记>
2）空标记
<标记 属性=属性值(可以有多个)/>
<标记 属性=属性值>
说明：
1.尖括号中的第一个单词叫标签，标记后加一个空格后面的是属性，属性和属性值之间用等号连接，多个属性之间用空格隔开
2.属性之间没有先后顺序
3.常规标记的开始标记和结束标记中间就是标记的内容，这个内容理论上可以是任何内容（包括任何问题或者任何标签）
4.空标记只有属性
5.不同的标记有不同的功能（给网页提供不同的内容）
-->
02-basicStructure 基本结构
<!-- 下面的结构，是每次写一个网页都必须写的结构 -->
<!-- DOCTYPE用来声明html版本：html对应的是 html5
注意：标签不区分大小写：DOCTYPE和doctype、Dcotype等是一样的
-->
<!DOCTYPE html>
<!-- html标签就是网页的根标签，所有的网页内容(不管是看得见还是看不见的）都要写在html标签中) -->
<html>
<!-- head标签中主要是用来对网页进行设置和说明的（这个标签中的在网页上试看不见的 ）
主要包含：title标签、type标签、sript标签、link标签、base标签等
-->
<head>
<!-- 设置网页的标题 -->
<title>python1804</title>
</head>
<!-- body标签代表网页上可见的部分，所有需要展示在网页上的内容都需要写在这个标签里
主要包含：p、h1-h6、div、table、input等
-->
<body>
helloworld
</body>
</html>>
03-textLabels 文本标签
<!DOCTYPE html>
<html>
<head>
<title>文本标签</title>
</head>
<body>
<!-- 1.标题标签（h1-h6）
功能：显示标题
注意：我们网页内容中的标题都要使用h标签
-->
<h1>I'am title 1！</h1>
<h2>I'am title 2！</h2>
<h3>I'am title 3！</h3>
<h4>I'am title 4！</h4>
<h6>I'am title 6！</h6>
<!-- 2.p标签：在网页上单纯的显示一段文字（文字不是标题、没有特殊的功能（比如点击会有跳转效果...））
功能：p标签的内容结束后会默认换行，并且和下面的内容之间会多一个空行，一般情况一段文字使用一个p标签
注意：html中的文本手动的插入换行、空格和制表符是无效的
-->
<p> 大江东去，浪淘尽，千古风流人物。大江东去，浪淘尽，千古风流人物。大江东去，浪淘尽，千古风流人物。
大江东去，浪淘尽，千古风流人物。大江东去，浪淘尽，千古风流人物。</p>
<p>大江东去，浪淘尽，千古风流人物。</p>
<!-- 3.空格（ ） -->
<p> 大江东去，浪淘尽，千古风流人物。
</p>
<!-- 4.加粗标签(b标签) -->
<p>大江东去，浪淘尽，<b>大江东去，浪淘尽，千古风流人物。</b>
千古风流人物。大江东去，浪淘尽，千古风流人物。
</p>
<!-- 5.加粗标签（strong标签）
注意，显示效果上b标签和strong标签都有对文字进行加粗的效果，但是strong有强调的意思，b没有-->
<p>
大江东去，浪淘尽，千古风流人物。大江东去，浪淘尽，千古风流人物。
<strong>，浪淘尽，千古风流人物。</strong>
大江东去，浪淘尽，千古风流人物。
</p>
<!-- 6.让文字倾斜的标签（i标签和em标签,em有强调效果） -->
<p>
大江东去，浪淘尽，千古风流人物。<i> 大江东去，浪淘尽，千古风流人物。</i>江东去，<em><b>大江东去，浪淘尽，千古风流人物。</b></em>浪淘尽，千古风流人物。
</p>
<!-- 7.强制换行标签（br标签） -->
<p>雄关漫道真如铁，而今迈步从头越。雄关漫道真如铁，而今迈步从头越雄关漫道真如铁，<br/>而今迈步从头越。雄关漫道真如铁，而今迈步从头越。雄关漫道真如铁，而今迈步从头越。雄关漫道真如铁，而今迈步从头越。雄关漫道真如铁，而今迈步从头越。
</p>
<!-- 8.水平线（hr标签） -->
<p>
此去经年，当当当当。此去经年，<hr>当当当当此去经年，当当当当。此去经年，当当当当此去经年，当当当当
</p>
</body>
</html>>
03.png
04-listLabels 列表标签
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 1.无序列表（ul标签） -->
<ul>
<li>python</li>
<p>python的主要课程有：</p>
<li>H5</li>
<LI>javA</LI>
<li>测试</li>
</ul>
<!-- 2.有序列表（ol标签） -->
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ol>
<!-- 3.自定义列表（dl标签）
dl中一组数据是通过dt和dd列举的，dt-列举内容；dd-对内容进行解释
-->
<dl>
<strong><dt>a</dt></strong>
<dd>abd</dd>
<dt>b</dt>
<dd>bc</dd>
</dl>
</body>
</html>
04
05-imagesAndHyperlinks 图片和超链接
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- charset设置编码方式 -->
<meta charset="utf-8">
</head>
<body>
<!-- 1.图片标签(img标签)
注意：属性的值全部需要使用双引号括起来
a. src：需要显示的图片的地址(本地和网页）注意：本地地址应放在和程序文件同一个工程目录里
b. alt:图片加载失败后的提示信息
c. title：鼠标放在图片上不动的时候，弹出的提示信息
-->
<!-- 本地图片 -->
<img id="001" src="./images/小黄人.jpg" alt="littleYellodPerson" title ="This is title" width="200">
<!-- 网络图片 -->
<img class="js-imglist-img mh-img-def" src="https://p.ssl.qhimg.com/dmsmty/74_74_100/t01f57ad85d4288a8ec.png" width="74" height="74">
<!-- 2.超链接标签（a标签）
href：点击a标签跳转的目标地址;可以是互联网上某个页面的url也可以是本地的html地址
target属性：有_self(默认)和_blank的两个值。_self代表在当前页面中打开href属性中的地址的内容；_blank在新的页面中打开
-->
<!-- 跳转到互联网上某个页面的url -->
<a href="https://www.baidu.com">百度一下</a>
<!-- 跳转到本地的html地址 -->
<a href="04-列表标签.html">to another interface</a>
<!-- 跳转到当前页面指定位置 -->
<a href="#001">回到顶部</a>
-->
</body>
</html>
05.png
06-tableLabels 表格标签
<!DOCTYPE html>
<html>
<head>
<title>Table label</title>
<meta charset="utf-8">
</head>
<body>
<!-- 表格标签
1.标签
table：表
tr：行
td：列
2.属性
border：设置表格边框的宽度
bordercolor：表格边框的颜色,颜色值有两种表示方式：1.RGB的十六进制（#xxxxxx）2.直接写颜色的单词：red、white、black、pink、purple、green
width：表格的宽度,只能作用于整个table
height：表格的高度，可以作用于table和tr
bgcolor：设置背景颜色;可以作用于table、tr和td
cellspacing:单元格与单元格之间的间距（默认值是1）
cellpadding：内容与上下左右边框的间距，当表格本身的间距小于设置完后间距的大小，表格会被撑大
-->
<table border="2" bordercolor="blue" width="400" height="300" bgcolor="#aacc99" cellspacing="0" cellpadding="20,30,10,5">
<!-- 第一行 -->
<tr height="100" bgcolor="green">
<td>姓名</td>
<td>成绩</td>
</tr>
<!-- 第二行 -->
<tr>
<td bgcolor="999999">胡彪</td>
<td>88</td>
</tr>
<!-- 第二行 -->
<tr>
<td>刁强</td>
<td>89</td>
</tr>
<!-- 第二行 -->
<tr>
<td>杨玻</td>
<td>90</td>
</tr>
</table>
<table border="2" cellspacing="0" cellpadding="10,30,50,70">
<!-- 第一行 -->
<tr bgcolor="green">
<td>姓名</td>
<td>成绩</td>
</tr>
<!-- 第二行 -->
<tr>
<td bgcolor="999999">胡彪</td>
<td>88</td>
</tr>
<!-- 第二行 -->
<tr>
<td>刁强</td>
<td>89</td>
</tr>
<!-- 第二行 -->
<tr>
<td>杨玻</td>
<td>90</td>
</tr>
</table>
</body>
</html>
06.png
07-complexTabel 复杂的表格
<!DOCTYPE html>
<html>
<head>
<title>complex table</title>
</head>
<body>
<!--
colspan:列合并
rowspan:行合并
rowspan和colspan是td标签的属性，属性的值表示合并的列和行的数量
-->
<table width="400" border="1" height="300" bgcolor="#55ccd1">
<tr height="50" bgcolor="999999">
<td rowspan="2"></td>
<!-- 第二列和第三列合并 -->
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr height="50" bgcolor="999999">
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
aa.png
123.png
网友评论