HTML 笔记：初识 HTML（HTML文本标签、文本列表、嵌入图片、背景色、网页链接）

1 何为HTML

• 用来描述网页的一种语言
• 超文本标记语言(Hyper Text Markup Language)
• 不是一种编程语言，而是一种标记语言 (markup language)

2 HTML标签

• HTML 标签是由尖括号包围的关键词，比如
  • 作用是为了“标记”页面中的内容，使浏览器能够识别设计者的要求，正确的在网页中显示出来
• HTML 标签通常是成对出现的，比如 和
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

3 HTML文档结构

3.1 文档类型

• 在HTML中，文档类型（DOCTYPE）是一种指令，它告诉浏览器文档的类型和版本，从而使浏览器能够正确地渲染文档。
• DOCTYPE处于HTML文档的首行，位于标签之前。

当前最常用的文档类型声明，用于HTML5文档

3.2 开始标签

• 在HTML文档中， 标签是一个根元素，包围着整个文档的其它所有HTML元素。所有的HTML元素必须被这个标签包裹起来，这也意味着标签是HTML文档的最外层元素

3.2.1 lang属性

标签也可以包含lang属性，来定义文档的语言。

• 在这个例子中，lang="en" 属性告诉浏览器这个文档是用英语编写的。
• 不同的语言代码会表示不同的语言（例如，“es”为西班牙语，“zh”为中文等）。

3.3 头标签 & 头标签对象

• 在HTML文档中，标签用于包含文档的元数据（metadata）以及链接到脚本和样式表的引用。
• 标签通常包括如下一些子元素：

3.3.1 

3.3.2

标签用于提供关于文档的元数据，如字符集、页面描述、关键词和作者信息等。

3.3.3 

标签用于链接外部资源，通常是链接样式表（CSS文件）

3.3.4 

3.3.5 

3.3.6 

标签用于为页面上所有的相对URL设置一个基础URL。这个标签必须有href或target属性。

3.3.7 

4  正文中的HTML标签

4.1 段落

…

左对齐： left；右对齐：right； 中间对齐：center

    
    
    


    
这是一个段落
    
右对齐的段落
 
	
右对齐的段落
 
	
右对齐的段落
 

（本节下面的内容将隐去head部分的内容） 

4.2 折行 

 This is
 a para
graph with line breaks 

4.3 HTML标题

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

4.4 文字风格

 这是一个段落。

4.4.1 HTML中的颜色

4.4.2 其他文字标签

粗体字

斜体字

 粗体字，同b

斜体，表强调

文字加横线

下标字(subscript)

上标字(superscript)

 大字

 小字

下划线 

4.4.5 特殊字符

< <

 > >

 ©

5 文本列表

5.1  无序列表

无序列表以

标签开始，至

标签结束。

在

标签中，还需要使用
• 标签来定义列表的每一行

  
  	  
  ……
  	  
  ……
  	  
  ……
  

  

  5.2 有序列表

  有序列表中的条目按照顺序依次排列。

  它和无序列表的唯一的区别体现代码上，即有序列表使用

  标签，以
  开始，到
  结束。

  有序列表中同样使用

  1. 标签来定义列表的每一行

     
     	  
     ……
     	  
     ……
     	  
     ……
     

     

     5.3 自定义列表

     使用

     来创建自定义列表。在列表中使用

     来定义页面中的每一行。

     与有序列表和无序列表不同的是，在定义列表中，列表中会添加缩进行来展示这个列表的条目，使用

     标签来定义缩进行。
      

     镜头画面的剪辑
     
              
     分剪
              
     一个镜头分成两个镜头或者两个以上的镜头使用。
              
     挖剪
              
     将一个完整镜头中的动作、人和物运动镜头在运动中的某一部位上的多余的部分挖剪去。
     

     

     5.4 列表嵌套

     无论是无序列表嵌套，还是有序列表嵌套，或者是无序列表和有序列表的混合嵌套列表，它们的代码写法都是一个原则，就是遵从HTML代码的使用规则，将一个列表的标签完全放入在另一个标签内。这是一种父子级的关系。这种方法常用来表示复杂的导航，应用广泛。

      
     	
      
     
     			
     1.1
     			
     1.2
     		 
     	
     2
     

     

     6 嵌入图片

     

     6.1 图像文本对齐

     • 在编辑图像的时候，图像不同于文本的意义在于，图像都是一个个分开的整体。而编辑图像时，如果设计者想在图片的旁边放入文本内容，就需要考虑如何处理文本和图像对齐方式

     style="vertical-align:text-top"	使图像的顶部和同一行的文本对齐
     style="vertical-align:middle"	使图像的中部和同一行的文本对齐
     style="vertical-align:text-bottom"	使图像的底部和同一行文本对齐

     这是一张拍摄于2020年的九寨沟照片。
     
     这是一张拍摄于2020年的九寨沟照片。
     
     这是一张拍摄于2020年的九寨沟照片。
     

     

      6.2 图像和文本的距离

     • hspace——和左边的距离
     • vspace——和上面的距离

     这是一张拍摄于2020年的九寨沟照片。
     
     这是一张拍摄于2020年的九寨沟照片。
     

     

     6.3 添加边框 

     border表示边框宽度

     这是一张拍摄于2020年的九寨沟照片。
     

     

     6.4 嵌入网图

     7 body 改变背景色

     7.0 优先级

     
     
     
         
         
         
     
      
     
     这是一张拍摄于2020年的九寨沟照片。
     
     
     
     
     
     

     标签的背景色(bgcolor)被设置为红色（red），而在 三国杀 貂蝉-舞惑群心

     

     8 网页链接

     8.1 链接到外网

     HTML中的链接语法： 链接锚点对象

     这个路径所指的不仅仅只是一个页面地址，也可能是一个文件地址、一个邮箱地址

     
     
     
         
     
      
     
     
     三国杀-关银屏-步步生花
     
     
     
     
     

     

     点进去后：

     8.2 链接到本网页的其他位置

     • 页面除了和页面之外的文件或者程序链接外，而且也可以和同一页面中的内容进行链接
       • （1）要确定链接的锚点对象，不同于页面和外部文件链接的方式在于，链接的路径由于在同一页面内，这里需要使用“#”来引用同一页面中的内容。代码写为：
       • （2）需要在页面中设定出链接到的目标。使用的就是“id”属性。
     • 点击href处的内容，跳转到id处的内容

     
     
     
         
     
      
     
     
         ……
         链接到网页的其他位置
         
     	
          从上面链接过来
          …
     
     
     
     
     
     
     

     点击红色区域，就会跳转到绿色区域

     ’

     8.3 跳转到新网页

     在先前的所有链接中，页面都是在同一页面中跳转，有时候设计者希望链接的页面在新的窗口中打开，这时只要在标签中添加“target=_blank”就行了。

     
     
     
         
     
      
     
     
     
         诸葛瞻-绵竹之殇
     
     
     
     
     
     
     

     ‘