文章目录

一、第一部分
- 1.1HTML,CSS系列导学
- 1.2什么是HTML和CSS?
- 1.3宇宙第一编辑器Vs Code
- 1.4chrome浏览器
- 1.5深入了解网站开发
- 1.6Web前端三大技术
一、第二部分
- 2.1HTML基本结构与属性
- 2.2HTML初始代码
- 2.3HTML中的注释
- 2.4HTML语义化
- 2.5标题与段落
- 2.6文本修饰标签
- 2.7图片标签与图片属性
- 2.8引入文件的地址路径
- 2.9 跳转链接
- 2.9.1跳转锚点
- 2.9.2特殊符号
- 2.9.3无序列表
- 2.9.4有序列表
- 2.9.5定义列表

一、第一部分

简介：第一部分主要带领初学者了解html和css的具体功能和一些基本操作，以及初学者对应需下载的软件，调试好软件配置，为后面的学习做铺垫。

1.1HTML,CSS系列导学

HTML,CSS系列导学部分主要说明编写html，css的流程以及一些后面学习的内容，让初学者对html以及css做一个大体的认识。

拨云见日
往后学习前端的主要内容包含html，css，切图流程，pc企业布局，pc游戏布局等
溯求本源
在我们学习完基础的前端技能后，我们将学习html，css的拓展以及html5语法，css3语法，兼容与hack等（不同的浏览器对CSS的解析不同，会导致生成的页面效果不同，这时候需要编写额外代码兼容所有游览器，这个编写过程叫做hack。）
风生水起
我们需要学习弹性布局，网格布局，移动端布局，响应式布局，Bootstrap等来让显示界面更加舒适与规则（Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。）
巧夺天工
学习内容中我们需要了解预编译css，postcss，css架构，高级功能，css与js交互，让我们能更好的让语言之间相互配合（postcss 是一个通过 js 插件来转换 css 的工具，通过这些插件可以支持变量和混合，可以通过追加浏览器前缀生成兼容性的样式，也可以通过 polyfill 把新的样式特性处理成通用的样式，可以使用 css 模块以及样式的规则校验。）

1.2什么是HTML和CSS?

什么是html和css主要内容是让我们对html与css,如何去写代码，写到哪里做一个简单了解。

什么是HTML？：HTML，即超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
什么是CSS?: CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
html与css之间的关系：html与css都是我们用来创建网页的语言，Web服务器存储并提供HTML和CSS创建的网页。浏览器获取页面,并根据HTML和CSS显示网页的内容，html（超文本标记语言）用来建立网页的结构，而css（层叠样式表）用来控制html的表现。
html与css之间的区别：①html是网页的结构，而css是网页的样式②html由围绕内容的标签组成，而css由一个声名块继承的选择器组成③html和css的注释格式不同④html文件可以包含css代码，而css样式表绝对不能包含html代码.
如何写代码？又写到哪里？：浏览器把代码解析后就是我们所看到的网站，通过鼠标右键悬着查看网页源代码就可以看到对应的代码，一个网站是由许多个网页组成，每一个网页就是一个.html文件，我们可以通过电脑的新建文本文档来编写，利用一个不错的编译器是个更好的选择。
例如：

             changshu.html

1.3宇宙第一编辑器Vs Code

宇宙第一编辑器Vs Code的主要内容是让我们对编写html，css代码的软件及其部分快捷功能和如何使用进行一个初步的了解。

Vs Code简介：Vs Code，全称Visual Studio Code，来着微软，是一个开源的，基于Electron的轻量代码编辑器，支持多种语言和文件和格式的编写。
插件介绍：中文语言包，open in browser，view in borwser ，后两者插件可以让我们在软件中通过鼠标右键快捷的在浏览器中打开。
部分快捷方式：ctrl+s 保存　ctrl+z撤销　
　　　　　　　ctrl+a 全选　ctrl+v 粘贴
　　　　　　　ctrl+x 剪切　ctrl+y 前进
　　　　　　　ctrl+c 复制　 shift+end 从头部选中一行
shift+home 从尾部选中一行　 shift+alt+↓快速复制一行　alt+↑或↓ 快速移动一行
　　　　　　　tab 向后缩进　tab+shift 向前缩进
　　　　　alt+鼠标左键多光标 ctrl+d 选择相同元素的下一个

-通过上图四个按钮可以快捷创建文件或文件夹

通过搜索可以找到我们想要的代码

1.4chrome浏览器

chrome浏览器部分主要介绍市面上流行的浏览器以及好的浏览器选择

推荐浏览器：Google Chrome浏览器，是市面上占比最大的浏览器
浏览器排行：第一 chrome浏览器
　　　　　　第二 Safair浏览器
　　　　　　第三 Edge浏览器
　　　　　　第四 Mozilla Firefox浏览器
　　　　　　第五三星网络浏览器

1.5深入了解网站开发

深入了解软件开发部分主要介绍软件开发的一些岗位及其工作内容

UI设计师：对软件的人机交互、操作逻辑、界面美观的整体设计，又叫界面设计，UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
Web前端开发工程师（H5的开发）：主要进行网站的开发、优化、完善的工作，简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
web后端开发工程师：. 负责小程序前端修改和优化升级，根据网站业务需要开发和程序修改。，负责网站日常运行的技术维护工作，对出现的问题积极有效的进行处理，用html5，css3及JavaScript,vue或uniapp完成页面制作，对完成的页面进行维护和对网站前端性能做相应优化，丰富互联网的Web开发，改善用户体验，进行相关数据处理、查询，统计和分析工作。

1.6Web前端三大技术

Web前端三大技术主要内容是介绍前端开发所需要的核心技术，结构，样式，及其交互的行为。
1. HTML：负责结构，单有html结构代码及其效果如下

<div>这是结构练习</div>

2. CSS：负责美化，让画面更加舒适，结构加上样式代码及其效果如下

<style>
div{color:red}
</style>
<div>这是结构练习</div>

可见利用css我们将html的显示效果进行了加上颜色的美化处理
3. JavaScript：负责交互行为，提升用户体验，结构，，样式，行为代码结合及其效果如下

<style>
div{ color:red; }
</style>
<div>这是结构练习</div>
<script>
let div =document.querySelector('div');
let timer = null;
let fliag = true;
div.onmouseover = function(){timer = setInterval()=>{if(flag){div.style.color = 'blue';div.style.fontstyle = 'normal';}else{div.style.color = 'red';div.style.fontstyle ='italic';}flag = flag;},500);
};
div.onmouseout = function(){clearInterval(timer);
};
</script>

在实际效果中将鼠标放上去会一闪一闪。

一、第二部分

2.1HTML基本结构与属性

HTML基本结构与属性部分主要讲解html编写的基本框架与性质
1.HTML超文本的内容： 文本内容 + 非文本内容 (图片、视频、音频等)
2. 标记,又称标签，分为单双标签： 例如
单标签：

<br> <hr> <area> <base>;等等

双标签：

<html></html>  <head><head> <body><body>;等等

3. 属性： html属性是HTML元素提供的附加信息，也就是指各个标签所具有的属性；HTML标签可以拥有属性，并且属性提供了有关HTML元素的更多的信息。
4. 语言： html css iava等编程语言

<header title = "hello">豚鼠</header>
<footer title = "hi">豚鼠</header>

5. 标签的快捷输入方式： 输入代码后按tap键儿可快速输入代码，在实操过程中发现enter也具有tap建类似的功能，并且如果输入单词的部分会直接摁tap或者enter建，软件自动输入相应语言，如果前几个单词语言有重复，那么系统会优先选择最短的单词

2.2HTML初始代码

HTML初始代码的部分主要说明初始代码的意义及其快捷输入方式
1. 什么是初始代码？： 每个.html文件都有的代码，要复合html文件的规范写法
2. 初始代码的快捷输入方式： ！+tap键
3.初始代码包含的意义：

<!DOCTYPE html>  <!--告诉浏览器这是一个html文件-->
<html lang="en">  <!--html文件的最外层标签：包裹这所有Html标签代码 lang = en表示当前网页-->
<head><meta charset="UTF-8"> <!-- 元信息：是编写网页中的一些赋值信息 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <!-- 设置网页标题 -->
</head>
<body><!-- 显示网页的内容区域 -->
</body>
</html>

2.3HTML中的注释

HTML中的注释部分主要说明注释的写法和功能。
1. 注释的写法：

<!-- 注释的内容 -->

**2. 注释的功能：**将暂时不用的代码注释起来，浏览器读取代码时会将其忽略掉。
3.注释的意义： 把暂时不用的代码注释起来，方便以后使用，对开发人员进行提示。
4.注释的快捷键： ctrl+/ 添加注释 shift+alt+a 删除注释

2.4HTML语义化

HTML语义化的主要说明语义化的概念与好处。
**1. HTML语义话的概念：**根据网页中内容的结构，选择适合的HTML标签进行编写。
2. 语义化编写的好处： 1.在没有css的情况下，页面也能呈现出很好的内容结构
　　　　　　　　　　2.有利于SEO，让搜索引擎爬虫更好的解读网页。
　　　　　　　　　　3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
　　　　　　　　　　4.便于团队开发与维护。
　下图为无css的效果
　

可见无css依然整齐规则

2.5标题与段落

标题与段落主要内容为利用html，css等语言写文章时需要注意的事项与写法。
1. h标签： h标签是双标签，起到标题作用，如下

<h1>标签</h2>  ... <h6>标签</h6>

h标签从h1到h6字体大小依次递减，h1标签只能有一个且是最重要的，平常使用h1到h4即可。
2. p标签： p标签表示段落，为双标签，编写方式如下

<p>文章段落</p>

两者结合实操如下

<html>
<body><h1>熊羿飞的个人简介</h1><h2>基本信息：熊羿飞，男，18岁，来自河南，数字媒体技术</h2><p>简介：喜欢国风音乐，有手绘基础，在练习板绘，对软件开发有很高的热情，以软工研究生为目标，决定数媒软工通吃</p>
</body>
</html>

效果如下

2.6文本修饰标签

文本修饰标签的主要内容主要包含部分文本修饰标签的语言。
1.表强调类语言

<strong></strong>,<em></em>

两者的区别：1.写法和展示效果有区别，前者为加粗，后者为斜体。
　　　　　　2.strong的强调性更强，em的强调性较弱。。
　2. 上下标：

<sub> 内容 </sub>  下标
<sup> 内容 </sup>   上标

3. 删除文本与插入文本

<del> 内容 </del>  删除文本
<ins> 内容 </ins> 插入文本

实操效果

html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p><strong>这是一只豚鼠</strong><em>这是一只豚鼠</em>豚<sup>2</sup>+鼠<sup>2</sup> = 豚鼠<sup>2</sup>这是一个氧气分子 O<sub>2</sub>豚鼠不是<del>老鼠</del>豚鼠=<ins>荷兰猪</ins></p>
</body>
</html>

2.7图片标签与图片属性

图片标签与图片属性部分主要说明如何将图片插入到网页中，以及如何控制图片大小。
1. 图片相关的语言： img->单标签

src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的文字提示
title：提示信息
width、height：图片的大小，有固定文字的作用，在图片加载出来之前文字就被固定在相应位置
实操效果

2.8引入文件的地址路径

引入文件的地址路径部分主要说明如何在网页中插入路径到达上一级或下一级的文件
1. 相对路径：
.（这是一个点）在路径中表示当前路径
. .（这是两个点）在路径中表示上一级路径
**2. 绝对路径：**从某一系统盘依次到对应的文件夹中的唯一路径

例如

<a href = ‘’./文件/文件’‘>同级文件夹
<a href = ‘’…/文件/文件’'>下一级文件夹

实操效果

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="../images/QQ图片20221017225739.jpg" alt="这是我的豚鼠"width="300"heigth="300">
</body>
</html>

- windows系统可以用反斜线，但在写网络地址必须用斜线

2.9 跳转链接

跳转链接部分主要是介绍和讲解如何在界面中添加链接让界面能够来回切换及其对应所需语言。
1. 跳转链接所需的语言：

a->双标签:
href属性：链接的地址
target属性：可以改变链接的打开方式，默认情况下在当前页面打开_self 新窗口打开 _ blank
base->单标签:作用是改变链接的默认行为。

<a herf="对应文件或者网址">#</a>
<base target="_blank"> 一般在初始代码中

实操效果
　　　　　　　　　　　　　　　首页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="./列表/列表.html">列表页</a><img src="./images/1665885229112_95652.jpg" alt="这是我的豚鼠"width="300"height="300">
</body>
</html>

                                 列表


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="./detail.html">详情页</a><img src="../images/QQ图片20221017225739.jpg" alt="这是我的豚鼠"width="300"heigth="300">
</body>
</html>

                                  详情页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="../熊羿飞的链接练习.html">返回首页</a><img src="../images/code文件IMG_20221015_210508.jpg" alt="这是我养的豚鼠"width="300"height="300">
</body>
</html>

2.9.1跳转锚点

跳转锚点部分主要讲解如何设置一个锚点跳转到对应的文章内容及其语言。
1. 方式一：#号
　　　　　id属性

<a herf="#">#</a>
<h id = "#"></h>
<p>  文章 </p>

实操效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="#好好学习">好好学习</a><a href="#天天向上">天天向上</a><a href="#奥力给">奥利给</a><h2 id="好好学习">好好学习</h2><p>好好学习好好学习好好学习</p><h2 id="天天向上">天天向上</h2><p>天天向上天天向上ttxs</p><h2 id="奥力给">奥力给</h2><p>奥力给奥力给奥力给</p>
</body>
</html>

2. 方式二： #号
　　　　　name属性

<a href="#">标题</a>
<a name="#"></a>
<p> 文章  </p>

实操效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="#好好学习">好好学习</a><a href="#天天向上">天天向上</a><a href="#奥力给">奥利给</a><a name="好好学习"></a><h2>好好学习</h2><p>好好学习好好学习好好学习</p><a name="天天向上"></a><h2>天天向上</h2><p>天天向上天天向上ttxs</p><a name="奥力给"></a><h2>奥力给</h2><p>奥力给奥力给奥力给</p>
</body>
</html>

2.9.2特殊符号

特殊符号的主要内容是列出一些字符的代码及其意义
**1.特殊字符代码的意义：**编写一些文本时，经常会遇到输入法无法输入字符，在html中，为这些特殊字符准备的专门代码可以帮助我们解决这些问题。
2. 部分特殊字符的代码：

实操效果

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>特殊字符练习</h2><p>&lt;这是一个特殊字符&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是空格</p>                </body>
</html>

2.9.3无序列表

无序列表部分主要讲解无序列表的使用方法及其对应的代码
1. 无序列表的代码：

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

2.无序列表使用的注意事项： ul和li必须是组合出现的，他们之间不允许有其它标签。

实操效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul type="circle">
<li><a href="#"><strong>这是一行加粗的字体</strong></a>
</li>
<li><a href="#">1111111</a>
</li>
<li><a href="#">2222222</a>
</li>
<li><a href="#">3333333</a>
</li></ul></body>
</html>

3. 无序列表的无序符号的其它样式：

利用type在ul后加上对应属性代码即可

<ul type= "代码"> </ul>

2.9.4有序列表

有序列表部分主要讲解有序列表的使用方法及其对应的代码。
1. 有序列表的代码：

<ol>
<li></li>
</ol>

2.有序代码的注意事项： 与无序列表基本相同，但更经常用无序列表，也可以用无序列表代替有序列表。

实操效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol type="i"><li><a href="#">泼墨漓江</a></li><li><a href="#">夜宴风波</a></li><li><a href="#">天文馆的猫</a></li></ol></body>
</html>

3.有序列表其它样式的有序符号：

方式与无序代码相同

<ol type= "代码"><ol>

改变符号一般是用css来修饰

2.9.5定义列表

定义列表的主要内容是学习定义列表的书写方法及其对应代码。
1.定义列表的代码：

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
结构：<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
.........
</dl>

实操效果

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>豚鼠种类</dt>
<dd>不属于老鼠</dd><dt>豚鼠名称</dt>
<dd>又名荷兰猪</dd><dt>豚鼠习性</dt>
<dd>食草,代谢快，比较胆小</dd></dl></body>
</html>

以上为豚鼠学习HTML前端第一周的内容

学好一门语言最重要的是对它的兴趣以及耐心，前端的学习是很有深度的，需要我们不断积累，不断的付出。

豚鼠学习HTML前端第一周相关推荐

豚鼠学习html第五周
豚鼠学习html第五周一. 1. b与i标签 2.引用标签的基本操作 3.ifarm嵌套内容 4.pr与wbr标签 5.pre与code标签 6.map与area 7.embed与object标签 ...
萌新的java学习之路——第一周
萌新的java学习之路--第一周第一周的学习这是我学习Java的第一周,写这个博客更多的时为了总结自己这一周的学习情况,如果有人看到我写的博客,有什么问题的话,可以问我.虽然我也是一个小白,但我会 ...
Python+Django+LeanCloud+腾讯云函数学习记录（第一周学习记录）
第一周学习记录开始从事微信小程序云开发和后台搭建的实习工作,这半年来会一直定期更新学习记录 1.微信爬虫模块 1.Itchat包使用itchat包的初衷是为了通过该包的login端口直接通过扫 ...
学习周报之第一周（数据分析）
第一周学习报告 1.看完了熊老板的视频,记录下了一些感悟:学习心得 2.开始看MOOC上面北京理工大学的数据分析与展示的课程,打好数据分析的基础,学习链接 3.看了Health Insurance C ...
Hubble Zhang的学习日记（第一周）
为了督促自己每天都有进步,在这里记录下每天遇到的问题和学到的新知识,仅作为个人回顾使用. 目录日记(第一周) 20200929 20200930 20201001 20201002 20201004 ...
（前端学习）寒假第一周周报
了解了一下前端学习的路线,我有点震惊,学习的东西真的很多很多,如下: 原来css也只是准备工作,不禁感慨任重而道远附带一张我HTML和css的视频学习进度这周学习完了HTML和css中的属性和一部 ...
前端学习周报（第一周）
小鱼鱼的 Python 学习笔记（第一周）
前言:百无聊赖之下,小鱼鱼开始学习Python , 并且尝试做一定的输出,整理和回顾所学知识.学习资源为慕课上北京理工大学嵩天老师极其团队讲授的课程,博文内容基本为上课所学的再现. ~~ 这是一条正经 ...
实习日/周/月记学习计划（第一周）
2019.07.05 从主管到一级级leader介绍下来,意识到银行的主要技术栈还是Java相关的,而我对Java的认知永远停留在大三做课程设计时的jsp+javabean了.. 海哥初步给我介绍了实 ...
21天打卡挑战学习MySQL—Day第一周第一篇
活动地址:CSDN21天学习挑战赛 Hi 大家好 ~ 我是SuperProgMan.SYJ 来自沧州市师范大学 ,大学计算机科学与技术专业,目前没有毕业,我非常喜欢本专业,特别爱自学,技术方向并期待将 ...

豚鼠学习HTML前端第一周