Python Web全栈之旅01--Web前端●走入HTML的世界（上）
一、HTML初认识
HTML（超文本标记语言HyperText Markup Language）是构成 Web 世界的一砖一瓦。
HTML为什么叫超文本？ (单选)
A.因为它是TXT的爸爸
B.因为HTML有超链接
初学者，你可能听说过HTML和HTML5，举个栗子，就像iPhone和iPhone11一样。
●作为HTML的升级版，如何区分是否是HTML5呢？
在文档类型声明上，HTML5做了简化。
<!doctype html>
例如：百度首页
> 在谷歌浏览器中，我们通过快捷键F12或者右键审查元素可以观察HTML的文档类型。
二、HTML学习第一步
1、常说的术语
● web
互联网
● W3C
万维网联盟（World Wide Web Consortium）
为互联网提供各种标准，比如HTML语言标准。
注意：部分不遵守W3C标准的html在浏览器也能正常显示，原因部分浏览器自身做了兼容处理，作为开发者，我们应当遵守W3C语言标准。
2、权威性网站
● https://www.w3.org
● https://developer.mozilla.org/zh-CN/
3、开发准备
> 工欲善其事，必先利其器
● 开发工具
> web前端可使用的工具：记事本、notepad++、Sublime Text、HBuilder、Vscode 、Dreamweaver等等；
> 如果你很早关注Python大星，可能知道Python大星使用的是IntelliJ IDEA 2018，作为全栈开发工具。初学的话上述工具都可以满足需求。
> 注意：后期你可以安装Emmet插件：自动生成html代码片段，提高开发效率。
● 浏览器
> 推荐安装谷歌的Chrome，其他可选择IE、Opera、Firefox、Safari浏览器
三、我的第一个HTML
1、术语
● 注释
> 使用方法：<!--注释内容-->
> 注意 :注释的内容不会显示在页面上，开发者要养成写注释的良好习惯，因为有可能将来某天你自己写的代码你自己都不认识。
● 元素
> 官方：HTML 由一系列的元素（elements）组成。部分非官方资料把元素理解为标签，翻译其实不恰当。
> 公式：元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性；
【1】属性 = 属性名 + 属性值
> 属性分类：
①局部属性：某些元素特有，如a元素的href；
②全局属性：所有元素通用，如title
【2】空元素
> 部分元素没有结束标记，我们称为空元素。
> 空元素有2种写法：
<img src = "https://s3.pstatp.com/site/tt_mfsroot/pc_img/bg_profile.png">
<img src = "https://s3.pstatp.com/site/tt_mfsroot/pc_img/bg_profile.png" />
注意：第2种带/的写法是老写法，现在可以直接使用第一种写法。
> 举个栗子：<a href = "https://mp.toutiao.com/">头条主页</a>
起始标记：<>
结束标记: </>
元素内容: a
元素属性：如 href = "https://mp.toutiao.com/"
> 注意：元素中的符号一般都是英文符号。
● 元素嵌套
> 遵守的原则：不能相互嵌套。
> 错误示范：
2、默认的HTML文件中的html、head、body元素
> 一般我们的写的html代码在body元素里编辑。
四、HTML的语义化
1、什么是语义化？
> 在程序中, 语义 指的是一段代码的含义 例如 "运行这行代码会产生怎样的影响?", 或者 "这个HTML的元素有什么作用，扮演了什么样的角色" (不只是 "它看上去像是什么?"。)
语义化也是HTML5与传统的HTML的一个大的区别。
● 每个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题
● 所有元素与展示效果无关
举个栗子：h1 元素是一个语义化元素, 充当了这个页面中最高级别标题功能的角色 (或含义) 。
<h1>This is a top level heading</h1>
> 一般情况下，它将会被赋予一个很大的字号尺寸从而使它看上去更像是一个标题 (虽然你可以把它格式化为任何你想要的样式), 但是更重要的是它的语义会被在很多地方以不同的方式被使用到， 例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序 (参见SEO),而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。
另一方面，你可以通过样式（CSS）来让任何的元素看上去像是一个最高级别的标题，就像下面所展示的方法一样：
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
> 这将会把这个元素渲染得像是一个最高级别的标题，但是它的值没有对应到最最高级别标题这一语义，所以在此之上，它不会获得更多额外的描述（只是一个普通span元素而不是最高级别标题这一语义）。所以在恰当的需求下使用恰当的HTML元素是一个不错的主意。
注意：
> 选择什么元素，取决于内容的含义，而不是显示出的效果
五、文本元素
1、HTML5元素周期表
>主要学习常用核心的元素，其他的元素可以查询HTML5元素周期表。
2、常用的文本元素
● h元素
> HTML<h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
● p元素
> HTML <p>元素（或者说 HTML 段落paragraphs元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
● span元素
> HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义；仅用于设置样式。
● 通过上述示例，细心的你可能发现了一个秘密：
哪个元素显示的内容不换行？ (单选)
A.h元素
B.p元素
C.span元素
> 以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）
> 到了HTML5，已经弃用这种说法，见mdn中介绍。
● pre元素
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)。
六、HTML实体
> 实体字符通常用于在页面中显示一些特殊符号。
1、实体字符的两种使用方法
● &+单词
● &+数字
2、常用的实体字符
- 小于符号
"<"
- 大于符号
">"
- 空格符号
" "
- 版权符号
"©"
- &符号
"&"
3、更多实体字符参考
评论列表 共有 0 条评论
热门产品
触发修改文章时间【fastadmincms开发记录】
在tp5中过滤输入的零宽度字符【fastadmincms开发记录】
处理tag标签中的0宽空格【fastadmincms开发记录】
添加专题时tags标签id出错【fastadmincms开发记录】
20230518----模板 广告【fastadmincms开发记录】
cms添加视频模型【fastadmincms开发记录】
新增单篇收费复制功能【fastadmincms开发记录】
添加开会员折扣功能【fastadmincms开发记录】
历史上的今天：05月02日
猜你喜欢
热门专题
昆明综合高中
安徽开放大学
小程序开发
卓越综合高中
一年制中专
云南巨榕教育投资集团有限公司
易捷尔高职单招
发表评论 取消回复