html+css+js学习-01

最新推荐文章于 2023-04-29 14:50:27 发布

西边太早生

最新推荐文章于 2023-04-29 14:50:27 发布

阅读量201

点赞数

文章标签： html css js 编程语言

本文链接：https://blog.csdn.net/weixin_41821560/article/details/113839600

版权

html+css+js学习-01

为什么要学习html+css+js？答：容易入门、工作工资不低
在这里插入图片描述
这是截止2020年11月4日的前端工程师平均工资。
具体可以参考知乎上的一篇回答
前端工程师工资分析.
根据学习理论
我的学习方法将以应用和分享传播为主，应用是根据所学知识另写案例，传播则是转教别人，当然最好还是能加上讨论。

网页的基本组成：由文字、链接、图片、声音、视频等元素组成，通常是以.htm或者.html结尾的文件。
在这里插入图片描述
HTML是什么：HTML是超文本语言，超文本就是超越了文本的限制，可以放图片链接等的元素；
还可以跳转到另一个文件，与世界各地主机的文件链接。

HTML即是Hyper（超级[ˈhaɪpər]） Text Markup Language，

网页需要通过浏览器来阅读。

常用的浏览器：谷歌、火狐、欧朋、IE、Edge、Safari 在这里插入图片描述
Safari是苹果公司研发的网络浏览器

用谷歌浏览器，别问，问就是多人用。

万维网联盟W3C和其他标准化组织制定了一系列标准组合称为Web标准，W3C是国际最著名的标准化组织。

为什么要制定Web标准？
制定Web标准与统一度量衡、统一文字一样，让所有的人都能在同一套标准中进行Web开发。
在这里插入图片描述

Web标准的三大组成部分：结构（structure[ˈstrʌktʃər]）、表现（presentation）、行为（behavior[ˌpriːzenˈteɪʃn]）
在这里插入图片描述
结构用HTML超文本语言写，表现用css写，行为用js写。

HTML用来放置文本、链接、声音视频等元素，HTML有默认的格式，比如h标签，她是用来放置文字标题的，默认的颜色是黑色，但她是静态显示的，也就是不会动的，和ppt一样。

css则是用来修改HTML元素的默认格式，也称为样式，比如可以用css来改变h标签的字体颜色。

js是用来交互的，交互一般指人机交互，利用js就可以实现网页的动态显示，比如我们需要实现用户的鼠标放在某个h标签放置的标题时显示相关图片，这就需要用js实现。

三者中HTML最重要，因为她是身体，身体没了，其他再花里胡哨也没有用。先学习HTML，身体强壮有力，做什么都得心应手。

HTML文件可以用系统自带的记事本写，因为她是用浏览器来渲染解析的，只要写完后把文件格式从.txt改成.html就行了。以前的人是用记事本写的。

现在是2021年，则不再需要使用记事本写了，记事本写的缺点是所有的代码都要手敲，新的工具可以帮助我们做很多重复的事情，每一个网页都有相同的部分，她们的代码是一样的，用工具效率更高。

就像做面包，以前是用手来一只一只面包地做出来，现在有面包机，可以把这个重复的动作取代，直接出面包，这就是解放生产力。

现在的工具有：
在这里插入图片描述
推荐用Visual Studio Code，别问，问就是大家都说好，安装方法自己百度。

总结：写网页你需要一个浏览器（谷歌）、一个代码工具（Visual Studio Code）

安装完就添加两个插件，Chinese (Simplified) Language Pack for Visual Studio Code和open in browser（美[ˈbraʊzər]浏览器），一个是中文替换，另一个是用浏览器打开，写好的代码通过浏览器打开就可展现内容了。插件怎么安装，百度。

在Visual Studio Code新建一个文件，然后另存为html格式的文件。这十分重要。

写好代码后右击要运行的代码，点击open in default（美[dɪˈfɔːlt]
默认的） browser。
在这里插入图片描述
点击后就得到一个简单的网页：
解析代码：

HTML超文本语言的所有语句都要有标签<>包含，所以HTML超文本语言又叫标签语言。标签语言的绝大部分标签都以成对的形式出现。如:

<html>
   <head>
   
   </head>
   <body>
   
   </body>
</html>

这便是一个网页的简单骨架，有总网页<html>,有头部<head>,有身体<body>，她们都是以双标签的形式出现，后一个标签还有反斜杠/

至于

<!DOCTYPE html><html lang="en">
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

这些都是W3C制定的东西，标准的东西我们跟着写就行了。

这样我们就得到一个标准的模板

<!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>
    
</body>
</html>

在Visual Studio Code中这一大段标准化的代码我们输入一个英文的叹号!，按回车就能得到，这是工具的方便。所有的代码都必须是英文，包括符号。需要展示的内容则不必须，前提要有一个万国符号集：

  <meta charset="UTF-8">

在这里插入图片描述

到现在学了网页标签

<html>

</html>

头部标签和身体标签

<html>
   <head>
   
   </head>
   <body>
   
   </body>
</html>

现在学习标题标签

<h1>~<h6>

在这里插入图片描述

<!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>h1~h6标题标签</title>
</head>
<body>
    <h1>你不属于我，这是一级标题</h1>
    <h2>情人最后难免沦为朋友，这是二级标题</h2>
    <h3>天梯，这是三级标题</h3>
    <h4>几多对持续爱到几多岁，这是四级标题</h4>
    <h5>前面有几高，一片荒岛，这是五级标题</h5>
    <h6>抱紧一生未觉累，这是六级标题</h6>
</body>
</html>

在这里插入图片描述
接下来是段落标签和换行标签

<p>
   这里放置段落
</p>

换行标签在需要换行的位置增加

<br/>

实际案例，把韩愈的《师说》分段，在文章最后把作者朝代分行显示。

<!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>《师说》</title>
</head>
<body>
    <p>古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。</p>

    <p>嗟乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎？爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰：“彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。”呜呼！师道之不复可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！</p>

    <p>圣人无常师。孔子师郯子、苌弘、师襄、老聃。郯子之徒，其贤不及孔子。孔子曰：三人行，则必有我师。是故弟子不必不如师，师不必贤于弟子，闻道有先后，术业有专攻，如是而已。</p>

    <p>李氏子蟠，年十七，好古文，六艺经传皆通习之，不拘于时，学于余。余嘉其能行古道，作《师说》以贻之。</p>
    <p>韩愈<br/>唐朝</p>
</body>
</html>

代码解析：
在这里插入图片描述
结果解析：

pink老师的视频1~16p学习。

复习：超文本的意思、几款常用的浏览器、用Visual Studio Code写网页要注意的地方、html骨架、html和css还有js的关系，html标签、head标签、body标签、title标签、h1~h6标签、p标签、br标签、

西边太早生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html+css+js学习-01

html+css+js学习-01为什么要学习html+css+js？答：容易入门、工作工资不低根据学习理论我的学习方法将以应用和传播为主，应用是根据所学知识另写案例，传播则是转教别人，当然最好还是能加上讨论。网页的基本组成是：由文字、链接、图片、声音、视频等元素组成，通常是以.htm或者.html结尾的文件HTML是什么：HTML是超文本语言。什么是超文本语言：超文本就是超...
复制链接

扫一扫