1.web标准
web标准是万维网指定的网页开发标准,主要包含三类:
结构标准 - html(决定网页中的内容)
表现标准 - CSS(决定网页中内容的布局和样式)
行为标准 - javascript(决定网页内容的动态变化)
2.认识html
html又叫超文本标记语言(和markdowm一样)
一个网页本质就是一个html文件
3.html文件基本结构
一个html标签中有一个head标签和一个body标签
4.html的基本语法
1)语法
双标签:<标签名 属性1=值1 属性2=值2 ...>标签内容</标签名>
单标签:<标签名 属性1=值1 属性2=值2 ...> 或者 <标签名 属性1=值1 属性2=值2 .../>
2)说明
<>和/ - 都是固定写法
标签名 - 只能写html相应版本提供的标签的标签名;什么标签是什么类型是确定的！
注意:标签名前不能出现空格
属性 - 属性是以'属性名=值'的形式出现,多个属性之间用空格隔开;
属性的顺序不影响结果;不管是什么属性的值,值必须用双引号引起来
标签内容 - 任何内容都可以作为标签内容();例如:文字、标签、文字和标签的组合
注意:html中大小写不敏感
说明html版本
html - html5
网页基本结构
一个html代表整个网页;一个html标签中有一个head标签和一个body标签
1.head的作用
head标签主要负责网页的图标和标题的显示以及网页的基本设置
2.head标签中的标签
head可以写的标签有:meta、title、style、link、script、base
meta - 设置网页元数据(例如:网页的编码方式、网络的搜索关键字、网页介绍)
-->
<head>
<!--设置文本编码方式-->
<meta charset="utf-8" />
<!--设置网页标题-->
<title></title>
<!--设置网页图标
rel属性 - 设置被导入的文件的作用；
- stylesheet - 样式表
- icon - 网页图标
type属性 - 设置文件类型:文件属性/文件后缀
- text/css - 导入的文件是:后缀是.css的文本文件
- image/png - 导入的文件是图片,图片的后缀是.png
href属性 - 被导入的文件路径
-->
<link rel="icon" type="image/ico" href="img/aaa.ico" />
</head>
1.标题标签:h1 ~ h6
如果文字的意义是标题的时候才选择标签是标题标签
<h1>我是标题1</h1>
<h2>我是标题1</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
2.段落标签:n
一个段落就是一个p标签(多个p标签自动换行)
-->
3.普通文字标签:font
多个font标签的文字可以在一行显示
-->
4.空格和换行
网页内容中收到输入的空格和换行都是没有意义的
1)换行标签:br
在网页中的任何位置需要换行的时候直接加<br>或者<br />
2)空格:空格符号
- 一个空格(单位是像素)
  - 一个空格(单位是空格键)
<p>
1,<br />
2,<br />
3,<br />
4,<br />
5,<br />
</p>
5.文字效果:倾斜、加粗
1)加粗:<b></b>、<strong></strong>
2)倾斜:<i></i>、<em></em> - em有强调的作用
5.水平线:hr
<hr />
1.无序列表:ul-li
ul标签 - 表示整个列表容器
li标签 - 表示列表中的元素
<ul>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>测试</li>
<li>go语言</li>
</ul>
2.有序列表:ol-li
ol标签 - 表示整个列表容器
li标签 - 表示列表中的元素
<ol>
<li>将肉洗干净,然后加水煮到8分熟</li>
<li>捞起来切片</li>
<li>油锅里放油,然后再放干海椒、花椒、生姜。炸香</li>
<li>再将肉放进去炸</li>
<li>起锅前放盐和白糖</li>
</ol>
3.自定义列表:dl-dt-dd
dl - 表示整个列表容器
dt - 表示一个分组
dd - 每个分组中的内容
-->
<dl>
<dt>文科</dt>
<dd>历史</dd>
<dd>地理</dd>
<dt>理科</dt>
<dd>物理</dd>
<dd>化学</dd>
</dl>
1.图片标签:img
1)src属性:图片地址
本地文件路径(绝对路径/相对路径)
网络图片路径
2)title属性:图片标题(鼠标悬停在图片上等一会儿才会出现)
3)alt属性:图片加载失败的提示信息
<!--显示本地图片-->
<img src="img/luffy.jpg" />
<br />
<!--显示网络图片-->
<img src="" />
2.超链接:a
<a href="跳转的目的地">可见可点击的部分</a>
1)href属性 - 跳转到目的地
a.网页地址 - 跳转到指定网页
b.本地html文件地址 - 在浏览器中直接打开指定html文件对应的网页
c.选择器 - 将当前页面滚动到选择器所在的位置
d.# - 刷新页面
2)target属性 - 页面打开方式
a._self - 默认值,在当前页面中渲染出新的页面
b._black - 不动原页面,在新的窗口中渲染新的页面
<!--文字超链接-->
<a href="https://www.baidu.com">百度</a>
<!--图片超链接-->
<br />
<h1 id="page1">第一章</h1>
<h1 id="page2">第二章</h1>
<h1 id="page3">第三章</h1>
</body>
1.表格标签:table-tr-td
1)table标签 - 代表整个表格
border属性 - 设置线框宽度
bordercolor - 边框线的颜色;颜色单词或者
cellspacing - 设置单元格与单元格以及单元格和表格之间的间隙,默认1
bgcolor - 设置整个表格的背景颜色
width - 设置整个表格的宽度
height - 设置整个表格的高度
align - 设置整个表格在网页中的对齐方式:center,left,right
cellpadding - 设置整个表格中所有的单元格中的内容到边框的距离
2)tr标签 - 一个tr代表一行
bgcolor - 设置一行的所有颜色
height - 设置指定行的高度
align - 设置指定行中所有的单元格中的内容在单元格中的对齐方式
cellpadding - 设置整个行中所有的单元格中的内容到边框的距离
3)td标签 - 一个td代表一个单元格
bgcolor - 设置指定单元格的颜色
width - 设置指定单元格的那一列的宽度
align - 指定单元格中的内容在单元格中对齐的方式
cellpadding - 设置指定的单元格中的内容到边框的距离
colspan - 行合并
rowspan - 列合并
