前端基础-html-01

文章目录

1.1. 认识网页
1.2. 浏览器
1.3. Web标准三层组成
1.4. HTML语言
1.5. html骨架标签
1.6. html元素标签分类
1.7. html标签关系
1.8. vscode使用教程
1.9. 页面语言lang
1.10. 字符集
1.11. HTML标签的语义化
1.12. 常用标签
- 1.12.1. 排版标签
- 1.12.2. 图像标签img
- 1.12.3. 链接标签
- 1.12.4. 注释标签
1.13. 锚点定位
1.14. base 标签
1.15. 文本格式化标签
1.16. 特殊字符
1.17. 综合代码示例

1.1. 认识网页

网页：由文字、图像和超链接等元素组成，后面任务就是用代码把这些元素显示出来

1.2. 浏览器

定义：浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera

浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

拓展阅读：

移动端的浏览器内核主要说的是内置浏览器的内核，对于Android而言，使用频率最高的是Webkit内核，大部分国产浏览器宣称自己的浏览器，其实也是基于webkit二次开发

1.3. Web标准三层组成

结构：用于对网页元素进行整理和分类（HTML）
表现：用于设置网页元素的版式、颜色、大小等外观样式（CSS）
行为：用于网页模型的定义及交互的编写（Javascript）

1.4. HTML语言

html：超文本标记语言，是用来描述网页的一种语言，是一种标记语言，标记语言是一套标记标签

1.5. html骨架标签

语法骨架格式：

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

HTML骨架标签总结

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

1.6. html元素标签分类

常规元素（双标签）
```
<标签名> 内容 </标签名>
```
- <标签名>代表开始标签，表示该标签作用的开始
- </标签名>代表结束标签，表示该标签作用的结束
- 和开始标签相比，结束标签多了一个/,称为关闭符
空元素（单标签）
```
<标签名 />
```
- 空元素用单标签来表示，里面不需要包含任何内容，不需要关闭

1.7. html标签关系

嵌套关系
```
<html><head> </head>
</html>
```
并列关系
```
<head> </head>
<body> </body>
```

1.8. vscode使用教程

命令面板：命令面板是vscode快捷键的主要交互界面，可以使用f1或者Cmd+Shift+P(win Ctrl+Shift+P)打开。命名面板中可以执行各种命令，包括编辑器自带的功能和插件提供的功能。
ctrl+p快速打开文件

1.9. 页面语言lang

<!-- 指定HTML语言种类 -->
<html lang = "en">

en：定义语言为英语
zh-CN：定义语言为中文

1.10. 字符集

<meta charset="UTF-8" />

GBK：简体中文
BIG5：繁体中文
UTF-8：通用语言（一般情况下写这种）

1.11. HTML标签的语义化

语义化
1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化

1.12. 常用标签

1.12.1. 排版标签

标题标签h

语义：作为标题使用，并且依据重要性递减

格式：

<h1>  标题文本  </h1>
<h2>  标题文本  </h2>
<h3>  标题文本  </h3>
<h4>  标题文本  </h4>
<h5>  标题文本  </h5>
<h6>  标题文本  </h6>

代码示例：

  <html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body><h1>传智播客学前端, </h1><h2>前端入门亦简单, </h2><h3>简单知识简单看, </h3><h4>重点勤练写三遍, </h4><h5>标题一共六级选, </h5><h6>具体效果刷新见. </h6></body>
</html>

段落标签p

语义：可以把HTML文档分割为若干段落

格式：

<p> 文本内容 </p>

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body><h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>2020年07月27日10：58：26来源：新华网<hr/><p>新华网上海7月26日电（记者李荣）26日13时36分至47分这一时间段，上海徐家                     汇气象双测站测得当日最高温达40.6摄氏度。</p></body>
</html>

水平线标签hr

语义：显示一条直接，用于分隔文本

格式：
```
<hr />
```

换行标签br
语义：强制换行

格式：

<br />

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body>三生三世十里桃花，<br/>一心一意百行代码。<br/></body>
</html>

div和span标签

语义：没有语义，用来布局

格式：

<!-- div会自动换行 -->
<div>  </div><!-- span不会自动换行 -->
<span> </span>

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body><div> 迪丽热巴 </div><div> 古力娜扎 </div><span>好好</span><span>很过分</span></body>
</html>

文本格式化标签

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body>走过路过不要错过，买不买没关系，到屋里瞧一瞧到屋里看一看，本店<b>所有商品都两块</b>,<strong>全场都两块，挑啥都两块</strong>，买啥都<i>两块</i>，挑啥拿啥买啥都<em>两块</em>，原价<s>十块八块</s>的都两块，两块钱你<del>买不了吃亏</del>，你买不了上当，<u>真正的清仓</u>,<ins>真正的甩货</ins>，不用问价也不用讲价，全场都两块，挑啥啥便宜，买啥啥贱！走过路过千万不要错过！</body>
</html>

1.12.2. 图像标签img

格式：

<img src="图像URL"/>

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body><h4>正常的图片</h4><img src = "Python阶段.jpeg" /><h4>带有alt替换的文本</h4><img src = "Python阶段.jpeg" alt="gfui"/><!-- 鼠标放在图片上不动时,会显示title里面的文字 --><h4>带有title提示文本</h4><img src = "Python阶段.jpeg" title="hgduiosb"/><!-- 改变图像的尺寸 --><h4>带有title提示文本</h4><img src = "Python阶段.jpeg" width="200"/><!-- 带有边框的图片 --><h4>带有边框的</h4><img src = "Python阶段.jpeg" border/> </body>
</html>

注意：
1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 采取键值对的格式key="value"的格式
4. ```
标签属性
<标签名 属性1="属性值1" 属性2="属性值2"> 内容 </标签名>
```

1.12.3. 链接标签

格式：

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

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和balck两种，其中self为默认值,black为在新窗口中打开方式

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body><h4>外部链接：</h4><a href = "http://www.baidu.com" target="_blank"> 百度一下 </a><a href = "http://www.souhu.com"> 搜狐一下 </a><h4>内部链接：</h4><a href="06-标题标签.html">ghf</a><h4>空链接:</h4><a href="#"> 空链接 </a><H4>图像链接:</H4><a href="http://www.baidu.com" target="_blank"> <img src="Python阶段.jpeg" width="100"/></a></body>
</html>

注意：

外部链接需要添加 http://
内部链接直接链接内部页面名称即可，比如首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#“（即href=”#"),表示该链接暂时为一个空链接
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

1.12.4. 注释标签

格式：

<!-- 注释内容 -->

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>注释标签</title></head><body><!--这是一个h1标签 --><h1>刘德华专访</h1></body>
</html>

1.13. 锚点定位

用法：通过创建锚点链接，用户能够快速定位到目标内容

步骤：

1. 使用相应的id名标注跳转目标的位置（找目标）
<h3 id = "people">2.圣诞老人由来</h3>2. 使用<a href="#id名"> 链接文本 </a>
<a href="#people"> 2.圣诞老人由来 <br/> </a>

1.14. base 标签

格式：

 <!-- <base target = "打开方式"> --><base target="_blank">

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>Document</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>

1.15. 文本格式化标签

<pre>清蒸班主任 油炸小助教爆火炒导师班长要红烧
</pre>

代码示例：

<html lang = "en"><head><meta charset="UTF-8"><title>Document</title></head><body>   <pre>清蒸班主任 油炸小助教爆火炒导师班长要红烧  </pre></body>
</html>

1.16. 特殊字符

1.17. 综合代码示例

<html lang = "zh-CN"><head><meta charset="UTF-8"><title>圣诞的由来</title></head><body><h1>圣诞</h1>1.圣诞由来 </br /><a href="#people"> 2.圣诞老人由来 </br /> </a><a href="#tree"> 3.圣诞树由来  </br /> </a><hr><h3 >1.圣诞由来 </h3><p>通常父母们会对他们的子女解释他们在圣诞节收到的礼物是圣诞老人送的。圣诞老人以一位神秘人物带给小孩子们礼物的概念衍生自圣尼古拉。尼古拉是一位生活在4世纪小亚细亚的热爱施舍的慈悲主教，荷兰人在圣尼古拉斯节（12月6日）便会模仿他送礼物。</p><p>每年圣诞节，圣诞老人骑在驯鹿上，圣童手持圣诞树降临人间，随着世事变迁，作家和艺术家开始把圣诞老人描述成我们今日熟悉的着红装，留白胡子的形象。同时不同的国度和文化对圣诞老人也有了不同的解释。</p><h3 id = "people">2.圣诞老人由来</h3><p>在许多国家里，圣诞节前夕，孩子们会准备好空的容器，<a href="yesu.html" target="_blank">耶稣</a>以便圣诞老人可以装进一些小礼物，如玩具、糖果或水果。在美国，孩子们圣诞夜会在壁炉上悬挂圣诞袜，因为圣诞老人说过要在圣诞前夜从烟囱下来把礼物放到袜子里。</p><img src="cc.jfif" width="400"/><p>他们会在壁炉附近的桌子上放上几块姜坚果饼干（gingernut cookies），据说圣诞老人在送来礼物的同时也会吃掉这些饼干。在其他国家，孩子们把空鞋放到户外，以便圣诞老人可以在圣诞夜（或圣尼古拉斯节前夕的12月5日）送礼物。在德国，传说他扮成圣童把坚果和苹果放在孩子们鞋里。他乘双轮马车四处漫游，观察人们的行为，尤其是小孩，如果表现好，将会得到苹果、坚果、糖等诸多奖品。</p><h3 id = "tree">3.圣诞树由来</h3><p>坏孩子则挨一鞭子。家长们灵机一动纷纷采用此传说来鼓励孩子们听话。圣诞老人（狂欢节游行）圣诞老人（狂欢节游行）(4张)在法国与圣诞老人类似的形象是Père Noel，他和圣诞老人几乎完全一样，其红白相间的衣服曾经使可口可乐公司获得灵感，在1930年代画出了传遍世界的圣诞老人主要形象。</p><p>在一些文化中，圣诞老人身旁跟随着可内希特·鲁普雷希特，或是称作黑彼得（荷文：Zwarte Piet）的家伙。一些版本中，还存在着圣诞奶奶，玩具作坊里的侏儒制作了节日礼物，有时圣诞老人与圣诞奶奶是夫妻。圣诞季期间，在北美和英国的很多超市里，都有小孩可以向其要礼物的圣诞老人出现。   </p>更多内容可以百度<a href="http://www.baidu.com" target="_blank" > baidu </a></body>
</html>

前端基础-html-01相关推荐

前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天今天我们围绕一个导航栏案例进行 ...
视觉slam学习|基础篇01
系列文章目录 SLAM基础篇01 SLAM基础篇02 目录系列文章目录前言 SLAM是干什么的? SLAM的数学建模机器人学基础齐次矩阵关于旋转的表示:旋转向量.欧拉角.四元数李群和李代数 ...
前端基础-HTML基础篇（一）
前端基础-HTML篇 HTML是什么?什么是HTML? 中文名: 超文本标记语言英文名: Hyper Text Markup Language 简称: HTML HTML 不是一门编程语言,而是一种 ...
python前端基础知识总结及部分练习题
python前端基础知识总结知识总结认识Python 发展历史版本选择 python2.7是python2的最后一个版本,到2020年将不再维护 python3.6是python3最新的版本,是 ...
JavaScript基础第01天笔记
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
JavaScript基础第01天—编程语言—计算机基础—初始JavaScript—JavaScript注释—JavaScript输入输出语句—变量的使用—数据类型—关键字和保留字
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
html表格联动,html前端基础：table和select操作
html前端基础:table和select操作发布时间:2020-05-13 09:58:10 来源:亿速云阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...

前端基础-html-01

文章目录

1.1. 认识网页

1.2. 浏览器

1.3. Web标准三层组成

1.4. HTML语言

1.5. html骨架标签

1.6. html元素标签分类

1.7. html标签关系

1.8. vscode使用教程

1.9. 页面语言lang

1.10. 字符集

1.11. HTML标签的语义化

1.12. 常用标签

1.12.1. 排版标签

1.12.2. 图像标签img

1.12.3. 链接标签

1.12.4. 注释标签

1.13. 锚点定位

1.14. base 标签

1.15. 文本格式化标签

1.16. 特殊字符

1.17. 综合代码示例

前端基础-html-01相关推荐

最新文章

热门文章