笔记 - HTML入门

HTML - Hypertext Markup Language

1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统[5]。他规定HTML并在1990年底写出浏览器和服务器软件。(from wikipedia)

HTML 骨架

charset="GBK"， 汉字内码扩展规范，仅适用中文

HTML Elements

HTML元素可被分为两类，普通元素和语义(Semantics)元素
普通元素构建出HTML骨架，语义元素具有和部分普通元素一样的格式效果，并方便搜索引擎爬虫的扫描，可用于SEO。

普通元素：

：头元素，用来放置各种需要第一步加载的内容。包括基础的css，需要加载的一些框架内容。
h1-h6：标题，1为最大，6最小。

：division，分割网页区域。

内容标签：

：anchor，锚元素，主要用于创建超链接，也可以指向同一页面中的位置，指向电子邮件地址。
Test target="_blank"可以让链接在新标签页打开。

：paragraph，段落，放置自然段文字。
and ：两个元素都表强调，重要性上strong > em，strong显示为粗体，全局强调，表重要性。em显示为斜体 ，局部强调，改变句子内的语义。
：image，图片，src属性内填写文件路径，alt属性填写图片无法显示时显示的替代内容。

and
• ：unordered list，无序列表，type属性包含circle（空心圆点），disc（实心圆点），square（实心方点）。
  
  and
  1. ：ordered list，有序列表
     type属性包含：
     • a 表示小写英文字母编号
     • A 表示大写英文字母编号
     • i 表示小写罗马数字编号
     • I 表示大写罗马数字编号
     • 1 表示数字编号（默认）
       start属性：控制列表起始值，接受数字，罗马数字，大小写英文字母。

     ：description list, description term, description details. 描述列表
     dt：术语
     dd：该术语的描述
     

     ：预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
      ：呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
      < hr >：分割线
      < br >：空格，等同 
      ：引用，无自带特殊样式，默认内联，不换行。
      
     ：块引用，可换行。
      
      
     语义元素：（参考MDN Semantic）
      
      
     ：多用于网页头部，展示标题或介绍内容，网页标题，导航，搜索框多放置于header。
      
     ：多用于页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息。一般来说需要延后加载的文件也会放在这里，多为js。
      
     ：navigation，导航栏，由菜单，目录和索引构成。
      
      ：网页主体，任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。
      
     ：可理解为侧边栏，独立于main之外的部分。
      
     ：可用于划分区域，近似于div，但是具有语义。
      
     ：原意是文字，应有多个部分组成，可包含标题和内容，可成为可独立分配的或可复用的结构。
      
     ：表一段独立的内容, 经常与说明 
      配合使用, 并且作为一个独立的引用单元。这个标签经常是在主文中引用的图片，插图，表格，代码段等等。
      ：表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。 这个 HTML mark 标签代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词
      ：利用datetime属性标注时间，此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。
      
      
     全局属性
      
      
     class
      
      
     全局类名，拥有class的元素可以被类选择器识别，可被用于css, js, DOM，识别和访问特定元素。理论上class不可重复，每个class都是全局唯一的，如有重复类名会报错。
      css写法：
      
      
     # 只匹配完全符合的class值，例如class="a b"，选择器只有a，则不识别
     [class="theClassName"] {...} 
     # 适用于所有包含这一类名的class
     .theClassName {...}
      
      
     id
      
      
     （理论上）全局唯一的id，但出现重复ID时不会报错，可用于css, js, DOM.
      
      
     [id="theIdName"] {... }
     #theIdName {...}
      
      
     倘若ID与window已有的属性重名，则js无法找到拥有该ID的元素。但仍然可以使用getElementById()方法找到元素。
      
      
     contenteditable
      
      
     带有这一属性的元素可被用户编辑，但不会上传。
      tips:
      可将
       
     
         
     The concert starts at 20:00.
       
     
     
     

     hidden

     令元素不显示在页面上，但css里面的display: block有优先级，可令其重新显示

     style

     style属性的优先级高于css style。可以通过js修改。
     一般情况下，优先级如下：
     （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
     有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

     tabindex

     给tab选择加上顺序，以index值从小到大选择。
     特异值：
     0 ：最后一个被选中
     -1 ：永远不被选中

     title

     包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。一些典型用例：

     • 链接：被链接文档的标题或描述
     • 媒体元素，例如图像：描述或关联信息
     • 段落：脚注或者相关的评论
     • 引用：作者信息，以及其他
       
       css tips：怎样换行不溢出且显示为省略号

     .theExample {
     white-space: norap;
     overflow: hidden;
     text-overflow: ellipsis
     }
     

     剩余内容可以放进title

     默认样式

     HTML元素有自己的默认初始样式，但style可以覆盖默认样式。

     css reset

     动手写css之前清除默认样式。