HTML总结

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

常用的标记

背景图:background-image;

边框的样式

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

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

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

    
        
        
        
    
    
        
        G
            
            
        
        o
            
        
        o
            
        
        g
            
        
        le
            
        
        
    

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

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

老师总结:

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

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

   div\p li \ul

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

   span\a\em\strong

3. 行内块元素:和其它元素共享一行,宽高都取决于内容,可以设置宽高

   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：内嵌样式

  
  
      
          
          
          
      
      
          
  设置h2标题的颜色为红色
          
  设置p段落的颜色为红色
      
  

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 常用的图像格式

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元素，也可以为每一个内容块添加header元素。

2.2.2 nav元素

• nav元素用于定义导航链接，是html5新增的元素。该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。

• nav元素通常可以用于以下场合中：

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作
  
  

  
  
  • 首页
  
  
  • 公司概况
  
  
  • 产品展示
  
  
  • 联系我们
  
  

  
  

2.2.3 article元素

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

    

        
第一章

    
    

        

            
第1节
        
    
    

        

            
第2节
        
    

2.2.4 aside元素

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

    

        
标题
    
    
文章主要内容
    
其他相关内容

右侧菜单

2.2.5 section元素

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

    

        
小张的个人介绍
    
    
小张是一个好学生，是一个帅哥。。。
    

        
评论
        

            
评论者：A
            
小张真的很帅
        
        

            
评论者：B
            
小张是一个好学生
        
    

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

2.2.6 footer元素

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

硬盘使用情况：43/120GB

硬盘使用情况：43/120GB

2.5 文本层次语义元素

2.5.1 time元素

• time元素用于定义时间或日期，可以代表24小时中的某个时间。

• time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。

• time元素有两个属性。

  （1）datetime：用于定义相应的时间或日期。取值为具体时间（如14：00）或具体日期（如2015-09-01），不定义该属性时，由元素的内容给定日期/时间。

  （2）pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。

我们早上9:00开始上班
今年的十一我们准备去旅游

    本消息发布于2015年8月15号

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" （默认）表明该元素继承了其父元素的可编辑状态

  
    This text can be edited by the user.
  
  

  • 通过一下代码，可以观察到如果子元素没有设置contenteditable属性，其默认值继承自父元素（既默认为"inherit"属性）

  
    
  Edit this content to add your own quote
    
  Edit this content to add your own quote - 2
  
  

  可以使用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内。
• 格式： 内容

2.内嵌式

• 将CSS 代码集中写在头部标记中，并用