HTML入门笔记1

1. HTML发明者

李爵士(Tim Berners-Lee)

• 李爵士发明了WWW(万维网）、HTML、HTTP和URL。
• 2004年，英国女皇颁发给他大英帝国爵级司令徽章。
• 2017年，被颁发图灵奖。
• 李爵士是万维网的开创者，他写了世界上第一个浏览器(World Wide Web)和第一个服务器，并用自己的浏览器访问了自己的服务器。

2. HTML起手式

在编辑器里输入!+tab会出现以下代码

html起手式含义注释

3. 常用的HTML章节标签

• 标题 h1 - h6：用来表示层级，h1 ~ h6标题级数依次递减，h1级别为最高，字体最大。

• 章节section：

  元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

• 文章article：表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

• 段落P：

  元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，

  是块级元素。

• 头部header：用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

• 脚部footer：表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

• 主要内容main：

  元素呈现了文档的 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

• 旁支内容aside：

  元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

• 划分div：

  元素(或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。作为一个“纯粹的”容器，

  元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容。
  代码演示：

  
    
    
    
  
  
    
介绍性内容
    

      

        
heading，文章标题

        

          
第一章节
          
这是一个段落（paragraph)，内容可以自由发挥
          

            
1.1小节
            
这是第一章节里，1.1小节的段落
          
          

            
1.2小节
            
这是第一章节里，1.2小节的段落
          
        
      
      
参考文献1.2.3.
      
©资料来自MDN文档
    
  

Output:

效果演示

4. 全局属性

所有标签都有的属性

• class：给标签分一个类，给标签标记class。由于class有局限性，因此在使用时会用"."来代替
  

  class例子
  
  
  .class用法

• contenteditable：加上后可以使任何一个元素可以被编辑，文本可以变得能够被编辑。
  

  contenteditable用法
  
  把style放进body里面，就能让style也变得可以被编辑，就能让用户自己更改html的样式。不过通常情况下，style是放head里面的。

• hidden：隐藏，隐藏文本内容。在标签里面加上，可以让标签里面的内容被隐藏。

• id：元素是全页面唯一的时候用id，用法与class相同。
  但是！不到万不得已千万不要用id。 因为id必须是全局唯一的属性，但当他不唯一时id也不会报错。

• style：包含文档的样式信息或者文档的部分内容。
  默认情况下，该标签的样式信息通常是[CSS]的格式
  

  style三种情况对比，左上为style作为css属性，左下为作为htm属性
  
  style在作为html属性的时候，效果的优先级比作为css的高，css,html,javascript属性同时存在时，以js为最终结果。

• tabindex: 添加属性，使文本可以用tab键进行选中，用来控制tab选中时候的顺序。
  1. tabindex=-1，表示不可以被tab访问。
  2. tabindex=0，表示最后被tab访问。
  3. tabindex=正数，按顺序被tab访问。

• title：作用1：定义文档的标题，显示在浏览器的标题栏或标签页上。

image.png

作用2：通过红色标记的三行，设置溢出的文本格式，再在标签内加入title属性，就能使鼠标移到文本上显示完整的内容。

5. 内容标签

• dl+dt+dd：dl=description list描述列表 dt=... term(概念、术语）dd=... data(数据）
  

  dl用法

• ol+li：ol=ordered list有顺序的列表，li=list item列表
  ol不能含有除了li之外的任何子元素。
  

  ol+li演示

• ul+li：ul=unordered list无序的列表
  

  ul+li用法

• pre：由于系统默认会使多个空格和换行都会转换成一个空格，该标签是为了是文本保留原来的空格和换行。
  

  pre标签展示
  
  一般在h标签里面加pre

• code：包裹住的字体是等宽的，一般用来包住代码，一般和pre配合写代码。


  code演示

• hr：水平分割线

• br：br=break换行，
就是用来换行的
  

  br演示

• a：用于添加超链接
  

  演示
  
  target用来表示在新标签页打开网站。

• em ：em=emphasis，用来强调（语气的强调），默认样式字体为斜体

• strong：重要（用来强调本身内容），默认样式字体为加粗

• quote：内联引用
  

  quote演示

• blockquote：块级引用
  

  blockquote效果演示

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源