标签：网页 标签 代码 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。