x⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ . ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉

常用的标记

背景图:background-image;

边框的样式

实线 solid
点线 dotted
虚线 dashed
双线 double
三维立体线 inset

批量创建：父元素>子元素 * #>属性 *#

span标签:在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。例子logo标签

<html>
    <head>
        <meta charset="UTF-8">
        <title>Google Logo</title>
        <style type="text/css">
            .G{color: blue;font-weight: bolder;font-size: 60px;}
            .O1{color:brown;font-weight: bolder;font-size: 60px;}
            .o2{color: yellow;font-weight: bolder;font-size: 60px;}
        </style>
    </head>
    <body>
        
        <span class="G">G
            
            
        </span>
        <span class="O1">o
            
        </span>
        <span class="o2">o
            
        </span>
        <span class="G">g
            
        </span>
        <span >le
            
        </span>
        
    </body>
</html>

（标题嵌套的过程中，必须先结束的靠近内容的标题，再按照由内及外的顺序依次关闭标题）

键对值：即为对“属性”设置“值” 如color=“red”

老师总结:

1.元素的类型: 块元素行内元素行内块元素

块元素:独占一行,宽与父元素同宽,高度取决于内容. 可以直接设置宽高

div\p li \ul
行内元素:和其它元素共享一行,宽高都取决于内容.不可以设置宽高

span\a\em\strong
行内块元素:和其它元素共享一行,宽高都取决于内容,可以设置宽高

button\input\img

第一章：

1.2 HTML基础

title：网页标题名称
meta：定义页面元信息
hr：定义一条水平线
- size ：宽度
p：段落标记
：注释标记
hr ：插入横线
- width：调整长度
- size ：宽度
color ：颜色
align ：对齐方式
- center：居中
- left：左对齐
- right：右对齐
strong：加粗 em：倾斜标记
hspasce ：水平间距
br ：换行
&emsp ：空两格
a href :超链接
hr ：横线

style：内嵌样式

<!doctype html>
<html>
    <htad>
        <meta charset="utf-8">
        <title>style标记的使用</title>
        <style type="text/css">
            h2{color:red}
            p{color:blue}
        </style>
    </htad>
    <body>
        <h2>设置h2标题的颜色为红色</h2>
        <p>设置p段落的颜色为红色</p>
    </body>
</html>

1.3 文本控制标记

1.3.1 标题和段落标记

hn align ：标题对齐方式
- center：居中
- left：左对齐
- right：右对齐
hr ：插入横线
- width：调整长度
- size ：宽度
- align：水平线对齐方式
- color：颜色
br：强制换行

1.3.2 文本格式化标记

b strong:加粗（strong定义强调文本）
i em：斜体（em定义强调文本）
del：加删除线
ins：下划线

1.3.3 特殊字符标记

&nbsp：空格符
&lt：小于号 <
&gt：大于号 >
&amp：和号 &
&yen：人民币￥
&copy：版权 ©
&reg：注册商标
&deg:摄氏度
&plusmn 正负号 ±
&times：乘号 ✖
&divide：除号 ➗
&sup2:平方
&sup3：立方

1.4 图像标记

1.4.1 常用的图像格式

JPEG / JPG格式：有损压缩，颜色最大，但不支持透明
GIF格式：无损，支持动画，支持简单的透明，但颜色少，常用于色彩相对单一的图像e.g.logo
PNG格式：体积小，颜色多，支持复杂的透明，但不支持动画

1.4.2 图像标记

src 图像的路径：
- 绝对路径：文件在硬盘上真正路径
- 相对路径：通常以网页文件为起点
  - 位于同一文件夹中：直接打文件名+后缀 e.g.logo.gif
  - 位于文件的下一级文件夹中：文件夹名 /文件名.后缀
  - 位于文件的上一级文件夹中：../文件夹名 /文件名.后缀
alt 图像不能显示时的替换文本
- 不写alt 搜索引擎不收录
title 鼠标悬停时图片的提示文字
width 和 height宽高(通常指设置一个)
- 通常只设置一个，另一个自动按比例显示
- 若两个都设置，可能会出现失真，变形
border 边框属性
vspace(垂直) 和 hspace(水平) 边距
align 对齐属性
html5不赞成使用border vspace hspace align,通过CSS设置

1.5 超链接标签

1.5.1 创建超链接

a href="连接到资源的路径">显示在页面上的内容
- href：连接的资源地址
- target：设置打开的方式，默认是在当前页面打开
  - _blank：在一个新窗口打开
  - _self：在当前页面打开默认
当超链接不需要到任何地址在href里面加#

1.5.2锚点链接

页面内跳转的锚点设置,页面内的跳转需要两步：

方法一：

①：设置一个锚点链接去找喵星人；（注意：href属性的属性值最前面要加#）

②：在页面中需要的位置设置锚点；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容

方法二：

①：同方法一的①

②：设置锚点的位置

喵星人基地

；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#

方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可。

第二章

2.1 列表元素

2.1.1 无序列表UL

无序列表，是指所有表项之间没有先后顺序的列表。如果列表项的顺序不太重要，就要使用无序列表。
无序列表的父元素为 ul（unorder list）元素，列表项为 li（list item）元素。批量创建快捷方式：ui>li*#

2.1.2 有序列表OL

有序列表的父元素为 ol（order list）元素，列表项为 li 元素。
- 在 ol 元素中，通过start属性指定列表项的起始编号；
- 通过reversed属性指定列表项的序号是否倒序排列，该属性是布尔类型，如果设置，则会倒序排列。
- 反序如：

2.1.3 定义列表dl

定义列表的父元素为 dl元素，而其中的每个名/值组，则包含一个或多个dt（description title）元素，以及一个或多个dd（description description）元素。
- dt 元素用来定义名称或术语，
- dd元素用来定义名称或术语的值。

2.2 结构元素

header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。

<header>
    <h1>网页主题</h1>
</header>

一个网页中可以使用多个header元素，也可以为每一个内容块添加header元素。

2.2.2 nav元素

nav元素用于定义导航链接，是html5新增的元素。该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。
nav元素通常可以用于以下场合中：
- 传统导航条
- 侧边栏导航
- 页内导航
- 翻页操作

2.2.3 article元素

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。
article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

<article>
    <header>
        <h1>第一章</h1>

    </header>
    <section>
        <header>
            <h2>第1节</h2>
        </header>
    </section>
    <section>
        <header>
            <h2>第2节</h2>
        </header>
    </section>
</article>

2.2.4 aside元素

aside元素用来定义当前页面或者文章的复数信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素主要的用法分为两种：
- 被包含在article元素内作为主要内容的附属信息。
- 在article元素之外使用，作为页面或者站点全局的附属信息部分。最常用的形式是侧边栏，其中的内容可以使友情链接、广告单元等。

<article>
    <header>
        <h1>标题</h1>
    </header>
    <section>文章主要内容</section>
    <aside>其他相关内容</aside>
</article>
<aside>右侧菜单</aside>

2.2.5 section元素

section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意一下三点：
- 不要将section元素用作设置样式的页面容器，那是div的特性。
- 如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
- 没有标题的内容区块不要使用section元素定义。

<article>
    <header>
        <h2>小张的个人介绍</h2>
    </header>
    <p>小张是一个好学生，是一个帅哥。。。</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论者：A</h3>
            <p>小张真的很帅</p>
        </article>
        <article>
            <h3>评论者：B</h3>
            <p>小张是一个好学生</p>
        </article>
    </section>
</article>

在html5中，article元素可以看作是一种特殊的section元素，它比section元素更具有独立性，即section元素强调分段或分块，而article元素强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article元素；但是如果想要将一块内容分成多段时，应该使用section元素。

footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与header元素相同，一个页面中可以包含多个footer元素。同时，也可以在article元素或者section元素中添加footer元素。

<article>
    文章内容
    <footer>
        文章分页列表
    </footer>
</article>
<footer>
    页面底部
</footer>

2.3 分组元素

2.3.1 figure元素和figcaption元素

figure元素用于定义独立的流内容（图像、图表、照片、代码等），一般指一个独立的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。
figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或最后一个子元素的位置。

被称作“第四代体育馆”

2.3.2 hgroup元素

hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。
在使用hgroup元素时要注意以下几点：
- 如果只有一个标题元素不建议使用hgroup元素。
- 当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素。
- 当一个标题包含副标题、section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。

我的个人网站

我的个人作品

开心快乐每一天

2.4 页面交互元素

2.4.1 detail元素和summary元素

datails元素用于描述文档或文档某个部分的细节。
summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为detalis定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。

HTML5+CSS3
标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后...

来源：https://www.cnblogs.com/anke-z/p/12253337.html

标签

header

html代码

html语言

section

HTML总结

常用的标记

老师总结:

1.元素的类型: 块元素行内元素行内块元素

第一章：

1.2 HTML基础

1.3 文本控制标记

1.3.1 标题和段落标记

1.3.2 文本格式化标记

1.3.3 特殊字符标记

1.4 图像标记

若两个都设置，可能会出现失真，变形

1.5 超链接标签

1.5.1 创建超链接

1.5.2锚点链接

喵星人基地

第二章

2.1 列表元素

2.1.1 无序列表UL

2.1.2 有序列表OL

2.1.3 定义列表dl

2.2 结构元素

2.2.1header元素

2.2.2 nav元素

2.2.3 article元素

2.2.4 aside元素

2.2.5 section元素

2.2.6 footer元素

2.3 分组元素

2.3.1 figure元素和figcaption元素

2.3.2 hgroup元素

我的个人网站

我的个人作品

2.4 页面交互元素

2.4.1 detail元素和summary元素

HTML总结

常用的标记

老师总结:

1.元素的类型: 块元素 行内元素 行内块元素

第一章：

1.2 HTML基础

1.3 文本控制标记

1.3.1 标题和段落标记

1.3.2 文本格式化标记

1.3.3 特殊字符标记

1.4 图像标记

若两个都设置，可能会出现失真，变形

1.5 超链接标签

1.5.1 创建超链接

1.5.2锚点链接

喵星人基地

第二章

2.1 列表元素

2.1.1 无序列表UL

2.1.2 有序列表OL

2.1.3 定义列表dl

2.2 结构元素

2.2.1header元素

2.2.2 nav元素

2.2.3 article元素

2.2.4 aside元素

2.2.5 section元素

2.2.6 footer元素

2.3 分组元素

2.3.1 figure元素和figcaption元素

2.3.2 hgroup元素

2.4 页面交互元素

2.4.1 detail元素和summary元素

1.元素的类型: 块元素行内元素行内块元素