关于HTML5的基础学习内容

HTML5的学习之web的介绍

我们重新开始学习了HTML,相当于是开始重新认识这门高级语言,作为一个真正快要步入设计或者程序员的门槛的学习者,现在开始认真的记录每天的学习成果!

关于HTML的第一步

一、认识HTML

Web开发

Web开发是指创建和维护网站和应用程序的过程。它涉及使用各种编程语言、技术和工具来设计、构建和部署网站。Web开发涵盖了前端开发、后端开发和数据库管理等方面。那如今我们需要使用各种编程语言和技术创建、设计、来实现网页初始化和一些网页的美化设计。

目前来说web开发早已成为各大公司首选的一种开发开源项目。

了解网页

网页是网站的基础和基本单位，也就是简单的web网页。网页主要是由文字，图片和链接组成，而且还有其他一些多媒体组成。

网页的形成

主要是通过编辑器对代码进行一系列的一些代码分析、用css对网页设计渲染、添加交互元素，之后在浏览器中真正的显示效果，来真正显示网页的形成结果。

二、浏览器

主要的浏览器

国际上常用的浏览器有：

Edge浏览器
谷歌（Chrome）浏览器
safari浏览器
火狐（Firfox)浏览器
.Opera浏览器

浏览器的组成部分

这里主要是浏览器引擎（渲染引擎）和JS解释器来对网页进行一系列渲染和显示。

三、Web标准

Web 标准构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

Structure	结构是推崇使用语义化的HTML标签来描述网页的内容结构，使网页的结构清晰明了，有助于搜索引擎优化和可访问性。
Presentation	遵循web标准意味着使用层叠样式表来定义网页的外观和布局，确保网页在不同浏览器和设备上的一致表现。
Behavior	主要是通过代码来进行对交互功能的编写和使用，来提高网页的性能和交互效果。

结构主要是在HTML文件中进行编写代码，表现主要是使用CSS来进行渲染效果，最后行为是用JavaScript来进行交互功能编写。

四、主要的编写工具（VScode）

VSCode的基本使用

Visual Studio Code (简称 VS Code / VSC) 是由微软开发的一款开源源代码编辑器，免费开源的现代化轻量级代码编辑器，支持插件扩展，通过使用插件扩展来更方便的使用。我们主要是用来编写网页的主要代码。

五、HTML简介

HTML名叫“超文本标记语言”（Hyper Text Markup Language ）。

超文本标记语言，主要可以跟各种各样的多媒体进行链接使用，因此称为超文本，但它并非一种编程语言，而是一种标记语言，主要还是应用于文本（我是这样理解的）。
下面就是HTML主要的结构标记了，创建文件后缀是.html的文件就是我们的超文本标记语言的文档了。

文档结构

<html></html>/*主要的根标记，也是最大的标记*/
<head></head>/*这是头标记，主要展示主要信息*/
<title></title>/*标题标记定义题目*/
<body></body>/*body标记主要的代码和渲染代码主要在这里*/

完整的文档结构

<!DOCTYPE html>/*主要声明文档格式*/
<html lang="en">
<head>
    <meta charset="UTF-8">/*主要的编码格式utf-8*/
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

注意一代meta中的编码格式utf-8是所有国家都使用的编码格式，而且也避免使用其他编码展示网页时出现乱码。

3.HTML属性

用于为HTML元素（Element）提供附加信息或配置的键值对。属性位于HTML元素的开始标签中，并以键值对的形式呈现，其中键是属性的名称，值是属性的内容，根据不同的元素和需求，可以使用更多的属性来实现特定的功能和效果。

六、HTML常用标签

了解和熟悉正确使用这些简单的标签来对网页进行一系列的渲染，和交互功能的启用，正确展示web网页的内容。

一、标题标签

标题标签 head h

注意：一个HTML中只能有一个且存在一个一级标记！

<h1>一级标题 ：只能有一个</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果展示

段落标记paragraph p

形成一个文本块可以在其中添加内容，最终在网页中显示。

<p>这是一个段落标记</p>

水平线 horizonal hr

形成一条水平线来区分上下标记渲染的内容，是网页更加清晰。

<hr/>/*而且hr是单标记*/

换行标记符 break br

使用会使文档内容进行换行。

<br>/*换行标记也是一个单标记*/

div标签 division

div标记是一个块标记，主要是对一块的文档内容进行一系列的渲染和功能编写。而且

div标记独占一行！块级元素，包裹独立的块内容使用请使用div标记标签。。 。

<div>div元素1</div>
<div>div元素2</div>
<div>div元素3</div>

span标签 span

span 跨度行内元素包裹文本文字的都可以使用span。一定要注意与div的区别。

<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
<span>span元素4</span>
<span>span元素5</span>

二、文本格式化标签

文本标签

b：blod	strong：Strong	加粗，粗体 strong具有语气强调！
i：italic	em：Emphasized	斜体强调语气！
u：underline	ins：insert	下划线。
s：strikethrough	del：delete	删除线。

 <!--均是行内元素 b:blod strong:strong 加粗，粗体  strong具有语气强调！！！-->
    <b>加粗，粗体</b>
    <strong>加粗，粗体</strong>
    <!--i： em：斜体强调语气-->
    <i>斜体</i>
    <em>斜体强调</em>
    <!--删除线-->
    <s> 删除 </s>
    <del>删除线</del>
    <br>
    <!--u 下划线插入 ins-->
    <u>下划线插入</u>
    <ins>下划线插入</ins>

img图像标签

通过img标记标签可以使选中的图片，图像在网页中显示。注意事项也在代码中。

    <!--不和img文件夹同级文件夹-->
    <!--image图像-->
    <img src="img/1.jpg" alt="这是一张图片" width="500" height="600">
    <!--错误写法 直接路径不能在别的电脑中显示-->

src	是图像与图片的路径
alt	设置提示信息
width	设置图片的宽度
height	设置图片的高度
title	设置图片的标题

链接标签anchor

主要是引用其他链接来跳转网页。这里有一个小彩蛋，可以通过在网页地址后输入/favicon.ico来获取某网页的标题图标、logo。而且超链接会直接添加下划线和颜色，而且不仅可以添加链接还能添加多媒体等。

    <!-- anchor(锚)  hypertext reference 超文本引用：target-blank（新页面）-self（默认本页面）-->
    <a href="http://www.baidu.com"> 百度一下</a>
    <a href="day0612-4.html" target="_blank">本地连接</a>
    <div>陪衬</div>
    <a href="#">logo<!--空连接是刷新页面的用法--><!--#出现在连接后表示是一个空连接且不刷新页面--></a>
    <!-- favicon.ico 获取页面小图标-->

icon图标 ico后缀的图像

在head里添加link来对ico的图像进行添加。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

例如这里我们使用wzry的ico小图标，呈现出的效果。

特殊字符

特殊字符有很多，但是我们现在能运用到的比较少，就列举几个常用的，还要注意两个空格的区别。

    <!--特殊符号-->
    &nbsp;
    <!--半角空格-->
    <p>&nbsp;
        <!--半角空格-->从历史上看，无论是CPI报告还是美联储政策决议，在公布的当日都常常会搅得市场动荡不安，但这两大事件其实很少在同一天发生。根据道琼斯市场的数据，自2008年以来长达16年的时间里，CPI报告和美联储政策决议在同一天出炉的情况，总共也只有13次。</p>
    &emsp;
    <!--全角空格(三个半角不等于一个全角)-->
    <p>&emsp;&emsp;从历史上看，无论是CPI报告还是美联储政策决议，在公布的当日都常常会搅得市场动荡不安，但这两大事件其实很少在同一天发生。根据道琼斯市场的数据，自2008年以来长达16年的时间里，CPI报告和美联储政策决议在同一天出炉的情况，总共也只有13次。</p>
    &lt; &gt;
    <!--大于小于符号-->
    &copy;

&nbsp	半角空格
&emsp	全角空格
&lt	less-than 小于号
&gt	greater-than 大于号
&copy	©️版权字符号

七、标签的分类

单标签例如 <hr> 水平线、< br> 换行
双标签例如 <p>段落</p>、<div>块级标记</div>、<span>行级标记</span>

八、标记间具有的关系

嵌套关系

<body>
    <ul>
        <li>
        <li>
    <ul>
</body>

并列关系

<head></head>
<body>
    <div></div>
    <span></span>
</body>
/*这里注意head和body是并列关系，div和span是并列关系*/

ok，我对今天HTML的学习总结就到这里了，之后还会有一些更细的学习内容。

关于HTML5的基础学习内容

HTML5的学习之web的介绍

关于HTML的第一步

一、认识HTML

Web开发

了解网页

网页的形成

二、浏览器

主要的浏览器

浏览器的组成部分

三、Web标准

Web 标准构成

四、主要的编写工具（VScode）

VSCode的基本使用

五、HTML简介

HTML名叫“超文本标记语言”（Hyper Text Markup Language ）。

六、HTML常用标签

一、标题标签

标题标签 head h

段落标记paragraph p

水平线 horizonal hr

换行标记符 break br

div标签 division

span标签 span

二、文本格式化标签

文本标签

img图像标签

链接标签anchor

特殊字符

七、标签的分类

八、标记间具有的关系