HTML和CSS常用标签

zoukankan html css js c++ java

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.元素的类型: 块元素行内元素行内块元素
1. 块元素:独占一行,宽与父元素同宽,高度取决于内容. 可以直接设置宽高
  
  divp li ul
2. 行内元素:和其它元素共享一行,宽高都取决于内容.不可以设置宽高
  
  spanaemstrong
3. 行内块元素:和其它元素共享一行,宽高都取决于内容,可以设置宽高
  
  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 常用的图像格式
1. JPEG / JPG格式：有损压缩，颜色最大，但不支持透明
2. GIF格式：无损，支持动画，支持简单的透明，但颜色少，常用于色彩相对单一的图像e.g.logo
3. 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元素的第一个或最后一个子元素的位置。
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

硬盘使用情况：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：属性值1；属性二：属性值2；。。。。}
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字体样式属性
1. font-size：字号大小
2. font-family：字体
3. font-weight：字体粗细
4. font-style：字体风格
5. font：综合设置字体样式
6. @font-face：属性
  
  可以安装未安装的字体
  
  @font-face{
  
  font-family:字体名称；
  
  src：字体路径；
  
  }
7. 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 边距属性
1. 内边距padding
2. 外边距margin
3. 清楚元素默认内外边距
  
  *{ 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 背景属性
1. 设置背景颜色:background- color;
2. 设置背景图片;background-image;
3. 背景颜色与不透明度颜色设置
4. opacity：0-1；介于0-1
5. 设置背景图像不平铺background-prpeat
  
  repeat：沿水平和竖直方向平铺
  
  no-repeat:不平铺
  
  repeat-x：水平方向平铺
  
  repeat-y：竖直方向平铺
6. 设置背景图像的位置：background-position
7. 设置背景图像固定：background-attchment；
  
  scroll:图片随页面元素滚动;
  
  fixed:固定在屏幕上
8. 设置背景图像大小 background-size
9. 设置背景的显示位置:background-origin;
10. 设置背景图像裁剪区域:background-clip
11. 背景复合属性background
5.4 CSS渐变属性
1. 线性渐变：background-image：linear-gradient（渐变角度，颜色值1，颜色值2....，颜色值n）；
2. 径向渐变：background-image：radial-gradient（渐变形状 【使用关键字at连接】 圆心位置，颜色值1，颜色值2.。。。颜色值n）；
3. 重复渐变：
  
  重复线性渐变：background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2.。。颜色值n）；
  
  重复径向渐变：background-image：repeiatng-radial-gradien（渐变形状 【使用关键字at连接】 圆心位置，颜色值1，颜色值2.。。。颜色值n）；
未来可期时光不会辜负每一个平静努力的人！
原创不易，莫要白嫖，点个赞吧！
查看全文

相关阅读:
URAL 1998 The old Padawan 二分
 URAL 1997 Those are not the droids you're looking for 二分图最大匹配
 URAL 1995 Illegal spices 贪心构造
 URAL 1993 This cheeseburger you don't need 模拟题
 URAL 1992 CVS
URAL 1991 The battle near the swamp 水题
 Codeforces Beta Round #92 (Div. 1 Only) A. Prime Permutation 暴力
 Codeforces Beta Round #7 D. Palindrome Degree hash
Codeforces Beta Round #7 C. Line Exgcd
Codeforces Beta Round #7 B. Memory Manager 模拟题

原文地址：https://www.cnblogs.com/anke-z/p/12855827.html

HTML和CSS常用标签

常用的标签

老师总结:

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

2.4.2 progress元素

2.4.3.meter元素

2.5 文本层次语义元素

2.5.1 time元素

2.5.2. mark元素

2.5.3. cite元素

2.6 全局属性

2.6.1 draggable属性

2.6.2 hidden属性

2.6.3 spell check属性

2.6.4 contenteditable元素

实际用途

第三章

3.2 CSS样式规则

3.2.1 CSS样式规则

3.2.2 CSS样式表

1.行内式

2.内嵌式

3.链入式

3.2.3 css基础选择器

1.标记选择器

2.类选择器

3.id选择器

4.通配符选择器

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

3.3文本样式属性

3.3.1字体样式属性

3.3.2 文本外观属性

第五章

5.1 盒子模型概念

5.2 盒子模型相关属性

5.2.1边框属性

5.2.2 边距属性

5.3 背景属性

5.4 CSS渐变属性

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