HTML基础知识-学习笔记

爱吃火龙果 · 发表于 2021-4-16 21:16:46

1、Html
——超文本标记语言 HyperText Markup Language
概念：一个页面（网页）就是一篇文档，用于定义文档的内容结构（标题、图片、文字、段落等）。

1.1 html文档格式：.html 或 .htm
一个完整的文件由 index（文件名）.（分隔符）html（扩展名）组成。

1.2 Html基本模板书写：内容在body里面进行编辑；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>

复制代码

<!DOCTYPE html>：定义文档类型，让浏览器用标准模式去解析（如不用就会使用怪异模式）。
            ↓
document-文档，type-类型

1.3 Html注释格式：
   Html注释作用：用于描述代码功能（浏览器解析时会进行忽略，开发者和维护人员可看）。

1.4 Html元素：是html文档的重要组成部分，一个html文档由大量元素组成
   例：<h1>（开始标记）基础练习（元素内容）</h1>（结束标记）
拓展：操作h1-h6
h元素的数字越小，在页面上显示效果字越大
h元素的数字越大，在页面上显示效果字越小
   a元素：

<a href="www.baidu.com" target="_self">立即加入</a>
<!-- 用户体验
target页面打开方式
_self当前窗口打开新页面
_blank新建一个窗口打开
-->
<a href="./page2.html" target="_blank">page2</a>
<a href="page3.html" target="_self">page3</a>
<!--锚点链接
操作步骤
1、添加a标签
2、添加跳转链接
3、给跳转标签添加id属性值
4、a标签添加href的值
跳转标签添加添加id属性值,前面加# -->
<a href="#maodian"></a>
<div id="maodian"></div>
<a href="mailto:xxxx@outlook.com">给我发送邮件</a>
<a href="tel:xxx xxxx xxxx">给我打电话</a>

复制代码

a为标签名、元素名、标记名，这是一个超链接，href：属性名，＂www.baidu.com＂为属性值； href=＂www.baidu.com＂为属性：表示为元素添加额外的信息，用户点击后可跳转；  立即加入：为元素内容，要在页面上显示的内容。
标记名、属性、元素内容共同决定了一个元素的显示内容和行为。
   空元素:没有元素内容、也没有结束标记。也称之为自闭合元素；
空元素的书写方式：
                        <标记名属性> or <标记名属性/>
src：提取图片位置，图片URL位置；
alt：图片替代文字，当图片URL位置不正确的时候，显示文字。
   引用文本：
q标签：小段引用；适用场景：名人名言；自带样式：“ ”。
blockquote标签：大段引用；适用场景：引用整个文章或段落；自带样式：左侧缩进2字符。
cite元素：引用参考文献；自带样式：斜体；既能当元素又能当属性，属性：表示引用源的地址。
   （注：如果段落用cite，如果加强一段中的某几个字用i。）
abbr元素：对缩写词的引用；适用场景：缩写词或专业术语；自带样式：下划线虚线。
   强调文本：
strong标签-重要文本、b标签-突出显示。
   ——加粗文本(普通浏览器无区别，阅读浏览器strong标签会加重读音)
em标签-强调的文本、i标签-区别对待的文本。
   ——斜体(普通浏览器无区别，阅读浏览器em标签会加重读音)
   无语意元素：
div：       表示页面中的一块区域，适用场景：划分区域；
span：    仅用于给一小段文本添加样式；
br：       空元素，换行；
空白折叠：一个空格、回车或多个空格、回车都会合并为一个空格、回车；↓
pre元素：预格式化元素，会复制html代码到页面当中展示（保留文字在源代码中的格式）。
hr元素：分割线。
   实体字符：
书写格式：&npsp；“&”开始，“；”结束。在页面上实现特殊字符的。

1.5 元素的层次结构：一个元素的内容中可以包含其他元素，形成嵌套的层次结构，两个元素间不能相互嵌套；
   若A元素直接包含B：则A为B的父元素，B为A的子元素
   若两个元素有同一个父元素：它们互为兄弟元素
   若A直接或间接包含B：A是B的祖先元素，B是A的后代元素

1.6 HTML语义化；
   语义化结构元素（好处：使结构更清晰，易分辨1.更好实现CEO（搜索引擎优化）2.可被特殊设备读取）
header：用于表示页面或某个区域的头部；
nav：    用于表示导航栏；
aside：用于表示跟周围主题相关的附加信息；（如果是广告放在离body结束标签最近的位置）
article：  用于表示文章或其他可独立页面存在的内容；
section：用于表示一个整体的一部分主题；
footer：  用于表示页面或某个区域的脚注；

1.7 绝对路径和相对路径；
   绝对路径：协议 : // 域名 / 目录
——访问站外资源时；（http://www.baidu.com/xxx）
——访问站内资源时，如以上传到服务器，用绝对路径引用时可省略协议和域名。(/xxx)
   相对路径：. / 路径
——只能用于访问站内资源.（./xxx、../xxx、../../xxx）
——同级目录引用相对路径，可以省略 ". / "

本帖寻求最佳方案

，目前已有 0 个回复我要奖励

		自动登录	找回密码
密码			立即注册

[学习笔记] HTML基础知识-学习笔记

本帖寻求最佳方案