DOCTYPE html>
html lang="zh-CN">
    head>
        meta charset="UTF-8">
        title>title>
    head>
    body>
    body>
html>

• 通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

声明为HTML5文档

html标签

• 作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个HTML文档
• 注意：其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

• 作用：用于给网站添加一些配置信息
• 列如：外挂一些外部的css/js文件；添加一些浏览器适配相关的内容
• 注意：一般情况下，写在head标签内部的内容不会显示给用户查看，也就是说一般情况下写在head标签内部的内容我们都看不到

title标签

• 作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
• 注意：title标签必须写在head标签里面

body标签

• 作用：专门用于定义HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频）
• 注意：虽然说有时候将内容写到了别的地方在网页中也能看到，但是千万不要这么干，一定要将需要显示的内容写在body中；一对html标签中（一个html开始标签和一个html标签结束）只能有一对body标签

HTML标签

HTML标签格式

• HTML标签是有尖括号包围的关键字，如,
  等
• HTML标签通常是陈规定出现的，比如：
  和
  , 第一个标签是开始，第二个标签是结束。结束标签会有斜线。
• 也有一部分标签是单独呈现的，比如：
  、

  ---

  、等。
• 标签里面可以有若干属性，也可以不带属性。

标签的语法

• 内容部分标签名>

几个很重要的属性

• id：定义标签的唯一ID，HTML文档树中唯一
• class：为html元素定义一个或多个类名(classname)（CSS样式类名）
• style：规定元素的行内样式（CSS样式）

HTML标签分类

• 单标签：只有开始标签没有结束标签，也就是由一个组成的

  meta charset="UTF-8" />

• 双标签：有开始标签和结束标签，也就是由一个和一个>组成的

  html>
  html>

HTML标签关系分类

• 并列关系（兄弟/平级）

  head>
  head>
  body>
  body>

• 嵌套关系（父子/上下级）

  head>
          meta charset="UTF-8" />
          title>百度一下,你就知道123title>
  head>

HTML注释

注释内容-->

注释是代码之母。

HTML常用标签

head内常用的标签

标签	意义
	定义网页标题
	定义内部样式表
	定义JS代码或引入外部JS文件
	引入外部样式表文件
	定义网页原信息

Meta标签

Meta标签介绍：

• 元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
• 标签位于文档的头部，不包含任何内容。
• 提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同网页的功能。

• http-equil属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

  2秒后跳转到对应的网址，注意引号-->
  meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
  指定文档的编码类型-->
  meta http-equiv="content-Type" charset=UTF8">
  告诉IE以最高级模式渲染文档-->
  meta http-equiv="x-ua-compatible" content="IE=edge">

• name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

  meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
  meta name="description" content="老男孩教育Python学院">

body内常用的标签

基本标签(块级标签和内联标签)

b>加粗b>
i>斜体i>
u>下划线u>
s>删除s>

p标签：段落标签，注意：在浏览器中会单独占一行-->
p>段落标签p>

标题标签-->
h1>标题1h1>
h2>标题2h2>
h3>标题3h3>
h4>标题4h4>
h5>标题5h5>
h6>标题6h6>

换行-->
br>

水平线 分割线-->
hr>

特殊字符

内容	对应代码
空格
>	>
	<
&	&
¥	¥
版权	©
注册	®

div标签和span标签

• div：div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
• span：span标签用来定义内联（行内）元素，并无实际的意义。主要是通过CSS样式为其赋予不同的表现。

div和span有什么区别?

• 1.div会单独的占领一行,而span不会单独占领一行
• 2.div是一个容器级的标签, 而span是一个文本级的标签

块级元素与行内元素的区别

所谓块级元素，是以另起一行开始渲染的元素，行内元素则不需要另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签。

img标签

• 作用：在网页上插入一张图片
• 格式：

  img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

• 属性：

  属性名称	作用
  src(source)	告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
  alt(alternate)	规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
  title	悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
  height	设置图片显示的高度
  width	设置图片显示的宽度

• 注意点：img标签添加的图片默认的不是占一整行空间；如果想让图片等比拉伸，只写高度或者宽度即可；如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示；如果img标签指定的宽高, 那么系统会按照指定的宽高来显示。



DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>img标签title>
head>
body>

1.img标签中的img其实是英文image的缩写
所以img标签的作用, 就是告诉浏览器我们需要显示一张图片

2.img标签格式: 
其实img标签中的src是英文source的缩写
所以img标签中的src就是用来告诉img标签, 需要显示的图片名称

3.注意点
- 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行
- 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
- 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形

4.img中的其它属性
width: 宽度
height: 高度
所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高
如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示
如果img标签指定的宽高, 那么系统会按照指定的宽高来显示

title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容

-->

img src="images/QRCode.jpg">

img src="images/QRCode.jpg" width="300" height="478">

img src="images/QRCode.jpg" width="100" height="478">

img src="images/QRCode.jpg" height="178">
img src="images/QRCode.jpg" width="100">

img src="images/QRCode.jpg" width="100" title="这个是图片">

img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了">
body>
html>

img示例

a标签

• 作用：用于从一个页面链接到另一个页面
• 格式：

  a href="http://www.baidu.com">百度a>

• 属性：

  属性名称	作用
  href(hypertext reference)	指定跳转的目标地址
  target	告诉浏览器是否保留原始界面, _blank表示在新标签页中打开目标网页, _self表示在当前标签页中打开目标网页
  title	悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

• 注意点：在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签；a标签也叫做超级链接或者超链接；a标签不仅可以让文字可以点击, 还可以让图片也能够被点击；一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方；如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://；a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址

a标签的其它用法：

• 假链接（本质是跳转到当前页面）

  格式a href="#">百度a>
  格式a href="javascript:">百度a>

• 跳转到当前页面指定位置（锚点链接）

  格式a href="#location">跳转到指定位置a>
  在页面的指定位置给任意标签添加一个id属性
  例如 p id="location">这个是目标p>

• 跳转到指定页面的指定位置

  格式: a href="01-锚点链接.html#location">跳转到指定位置a>
  只需要在01-锚点链接.html页面添加一个id位置即可

• 下载（极力不推荐使用）

  例如a href="girl.zip">下载福利资源a/>

列表标签

列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

分类：无序列表；有序列表；定义列表

无序列表

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

ul type="disc">
  li>第一项li>
  li>第二项li>
ul>

type属性

• disc （实心圆点，默认值）
• circle（空心圆圈）
• square（实心方块）
• none（无样式）

注意

• ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用；由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签

应用场景：1.新闻列表；2.商品列表；3导航条

有序列表

有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

ol type="1" start="2">
  li>第一项li>
  li>第二项li>
ol>

type属性

• 1 数字列表，默认值
• A 大写字母
• a 小写字母
• I 大写罗马
• i 小写罗马

定义列表

给一堆数据添加列表语句；先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息

dl>
  dt>标题1dt>
  dd>内容1dd>
  dt>标题2dt>
  dd>内容1dd>
  dd>内容2dd>
dl>

注意

• dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，都是一起出现；由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签。

应用场景：做网站尾部的相关信息；做图文混排。

表格标签

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

完整结构

table>
    caption>表格的标题caption>
    thead>
        tr>
            th>每一列的标题th>
        tr>
    thead>
    tbody>
        tr>
            td>数据td>
        tr>
    tbody>
    tfoot>
        tr>
            td>数据td>
        tr>
    tfoot>
table>

caption作用: 指定表格的标题
thead作用:   指定表格的表头信息
tbody作用:   指定表格的主体信息
tfoot作用:   指定表格的附加信息

格式

• table定义表格
• tr定义行
• td定义单元格

table>
  thead>
  tr>
    th>序号th>
    th>姓名th>
    th>爱好th>
  tr>
  thead>
  tbody>
  tr>
    td>1td>
    td>Egontd>
    td>杠娘td>
  tr>
  tr>
    td>2td>
    td>Yuantd>
    td>日天td>
  tr>
  tbody>
table>

属性

• border：默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
• width：默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
• height：默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
• cellspacing：外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
• cellpadding：内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
• rowspan：单元格竖跨多少行
• colspan：单元格横跨多少列（即合并单元格）

form标签

功能：

• 表单用于向服