HTML和CSS常用标签

常用的标签

背景图: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 特殊字符标记

&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 结构元素

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元素。

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

1234562detail元素没有
点击前：

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

硬盘使用情况：GB

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 代码集中写在头部标记中，并用 style 标记定义

格式

<head>
<style type="text/css">
    选择器{属性1：属性值1；属性2：属性值2；}
    </style>	
</head>

3.链入式

将一个或多个以 .CSS为扩展名的外部样式表文件中，通过标记将外部样式表中文件链入到HTML文档
```
<head>
<link href="CSS文件的路径" type=“text/css” rel="stylesheet"/>
</head>
```
外部样式表创在css文件夹中，

3.2.3 css基础选择器

1.标记选择器

指用HTML标记名作为选择器
标记名{属性1：属性值1；属性2:属性值2；}

2.类选择器

使用 “ . ”（英文标点）进行标识，后边紧跟类名
格式：.类名{属性1：属性值1；属性2:属性值2；}

3.id选择器

使用“#”标识，后紧跟id名。（id值是唯一的）
语法：#id名{属性1：属性值1；属性2:属性值2；}

4.通配符选择器

用” * “ 表示，作用范围最广，能匹配页面中的所有元素
语法：*{属性1：属性值1；属性2:属性值2；}

5.标签指定式选择器6.后代选择器7.并集选择器

3.3文本样式属性

3.3.1字体样式属性

font-size：字号大小
font-family：字体
font-weight：字体粗细
font-style：字体风格
font：综合设置字体样式
@font-face：属性
- 可以安装未安装的字体
- @font-face{
  
  font-family:字体名称；
  
  src：字体路径；
  
  }
word-wrap：
- 用于实现长单词和URL地址自动换行。
- 语法：选择器{word-warp：属性值；}

3.3.2 文本外观属性

1.color：文本颜色；2.letter-spacing：字间距；3.word-spacing：单词间距；4.line-height：行间距；5.text-transfor：文本转换；6.text-decoration：文本装饰；7.text-align：水平对齐方式；8.text-indent：首行缩进；9.white-space：空白符处理；10.text-shadow：阴影效果；11.text-overflow:表示对象内溢出文本；

第五章

5.1 盒子模型概念

内边距:padding 边框: border 外边框: margin
简单而言就是一个区块容器标记，可以将网页独立分隔成为独立的、不同的部分，以实现网页的规划和布局。可以多层嵌套，设置内外边距、高和宽。

5.2 盒子模型相关属性

5.2.1边框属性

1.边框样式（border- style）

border-style：上边（右边下边左边）【上右下左】

solid：边框为单实线
dashed：边框为虚线
dotte：边框为点线
double：边框为双实线

2.边框宽度（border-width）

border-width：上边（上右下左）

3.边框颜色（border-color）

border-color：上边【上右下左】

4、综合设置边框

border：宽度样式颜色；【不分先后顺序】

5、圆角设计

border-radius：参数1/参数2（参数1水平半径参数2 垂直半径）

border-radius：参数1（设置圆角半径）

6.图片边框

border-image

5.2.2 边距属性

内边距padding
外边距margin
清楚元素默认内外边距
```
*{
padding:0;
margin:0;
}
```

5.2.3 box-shadow属性

box-shadow：像素值1（水平隐影可为负值）像素值2（垂直隐影可为负值）像素值3（吗，模糊半径）像素值4（隐影扩展半径）颜色值阴影类型；

5.2.4 box- sizing属性

box-sizing：content-box/border-box；

5.3 背景属性

设置背景颜色:background- color;
设置背景图片;background-image;
背景颜色与不透明度颜色设置
opacity：0-1；介于0-1
设置背景图像不平铺background-prpeat
1. repeat：沿水平和竖直方向平铺
2. no-repeat:不平铺
3. repeat-x：水平方向平铺
4. repeat-y：竖直方向平铺
设置背景图像的位置：background-position
设置背景图像固定：background-attchment；
- scroll:图片随页面元素滚动;
- fixed:固定在屏幕上
设置背景图像大小 background-size
设置背景的显示位置:background-origin;
设置背景图像裁剪区域:background-clip
背景复合属性background

5.4 CSS渐变属性

线性渐变：background-image：linear-gradient（渐变角度，颜色值1，颜色值2....，颜色值n）；
径向渐变：background-image：radial-gradient（渐变形状 【使用关键字at连接】 圆心位置，颜色值1，颜色值2.。。。颜色值n）；
重复渐变：
1. 重复线性渐变：background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2.。。颜色值n）；
2. 重复径向渐变：background-image：repeiatng-radial-gradien（渐变形状 【使用关键字at连接】 圆心位置，颜色值1，颜色值2.。。。颜色值n）；

未来可期时光不会辜负每一个平静努力的人！
原创不易，莫要白嫖，点个赞吧！