前端学习笔记_001_初识HTML_persentation.xml-CSDN博客

本文介绍了HTML的基本概念，包括其作为超文本标记语言的性质，标签的分类与关系，以及语义化的意义。内容涵盖HTML的骨骼格式、浏览器内核和Web标准的三层结构。此外，还讨论了常见的HTML标签、路径处理和一些实用小技巧，为初学者提供了全面的入门指导。

初识HTML

学习目标
1、HTML的概念

2、HTML标签的分类

3、HTML标签的关系

4、HTML标签的语义化

5、HTML的骨骼格式

6、浏览器常见内核

7、表诉web标准三层

8、认识常用标签

9、理解相对路径的三种形式

10、小技巧

11、拓展学习

1、HTML(Hyper Text Markup language) —— 超文本标记语言
html页面（包含图片、文字、链接等网页元素）

HTML是指超文本标志语言（Hyper Text Markup language）是一种用来描述网页的语言。

HTML不是一种编程语言，而是一种标志语言（markup language）。

标志语言是一套标志标签（markup tag）。

2、标签的分类
1、常规元素（双标签）

<标签名>内容</标签名> 例如：我是内容
<标签名>（start tag）</标签名>（end tag）

2、空元素（单标签）

<标签名 />例如：< br />

3、标签的关系
主要针对与双标签分为两种关系：
1、嵌套关系
子元素缩进一个Tab键身位。

 <!-- 嵌套关系 -->
<head>
 <title></title>
</head>

2、并列关系

<!-- 并列关系 -->
<head></head>
<body></body>

4、HTML标签的语义化
标签的语义化就是指标签的含义。

根据标签的语义，在适合的地方加入适合的标签，使结构清晰。（排版）

方便代码的阅读维护、爬虫的解析、搜索引擎的优化。

标准就是没有引入CSS，页面依旧结构清晰。

5、HTML 语法骨架格式

<!-- 根标签 -->
<html>
 <!-- 头标签 -->
 <head>
  <!-- 标题标签 -->
  <title></title>
 </head>
 <!-- 主题标签 -->
 <body>
 </body>
</html>

6、浏览器的常见内核
浏览器的内核分为两部分：
1、渲染引擎（layout enginer）；
2、JS引擎。

Trident —— IE浏览器的内核
EdgeHTML —— Edge浏览器的内核
Gecko —— 火狐浏览器的内核
Webkit —— 苹果浏览器的内核
Blink —— 谷歌浏览器的内核、Opera浏览器的内核

Android版本4.4之前内核是 —— webkit;
Android版本4.4之后（含4.4版本）内核是 —— Blink.

IOS 使用的内核是 —— webkit.

Windows phone 8 系统的内核是 —— Trident.

7、Web标准的三层组成
web标准是由W3C及其他标准组织发表的标准集合。
主要包括：
1、结构（structure）;
结构标准用于网页元素的整理，包括XML、XHTML.

2、表现（persentation）;
表现标准也就是样式标准由于整理网页样式，包括CSS。

3、行为（Behavior）.
行为标准用于网页模型的定义及交互的编写，包括DOM、ECMAScrint.

8、认识常用标签
1.1、排版标签
1）标题标签

 <!-- 标题标签 -->
 <h1>标题内容</h1> <!-- 1级标题标签 -->
 <h2>标题内容</h2> <!-- 2级标题标签 -->
 <h3>标题内容</h3> <!-- 3级标题标签 -->
 <h4>标题内容</h4> <!-- 4级标题标签 -->
 <h5>标题内容</h5> <!-- 5级标题标签 -->
 <h6>标题内容</h6> <!-- 6级标题标签 -->

2）段落标签p（paragragh）（熟记）

<!-- 段落标签 -->
 <p>段落内容</p> <!-- 自动换行，有上下行间距 -->

3）水平线标签hr（horizontal）（认识）

<!-- 水平线标签 -->
 <hr />

4）换行标签br（break）（熟记）

<!-- 换行标签 -->
 <br />

5）div（division）标签与span标签（重点）
一行只能有一个div标签，但可以有多个span标签。

<!-- div标签与span标签（盒子） -->
 <div>
  <span></span>
  <span></span>
 </div>

1.2、文本格式化标签（熟记）

<!-- 粗体标签 -->
 <strong>文字内容</strong> <!-- 推荐使用 -->
 <b>文字</b>
 
 <!-- 斜体标签 -->
 <em>文字内容</em> <!-- 推荐使用 -->
 <i>文字内容</i>
 
 <!-- 删除线标签 -->
 <del>文字内容</del> <!-- 推荐使用 -->
 <s>文字内容</s>
 
 <!-- 下划线标签 -->
 <ins>文字内容</ins> <!-- 推荐使用 -->
 <ul>文字内容</ul>

1.3、标签属性

<!-- 标签属性 -->
 <标签名 属性1="属性值1" 属性2="属性值2" ...>内容</标签名>
 
 <img src="../img.jpg" align="center" alt="备注" border="2" >

1.4、图片标签

<!-- 图片标签 -->
 <!-- border:边框像素；width:宽度；height：高度（一般宽度和高度只需要写一个等比放大） -->
 <!-- XHTML不支持width和height百分比输入 -->
 <img src="../img.jpg" alt="图片不能显示的替换文本" 
      title="鼠标路过显示标题"
      border="2" width="100" height="300" />

1.5、链接标签

<!-- 链接标签 -->
 <a href="链接的地址" target="网页打开方式">显示内容</a>
 <!-- 外部链接 -->
 <!-- target="_blank"：在新窗口打开 -->
 <a href="http://www.baidu.com" target="_blank">百度一下</a>
 <!-- 内部链接 -->
 <!-- target="_self"（系统默认）：在原窗口覆盖打开 -->
 <a href="../目录/图片标签.html" target="_self">图片标签</a>
 <!-- 空链接 -->
 <a href="#">空链接</a>
 <!-- 图片链接 -->
 <a href="http://www.baidu.com" target="_blank">
 <img src="../img.jpg" />
 </a>

9、路径

<!-- 路径 -->
 <!-- 相对路径 -->
 <!-- 相对路径就是从代码文件出发 -->
 /:根目录；./:当前目录；../:上一级目录；../../:上上级目录
 <img src="../img.jpg" alt="上一级标签" />
 <img src="img.jpg" alt="同一级标签" />
 <img src="./img.jpg" alt="同一级标签" />
 <img src="12/img.jpg" alt="下一级标签" />
 <img src="./12/img.jpg" alt="下一级标签"/>
 
 <!-- 绝对路径 -->
 <img src="file:///C:/Users/Hrenz/Desktop
 /HTML学习/网页/HTML学习/img.jpg" >

10、小技巧
1、生成页面骨架结构

！+Tab键
html：5+Tab键
2、注释标签快捷键
Ctrl+/
Ctrl+shift+/

11、拓展学习
1、文档类型

<!-- 文档类型为 HTML-->
<!DOCTYPE html>

2、网页默认显示语言

<!-- 页面应显示语言：en：英语、zh-CN：中文 -->
<html lang="zh">

3、常用字符集（浏览器解析）

<!-- 字符集：
 UTF-8：基本包含全世界国家通用字符；
 GBK：全部中文字符
 BIG5：繁体中文字符
 gb2312：简单中文 -->
 <meta charset="utf-8" />

4、锚点定位

<!-- 锚点定位 -->
 <a href="#one">跳转到目标内容</a>
 <h3 id="one">目标</h3>

5、设置全局属性

<!-- 设置全局属性 -->
 <base target="_blank" />

6、预格式化

<!-- 预格式化 -->
 <pre>
  内容格式与笔记本格式一致
 </pre>

7、转义字符

<!-- 特殊字符(转义字符) -->
 &nbsp;<!-- 空格 -->
 &lt;<!-- < -->
 &gt;<!-- > -->

8、XHTML
在这里插入图片描述