序言:
先说一下我本人的经历,我是一名大二学生,我大一的时候学习了java,跟着走了一年。由于一些缘故,我不得不去学习前端知识。当然大多数因素可能是我在后端的学习有一点沉重!不管学习前后端,我们都应该持有一颗善于学习的平常心!还是那一句老话,脚踏实地,做一个不急求功利,戒躁的学生! 如果你是新手,建议跟学黑马的pink老师的课程走,因为pink老师的客程更偏向于基础,如果你在学习前端,一定要跟着在校老师的步伐,基础很重要的!重要的说三遍--基础很重要的!
首先我们应该认识到网站和网页是由什么组成的
网站是由我们根据一定的规则,使用HTML等网页工具制作出特定展示的一个网页集合
网页是由图片,文字,视频,音频等文件组成。其实就是一个HTML文件
网页是网站中的一部分,通常使用HTML文件格式,它主要啊通过浏览器进行使用!
世界上由于多五花八门的浏览器,肯定会有国际组织指定一些标准准则,来维护互联网的发展 ,此时我们需要一定的------Web标准
什么是web标准呢?
浏览器的不同,使排版和展示出现差异化,也会存在一下几点优点
1.让Web的发展前景更广阔。
2.内容能被广泛的设置访问
3.更容易被搜寻引擎搜索
4.降低网站流量费用
5.使网站更容易维护
6.提高页面浏览速度
说到这里,我不得不给大家解释我们生活中常见的五大浏览器
IE浏览器、火狐浏览器(firefox)、saftai浏览器、谷歌浏览器、Opera(欧朋)浏览器
web标准的构成:
主要包括在结构、表现、行为三个方面
当然最佳方案是三者相分离,因为方便修改里面的信息!
在接下来的学习中,我们可以知道我们所学习的HTML是结构、CSS是样式表现、javascript是行为!接下来,我们正式进入正题:学习HTML!
HTML基础语法和使用
我们首先创建一个最基本的骨架标签,其中创建步骤如下:
1.下载敲打HTML的工具:现在,市场上有很多的代码工具,能够使我们轻松的编写代码,极大的便利我们的操作。我推荐大家使用一个免费的工具Visual Studio Code.
2.大家可以在电脑的应用商店里面去下载,下载好直接下一步,傻瓜式的安装.
3.我们可以在商店下载一下几个插件,方便我们在写代码中起到便利的作用!
记下来我们便可以进入到我们第一个网页制作的过程!最基本的结构模式(也称为骨架标签)
<!DOCTYPE html>
<html>
<head>
<title>这是第一个网页骨架的制作</title>
</head>
<body>
大家好!我是一个学习前端的新生,希望大家可以多多关照
</body>
</html>
骨架标签分为:head头部和body身体部分,而html是包裹着整个身体!
在Visual Studio Code中我们输入一个英文的感叹号可以直接生成我们的骨架,当然你若是处于新手期,尽量使用手写来熟练的掌握,我们可以在body里面写入内容,在浏览器中我们可以展示我们写入的内容。
标题标签的使用
熟练掌握骨架标签,我们可以练习标题标签<h1>--<h6>
标题标签是一个双标签!
下面是代码的演示过程:
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题标签</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</body>
</hrml>
我们在这里面记住的是h1标签我们常用在网页logo上面使用,这就使它显得很重要,在开发当中慎重使用
换行标签:<br/>
换行标签是一个单标签,当文字显示的比较密集的时候我们可以使用换行标签,这样可以使我们的网页显示的更加整齐!
<!DOCTYPE html>
<html lang="en">
<head>
<title>换行标签的使用</title>
</head>
<body>
疫情发生以来,市工业信息局积极行动、有效部署,指导联通、移动、电信三家通信部门加强网络监测和保障,满足学生网课及群众生活的网络需求、通信需求,护航政府部门、医疗机构、交通枢纽、核酸检测点等区域通信质量及畅通。连日来,通信部门共出动通信保障人员550余人次,通信保障车辆180余台次,及时排除市区各小区、公路卡口、核酸检测点监控故障,保障设备正常运行。
<hr>
疫情发生以来,市工业信息局积极行动、有效部署,指导联通、移动、电信三家通信部门加强网络监测和保障,<br> 满足学生网课及群众生活的网络需求、通信需求,护航政府部门、医疗机构、交通枢纽、核酸检测点等区域通信质量及畅通。<br>
连日来,通信部门共出动通信保障人员550余人次,通信保障车辆180余台次,及时排除市区各小区、公路卡口、核酸检测点监控故障,保障设备正常运行。<br>
</body>
</html>
上面的内容包含普通的显示和换行的显示,普通的显示是看你浏览器的大小来进行扩展的,而换行标签则是可以使我们随意的分开。