HTML入门笔记Day01

1.基本概述

1.1 网页的组成

   网页是构成网站得基本元素。它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

1.2 什么是HTML

  指的是超文本标记语言（Hytper Text Markup Language）,他是用来描述网页的一种语言。
  HTML不是一种编程语言，而是一种标记语言（Markup Language）。
  标记语言是一套标记标签（Markup tag）。

  所谓超文本，有2层含义：
  1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
  2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）。

1.3 网页的形成

  网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的。
  前端人员开发代码----浏览器显示代码（解析、渲染）-----生成最后的WEB页面

1.4 常用浏览器

1.41  常用的浏览器

  浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐、谷歌、Safari和Opera等。平时称为五大浏览器。

1.42  浏览器内核

  浏览器内核（渲染引擎）：负责读取网页内容。整理讯息，计算网页的显示方式并显示页面。

1.5   Web标准

  WEB标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

1.51  为什么需要WEB标准

   浏览器不同。它们显示页面或者排版就会有些许差异。
   遵循WEB标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
   1.让WEB的发展前景更广阔
   2.内容能被更广泛的设备访问
   3.更容易被搜索引擎搜索
   4.降低网站流量费用
   5.使网站更易于维护
   6.提高页面浏览速度    

1.52  web标准的构成

主要包括结构（Structrue）、表现（Presentation）、和行为（Behavior）三个方面。
  结构：用于对网页元素进行整理和分类，现阶段主要学的是HTML，通俗讲类似身体
  表现：用于设置网页元素的版式、颜色、大小等外观样式、，主要指的是CSS，类似外观装饰
  行为：是指网页模型的定义及交互的编写，现阶段主要学的是Javascript，类似行为动作
web标准提出的最佳体验方案：结构、样式、行为相分离
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到Javascript文件中。

2.HTML标签

2.1 HTML语法规范

基本语法概述
1.HTML标签由尖括号包围的关键词，例
2.HTML标签 
   HTML标签通常是成对出现的例如，我们称为双标签。标签中的第一个标签是开始标签，第二个标签是结束标签。

3.有些特殊的标签必须是单个标签（极少情况），例如
，我们称为(单标签). 
标签关系
1.双标签可以分为两类:包含关系和并列关系

   包含关系

并列关系

2.2 第一个HTML网页 
 ​​

  每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
  HTML页面也称为HTML文档。

2.3 网页开发工具

选用的是VSCode
使用“！”自动生成一个基本骨架

2.31  VSCode工具生成骨架标签、新增代码

1.标签
  即文档类型声明标签，作用是告诉浏览器使用哪种HTML版本来显示网页

这句代码的意思：当前页面采取的是HTML5版本来显示网页
注意：声明位于文档的最前面位置，处于标签之前
          不是一个HTML标签，它就是文档类型声明标签

2.lang语言种类
用来定义当前文档显示的语言。
   1 .en定义语言为英语
   2.zh-CN定义语言为中文
简单来说，定义en就是英文网页，定义zh-CN就是中文网页
其实对于文档显示来说，定义en的文档也可以显示中文，定义为zh-CN的文档也可以显示成英文
但这个属性对浏览器和搜索引擎来说还是有作用的

3.charset字符集
  字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
  在标签内，可以通过标签的charset属性来规定和HTML文档应该使用哪种字符编码

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面的语法是必须要写的代码，否则可能引起乱码的情况。一般情况吓，统一采用UTF-8，书写格式不能错

---

2.4 HTML常用标签

2.41  标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

2.42  标题标签

为了使网页更具语义化，我们经常会再页面中用到标题标签。HTML提供了6个等级的网页标题，即

-

.

我是一级标题

 
单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。

特点：
1.加了标题的文字会变的加粗，字号也会依次变大
2.一个标题独占一行
口诀：

标题一共六级选，

文字加粗一行显.

由大到小依次减，

从重到轻随之变。

语法规范书写后，

具体效果刷新见。

2.43  段落和换行标签

在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干段落

我是一个段落标签

单词paragraph的缩写，意义为段落
标签语义：可以把HTML文档分割为若干段落

特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

在HTML中，一个段落的文字会从左到右依次排列，知道浏览器窗口的右端，然后才会自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

单词break的缩写，意为打断，换行。
标签语义：强制换行

特点：
1.
是个单标签
2.
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

例：

    
    
    
    


    
《觅长生》图文攻略 金虹剑派新手攻略
    
游戏特色
    
1、独特的卡牌战斗和养成
    
与众不同的卡牌战斗是在游戏中表现修仙战斗的一种尝试。在《觅长生》的卡牌对战中，卡牌是天地中存在的五行灵气的表现方式，消耗这些五行灵气才可以释放出不同的法术。而游戏中，有接近300个完全不同的法术，每个法术不仅都有不同的效果，还都有着不同的灵气需求，如何在战斗中获得更多的灵气，如何更有效率地使用这些灵气，是整个游戏战斗的核心策略。

        
 同时，与这近300种法术相对应的，还有近200种不同的功法，这些法术和功法相互组合搭配，可以产生无数种可以尝试的套路，养成属于自己的套路也是游戏中战斗力养成的核心
    
2、真实的寿元和时间系统
    
 修仙者便是与天争命，与时间赛跑，以期获得更多的寿元直至长生。为了展现这一点，我们设计了一个真实的时间系统，闭关修炼，领悟功法，炼丹炼器，完成事件委托，这些都需要消耗大量的时间。

        
同时这个世界在时间的流逝中也会发生各种事件，五年一届的英杰会，二十年就开启一次的天魔眼，整整千年才会开启一次的古迹，熟识的好友突破到金丹，门派的长老突破元婴失败突然陨落等等。只要寿元未尽，要怎么活出这一世，都由你自己决定。
  
    
作者：王XX
时间：2022.1.13

网页显示效果

2.44 文本格式化标签

在网页中，有时需要为位子设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示 便签语义：突出重要性，比普通文字更重要

常用的文本格式化标签

名称	标签
粗体标签	strong（推荐）、b
斜体标签	em(推荐)、i、cite
中划线标签	del(推荐)、s
下划线标签	ins(推荐)、u
上标标签	sup
下标标签	sub
大字号标签	big
小子号标签	small

举例

	
		
		
	

	
		
			
出塞
			
秦时明月汉时关，

				万里长征人未还；

				但使龙城飞将在，

				不教胡马度阴山。

			 
		
	

效果展示

2.45

和标签

和是没有语义的，他们就是一个盒子，用来装内容的。

这是头部

今日价格
div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点： 1.

标签用来布局，但是现在一行只能放一个

。大盒子 2.标签用来布局，一行上可以多个。小盒子

3.图像标签和路径

3.1 图像标签

在HTML标签中，标签用于定义HTML页面中的图像

单词image的缩写，意为图像
src是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性

注意点

1.图像标签可以有多个属性，必须写在标签名后面

2.属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开

3.属性采取键值对的格式，即key =“value”的格式，属性=“属性值”

举例

    
    
    
    


    
xx的照片
    
    
    
alt替换文本 图像显示不出来的时候用文字替换
    
    
    
title提示文本，鼠标放到图像上提示的文字：
    
    
    
width 给图像设定宽度
      
    
     
height 给图像设定高度
      
    
border 给图像设定边框
    

3.2路径（前期铺垫知识）

3.2.1 目录文件夹和根目录：

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们 目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。 根目录：打开目录文件的第一层就是根目录

3.2.2路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时候再查找图像，就需要采用“路径”的方式来指定图像文件的位置。 路径可分为：

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径 简单来说，图片相对于HTML页面的位置

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、同一级和下一级就是图片相对于HTML页面的位置。

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例如：“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”.

3.3超链接标签

在HTML标签中，标签用于定义连接，作用是从一个页面链接到另一个页面。

链接的语法格式
文本或图像
单词anchor的缩写，意为：锚。

链接分类

1.外部链接，例如百度.
2.内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如首页.
3.空链接：如果当时没有确定链接目标时，首页.
4.下载链接：如果herf里面的地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接：在网页的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
    在链接文本的href属性中，设置属性值#名字的形式，如人物
    找到目标位置标签，里面添加一个id属性=刚才的名字，如
人物介绍

3.4 HTML中的注释和特殊字符

3.4.1 注释

如果需要在HTML文档中添加一些 便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。 HTML中的注释以“"结束。

3.4.3特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符代替。