黑马前端笔记1--HTML（1）_黑马前端笔记下载-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51584115/article/details/122436479

【参考课程】黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程：b站课程链接

课程资料：素材和源码：下载链接
【PPT】链接：https://pan.baidu.com/s/1jm1LUuk5NIM-PPhmAbjEkg 提取码：sp39

01 网页的相关概念

「网站」网页的集合
「网页」网页是网站的基本元素，主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。通常是HTML 格式的文件，常以.htm或.html后缀结尾，因此俗称为HTML文件
「HTML」(Hyper Text Markup Language):超文本标记语言
1. HTML不是编程语言，是一种标记语言（Markup Language）
2. 标记语言是一套标记标签（markup tag）
3. 超文本有2层含义:
  因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
  不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
网页的形成：网页是由网页元素组成，这些元素是有HTML标签描述出来，通过浏览器解析给用户的
前端代码 ———> 浏览器渲染 ———> 生成web 界面

02 常用浏览器及其内核

「浏览器」是网页显示、运行的平台。
「浏览器内核」(排版引擎、解释引擎、渲染引擎)
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	webkit	苹果浏览器内核
chrome/Opera	Blink	chrome/Opera浏览器内核,是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核，二次开发

03 Web标准

「Web标准」由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织

为什么需要web标准：
浏览器不同，显示的页面和排版有所差异
web标准的优点：
「构成」👉 结构（structure），行为（presentation）和表现（behavior）

标准	说明
结构	网页元素整理分类，HTML
表现	版式，颜色大小等外观样式，CSS
行为	网页模型的定义和网页交互的编写， JavaScript

04 HTML语法规范

HTML 标签是由尖括号包围的关键词，例如 <html>
HTML 标签通常是成对出现的，例如 <html> </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签，结束标签有一个 / 。
有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。

HTML标签关系

嵌套关系（父子）：包含关系

<head>
        <title>网页的标题</title>
</head>

并列关系（兄弟）：

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

格式规范：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

05 基本结构标签⭐

标签名	定义	说明
`<html></html>`	HTML标签	页面中的最大的标签，我们称为根标签
`<head><head>`	文档的头部	注意在head标签中我们必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

基本标签结构

06 vscode工具创建页面

前端推荐插件:open in browser、auto remane tag
vscode安装open in browser 插件，保存后右键 open in default browser ，可将html 文件用浏览器打开，或使用快捷键 Alt+B

08 DOCTYPE和lang以及字符集的作用

文档类型声明标签`<!DOCTYPE >`

👉告诉浏览器使用哪种HTML版本来显示网页，
<!DOCTYPE html>这句代码告诉浏览器，当前页面采取的是HTML5标准显示网页。

⭐⭐ DOCTYPE声明必须写在文档中最前面的位置，处于html标签之前
<!DOCTYPE >不是一个HTML标签，它是一个文档声明类标签

页面语言lang

lang指定该html标签内容所用的语言

<html lang="en"> en 定义语言为英语，zh-CN定义语言为中文

lang的作用：

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

字符集Character set

「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符

  <meta charset="UTF-8" />

「meta viewport的用法」
通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口

meta有两个属性：name 和 http-equiv👇

name属性的取值：

keywords(关键字) 告诉搜索引擎，该网页的关键字 description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
viewport(移动端的窗口)
robots(定义搜索引擎爬虫的索引方式)
robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
author(作者)
generator(网页制作软件）
copyright(版权)
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容

http-equiv有以下参数：

content-Type 设定网页字符集(Html4用法，不推荐)
Expires(期限),可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
Refresh(刷新),自动刷新并指向新页面。
cache-control（请求和响应遵循的缓存机制）

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容

以上三个标签，在vscode中输入 ! 可自动生成

09 标签语义

10 标题标签⭐

<body>
    <h1> 一级标题</h1>
    <h2> 二级标题</h2>
    <h3> 三级标题</h3>
    <h4> 四级标题</h4>
    <h5> 五级标题</h5>
    <h6> 六级标题</h6>
</body>

标题只有h1-h6六级
加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行

<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选，</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由小到大依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
                    ----pink老师
</body>

效果：
在这里插入图片描述

11 段落标签和换行标签⭐

段落标签

<p>段落标签</p>

把文字分成若干段落
文本在一个段落这种会根据浏览器窗口的大小进行自动换行
段落和段落之间保有空隙

换行标签

<br />换行标签

<br /> 是个单标签(也可以这么写<br>)
<br /> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

12 课堂案例：体育新闻

课堂案例：

<!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>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h4>数据统计：水花兄弟合砍61分</h4>
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
    <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
    <h4>兄弟对决升级：小库里给哥哥造成压力</h4>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
    <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
    <p>作者: pink老师 <br />
        2019-8-8</p>
    
</body>
</html>

呈现效果：
在这里插入图片描述

13 文本格式化标签⭐

为文字设置粗体、斜体、下划线等效果

语义	标签	说明
加粗	`<strong></strong>`或者`<b></b>`	更推荐`<strong>`,语义更强烈
倾斜	`<em></em>`或者`<i></i>`	更推荐`<em>`,语义更强烈
删除线	`<del></del>`或者`<s></s>`	更推荐`<del>`,语义更强烈
下划线	`<ins></ins>`或者`<u></u>`	更推荐`<ins>`,语义更强烈

  <p>我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字</p>
    <p>我是<em>倾斜</em> 的文字
    我是<i>倾斜</i> 的文字</p>
    <p>我是<del>删除线</del>
    我是<s>删除线</s></p>
    <p>我是<ins>下划线</ins>
    我是<u>下划线</u></p>

在这里插入图片描述

14 块标签⭐

<div></div> :一行只能放一个"大盒子"，独占一行，division(分割、分区)的缩写
<span></span> : 一行可以放多个"小盒子"　span意为跨度、跨距

<div>这是头部</div>
<span>今日价格</span>

15 图像标签⭐

<img> 是一个单标签
图片需要和网页文件放在同一路径下

<img src="pink1.jpg" alt=""  title="我是林晓" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件

属性	说明
src	必须属性
alt	替换文本（当图片不能显示时候显示的文字）
height	图片高度
width	图片宽度
title	提示文本（鼠标放到图像上，显示的文字）
border	边框宽度

<body>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg">
    <h4>alt替换文本，图像显示不出时用文字替换：</h4>
    <img src="img1.jpg" alt="我是pink老师">
    <h4>title提示文本，鼠标放到图像上，提示的文字：</h4>
    <img src="img.jpg" title="我是pink老师思密达">
 
</body>

在这里插入图片描述

<h4>width给图像设定宽度</h4>
<img src="img.jpg" width="250">
<h4>width给图像设定高度</h4>
<img src="img.jpg" width="250" height="180">

修改宽或高中的一个,可以自动完成等比例缩放
在这里插入图片描述

    <h4>border设定边框宽度</h4>
    <img src="img.jpg" width="450" border="15">

在这里插入图片描述
注意:

图像标签可以有多个属性,必须写在标签名img后面
属性之间不分先后
⭐属性采取键值对的格式,即 key=value,属性=属性值

16 路径

目录文件夹和根目录
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
「目录文件夹」：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。
「根目录」：打开目录文件夹的第一层就是根目录
相对路径和绝对路径
①「相对路径」
以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于 HTML 页面的位置

相对路径分类	符号	说明
同一级路径		图形文件位于 HTML 文件同一级如`<img src="1.png">`
下一级路径	/	图形文件位于 HTML 文件下一级如 `<img src="images/1.png">`
上一级路径	. ./	图形文件位于 HTML 文件上一级如 `<img src="../1.png">`

          ②「绝对路径」
          绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
          例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

注意：绝对路径与相对路径斜杠方向不同！

17 超链接标签

 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

a表示anchor(锚)
「href」 必须属性,用于指定链接目标的url地址

外部链接:以http://开头的网址

<a href="http://www.qq.com" target="_blank">腾讯</a>

内部链接: 网站内部页面之间的相互链接(链接到的网页和现在的网页位于同一级目录下),直接链接内部页面名称即可,不需要加http://

<a href="06-体育新闻.html">体育新闻</a>

空链接:#

<a href="#">公司地址</a>

下载链接: 地址链接的是文件 .exe 或者是 zip 等压缩包形式

<a href="img.zip">下载文件</a>

网页元素的链接:

<a href="http://www.baidu.com" target="_blank"><img src="img.jpg" alt=""></a>

锚点链接: 跳到本页中的某处的链接

将链接文本的herf属性设置为#名字的形式,如:<a herf="#two"></a>,在目标标签里添加一个id属性=刚才的名字:<h3 id="two"></h3>

「target」:用于指定连接页面的打开方式。_self为默认值，_blank为在新窗口中打开

tips: 返回页面顶部可以添加空链接:

<a href="#">返回顶部</a>

来实现

18 注释标签和特殊字符

注释标签:

便于阅读和理解代码又不必在页面中显示的代码注释文字
注释快捷键为 ctrl + /
注释以  结束

<!--  这是一个注释语句	-->

特殊字符

在这里插入图片描述
注意一定要加 ; ❗
小于: < less than
大于: &gt greater than

HTML特殊字符大全

19 综合案例

<!DOCTYPE html>
<html lang="ch-ZN">
<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>
     <h1>圣诞节的那些事</h1>
  
     1. <a href="#origin">圣诞是怎样由来的</a><br>
     2. <a href="#oldman">圣诞老人的由来</a><br>
     3. <a href="tree">圣诞树的由来</a><br>

     <h2 id="origin">圣诞是怎样由来的</h2>

     <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的
         双重节日，即上帝通过耶稣向世人显示自己。这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后
         来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体
         情况在这段节期之内庆祝圣诞节。在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的
         节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p> 
     <img src="images/t1.gif" alt="">


     <h2 id="oldman">圣诞老人的由来</h2>

     <p>圣诞节当然少不了<a href="oldman.html">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
        
     <img src="images/t2.jpg" alt="">

     <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖
         的不幸。</p>   
     <p> 到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中
         一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
    <p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?</p>
    <a href="#">返回顶部</a>


    <h2 id="tree">圣诞树的由来</h2>

     <p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
     <p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的
        枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>        
     <p> 另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一
         棵树，上面都挂满礼物，以答谢农民的好意。</p>
     <p> 圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、
         也有人造圣诞树及白色圣诞树。每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家
         庭的一家之主可以把这棵希望之星挂上。</p>
     <img src="images/t3.jpg" alt="">
     <a href="#">返回顶部</a>
     <p>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a></p>
     


</p>

</body>
</html>