HTML00——初学-前端开发

镇楼图Pixiv:初音ミクの休日==================〇、基础概念Ⅰ、网站、网页网站是由一大堆页面组成的集合。网页是HTML文档，通过浏览器获取一个网页也就是HTML文档由图片、链接、文字、音频等元素构成。Ⅱ、H...

镇楼图

Pixiv:初音ミクの休日

==================

〇、基础概念

Ⅰ、网站、网页

网站是由一大堆页面组成的集合。

网页是HTML文档，通过浏览器获取

一个网页也就是HTML文档由图片、链接、文字、音频等元素构成。

Ⅱ、HTML

HTML也就是超文本标记语言(Hyper Text Markup Language)，但与编程语言不同上手特别容易。HTML文档由许多不同的标签组成

现在来创建一个html文本

输入以下代码并尝试运行

<img src="https://www.icode9.com/i/l/?n=20&i=blog/2146310/202104/2146310-20210429134354284-568175768.jpg">

Ⅲ、浏览器

浏览器是用来显示HTML文档的，常见的浏览器有IE、Edge、Firefox、chrome、Opera、Safari。

浏览器最重要的是其内核，负责读取网页内容，计算网页的显示方式来显示网页。

浏览器内核	所对应的浏览器
Trident	IE、360、百度
Gecko	firefox
Webkit	Safari
Blink	Opera、chrome

Ⅳ、超链接

超链接的作用是用来跳转网页的，我们知道一个网站是由许多网页组成的，为此我们需要超链接从网页到另一种网页。

链接分为

外部链接：从当前网站的网页跳转到其他网站的网页

内部链接：从当前网站的网页跳转到当前网站的网页

空链接：不会跳转

下载链接：会直接开始下载文件

网页元素链接：如果链接是网页的元素，则会单独打开网页元素

锚点链接：用来跳转到网页某一指定页面处

Ⅴ、历史发展

WEB

HTML

CSS

Ⅴ、WEB标准

WEB标准是由W3C和其他标准化组织制定的一系列的标准。

如果没有一个标准可能会让不同浏览器显示不同的效果

WEB标准主要由三部分组成

标准
结构	由HTML对网页元素进行整理和分类
表现效果	由CSS来设置网页元素的排版样式等
行为	由JS来实现交互、编写

==================

一、HTML：标签

Ⅰ、标签

由尖括号<>组成的称为标签，大部分情况标签是成对的

<html></html>
<!--这种称为双标签-->

分为开始标签 结束标签

结束标签只要在原先标签名字前加个/即可

	<img src="hutao.png"/>
	<!--这种称为单标签-->
	<!--但单标签的数量特别少-->

Ⅱ、标签的关系

下面这种称为包含关系，head的作用范围将title的作用范围框住了。

其中稍大的head相对于title来说是父标签

< head>
    <title>Hello</title>
</head>

head和body称为并列关系，head相对于body来说地位是一致的，作用范围相互不影响

<head>
</head>

<body>
</body>

依靠这两种简单的关系就能组成我们HTML大部分语法

Ⅲ、Hello World

创建一个txt文档，输入以下指令，修改后缀名为html即可完成第一个网页

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

其基本框架为

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        ...
    </head>
    <body>
        ...
    </body>
</html>

==================

二、解析框架

Ⅰ、<!DOCTYPE>标签

这是文档类型声明标签，作用就是声明浏览器用的是哪一个版本。

使用<!DOCTYPE html>就是声明这个文档是HTML5的版本，其余版本我们就不必考虑了，如果有机会遇到你会知道它是怎样声明的。

Ⅱ、<html>标签

这是html文档的最根本的元素，必不可少的一部分，另外我们可以用lang属性来表示这个网页是什么语言的。

< html lang="zh-CN">

虽然定义成了中文不代表下面的内容不能不能出现日文、德文、英语。

这只是一个提示的属性，主要在搜索引擎、自动翻译上起到一定的影响作用

Ⅲ、<meta>标签

其属性有charset，可以约定这个文档是用什么编码使用的，如果编码错误会出现乱码的情况。

< meta charset="UTF-8" >

===================

三、常用标签

在标签上我们需要知道这个标签适用于什么媒介（文字、图片、音频、视频...）然后要知道这个标题有什么作用。

Ⅰ、<h1>~<h6>标题标签

媒介：文字

作用：当作标题，被分为了六级不同的标签。h1字号最大最粗，h6字号最小最细

注：①这个标题元素是一行显示的，就算后面加上文字依然会自动空一行。

? ②在h5之后的标题大小上比直接输入的文字还要小

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>
            这是一级标题
        </h1>
        123
        <h2>
            这是二级标题
        </h2>
        <h3>
            这是三级标题
        </h3>
        <h4>
            这是四级标题
        </h4>
        <h5>
            这是五级标题
        </h5>
        <h6>
            这是六级标题
        </h6>
        这是一句话。
        END
    </body>
</html>

Ⅱ、<p>段落标签

媒介：文字

作用：当作段落，更具有条理性

注：①段落后会存在较大的空隙

? ②在HTML中并不会因为打空格，回车就真的会如你意。因此段落标签是有必要的。

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
		<p>
            如果有人毁掉那些博物馆和图书馆，如果有人把教堂前石路上那些在宗教鼓舞下建起的一切作品和艺术纪念物统统推倒，人类伟大的梦想还会留下什么呢？
        </p>
        <p>
            让人们怀抱着那些希望和幻想吧，不然他们是活不下去的。
        </p>
        <p>
            这就是存在着诸神、英雄和诗人的原因。
        </p>
    </body>
</html>

Ⅲ、<br/>换行标签

媒介：文字

作用：换行

注：①这是单标签

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
		<p>
            如果有人毁掉那些博物馆和图书馆，如果有人把教堂前石路上那些在宗教鼓舞下建起的一切作品和艺术纪念物统统推倒，人类伟大的梦想还会留下什么呢？<br/>让人们怀抱着那些希望和幻想吧，不然他们是活不下去的。<br/>这就是存在着诸神、英雄和诗人的原因。
        </p>
    </body>
</html>
<!--这的br和p是嵌套关系-->

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
		<h2>幻觉</h2>
		<h4>节选自《乌合之众》</h4>
		<p>
            如果有人毁掉那些博物馆和图书馆，
			如果有人把教堂前石路上那些在宗教鼓舞下建起的
            一切作品和艺术纪念物统统推倒，
			人类伟大的梦想还会留下什么呢？
			<br/>让人们怀抱着那些希望和幻想吧，
			不然他们是活不下去的。
			<br/>这就是存在着诸神、英雄和诗人的原因。
			科学承担起这一任务已有五十年的时间，
            但是在渴望理想的心灵里，
			科学是有所欠缺的，因为它不敢做出过于慷慨的承诺，
            因为它不能撒谎
			<br/>
        </p>
		<p>
            <h5>作者：</h5>****<br/>
        	<h5>日期：</h5>2021/05/05
		</p>
    </body>
</html>

Ⅳ、常用文本格式化标签

媒介：文字

作用：将文字格式化（粗体、斜线、删除线等）

标签	含义
strong、b	加粗
em、i	倾斜
del、s	删除线
ins、u	下划线

注：就显示效果而言strong、em、del、ins比b、i、s、u更加明显，尤其是在倾斜上可以明显地看到em更加倾斜

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <p><strong>strong加粗效果</strong></p>
        <p><b>b加粗效果</b></p>
        <p><em>em倾斜效果</em></p>
        <p><i>i倾斜效果</i></p>
        <p><del>del删除线效果</del></p>
        <p><s>s删除线效果</s></p>
        <p><ins>ins下划线效果</ins></p>
        <p><u>u下划线效果</u></p>
    </body>
</html>

Ⅴ、<div>、<span>标签

媒介：无

作用：用来布局的

注：①div标签会一行行分割，span会一列列分割

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <div>一行行分割</div>
        <div>一行行分割</div>
        <div>一行行分割</div>
        <span>一</span>
        <span>二</span>
        <span>三</span>
    </body>
</html>

Ⅵ、<img>图像标签

媒介：图像

作用：显示图像

属性：

属性	作用
src	图像地址
alt	替换文本，图像无法正常显示时所显示的文字
title	提示文本，鼠标光标移动至图片时所显示的文字
width	图像的宽度+单位（①px宽度的像素大小②%指定宽度的显示比例）
height	图像的高度+单位（①px高度的像素大小②%指定高度的显示比例）
border	图像的边框粗细

注：①这是单标签

? ②属性值必须符合逻辑，比如border必须是≥0的数

? ③属性是不分先后顺序的

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
		<div><img src="images/miku.png"
             title="初音" alt="miku"
             width="20%" height="20%"
                  border="5"/>
		</div>
        <div><strong>本名：</strong>初音 ミク</div>
        <div><strong>别名：</strong>miku、初音、39、世界第一的公主殿下</div>
        <div><strong>发色：</strong>苍绿色</div>
        <div><strong>瞳色：</strong>苍绿瞳</div>
        <div><strong>身高：</strong>158cm</div>
        <div><strong>体重：</strong>42kg</div>
        <div><strong>生日：</strong>2007年8月31日</div>
        <div><strong>星座：</strong>处女座</div>
        <div><strong>声优：</strong>藤田咲</div>
        <div><strong>代表色：</strong>39C5BB</div>
    </body>
</html>

最终显示效果

Ⅶ、路径

一般来说我们不会把代码、图像、文件集中放在一起，而是分开放在不同目录文件夹里方便管理。

假如在C盘Desktop上存在以下文件夹
    
    新建文件夹→
    	index.html
    	images→
    		fir→
    			test1.png
    			test2.png
    			images.html
    		icon.png

? 我们可以使用绝对路径从index中索引到test1.png

? "C:\Desktop\新建文件夹\images\test.png"

? 不过这样子太麻烦，因此我们是用相对路径

? 相对路径是从当前位置出发，去索引到一个位置上

相对路径符号	作用
/	下一级路径
../	上一级路径

假如要从images.html去索引到icon.png我们可以用"../icon.png"

假如要从index.html去索引到test2.png我们可以用"images/fir/test2.png"

当然作为网页我们可以直接使用网络上的URL地址

~~不过需要联网才能显示，废话！~~

Ⅷ、<a>超链接标签

anchor

媒介：超链接

作用：为标签内的文字提供超链接

属性

属性	作用
href	指定的URL地址（注意加http）
target	打开方式 _self会从当前页面跳转 _blank会在新窗口中打开页面

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <a href="http://www.baidu.com" target="_blank">点我找度娘</a>
    </body>
</html>

注：①我们可以用#表示空链接

? ②我们可以给出文件的地址，而不是网页的地址，这样会直接开始下载文件

? ③锚点链接我们需要先为一个元素设置一个锚点，元素具有一个id属性，比如我们要给一张图片上一个锚点，可以<img id="name" src="..."/>。设置完锚点后我们就可以直接用a标签跳转锚点链接了，<a href="#name">