学习笔记-前端开发-002_Html基础
所有的网页都是以HTML、CSS、Javscript作为基础搭建的，他们又被称为前端三剑客，而HTML(超文本标记语言)又是其中的骨架，他需要搭建起网页的基础框架和包含文本、图片、视频、音频、链接等元素的图文内容让浏览器进行解析，通常后缀名为(.html或者.htm)
1 HTML注释
俗话说：注释乃代码之母
<!-- 单行注释 -->
<!--
多行注释
-->
由于HTML代码非常杂乱无章，所以程序员们会习惯性的使用注释来划定区域方便后续的查找
<!-- 导航条开始 -->
导航条所有的html代码
<!-- 导航条结束 -->
<!-- 左侧菜单栏开始 -->
左侧菜单栏所有的代码
<!-- 左侧菜单栏结束 -->
京东首页部分代码
2 HTML文档结构
<!-- 文档声明：告诉浏览器使用什么版本的html/xhtml解析该文档 -->
<!DOCTYPE html>
<!-- html标签：该标签内为HTML内容 -->
<html>
<!-- 头部标签：标签内容不会渲染到浏览器的文档窗口，但有特殊含义 -->
<head></head>
<!-- 主体标签: 标签内为网页主题内容 在 浏览器文档窗口渲染给用户展示 -->
<body></body>
</html>
TIPS：文件后缀名是给用户方便查看的，只不过对应不同的文件后缀名有不同的软件进行处理
注意：HTML代码是没有格式的，只是我们习惯了缩进来表示代码关系
3 文档声明
声明不是 HTML 标签，文档声明是为了告诉浏览器使用什么版本的`html/xhtml`解析该文档，文档声明有着固定的格式，即在文档最上方以``开头在HTML 4.01中，<!DOCTYPE>声明引用DTD，因为HTML 4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容
HTML5 不基于SGML，所以不需要引用DTD
由于目前使用的基本为HTML5，就不对其他版本进行演示，遇到百度即可
<!DOCTYPE html>
4 HTML标签
在<html>...</html>之内均为html内容，浏览器会读取他们进行框架的渲染
<!DOCTYPE html>
<html lang="zh"> <!-- 添加lang="zh" -->
<head>
</head>
<body>
</body>
</html>
<html lang='zh'>是向搜索引擎、翻译软件表示该页面是html语言，并且语言为中文网站
en：英文、zh：中文、de：德文、ja：中文
<html lang='zh,en'>可以同时表示网站拥有两种语言
5 标签基本格式
html标签按照格式分类，可分为
闭合标签：<标签名>内容部分</标签名>
<h1>内容</h1>
自闭合标签：<标签名/>
<img src='' />
闭合标签内部可以存放对应的内容文本，标签可以控制他们的样式，而属性也能控制标签的样式
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
最常见的属性名有id\class\style
id：定义标签的唯一ID，HTML文档树中唯一，不能重复
class：为html元素定义一个或多个类名(classname)(CSS样式类名)
style：规定元素的行内样式(CSS样式)
标签可以拥有自定义的属性
<div id=123 class='456' tp_name="text1"></div>
<!-- tp_name 是自定义的属性名 -->
6 head基础标签
头部部分使用<head>...</head>进行闭合，用于定义文档的头部，通常是进行引用资源、声明信息的作用，头部标签内的信息不会在网页中显示出来，在head标签中，元素可以引用脚本、层叠样式表等操作
6.1 title标签
<html>网页标题</html>
6.2 meta标签
Meta标签介绍：
<meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词<meta>标签位于文档的头部，不包含任何内容<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
6.2.1 http-equiv属性
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
6.2.2 name属性
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="author" content="这是网页作者"/ >
<meta name="description" content="搜索引擎简介 ">
6.3 引入类标签
在html中还拥有引用CSS、Javascript代码的标签，具体使用方法在后续对应章节详细介绍
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件或网站图标
7 body基础标签
主体部分是指用<body>...</body>标签闭合起来的内容，他是直接应用在网页中的部分内容
7.1 标题标签
h1～h6标签是标题大小标签，最直观的表示就是文本显示大小，但功能类似于world软件中的标题。
<!-- 从大到小，指的是一级标题～六级标题 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
7.2 段落标签
段落标签，一个P标签闭合内的内容会显示在一段中
<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p>
7.3 格式标签
这里指的是换行符和分隔符标签，他们都是自闭合标签，可以独立存在
<br/> 换行标签
<hr/> 换行线标签
7.4 文本属性标签
HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。
<strong>加粗</strong>
<b>加粗</b>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<del>删除线</del>
<font size=“10px” color=“red”>规定字体属性</font>
size 字体的大小
color 字体颜色
<pre>html并不认编码时候的格式，需要添加各种格式标签，而pre标签让代码中的格式原本输出到浏览器中</pre>
7.5 超链接标签
a标签是超链接标签，它具有进行网页跳转的功能
<a href="https://www.kinghtxg.com">kinght's blog</a><br/>
<a href="https://www.kinghtxg.com" target="_self">kinght's blog 当前页面跳转</a><br/>
<a href="https://www.kinghtxg.com" target="_blank">kinght's blog 新页面跳转</a>
超链接是浏览者和服务器的交互的主要手段，是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。
超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时，遇到一个不认识的英文，你只要在这个单词上单击一下，即可跳转到它的翻译页面中，看完单词的解释后点一下返回按钮，又可继续阅读，这就是超链接的常见用途。还有经常到购物网站中去，我们都是在百度搜索，然后点击对应的搜索项进入到对应的购物网站的，这也是超链接的作用。超链接的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| href | 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\html\index.html ] href的值留空，则默认是跳转到当前页面，也就是刷新当前页面 |
规定链接的跳转目标 |
| title | <a href="http://www.baidu.com" title="国内最著名的搜索引擎网站">百度</a> |
链接的提示信息 |
| target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过 |
7.6 锚点
锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。
例如，返回页面最上方，也可以运用上锚点技术来解决这个问题
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>锚点的使用</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">
<p>第一章内容</p>
</div>
<div>
<p id="i2">第二章内容</p>
</div>
<div id="i3">
<p> 第三章内容</p>
</div>
</body>
</html>
还可以对其他网页进行锚点跳转，通过在不同部位设置不同name名，和使用href=name的方式进行跳转到网页对应位置
<a href="http://wiki.kinghtxg.com/6_前端开发/001_前端简介.html#22-http响应头">超链接锚点跳转</a>
7.7 图片标签
在HTML中，图像由<img>标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif
src属性：
指定图像的URL地址，是英文source的简写，表示引入资源。
src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
点击图片跳转可以配合a标签使用
<a><img src="" alt=""></a>
例如：
<img src='https://skystarry-1251157247.cos.ap-chengdu.myqcloud.com//blog/20201012102822386_1637764831748.gif' width="100px" height="100" alt="欢迎大佬看笔记" />
src后面跟的是图片的链接地址，width是图片的宽，height是图片的高，alt的作用就是如果加载不出图片，对用户的提示图片功能的字显示
7.8 特殊符号
在html页面中空格会被压缩，可以用特殊符号 作为空格，标识商标，可以用特殊符号®®，标识版权可以用特殊符号©©
空格
> 大于
< 小于
& &
¥ ￥
© 版权符号
® 注册商标
8 块级标签与行内标签
标签大致可分为两类
- 块级标签(block) -- 独占一行
- div(块级空标签)、p(段落文本)、 h1-h6(标题)、ul(无序列表)、li、dl(自定义列表)、dt、dd
- 块级标签可以修改长宽 但页面占位还是整行
- 块级标签可以嵌套任意的块级标签和行内标签
- p标签除外，只能嵌套行内标签
- 行内标签(inline) -- 按文本内容占位
- a(超链接)、span(空标签)、strong(加粗)、u(下划线)、em(斜体)
- 行内标签不能嵌套块级标签，可以嵌套行内标签
块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
9 列表标签
列表标签分为三类：无序列表、有序列表、标题列表，列表标签常见于各种榜单、导航栏等场景，主要分为有序列表和无序列表
9.1 无序标签
无序列表，顾名思义就是不含排序的列表
<ul>
<li>案例1</li>
<li>案例2</li>
<li>案例3</li>
</ul>
列表符号默认为实心原点，可以通过修改属性进行修改
<ul type="square">
<li>项目符号:正方形</li>
</ul>
<ul type="circle">
<li>项目符号:空心圆</li>
</ul>
<ul type="disc">
<li>项目符号:实心圆</li>
</ul>
9.2 有序列表
有序列表就是在列表前会加上排序的数字
<ol>
<li>项目符号:数字</li>
<li>项目符号:数字</li>
<li>项目符号:数字</li>
</ol>
列表符号默认为数字，可以通过修改属性进行修改
<ol type="1">
<li>项目符号:数字</li>
<li>项目符号:数字</li>
<li>项目符号:数字</li>
</ol>
<ol type="A">
<li>项目符号:字母</li>
<li>项目符号:字母</li>
<li>项目符号:字母</li>
</ol>
<ol type="i">
<li>项目符号:罗马数字</li>
<li>项目符号:罗马数字</li>
<li>项目符号:罗马数字</li>
</ol>
9.3 标题列表
标题列表又称为自定义列表，可以作为多级目录使用
<dl>
<dt>第一章</dt>
<dd>1.1</dd>
<dd>1.2</dd>
<dt>第二章</dt>
<dd>2.1</dd>
<dd>2.2</dd>
</dl>
本文来自博客园，作者：kinghtxg，转载请注明原文链接：https://www.cnblogs.com/kinghtxg/articles/17158154.html
