一、认识网页开发
二、文本标签
三、列表标签
四、图片和超链接
五、表格标签
六、复杂的表格
=========================================
一、认识网页开发
1.W3C（万维网）标准
W3C对web开发制定的标准：
内容标准-------html
结构标准------css；
行为标准------javascript(js)
2.html
a.html是超文本语言除了文本以外，还可以显示其他的内容，包括图片、视频、音频、图形等。
b.html的结构
<html>
<head>
负责网页中看不到的设置性的东西(灵魂)
</head>
<body>
负责网页所有显示的内容（树干）
</body>
</html>
c.html标记（标签、元素）
1）、常规标记
<标记 属性=属性值 属性=属性值>内容</标记>
2）、空标记
<标记 属性=属性值 属性=属性值 />
<标记 属性=属性值>
说明：
1.尖括号中的第一个单词叫标记，标记后加一个空格后面的是属性，属性和属性值之间用等号连接，多个属性之间用空格隔开
2.属性之间没有先后顺序
3.常规标记的开始标记和结束标记中间就是标记的内容，这个内容理论上可以是任何内容(包括任何问题或者任何标签)
4.空标记只有属性
5.不同的标记有不同的功能（给网页提供不同的内容）
下面的结构，是每次写一个网页都必须写的结构
DOCTYPE用来声明html版本： html 对应的是 html5
注意：标签不区分大小写:DOCTYPE和doctype、Doctype等是一样的
<!DOCTYPE html>
<!-- html标签就是网页的根标签，所有的网页内容(不管是看得见还是看不见的)都要写在html标签中 -->
<html>
<!-- head标签中主要是用来对网页进行设置和说明的（这个标签中的内容在网页上是看不见的） -->
<head>
<!-- 设置网页的标题 -->
<title>python1804</title>
</head>
<body>
hello world
</body>
</html>
二、文本标签
1.标题标签(h1-h6)
功能：显示标题
注意：我们网页内容中的标题都要使用h标签
- 段落标签(p标签)
在网页上单纯的显示一段文字（文字不是标题、没有特殊的功能(比如点击会有跳转效果...)）
功能：p标签的内容结束后会默认换行，并且和下面的内容之间会多一个空行（一般情况一段文字使用一个p标签）
注意：html中的文本中手动的插入换行、空格和制表符是无效的
3.空格( )
4.加粗标签（b标签）
5.strong标签
6.i标签和em标签，让文字倾斜的标签，em标签有强调的意思
7.强制换行标签(br标签)
8.水平线(hr标签)
三、列表标签
1.无序列表(ul标签)
<ul>
<li>python</li>
<p>python课程主要包含五个阶段。。。。</p>
<li>H5</li>
<li>Java</li>
<li>测试</li>
</ul>
2.有序列表(ol标签)
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
3.自定义列表(dl标签)
dl中一组数据是通过dt和dd来列举的，dt后列举内容，dd后面对内容进行解释
<dl>
<dt>a</dt>
<dd>abc</dd>
<dt>b</dt>
<dd>abc</dd>
</dl>
</body>
</html>
四、图片和超链接
1.图片标签(img标签)
注意：属性的值全部需要使用双引号括起来
a. src属性： 需要显示的图片的地址（本地和网页）
本地图片：一般需要将图片放到当前的工程目录下
b. alt属性：图片加载错误的提示信息
c. title属性：鼠标放在图片上不动的时候，弹出的提示信息
显示一张本地图片
<img id="001" src="./images/aa.jpeg" alt="图片加载错误的提示信息" title="标题">
显示一张网络图片
<img src="http://ogjdtuxan.bkt.clouddn.com/image/png/luffy1.pngluffy1@2x.png">
2.超链接标签(a标签)
<a href="跳转的目的地址" >能够有点击跳转效果的内容</a>
href属性：点击a标签跳转的目标地址
target属性：有_self(默认)和_blank两个值。_self代表在当前页面中打开href属性中的地址的内容；_blank在新的页面中打开
跳转的地址是互联网上的某个页面的url
<a href="https://www.baidu.com">百度一下</a>
跳转地址是本地的html地址
<a href="./04-列表标签.html" target="_blank">点我一下</a>
跳转到当期页面的指定的位置
<a href="#001">回到顶部</a>
一个可以点击跳转的图片
<a href="https://www.baidu.com">
<img src="./images/luffy2.png">
</a>
五、表格标签
1.标签
table标签：表
tr： 行
td: 列
2.属性
border：设置表格的边框的宽度
bordercolor: 设置表格边框的颜色，颜色值有两种表示方式：1.RGB的十六进制值（#XXXXXX）2.颜色单词
width: 表格宽度
height:表格的高度;作为table的属性是设置整个表格的高度，作为tr属性是设置当前行的高度
bgcolor:设置背景颜色;作为table的属性是设置整个表的背景颜色；作为tr属性是设置当前行的背景颜色；作为td属性就是这个具体的单元格的背景颜色
cellspacing: 设置单元格与单元格之间的间隙(默认值是1)
cellpadding: 上右下左的间距; 这儿要注意当表格本身的大小小于设置完间距后的内容的大小，表格会被撑大
六、复杂的表格
合并
rowspan: 行合并
colspan：列合并
rowspan和colspan是td标签的属性，属性的值表示合并的列和行的数量
网友评论