前端基础-html标签
Posted 咖啡壶子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础-html标签相关的知识，希望对你有一定的参考价值。
html 简介
一.网页的相关概念
-
网站：网页的集合
-
网页：文字、图片等组成
-
html：超文本标记语言
-
网页的形成：浏览器打开html文件就看到我们的网页
-
额外的概念：文件和文件名
二.常用浏览器以及内核
- 常用的浏览器:chrome浏览器
web标准
- 制定者：w3c组织
- 构成: 结构（html）+ 表现/样式(css)+行为（javascript）
html标签
html语法规范
- 语法 :<html></html>
左尖括号 关键词 右尖括号 - 标签的关系：
①包含关系：<html>
<body></body>
</html>
②并列关系：<head></head>
<body></body>
HTML基本结构标签
- 记事本写第一个网页
vscode创建页面
- 装插件：①汉化包：chinese；②vscode里用浏览器预览：open in browser
- 创建骨架标签
10-DOCTYPE和lang以及字符集的作用
- <!DOCTYPE html> 文档类型声明标签
- <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站
- <meta charset=“ UTF-8” /> 网页的编码，必须写
标签语义
- <head>：网页的头部
- <title>:网页的标题
标题标签
- 含义：表示标题；网页中体现重要的内容
- 特点：显示加粗；显示加粗
- h1-h6： 6 个等级的网页标题
- 跟title的区别：title是网页标题，h1-h6是内容里的标题
段落标签和换行标签
- p标签：① 含义：定义段落
②特点：文本根据段落自动换行；段落和段落之间保有空隙。 - br标签：①含义：标签语义：强制换行。
②特点：<br /> 是个单标签。<br /> 标签没有垂直空隙。
文本格式化
- 语义： 突出重要性, 比普通文字更重要
- 分类：
①加粗 <strong></strong> <b></b>
②倾斜 <em> <i>
-图像标签
- 语义：网页中插入图像
- 写法：<img src=“图像URL” />
- src 是必须属性，它用于指定图像文件的路径和文件名。
- alt：替换文本属性
- title：提示文本属性（chrome没显示）
- 样式属性：
①width:图像的宽度
②height:图像的高度
③border:图像的边框 - 图像标签注意点
① 图像标签可以拥有多个属性，必须写在标签名的后面
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
④src属性是必须要写的
⑤ alt与title的区别：
alt图片加载不出来时对图片的说明解释；title是当鼠标移动到图片上时所显示对图片的阐述说明
目录文件夹和根目录
-
目录文件夹（项目结构）：普通文件夹，里面只不过存放了我们做页面所需要的相关素材
-
根目录：打开目录文件夹的第一层就是根目录
-
vscode打开文件夹：文件->打开文件夹
路径
- 相对路径：相对于引用文件的路径
①同级路径 ：图片名称
②下一级路径 文件夹/图片名
③上一级路径 …/文件名 - 绝对路径：计算机中的位置，通常是从盘符开始的路径
链接标签
- 语法：<a href=“跳转目标” target=“目标窗口的弹出方式”> 文本或图像
- 分类：
①外部链接: 例如 < a href=“http:// www.baidu.com “> 百度。
②内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 。
③空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页 。
④下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
⑤网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
⑥锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
(在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a> 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id=“two”>第2集介绍</h3>)
注释标签和特殊字符
- 注释标签：ctrl+/
- 特殊字符：不方便使用的符号：
空格符号：
小于号:<
大于号：>
以上是关于前端基础-html标签的主要内容，如果未能解决你的问题，请参考以下文章