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.元素的类型: 块元素 行内元素 行内块元素
-
块元素:独占一行,宽与父元素同宽,高度取决于内容. 可以直接设置宽高
divp li ul
-
行内元素:和其它元素共享一行,宽高都取决于内容.不可以设置宽高
spanaemstrong
-
行内块元素:和其它元素共享一行,宽高都取决于内容,可以设置宽高
buttoninputimg
第一章：
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 特殊字符标记
-  ：空格符
- <：小于号 <
- >：大于号 >
- &：和号 &
- ¥：人民币 ￥
- ©：版权 ©
- ®：注册商标
- °:摄氏度
- ± 正负号 ±
- ×：乘号 ✖
- ÷：除号 ➗
- ²:平方
- ³：立方
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开始反向排序
2.1.3 定义列表dl
- 定义列表的父元素为 dl元素，而其中的每个名/值组，则包含一个或多个dt（description title）元素，以及一个或多个dd（description description）元素。
- dt 元素用来定义名称或术语，
- dd元素用来定义名称或术语的值。
2.2 结构元素
2.2.1header元素
- 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元素。
2.2.6 footer元素
- 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元素的第一个或最后一个子元素的位置。
被称作“第四代体育馆”
拍摄者：张三，拍摄时间：2019年9月15日 17:42:12
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后...
1
2
3
4
5
6
2detail元素没有
点击前：标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后...
2.4.2 progress元素
-
progress元素可用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数值（如100）之间的数字来表示准确的进度完成情况（如进度百分比）。
-
progress元素的常用属性值有两个。
（1）value：已经完成的工作量。
（2）max：总共有多少工作量。
需要注意的是value和max属性的指必须大于0，且value的值要小于或者等于max属性的值。
2.4.3.meter元素
-
meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。
-
optimum的值小于low值时显示绿色，大于high值时显示红色；low和high之间是黄色。
1
硬盘使用情况：
硬盘使用情况：
2.5 文本层次语义元素
2.5.1 time元素
-
time元素用于定义时间或日期，可以代表24小时中的某个时间。
-
time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
-
time元素有两个属性。
（1）datetime：用于定义相应的时间或日期。取值为具体时间（如14：00）或具体日期（如2015-09-01），不定义该属性时，由元素的内容给定日期/时间。
（2）pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>time元素的使用</title>
</head>
<body>
<p>我们早上<time>9:00</time>开始上班</p>
<p>今年的<time datetime="2015-10-01">十一</time>我们准备去旅游</p>
<time datetime="2015-08-15" pubdate="pubdate">
本消息发布于2015年8月15号
</time>
</body>
</html>
2.5.2. mark元素
- mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。
2.5.3. cite元素
- cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
2.6 全局属性
2.6.1 draggable属性
- drag gable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false
- 当值为true时表示元素选中后可以进行操作，否则不能拖动
2.6.2 hidden属性
- hidden 属性有两个属性值：true和false，当为true时隐藏，反之显示。、
- 可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
2.6.3 spell check属性
- spellcheck 属性有两个属性值：true和false，当为true时检测输入框中的值，反之不检测。
- 类型为 text 的 input 元素中的值（非密码）
- textarea 元素中的值
- 可编辑元素中的值
2.6.4 contenteditable元素
-
为了某个使元素可编辑，你所要做的就是在html标签上设置
"contenteditable"属性，它几乎支持所有的HTML元素。 -
contenteditable有以下几种属性："true"表明该元素可编辑"false"表明该元素不可编辑"inherit"（默认）表明该元素继承了其父元素的可编辑状态
<div contenteditable="true"> This text can be edited by the user. </div>- 通过一下代码，可以观察到如果子元素没有设置
contenteditable属性，其默认值继承自父元素（既默认为"inherit"属性）
<div contenteditable="true"> <p>Edit this content to add your own quote</p> <p>Edit this content to add your own quote - 2</p> </div>可以使用css中caret-color属性设置文本插入光标的颜色。
实际用途
1.div模拟textarea文本域轻松实现高度自适应
2.避免处理input、textarea的内含样式
第三章
3.2 CSS样式规则
3.2.1 CSS样式规则
- 选择器{属性1：属性值1；属性二：属性值2；。。。。}
- /**/ ：注释文本
3.2.2 CSS样式表
1.行内式
- 也称为内联式，写在body内。
- 格式：<标记名 style=“属性1：属性值1；属性2：属性值2；”> 内容 <标记名>
2.内嵌式
-
将CSS 代码集中写在头部标记中，并用