HTML认知学习分享
作者：互联网
HTML初识
基础认知
一、基础概念（了解）
-
认识网页
网页组成：文字、图片、音频、视频、超链接
网页背后的本质：前端程序员写的代码
前端代码通过浏览器转化（解析和渲染）成用户看到的网页
-
五大浏览器和渲染引擎
浏览器 内核（渲染引擎） 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 Firefox Gecko 火狐浏览器 Safari Webkit 苹果浏览器 Chrome / Opera Blink blink是webkit的分支 注意点：
-
渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的
-
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
-
-
Web标准
-
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
-
如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！
Web标准的构成：
构成 语言 说明 结构 HTML 页面元素和内容 表现 CSS 网页元素的外观和位置的页面样式 行为 JavaScript 网页模型的定义与页面交互 -
二、HTML初体验
-
HTML概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
-
HTML骨架结构
网页类似于一篇文章：
-
每一页文章内容是有固定的结构的，如：开头、正文、落款等……
-
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特点的 HTML标签 进行描述的
-
-
开发者工具的使用
实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具
-
Visual Studio Code
-
Webstorm
-
Sublime
-
Dreamweaver
-
Hbuilder
前端开发神器：VS Code → 速度快、体积小、插件多
快速生成结构标签：! + tab
-
注意1：!必须是英文的，中文!无效
-
注意2：必须保证当前文件后缀名是.html，否则无效
-
VS Code自动生成的骨架多了其他标签，之后会介绍
-
三、语法规范
-
HTML的注释
注释的作用：
-
为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码 c}
-
浏览器执行代码时会忽略所有的注释
注释的快捷键：
-
在VS Code中：ctrl + /
-
-
HTML标签的构成
标签的结构图：
结构说明：
-
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
-
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
-
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容
-
-
HTML标签的关系
父子关系（嵌套关系）
<head>
<title></title>
</head>兄弟关系（并列关系）
<head></head>
<body></body>
HTML标签学习
一、排版标签
-
标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>语义：1~6级标题，重要程度依次递减
特点：
-
文字都有加粗
-
文字都有变大，并且从h1 → h6文字逐渐减小
-
独占一行
-
-
段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：
<p>我是一段文字</p>语义：段落
特点：
-
段落之间存在间隙
-
独占一行
-
-
换行标签
场景：让文字强制换行显示
代码： <br>
语义：换行
特点：
-
单标签
-
让文字强制换行
-
-
水平线标签
场景：分割不同主题内容的水平线
代码： <hr>
语义：主题的分割转换
特点：
-
单标签
-
在页面中显示一条水平线
-
二、文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
标签 说明 b 加粗 u 下划线 i 倾斜 s 删除线
标签 说明 strong 加粗 ins 下划线 em 倾斜 del 删除线
三、媒体标签
-
图片标签
场景：在网页中显示图片
代码：
<img src="" alt="">特点：
-
单标签
-
img标签需要展示对应的效果，需要借助标签的属性进行设置！
标签完整结构图
属性注意点：
-
标签的属性写在开始标签内部
-
标签上可以同时存在多个属性
-
属性之间以空格隔开
-
标签名与属性之间必须以空格隔开 G
-
属性之间没有顺序之分 G
图片标签的src属性
属性名：src
属性值：目标图片的路径
注意点：
-
当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
代码示例：
<img src="./images/cat.gif" alt="">图片标签的alt属性
属性名：alt
属性值：替换文本
-
当图片加载失败时，才显示alt的文本
-
当图片加载成功时，不会显示alt的文本
代码示例
<img src="错误路径" alt="这里有只狗子">显示结果：
图片标签的title属性
属性名：title
属性值：提示文本
-
当鼠标悬停在图片上时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
<img src="./images/cat.gif" alt="这里有只狗子" title="我是title的效果">显示结果：
图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
-
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
-
如果同时设置了width和height两个，若设置不当此时图片可能会变形
-
-
路径
绝对路径（了解）
-
盘符开头：D:\day01\images\1.jpg
-
完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）
概念普及：
-
当前文件：当前的html网页
-
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：
-
同级目录
-
下级目录
-
上级目录
同级目录：当前文件和目标文件在同一目录中
-
方法一：
-
方法二：
VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
相对路径-上级目录
-
先出当前文件夹，到上一级目录 → ../
-
直接写目标文件
VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！
-
-
音频标签audio
场景：在页面中插入音频
代码：
<audio src="./images/music.mp3" controls></audio>常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放 loop 循环播放 注意点：
-
音频标签目前支持三种格式：MP3、Wav、Ogg
-
-
视频标签video
场景：在页面中插入视频
代码：
<video src="./images/video.mp4" controls></video>常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放 loop 循环播放 注意点：
-
视频标签目前支持三种格式：MP4 、WebM 、Ogg
-
-
链接标签a标签
场景：点击之后，从一个页面跳转到另一个页面
称呼： a标签、超链接、锚链接
代码：
<a href="https://wwww.baidu.com" target="_blank">百度一下</a>特点：
-
双标签，内部可以包裹内容
-
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
链接标签的target属性
属性名：target
属性值：目标网页的打开形式
取值 效果 _self 默认值，在当前窗口中跳转（覆盖原网页） _blank 在新窗口中打开链接（保留原网页） -
标签：网页,标签,代码,HTML,认知学习,浏览器,分享,属性 来源： https://www.cnblogs.com/yuanfangmaimeng/p/16701106.html