day01 HTML基础笔记
一、网页
1.1 什么是网站（了解）
-
网站是有多个网页组成的
-
网页就是网站中的其中一页
-
网页是网站的基本组成元素。由图片、视频、音频、链接、文字等元素构成。
1.2 什么是HTML（记住）
-
HTML（Hyper Text Markup Language）叫做==超文本标记语言==。是以==.htm==或==.html==结尾的文件。
-
超文本：如果是普通的文本，只有文字。超文本既可以有文字、图片、视频、音频等
1.3 网页的组成（了解）
-
网页是由网页元素组成的。
-
程序员写的代码------> 网页元素 ---------> 浏览器来呈现
二、常用浏览器（记住）
2.1 五大主流浏览器
-
IE浏览器（Edge浏览器）、火狐浏览器(FireFox)、Safari浏览器、谷歌浏览器（Google chrome）、欧朋浏览器（Opera）
2.2 常用浏览器的内核（记住）
-
什么是浏览器的内核：浏览器的渲染引擎，可以将咱们写的html代码一 网页的形式呈现出来
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE浏览器 | Trident | 百度浏览器、360浏览器、猎豹浏览器等 |
| 火狐浏览器 | Gecko | 火狐浏览器 |
| Safair浏览器 | Webkit | Safair浏览器、以前的谷歌浏览器 |
| 谷歌浏览器 | Blink | 欧朋浏览器、现在的谷歌浏览器 |
Blink内核：是Webkit内核的一个分支，是基于Webkit内核开发的
三、Web标准
3.1 什么是web标准（了解）
-
Web标准是由W3C（万维网联盟）和国际化标准组织统一指定的标准。
3.2 为什么需要web标准（了解）
-
由于大部分浏览器的内核都是不一样的，那么就导致了对HTML语言的渲染也是有差异的。为了降低开发成本，使各大主流浏览器对HTML语言渲染更加的统一。所以就需要有一套标准，就是web标准
3.3 web标准的构成（记住）
-
HTML（结构）、CSS（样式）、JavaScript（行为）
四、HTML语法规范
4.1 HTML基本语法概述（掌握）
-
==HTML标签（HTML标记）==由==一对尖括号==构成，尖括号的==里面==放的是==关键词==。例如：
<div></div>、<img />等。 -
HTML标签分为：==单标签==、==双标签==。
-
==单标签==：是以 “==/==”结尾的标签，叫做单标签。例如：
<img />、<br />、<hr />、<input />等 -
==双标签==：是==成对出现==的。例如：
<div></div>、<span></span>、<head></head>等
4.2 标签之间的关系
-
父子关系（嵌套关系）
<div> <span></span> </div>
-
兄弟关系（平级关系）
<div></div> <div></div> <span></span>
五、HTML基本结构标签（了解）
5.1 HTML基本结构搭建
| 标签 | 作用 |
|---|---|
| html标签 | 根标签（最顶层的标签） |
| head标签 | 头部标签 |
| title标签 | 网页的标题标签 |
| body标签 | 网页内容标签 |
<html> <head> <title>淘宝网 - 淘！我喜欢</title> </head> <body> 我是淘宝网的内容部分 </body> </html>
5.2 文档类型声明标签
-
DOCTYPE: 不属于html标签，是文档类型声明标签。告诉浏览器使用最新的html5标签来渲染当前html代码
<!-- 需要将这段代码放在最前面 --> <DOCTYPE html>
5.3 lang属性作用
-
告诉浏览器使用哪种语言来解析html
-
==lang属性==的值常用的有：==en==(英语)、==Zh-CN==(简体中文)、==fr==(法语)等
5.4 charset属性作用
-
charset属性的作用就是告诉浏览器使用哪种字符集来进行编码
-
常用的编码格式有：==gb2312==、==GBK==、==UTF-8==等。国际通用编码格式就是：==UTF-8==
-
如果不设置编码格式的话：浏览器在解析中文的时候就有可能出现中文乱码的问题
六、HTML常用标签(重点掌握)
6.1 标签语义化的作用
-
让咱们的结构更加的清晰
6.2 标题标签（h1-h6）
-
h1：一级标题
-
h2：二级标题
-
h3：三级标题
-
..
-
h1~h6标签，文字是由大到小，由粗到细的过程
-
代码
<body> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> <h4>我是h4标签</h4> <h5>我是h5标签</h5> <h6>我是h6标签</h6> </body>
6.3 段落和换行标签
-
段落标签：p标签，可以对文章进行分段，段落与段落之间是有间隙的
<body> <h3>这是标签p标签的使用</h3> <p> 乔尔-恩比德落选全明星首发引发了很大争议，毕竟他本赛季场均贡献33.4分9.8篮板，以任何尺度评价，他都有成为首发的资格。 </p> <p> 这样的评选结果也让76人高层彻底破防，公开声讨“波士顿媒体不要脸”，在全明星评选过程中所占权重太大，导致恩比德在媒体投票环节大大落后于塔图姆。倾向凯尔特人的媒体的确占据了不少票数，The Ringer网站（著名凯蜜比尔-西蒙斯创办）有6票，《波士顿环球报》有两票，其中大部分（如果不是全部）必然给了塔图 </p> </body>
-
换行标签：br标签，它是一个单标签。可以对段落中的文字进行强制换行。
<body> <h3>这是标签p标签的使用</h3> <p> 乔尔-恩比德落选全明星首发引发了很大争议，毕竟他本赛季场均贡献33.4分9.8篮板，以任何尺度评价，他都有成为首发的资格。 </p> <h3>br标签可以对段落中的文字进行强制换行</h3> <p> 这样的评选结果也让76人高层彻底破防，公开声讨“波士顿媒体不要脸”，在全明星评选过程中所占权重太大，导致恩比德在媒<br />体投票环节大大落后于塔图姆。倾向凯尔特人的媒体的确占据了不少票数，The Ringer网站（著名凯蜜比尔-西蒙斯创办）有6票，<br />《波士顿环球报》有两票，其中大部分（如果不是全部）必然给了塔图 </p> </body>
6.4 文本格式化标签
| 标签 | 作用 |
|---|---|
| strong标签 | 可以对文本进行加粗显示，具有强调作用。推荐使用strong标签，strong标签的语义更加强烈 |
| b标签 | 可以对文本进行加粗显示，具有强调作用 |
| em标签 | 可以对文本进行倾斜显示，推荐使用em标签，因为em标签的语义更加强烈 |
| i标签 | 可以对文本进行倾斜显示 |
| del标签 | 删除线。推荐使用del标签，因为del标签的语义更加强烈 |
| s标签 | 删除线 |
| ins标签 | 下划线。推荐使用ins标签，因为ins标签的语义更加强烈 |
| u标签 | 下划线。 |
注：常用的是==strong标签==和==em标签==
-
加粗标签
<body> <h3>strong标签可以对文本进行加粗显示</h3> <p> <strong>乔尔-恩比德</strong>落选全明星首发引发了很大争议，毕竟他本赛季场均贡献33.4分9.8篮板，以任何尺度评价，他都有成为首发的资格。 </p> <h3>b标签页可以对文本进行加粗显示，但是它没有strong标签的语义强烈</h3> <p> <b>乔尔-恩比德</b>落选全明星首发引发了很大争议，毕竟他本赛季场均贡献33.4分9.8篮板，以任何尺度评价，他都有成为首发的资格。 </p> </body>
-
倾斜标签
<body> <h3>em标签可以对文本进行倾斜显示</h3> <p> <em>乔尔-恩比德</em>落选全明星首发引发了很大争议，毕竟他本赛季场均贡献33.4分9.8篮板，以任何尺度评价，他都有成为首发的资格。 </p> <h3>i标签页可以对文本进行倾斜显示，但是它没有em标签的语义强烈</h3> <p> <i>乔尔-恩比德</i>落选全明星首发引发了很大争议，毕竟他本赛季场均贡献33.4分9.8篮板，以任何尺度评价，他都有成为首发的资格。 </p> </body> -
删除线
<body> <h3>del标签表示删除线</h3> <del>删除线</del> <h3>s标签也表示删除线</h3> <s>删除线</s> </body>
-
下划线
<body> <h3>ins标签是下划线标签</h3> <ins>下划线</ins> <h3>u标签也是下划线标签</h3> <u>下划线</u> </body>
6.5 布局标签
div标签和span标签。这两个标签没有任何语义化的意义
-
div标签
-
div标签，表示的是网页中一块内容。里面可以嵌套任何标签，单独占据一行
<body> <div>我是div标签</div> <div>我也是div标签</div> </body>
-
-
span标签
-
span标签表示的文本中的间隙，在一行显示，不独占一行。
<p> <span>我是span1</span> <span>我是span2</span> <span>我是span3</span> </p>
-
6.6 图片标签和路径
-
图片标签：img标签，是一个单标签。可以在网页上显示图片
-
语法
<!-- 图片标签语法：<img src="图片所在的路径" /> --> <img src="2.jpg" />
-
属性：
-
属性可以反映出html标签的特征。
-
属性是由键值对组成的。语法格式：==属性=属性值==，==key=value==。例如：
src="url"。多个属性使用空格隔开
-
-
img标签的常用属性
-
src属性：是
img标签必须具有的一个属性 -
alt属性：当图片加载不出来的时候显示。对图片的内容的解释
<body> <h3>alt属性只有当图片加载不出来的时候才会起作用</h3> <img src="21.jpg" alt="这是一张关于春节的图片" /> </body>
-
title属性：任何标签都具有的一个属性。鼠标移入的时候显示的提示文字
<body> <h3>alt属性只有当图片加载不出来的时候才会起作用</h3> <img src="2.jpg" title="这是一张关于春节的图片" /> </body>
-
width属性和height属性，可以用来设置图片的宽和高。为了防止图片失帧，一般情况下只设置图片的宽或者图片的高
<img src="2.jpg" width="200" />
-
border属性，可以给图片添加边框。一般不用。
<body> <h3>border属性是用来给图片添加边框的</h3> <img src="2.jpg" border="10" /> </body>
-
-
-
路径（重点）
-
相对路径：相对路径是相对与图片自身所在的位置来说的
标识符 含义 ./ 或者没有 代表的是当前路径 / 代表的是下一级路径 ../ 代表的是上一级路径 -
绝对路径：绝对路径是图片所在的你的计算机所在的盘符位置
<h3>绝对路径</h3> <img src="C:\Users\ssyld\Desktop\day01下午\\1.gif" alt=""> <img src="https://pic.rmb.bdstatic.com/bjh/down/3d4f6c458477dfd48009498437e19901.png?x-bce-process=image/watermark,bucket_baidu-rmb-video-cover-1,image_YmpoL25ld3MvNjUzZjZkMjRlMDJiNjdjZWU1NzEzODg0MDNhYTQ0YzQucG5n,type_RlpMYW5UaW5nSGVpU01HQg==,w_17,text_QOiDluWTpeS9k-iCsg==,size_17,x_13,y_13,interval_2,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1" alt="">
-
6.7 超链接标签
-
作用：超链接就是用来在页面之间进行相互跳转的
-
语法：
<a href="跳转的url">a链接</a> -
a链接打开页面的方式：设置target属性
-
_self：当前窗口打开页面，默认值
-
_blank：在另一个窗口打开页面
-
-
超链接的分类
-
外部链接
<!-- 在另一个窗口打开百度页面 --> <a href="https://www.baidu.com" target="_blank">去百度</a>
-
内部链接
<a href="详情页.html">去详情</a>
-
下载链接
<!-- <a href="要下载的文件路径">下载</a> --> <a href="1.zip">下载</a>
-
锚点链接：在同一个页面中，可以跳转到不同的位置
-
设置a标签的href属性值为“#id名”
<a href="#history">历史发展</a>
-
给要跳转到的位置的标签添加一个id属性，值为href属性#后面的值
<h4 id="history">历史发展</h4>
-
-
6.8 锚点链接案例
<body>
<h4>目录</h4>
<a href="#qiyuan">1 节日起源</a> <br />
<a href="#history">2 历史发展</a> <br />
<a href="">3 民间习俗</a> <br />
<a href="">4 文学记述</a>
<h4>春节</h4>
<p>
春节（Spring Festival），即中国农历新年，俗称“新春”“新岁”“岁旦”等，又称“过年”“过大年”，是集除旧布新、拜神祭祖、祈福辟邪、亲朋团圆、欢庆娱乐和饮食为一体的民俗大节。
</p>
<p>
春节历史悠久，由上古时代岁首祈岁祭祀演变而来。万物本乎天、人本乎祖，祈岁祭祀、敬天法祖，报本反始也。春节的起源蕴含着深邃的文化内涵，在传承发展中承载了丰厚的历史文化底蕴。在春节期间，全国各地均有举行各种庆贺新春活动，带有浓郁的各地地方特色。
</p>
<p>
在早期观象授时时代，依据斗转星移定岁时，“斗柄回寅”为岁首。“斗柄回寅”大地回春，终而复始，万象更新，新的轮回由此开启。在传统的农耕社会，立春岁首具有重要的意义，衍生了大量与之相关的岁首节俗文化。在历史发展中虽然使用历法不同而岁首节庆日期不同，但是其节庆框架以及许多民俗沿承了下来。在现代，人们把春节定于农历正月初一，但一般至少要到正月十五新年才算结束。
</p>
<p>
百节年为首，春节是中华民族最隆重的传统佳节。受到中华文化的影响，世界上一些国家和地区也有庆贺新春的习俗。据不完全统计，已有近20个国家和地区把中国春节定为整体或者所辖部分城市的法定节假日。春节与清明节、端午节、中秋节并称为中国四大传统节日。
</p>
<p>
春节民俗经国务院批准列入第一批国家级非物质文化遗产名录。
</p>
<h4 id="qiyuan">节日起源</h4>
<p>
古老传统节日的起源与上古原始信仰、祭祀文化以及星象、历法等人文与自然文化内容有关。据现代人类学、考古学的研究成果，人类最原始的两种信仰：一是天地信仰，二是祖先信仰。古老传统节日多数形成于古人择日祭祀，以谢天地神灵、祖先恩德，以及祈福辟邪的活动。早期的节日文化，反映的是古人自然崇拜、天人合一、慎终追远、固本思源的人文精神；一系列的祭祀活动，则蕴含着祗敬感德、礼乐文明深邃文化内涵。岁节（年节）的起源与发展涵盖了人文哲学与自然规律等方面内容。
</p>
<p>
在早期观象授时时代，“斗柄回寅”为春正（岁首），立春乃万物起始、一切更生之义也，意味着新的一岁已开启。“岁”的概念，来自上古历法，“岁”即“摄提”（原始干支），又名为“岁星”、“太岁”。在传承发展中后世将这套多音节的摄提纪元（岁）术语简化为一个字，其与简化后的干支在《尔雅》与《史记》均有对照关系的记载。如：太岁在寅曰摄提格，在卯曰单阏，…在子曰困敦，在丑曰赤奋若（语出《尔雅·释天》）。干支（岁）纪元以北斗星的斗柄指向正东偏北方位的“建寅”之月为起始，然后顺时针方向旋转，循环往复。在传统文化中，干支与方位以及八卦等是联系在一起的，寅位是后天八卦的艮位，是岁终岁首交结的方位，代表终而又始，如《易·说卦传》曰：“艮，东北之卦也，万物之所成终而所成始也。”十二月运行，周而复始，岁末十二月指丑方，正月又复还寅位。斗柄回寅，春回大地，终而复始，万象更新，新岁由此开始。
</p>
<p>
在传统的农耕社会，立春岁首具有重要的意义，衍生了大量与之相关的岁首节俗文化。虽然此后由于在历史发展中阴阳合历历法制度的推广，节令与节日发生了分离，但许多节令民俗仍旧保留了下来。春节是由岁首祈岁祭祀演变而来，上古时代人们在春回大地、终而复始、万象更新的岁首，举行祭祀活动报祭天地众神、祖先的恩德，驱邪攘灾、祈岁纳福。古代的祭仪情形虽渺茫难晓，但还是可以从后世的节仪中寻找到一些古俗遗迹。如岭南部分地区沿承有在新年初一拜岁以及新年期间隆重盛大的拜神祭祖、驱邪纳福节仪活动，由此可见上古时代岁首祭祀的蛛丝马迹。春节的起源和发展是一个逐渐形成，潜移默化地完善与普及的过程。春节文化作为中华传统文化的重要组成部分，承载着博大精深的中华文化底蕴，也记录着古代人们丰富多彩的社会生活文化内容。
</p>
<h4 id="history">历史发展</h4>
<p>
中国的星象文化源远流长、博大精深，古人很早开始就探索宇宙的奥秘，并由此演绎出了一套完整深奥的观星文化。北斗七星循环旋转，这斗转星移与时节变化有着密切的关系。北斗七星是北半球（中国位于北半球）的重要星象，斗转星移时北半球黄赤交角其附近相应地域的自然节律亦在渐变，因此成为了人们判断时节变化的依据。“斗柄回寅”大地回春，万象更新，新岁开启。在历史发展演变中，由于朝代更迭、历法变动，岁首（新年）在日期上亦不同。
</p>
<p>
上古时代：岁纪摄提，即干支纪元法。北斗七星的斗柄从正东偏北（后天八卦艮位）为起点，顺时针旋转一圈谓之一岁（摄提）。斗指寅为春正（正月），“建正”之月为寅月，立春为岁首。（星辰历）
</p>
<p>
夏商周：夏历正月在孟春，商历正月在冬十二月，周历正月在冬十一月。（阴历）秦始皇统一六国后，使用秦历（颛顼历），正月在冬十月。（阴历）
</p>
<p>
汉朝初期沿用秦历（颛顼历）。到了汉武帝太初元年，即公元前104年，天文学家唐都、落下闳、邓平等人制订了《太初历》（又称“八十一分律历”），并吸收了干支历的节气成分作为指导农事的历法补充，将冬季十月一日为岁首改为以春季一月一日为岁首。
</p>
<p>
汉朝以后，曾有几名皇帝进行过改历改岁首。王莽篡汉后，规定十二月朔日为岁首，是为殷正。魏明帝曹叡也一度改为殷正。武则天称帝后，改国号为“周”，采用周正。此后历代又改用夏正，以一月朔日为岁首。（注：武则天登基时间为690年九月初九，当年，竟然出现了两次“正月初一”：690年的2月15日、690年的12月6日。）
</p>
<p>
经历代发展，后人在早期历法基础上逐渐完善为当今使用的夏历。此后中国一直沿用夏历直至今。1970年以后“夏历”改称为“农历”（阴阳合历）。
</p>
<p>
辛亥革命以后，逐渐改用公历纪年（属阳历的一种，又称格里高利历）。后来为区别夏历和公历两个新年，鉴于夏历一月一日恰在干支历法中表示季节变迁的廿四个特定节令之一的“立春”节气前后，因此便把夏历（农历）一月一日改称为“春节”，公历一月一日改称为“元旦”。
</p>
<p>
1913年7月（民国二年），袁世凯批准以正月初一为春节，同意春节例行放假，1914年起开始实行。自此，夏历岁首就由以往的“过年”改成了“春节”
</p>
<p>
现在农历的“正月一日”，历史上称为元朔、元日、新元、元旦、正日、元辰、新正等。现在过的农历正月初一“春节”这一节日名称，古代是没有的（古时一般称为过年、年节），是民国政府创造的。“春节”这一概念是在民国时期逐渐被提起。民国时期，公历被引进，而农历成为了进行农事的标准。1914年民国政府在内务部呈文中提到“拟请定阴历元旦为春节”。故，春节这一说法才逐渐流传开来。
</p>
<p>
辛亥革命后，1912年中华民国北洋政府时期采用公历，但用“民国”纪年，1月1日为公历岁首；1914年起把夏历正月初一（即农历正月初一）作“春节”，视为农历年的开始，即为岁首。 [17]
</p>
<p>
1949年9月27日，中国人民政治协商会议第一届全体会议决定采用“公元纪年法”，将公历1月1日称为“元旦”，夏历正月初一仍称“春节”。 [18]
</p>
<p>
在英语国家，一直被称作“Chinese new year”，有时简称CNY，或者Spring Festival。 [73]
</p>
<h4>民间习俗</h4>
<p>
传统节日仪式与习俗活动，是节日元素的重要内容，承载着丰富多彩的节日文化底蕴。岁节`（年节）是中国一个古老的节日，也是全年最重要的一个节日，在历史发展中，杂糅了多地多种民俗为一体，形成了一些较为固定的风俗习惯，有许多还相传至今。这些活动，可大体归纳为如下几个方面：奉祀神灵，以应天时；崇宗敬祖，维护亲情；驱邪祛恶，以求平安；休闲娱乐，放松心情。百节年为首，春节是中华民族最隆重的传统佳节，它不仅集中体现了中华民族的思想信仰、理想愿望、生活娱乐和文化心理，而且还是祈福攘灾、饮食和娱乐活动的狂欢式展示。
</p>
<p>
在春节期间，全国各地均有举行各种贺岁活动，各地因地域文化不同而又存在着习俗内容或细节上的差异，带有浓郁的各地域特色。春节期间的庆祝活动极为丰富多样，有舞狮、飘色、舞龙、游神、庙会、逛花街、赏花灯、游锣鼓、游标旗、烧烟花、祈福、掼春，也有踩高跷、跑旱船、扭秧歌等等。春节期间贴年红、守岁、吃团年饭、拜年等各地皆有之，但因风土人情的不同，细微处又各有其特色。春节民俗形式多样、内容丰富，是中华民族的生活文化精粹的集中展示。
</p>
<p>
春节是除旧布新的日子，春节虽定在农历正月初一，但春节的活动却并不止于正月初一这天。从年尾小年起，人们便开始“忙年”：祭灶、扫尘、购置年货、贴年红、洗头沐浴、张灯结彩等等，所有这些活动，有一个共同的主题，即“辞旧迎新”。春节是个欢乐祥和、合家团圆的节日，也是人们抒发对幸福和自由向往的狂欢节和永远的精神支柱。春节也是敦亲祀祖、祭祝祈年的日子。祭祀是一种信仰活动，是人类在远古生存活动而创造出来的期望与天地自然和谐共生的信仰活动。
</p>
</body>
6.9 HTML中的注释和特殊字符
-
注释的作用：
-
注释是对代码的解释说明，不会在页面中显示。是给开发人员看的
-
被注释掉的代码在页面中是不会显示出来的，并且也不会被执行。
-
注释中的代码是不会被执行的
-
-
在开发的过程中，一定要养成对自己的代码写注释的习惯。
-
HTML注释的语法：
<!--注释：起到对代码进行解释说明的作用，注释中的代码是不会被执行的-->
<body> <!-- 这是注释的语法格式 --> <!-- 注释的快捷键是：Ctrl + / --> <!-- 注意：减号必须是最少左边两个，右边两个 --> <!-- <a href="https://www.baidu.com" target="_blank">跳转</a> --> </body>
-
HTML中的特殊字符
特殊字符 含义 代表一个空格 < 代表小于号 > 代表大于号 © ©版权符号 ® ® 商标注册符 × × 乘号 ÷ ÷ 除号 ™ ™ 商标 记住：空格的表示方式、大于号和小于号的表示方式
3702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
