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 盒子模型相关属性

    img

    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
      1. repeat:沿水平和竖直方向平铺
      2. no-repeat:不平铺
      3. repeat-x:水平方向平铺
      4. 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. 重复渐变:
      1. 重复线性渐变:background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2.。。颜色值n);
      2. 重复径向渐变:background-image:repeiatng-radial-gradien(渐变形状 【使用关键字at连接】 圆心位置,颜色值1,颜色值2.。。。颜色值n);

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

  • 相关阅读:
    1_Selenium环境搭建
    python functools
    python 参数注解inspect
    python 堆排序
    python functools
    python 装饰器
    python 柯里化
    python 高阶函数
    python 树
    python 函数销毁
  • 原文地址:https://www.cnblogs.com/anke-z/p/12855827.html
Copyright © 2011-2022 走看看