一、Web基础及HTML入门
目录
1.常见浏览器
- Google(重要,运行速度快 Google Chrome 网络浏览器)
- Firefox( Firefox - 使用隐私至上的产品保护您的网络生活 — Mozilla)
- Opera(Opera Web Browser | Faster, Safer, Smarter | Opera)
- Safari(Safari 浏览器 - Apple (中国大陆))
- Internet Explorer(Internet Explorer 下载 - Microsoft 支持)
- Microsoft Edge(了解 Microsoft Edge)
2.浏览器内核(面试版)
- 浏览器的作用:渲染前端写的代码,呈现给用户眼中的美丽视觉。其中渲染是通过我们的浏览器内核。
- 本来内核分为渲染引擎和JS引擎,后来JS用的多了,解析出去了,所以其内核主要是指的我们的渲染引擎(layout engineer)
- 几大浏览器内核:Trident(IE内核、绝大多数双核浏览器的其中一核)、Gecko(firefox)、Webkit(safari)、Bink/Chromium(Chrome 苹果公司)、Bink(Opera)
3.Web标准(重点)
- 它的好处:
- 它的构成:内容结构Html(好比人的骨骼)、表现样式Css(好比人的衣服)、行为交互Js(好比人的肢体动作)
4.HTML初始
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:文本、链接、图片、声音等内容。值得注意的,HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。
设置Html默认浏览器为Goolge:
关键词:文本 标签 语言
5.HTML的骨架
如下图:
6.HTML标签分类
什么是HTML标签?
HTML标签分类:双 and 单
7.HTML标签关系
- 嵌套关系(父子关系):如下图的<html>、<head>、<title>标签。
- 并列关系(兄弟关系):如<head>、<body>标签。
8.Web开发工具
开发工具有哪些呢?
分别是 Dreamweaver、SublimeText3 、WebStorm、Hbuilder、VS code等
其中VS code安装及教程网站:
Visual Studio Code - Code Editing. Redefined
VSCode安装使用教程(最新详细版)_vscode安装教程_Passerby_Wang的博客-CSDN博客
WebStorm的安装及教程网站:
WebStorm: The Smartest JavaScript IDE, by JetBrains
2023 年 webstorm 安装教程,快捷键,附详细图解_webstorm安装_计算机毕设徐师兄的博客-CSDN博客
SublimeText3的安装及教程网站:
Sublime Text3 安装及使用教程_sbpmetext3_互联网叫兽的博客-CSDN博客
9.生成html骨架
html:5 或者 !
回车键后如下图:
回车键后如下图:
其中;
doctype文档类型:告诉我们使用哪个html版本。
字符集:chatset
二、HTML标签
1.标签的语义化及标题标签
即我们得知道这个标签是干嘛的。
2.HTML标签
(1)排版标签
标题标签
如下图:
值得注意的是<h1>标签尽量少用,一般<h1>都是给logo使用的
段落标签
如下图:
值得注意的<p>它有根据浏览器窗口大小自动换行功能
水平线标签
如下图:
自制新闻页面
如下图:
换行标签
如下图:
div span标签(重点)
注:没有语义,就是用来布局的
(2)文本格式化标签
如下图演示:
(3)标签属性
提倡尽量不要使用 样式属性
如下图以<hr />为例子:
(4)图像标签(重点)
例如下图所示:
运行结果如下图:
(5)链接标签(重点)
例如下图操作:
锚点定位(难点)
例如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚点标签</title>
</head>
<body>
<h2 id="directory">目录</h2>
<hr />
<a href="#live">人物生平</a><br />
<a href="#experience">任职经历</a><br />
<a href="#Personal life">个人生活</a><br />
<a href="#Main achievements">主要成就</a><br />
<a href="#Award records">获奖记录</a><br />
<a href="#Character comments">人物言论</a><br />
<a href="#Character evaluation">人物评价</a><br />
<a href="#Character influence">人物影响</a><br />
<h3 id="live" ><a href="#directory">人物生平</a></h3>
<hr />
朝花夕拾》原名《旧事重提》,是现代文学家鲁迅的散文集,收录鲁迅于1926年创作的10篇回忆性散文, [1] 1928年由北京未名社出版,现编入《鲁迅全集》第2卷。
此文集作为“回忆的记事”,多侧面地反映了作者鲁迅青少年时期的生活,形象地反映了他的性格和志趣的形成经过。前七篇反映他童年时代在绍兴的家庭和私塾中的生活情景,后三篇叙述他从家乡到南京,又到日本留学,然后回国教书的经历;揭露了半封建半殖民地社会种种丑恶的不合理现象,同时反映了有抱负的青年知识分子在旧中国茫茫黑夜中,不畏艰险,寻找光明的困难历程,以及抒发了作者对往日亲友、师长的怀念之情 [2] 。
文集以记事为主,饱含着浓烈的抒情气息,往往又夹以议论,做到了抒情、叙事和议论融为一体,优美和谐,朴实感人。作品富有诗情画意,又不时穿插着幽默和讽喻;形象生动,格调明朗,有强烈的感染力 [3] 。
<h3 id="experience"><a href="#directory">任职经历</a></h3>
<hr />
朝花夕拾》里作者鲁迅用夹叙夹议的方法,以青少年时代的生活经历为线索,真实生动地叙写了自己从农村到城镇,从家庭到社会,从国内到国外的一组生活经历,抒发了对往昔亲友和师长的怀念之情,同时也对旧势力、旧文化进行了嘲讽和抨击。 [4]
<h3 id="Personal life"><a href="#directory">个人生活</a></h3>
<hr />
⑴《狗·猫·鼠》描写了作者仇猫的原因,取了“猫”这样一个类型,讽刺了生活中与猫相似的人。
⑵《阿长与〈山海经〉》记述作者儿时与阿长相处的情景,表达了对她的怀念感激之情。
⑶《二十四孝图》重点描写了在阅读“老莱娱亲”和“郭巨埋儿”两个故事时所引起的强烈反感,揭露了封建孝道的虚伪和残酷,揭示了旧中国儿童的可怜的悲惨处境。
⑷《五猖会》以赶会为背景,描写了封建制度对儿童天性的束缚和摧残。
⑸《无常》通过描写无常救人反遭毒打事件,表达了旧时代中国人民绝望于黑暗的社会,愤慨于人世的不平。
⑹《从百草园到三味书屋》描述了作者儿时在家中百草园得到的乐趣和在三味书屋读书严格但不乏乐趣的生活,揭示儿童广阔的生活趣味与束缚儿童天性的封建书塾教育的尖锐矛盾。
⑺《父亲的病》重点回忆儿时为父亲延医治病的情景,描述了几位“名医”的行医态度、作风、开方等种种表现,揭示了这些人巫医不分、故弄玄虚、勒索钱财、草菅人命的实质。
⑻《琐记》回忆了隔壁家表面对孩子好,其实是暗中使坏的衍太太,描写了她是一个自私自利、奸诈、坏心眼的妇人。
⑼《藤野先生》记录作者在日本留学时期的学习生活及他决定弃医从文的原因,表达了对藤野先生深切的怀念。
⑽《范爱农》描述了范爱农在革命前不满旧社会、追求革命,辛亥革命后又备受打击迫害的遭遇,表现了对旧民主革命的失望和对这位正直倔强的爱国者的同情和悼念。 [4]
<h3 id="Main achievements"><a href="#directory">主要成就</a></h3>
<hr />
1925年,鲁迅在北京担任大学讲师期间,因支持学生运动而受到当时所谓“正人君子”的流言攻击和排挤。1926年,北洋军阀政府枪杀进步学生,制造“三·一八”惨案。作者鲁迅写下《纪念刘和珍君》等一系列文章,热情支持学生的正义斗争,控诉北洋军阀政府的残暴,结果遭到当局的通缉而不得不远走厦门避难。《朝花夕拾》中的作品虽然都是在追忆往事,但也是“借题发挥”,影射、讥讽当时的社会现实。 [5]
<h3 id="Award records"><a href="#directory">获奖记录</a></h3>
<hr />
《朝花夕拾》作于1926年2月至11月,共10篇。前5篇写于北京,后5篇写于厦门,曾先后发表在《莽原》半月刊上,总题为《旧事重提》。1927年5月成集时,改名为《朝花夕拾》,并作了《小引》,7月又写了《后记》,1928年由北京未名社印行。 [2]
<h3 id="Character comments"><a href="#directory">人物言论</a></h3>
<hr />
阿长出自《阿长与<山海经>》
阿长是鲁迅儿时的保姆,她睡相不好、喜欢切切察察,而且还踩踏死鲁迅喜爱的隐鼠,这些都使鲁迅对她感到厌烦,但是当她真诚善良的一面表现出来时,如送给鲁迅心心念念的《山海经》,鲁迅不禁心生敬意和感激。阿长是封建社会下一个典型的农村劳动妇女,她粗壮耐劳,真诚善良。
父亲出自《五猖会》
在《五猖会》中,鲁迅塑造的“父亲”形象似乎不近人情,与现实有些出入,主要是为表达主题而设置。父亲利用孩子爱玩的天性强迫孩子背书,使孩子深受打击,留下心理阴影,从而揭示了封建家长制对于儿童天性的压制和摧残。
藤野先生出自《藤野先生》
藤野先生是鲁迅留学日本期间极为尊敬的一位良师。他不修边幅,但治学严谨。他正直热忱,热心地关注鲁迅的学习,与当时日本学生对中国留学生的鄙视态度形成鲜明的对比。这些高尚的品质一直激励着鲁迅勇往直前。
范爱农出自《范爱农》
范爱农是当时社会充满爱国情怀的一群小知识分子的形象代表,他们的命运起伏与时代的发展紧密相连,经历了对黑暗的不满、对革命的期待以及对革命的失望的心路历程,社会的迫害、生活的窘迫又将他们逼入绝境。 [5]
<h3 id="Character evaluation"><a href="#directory">人物评价</a></h3>
<hr />
主题思想
《朝花夕拾》十篇散文勾勒了从清末到辛亥革命时期的若干社会生活风貌,是一幅幅世态图和风俗画。虽然是回忆性散文,但是有现实的斗争性和深邃的思想性,蕴含着作者对历史的深刻思考和对现实的执着态度。它的思想内容集中表现在以下几方面:
⑴具有强烈的反封建思想,具有对封建教育、封建道德、封建顽固派的批判意识。《二十四孝图》中揭露了封建孝道的虚伪、丑恶和残忍;《从百草园到三味书屋》和《五猖会》中鞭挞了封建的教育制度、教育内容、教育方法对儿童活泼可爱的天性的束缚、压制和摧残;《无常》一文中采用《聊斋志异》的讽刺笔法,揭露了人间没有公正的裁判,嘲讽了那些打着“公理”、“正义”旗号的“正人君子”;《父亲的病》中有力地痛斥了那些勒索钱财、草菅人命的庸医;《琐记》中刻画了洋务学业内的“乌烟瘴气”;《藤野先生》则入木三分地勾勒出昏庸无耻、不学无术的清国留学生的丑态。 [6]
⑵表现对亲友和师长的崇敬、怀念之情。作者通过对青少年时期生活片断的回忆,记叙他所接触到的一些人物的感人事迹,塑造一批栩栩如生的人物形象,如长妈妈、藤野先生、范爱农等,赞颂他们身上表现出的优秀品质,表现出对他们的深切怀念之情。《阿长与<山海经>》里的长妈妈,是个热情、纯朴、善良、给幼年的鲁迅以极大关爱的劳动妇女。作者真实地描述了长妈妈由于长期受封建思想的毒害,所以“我实在不大佩服她”。全文以“仁厚黑暗的地母呵,愿在你的怀里永安她的魂灵。”表达作者对长妈妈的深切怀念。《藤野先生》中的藤野严九郎是个生活随便、不拘小节的人,但是治学严谨,对留学日本的作者没有民族偏见,给予真诚的帮助和指导,使作者终身难以忘怀。作品介绍了藤野先生为作者修改讲义的详细过程。正是这位人格高尚的日本老师鼓励着鲁迅与资产阶级文人进行着顽强的战斗,使他成为思想文化战线上一位伟大的旗手。《范爱农》中的范爱农是个性格倔强、落落寡欢、富有正义感的爱国知识分子。鲁迅与范爱农是在日本留学期间相识的,并且有过激烈争吵。原因是革命党人徐锡麟、秋瑾被反动政府杀害,浙江籍留日学生召开同乡会,就是否给北京政府发电,痛斥满清政府的无人道发生了分歧。鲁迅主张发电声讨,范爱农则主张不必发电,理由是“杀的杀掉了,死的死掉了,还发什么屁电报呢”。正是这争吵,说明范爱农生性倔强,对腐败无能的满清政府完全丧失了信任。辛亥革命使范爱农变的兴奋和勤快,说明他是个具有强烈反清思想的爱国知识分子,最后这样倔强的知识分子被逼上绝路,作品深刻地揭示了辛亥革命失败所造成的这一悲剧。文章最后以“现在不知他惟一的女儿景况如何?倘在上学,中学已该毕业了罢”,表现作者对亡友的深深怀念。 [7]
<h3 id="Character influence"><a href="#directory">人物影响</a></h3>
<hr />
批判封建思想、封建制度对青少年的毒害思想。这些散文以“我”为线索,通过作者的亲身经历,看到封建社会、封建教育制度对青少年身心健康的摧残,使他们受到极大的伤害,表现作者强烈的反封建的战斗精神。作者无情地批判封建孝道的愚昧和残忍,揭露其虚伪性和欺骗性。在《二十四孝图》中,作者说:“其中最使我不解,甚至于发生反感的,是《老莱娱亲》和《郭巨埋儿》两件事,通过这两件事来说明愚昧的封建孝道只是骗人的把戏而已,绅士、将军者们不去实行,人们又何必要认真地去实行呢。在这里,作者把封建的孝道揭露批判得体无完肤。作者对束缚青少年成长的封建教育制度极度厌恶,控诉这种教育对儿童心灵的摧残。《五猖会》首先介绍了五猖会的盛况,接着描写作者要去看会时的兴奋和喜悦,正在作者兴高采烈地将要启程去看会时,父亲突然出现了,并严肃地让鲁迅“去拿你的书来”。接着写作者如当头浇了一盆冷水,最后父亲命令道:“给我读熟。背不出来,就不准去看会。”接着写作者背书时的痛苦和无奈,写母亲、阿长等人无法营救及等待他背熟时的焦虑。最后作者终于背将出来,大家脸上露出笑容,向河埠走去。但作者这时已是索然无味,没了兴致。这实际是对摧残少年儿童的封建教育制度的强烈控诉。全文以反问作结,实际上是作者对父亲这种行为的否定,也就是对束缚儿童成长的封建教育的否定。《从百草园到三味书屋》是作者对封建教育的又一次批判。全文对百草园的欢乐和三味书屋的乏味进行了强烈的对比。在百草园中作者的天性得到充分的显露,享受了生活的无限乐趣。作者把百草园看成是自己的乐园,回味无穷。接下来介绍三味书屋,“是全城中称为最严厉的书塾”。在这里只能是习字和对课,读那些枯燥无味和似懂非懂的文章。如果违犯了规矩,还要领教罚跪和戒尺的滋味。学生不能向老师提问课堂以外的问题。由于课堂的无聊,学生们毫无学习兴趣,所以趁老师读书兴致正浓之时,便开始各自的游戏。这实际上是对于封建教育的一种自发的抵制和反抗。通过这些描写,说明童年的鲁迅对这种束缚人的封建教育是非常厌烦的。《琐记》对自己南京求学一段生活作了总结,在这里批判了当时的教育是学非所用,爬上二十丈的桅杆不可以当个好水兵,钻进二十丈的地道也不能做个好矿工。这说明当时的教育和实践相脱节,作者对这样的教育非常不满,所以决定出国学习,继续深造。 [7]
</body>
</html>
Base标签
例如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base标签</title>
<base target="_blank" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.163.com">网易</a>
</body>
</html>
(6)特殊字符(理解)
例如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
-------- 空格符 --------<br />
特殊符号大于小于号用法:5<6 8>7<br />
和号使用:&<br />
人民币符号:¥<br />
版权符号:©<br />
注册商标符号:®<br />
摄氏度符号:°<br />
正负号符号:±<br />
乘号符号:×<br />
除号符号:÷<br />
平方2(上标2)符号:²<br />
立方3(上标3)符号:³<br />
</body>
</html>
注释标签
(7)路径(重点 难点)
相对路径
例如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--同一级文件夹:输入图像文件名即可!-->
<img src="自行车.jpg" width="200" /><br />
<!--下一级文件夹:文件夹名/文件名-->
<img src="img\二维码.jpg" width="200" /><br />
<!--上 一级文件夹:../文件夹名/文件名-->
<img src="../photo/自行车.jpg" width="400" />
</body>
</html>
绝对路径
例如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--1.直接复制图片属性下的路径 PS:不建议使用-->
<img src="D:\桌面图片汇总\f7ff090e29f0970880f28f8693ceb9e8.jpg" width="200"/><br />
<!--2.复制网页上的图片地址 PS:这才是绝对路径的正确打开方式-->
<img src="https://img1.baidu.com/it/u=3843013236,2267343942&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=801" width="150"/>
</html>
(8)列表标签
无序列表ul(重点)
例如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>你喜欢的五种动物:</h3>
<ul>
<li>熊猫</li>
<li>树懒</li>
<li>考拉</li>
<li>袋鼠</li>
<!--li标签里可以放h标签和p标签等等,PS:ul标签里面最好不要放p标签以及其他标签,只放li标签-->
<li>
<h4>会动的植物:</h4>
<p>猪笼草</p>
</li>
</ul>
</body>
</html>
值得注意的:
有序列表(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>学习的步骤:</h3>
<ol>
<li>打开书</li>
<li>看书预习</li>
<li>看课理解</li>
<li>复习知识</li>
</ol>
</body>
</html>
四大发明案例(运用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>中国四大发明</h1>
<ul>
<li>
<h3><img src="img\造纸术.jpg" width="200" />造纸术</h3>
<p>造纸术是中国四大发明之一,人类文明史上的一项杰出的发明创造。中国是世界上最早养蚕织丝的国家。中国古代劳动人民以上等蚕茧抽丝织绸,剩下的恶茧、病茧等则用漂絮法制取丝绵。这种漂絮的副产物数量不多,在古书上称它为赫蹏或方絮。这表明了中国造纸术的起源同丝絮有着渊源关系。中国古代四大发明之一的纸张,很大可能是起源于中国南方,并且和岭南地区特别是环珠江口周围6000多年前涌现的丰富的树皮布文化体系有密切关系。</p>
</li>
<li>
<h3><img src="img\指南针.jpg" width="200" />指南针</h3>
<p>指南针是用以判别方位的一种简单仪器。前身是司南。主要组成部分是一根装在轴上可以自由转动的磁针。磁针在地磁场作用下能保持在磁子午线的切线方向上。磁针的北极指向地理的北极,利用这一性能可以辨别方向。</p>
</li>
<li>
<h3><img src="img\火药.jpg" width="200" />火药</h3>
<p>火药是中国古代炼丹家发明于隋唐时期,距今已有一千多年了。火药的研究开始于古代道家炼丹术,古人为求长生不老而炼制丹药,炼丹术的目的和动机都是超前的,但它的实验方法还是有可取之处,最后导致了火药的发明。炼丹家虽然掌握了一定的化学方法,但是他们的方向是求长生不老之药,火药的发明是副产品。炼丹家对于硫磺、砒霜等具有猛毒的金石药,在使用之前,常用烧灼的办法“伏”一下,“伏”是降伏的意思。使毒性失去或减低,这种手续称为“伏火”。</p>
</li>
<li>
<h3><img src="img\印刷术.jpg" width="200" />印刷术</h3>
<p>目前发现最早的雕版印刷成品是一单页版印度梵文撰写的《陀罗尼经》,该经是印在亚麻纸上,于650年至670年间出版,且在1974年于西安附近的唐代陵墓出土。学者李约瑟和钱存训的记述表示唐朝金刚经的书法雕刻技术远较较早印行的单页版印度陀罗尼经更为先进,更为精巧。另外,两个最古老的印刷农历日期为877年和882年,它们是在当时敦煌被发现。</p>
</li>
</ul>
</body>
</html>
自定义列表(理解)
主要用于网站底部:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>眉山</dd>
<dd>乐山</dd>
</dl>
<dl>
<dt>运动鞋</dt>
<dd>质量保障</dd>
<dd>出产厂家</dd>
<dd>售后服务</dd>
</dl>
</body>
</html>