1.认识web -- web开发指的就是写网页
web标准中，将网页开发规范分为三个标准；
1）结构标准 -- html，决定网页中的内容
2）表现标准 -- css，决定网页中内容的样式和布局
3）行为标准 -- js（JavaScript），决定网页内容动态变化
2.什么是html
html又叫超文本标记语言（注意不是编程语言）
大小写不敏感，h1和H1一样
html就是由各种各样的标签组成
html标签，代表整个网页；
head -- 代表网页的顶部和内部核心的东西
body -- 代表整个网页内容部分
3.html中的标签
说明当前网页采用的html版本
1.标签的语法
html中的标签分为两种：双标签和单标签
1）语法
双标签：<标签名 属性名1=属性值1 属性名2=属性值2...>标签内容</标签名>
单标签：<标签名 属性名1=属性值1 属性名2=属性值2...>
或者 <标签名 属性名1=属性值1 属性名2=属性值2
2）说明
标签名： a.标签名不能自己随便命名，而是使用当前html版本提供的标签名;不同的内容对应的标签不一样
b.哪些标签是单标签哪些标签是双标签，是固定的
c.标签名前不能随便加空格
属性： a.哪些标签有哪些属性是确定的，属性名和属性值之间用=连接，多个属性之间用空格隔开
b.如果有多个属性，属性顺序可以随意
c.html中所有属性的值都必须用引号引起来，不管类型
标签内容：指的的是双标签开始标签和结束标签中的部分；
双标签的内容中可以放任何内容（可以是文字，也可以是别的一个或者多个标签）
2.head中标签：
meta - 元数据，主要做一些网站设置性的工作
title - 设置网页标题，默认显示网页地址。
link - 导入文件（设置网页图标，导入外部样式(css)）
style -
script -
base -
!--设置网页编码格式-->
<meta charset="UTF-8">
<title>我是title</title>
<link rel="icon"type="image/png"href="./img/luffy1.png"/>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
-2.段落标签
一段文字表示一个段落就用一个p标签
-->
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
!--3.网页中的换行和空格
在html中手动输入换行和空格是无效的！！！
1）强制换行: <br />
在网页中需要强制换行的地方加<br />
2)空格符号：
- 空一个像素（px）
- 空一个空格
其他符号可查html特殊符号编码对照表！
心情好，那么什么都好，心情不好，你的一切也就都乱了。<br />
我们常常不是输给了别人，而是坏心情影响了我们的形象，<br />
降低了我们的能力，扰乱了我们的思维，从而是输给了自己。<br />
控制好心情，生活才会处处祥和。拿得起的人，处处是担当。<br />
拿不起的人，处处是疏忽。看透的人，处处是生机。<br />
1234567890
--4.font标签：font
表示一段文字，这段文字可以和别的网页内容同行显示
-5.水平线：hr
单标签
-->
<hr />
!--6.文字效果：
1）加粗：b标签和strong标签 -- strong有强调的意思
2）倾斜：i标签和em标签 -- em有强调的意思
-->
<b>别总羡慕别人的光鲜亮丽，那只是你没看到他们背后<br />
默默付出时的努力。成长总是伴随着汗水与眼泪，关<br />
关难过关关过，熬得住就出众，熬不住就出局。要走<br />
更长远的路，就要有异于常人的付出。从现在就开始<br />
行动，<i>这是你驱散迷茫最好的方式。</i><br /></b>
列表标签：
网页中多个内容的意义是一样的，或者表示一个分类下的具体内容等...
1.无序列表：ul标签、li标签
ul - 代表整个容器
li - 代表列表中的元素
2.有序列表：ol标签、li标签
ol - 代表整个容器
li - 代表列表中的元素
3.自定义列表:dl <a href="#p1" id=top>第一张</a>
<a href="#p2">第二张</a>
<a href="#p3">第三张</a>
<h1 id=p1>第一张</h1>
!--1.图片标签：img
单标签
src属性 -- 图片地址（可以是网络图片地址也可以是本地图片地址）
title属性 -- 设置图片标题（鼠标悬停在图片上，显示的文字）
alt属性 -- 图片加载失败的提示语
<img alt='图片加载失败！' title='1号佳丽' src="http://wx4.sinaimg.cn/mw600/0076BS
S5ly1g4kaohria4j30fd0fadim.jpg"/>
<h1 id=p2>第二张</h1>
<img alt='图片加载失败！' title='2号佳丽' src="http://wx2.sinaimg.cn
/mw600/0076BSS5ly1g4k9ozr8qdj30q60zlkjl.jpg"/>
!--2.超链接：a
可以点击后跳转到其他网页的内容基本都是超链接<a href="">标签内容</a>
1）标签内容：决定点击谁可以跳转
图片超链接：
文字超链接：
2）href属性 -- 决定跳转到哪个位置
a.网络地址 -- 跳转到指定页面
b.本地html网址 -- 跳转到指定的本地页面
c.选择器 -- 在当前页面中跳转到指定的位置
d.空 -- 刷新页面（有兼容性问题）
3）target属性
_self(默认) -- 在当前页面中加载新的内容
_blank - 在新页面中加载新的内容
!--文字超链接-->
a href="https://www.baidu.com">百度</a>
<h1 id=p3>第三张</h1>
<a href="https://www.baidu.com"><img src="http://wx2.sinaimg.cn/
mw600/0076BSS5ly1g4k7df69zjj30jg0t6wtd.jpg"/></a>
<a href="02-列表标签.html">列表标签</a>
a href="#top">回到顶部</a>
<a href="">刷新</a>标签、dd标签、dt标签
表格标签：table、tr、td
1.table标签 -- 代表整个表情
border属性 -- 边框线的宽度
cellspacing -- 单元格与单元格之间的间隙
align -- 设置对齐方式：left（默认）\right\center
设置整个表格在其父标签中的对齐方式
width -- 设置整个表格的宽度（单位是像素）
height -- 设置整个表格的高度
cellpadding - 设置内容到单元格上下左右之间的间距
bordercolor - 表框线的颜色
bgcolor -- 设置整个表格的背景颜色，也可以作为tr和td的属性
2.tr标签 -- 代表一行
align -- 设置当前行中所有单元格中的内容的对齐方式 ：
left（默认）\right\center
height -- 设置一行的高度
bgcolor -- 设置一行的背景颜色
3.td标签 -- 代表一个单元格：
align -- 设置当前单元格中的内容的对齐方式：
left（默认）\right\center
width -- 设置当前单元格所在的列的宽度
bgcolor -- 设置当前单元格的背景颜色
补充：html中的颜色值
1）颜色单词：red、yellow、blue、white等
2）#RGB十六进制值，0-255 -> 00-ff,
#ffff00,#ffffff,#000000,#0000ff
-->
td标签中的合并属性：
colspan属性 -- 列合并
rowspan属性 -- 行合并
