静态网页开课第二讲

最新推荐文章于 2024-10-16 23:00:23 发布

_layfolk_

最新推荐文章于 2024-10-16 23:00:23 发布

阅读量363

点赞数

分类专栏： web前端文章标签： html5 css3 css html

本文链接：https://blog.csdn.net/NightHuskie/article/details/107281842

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

意见反馈

语速快一点点
- 这个问题我正在改正，毕竟不改的话课程讲不完
希望前一天晚上发演示代码，大致了解后有助于第二天更加深入
- 我已经采纳了这个意见，所以昨天我就把代码提前发到群里了
希望留一些小练习
- 这个建议也非常好，我今天为大家设计了一些小练习，这些练习恰好是之后大作业的一部分
希望提供Mozilla developer network(mdn)的链接
- 我先给一些同学科普一下什么叫Mozilla developer network。
- 网址：https://developer.mozilla.org/zh-CN/这是一个学习web的网站，
- 里面提供了有关web的学习资料，类似的网站还有w3cshool，
- 网址：https://www.w3school.com.cn/index.html
- 这个建议也非常好，所以我也采纳了，同时我还会在课后给大家发一些链接，供学有余力的同学来学习

今天上课的主要内容（打开Xmind演示）

在这里插入图片描述

HTML5基本文件框架

<!DOCTYPE html>
<html lang="en">    
<head>        
	<meta charset="UTF-8">        
	<title>Title</title>    
</head>    
<body>    
</body>
</html>

其中，是html5标准网页声明，原先的是一串很长的字符串，形式变简洁了。支持html5标准的主流浏览器都认识这个声明。向搜索引擎表示该HTML语言为英文，其中"lang"的意思就是“language”，而“en”即表示english。你的页面如果是中文页面，可将其改为，zh即表示中文。当然，你声明为"en"，但是添加也能够显示中文。

知识链接，什么叫UTF-8链接：
https://blog.csdn.net/zhusongziye/article/details/84261211?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase

HTML的历史（https://developer.mozilla.org/zh-CN/docs/Glossary/HTML）

IETF 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 版本。1994年，为了 Web 发展而成立了 W3C。1996 年，W3C 接管了 HTML 的标准化工作，并在1年后发布了 HTML 3.2 推荐标准。1999 年，HTML 4.0 发布，并在 2000 年成为 ISO 标准。自那以后，W3C 几乎放弃了 HTML 而转向 XHTML，并于 2004 年成立了另一个独立的小组 WHATWG。幸运的是，WHATWG 后来又转回来参与了 HTML5 标准的制定，两个组织（译注：即 W3C 和 WHATWG）在 2008 年发布了第一份草案，并在 2014 年发布了 HTML5 标准的最终版。

标题标签和段落标签

HTML 标题标题
（Heading）是通过h1~h6等标签进行定义的，是块级元素
标题很重要,请确保将 HTML heading 标签只用于标题。
不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，
所以用标题来呈现文档结构是很重要的。
字号，代码2.1.1
对齐方式，代码2.1.2

段落（paragraph）是通过p标签定义的，是块级元素

段落标签，代码2.1.3

文字标签(不赞成使用这个标签，但需要认识，所以简单介绍)

字体，代码2.2.1
实际上，改变文字字体我们常常用CSS中的 font-family，但今天课程主要是讲解HTML的标签，大家可以通过这个链接去了解CSS中有关font-famliy的知识了解：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
字号，代码2.2.2
实际上，改变文字字号我们常常用CSS中的font-size,大家可以通过这个链接去了解有关font-size的知识，大家可以通过这个链接去了解CSS中有关font-size的知识了解：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size
颜色，代码2.2.3
事实上，改变文本的颜色我们常常用CSS中的color大家可以通过这个链接去了解CSS中有关color的知识了解：https://www.w3school.com.cn/cssref/pr_text_color.asp

水平线标签

hr 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
拓展：单独标记像hr, br这样的单独标记，有两种写法。比如水平线标签又可以写成hr/，换行又可以写成br/
像 meta charset=“UTF-8” 也可以写成 meta charset = “UTF-8”，但为了代码比较规范，最好是只采用一种写法
宽度、高度、颜色、对齐，代码 2.3（不赞成使用这些属性，但还是介绍一下）
同样给出hr的拓展知识链接，以及如何正确使用CSS代码来修饰的链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/hr

特殊标签

加粗，斜体，下划线，删除线，代码2.4.1
称为行内元素

行内元素和块级元素的区别：块级元素自带换行，行内元素没有换行块级元素内部可以嵌套行内元素，行内元素不能嵌套块级元素

上标，下标，代码2.4.2换行，（无代码）不换行，代码2.4.3保留原始格式，代码2.4.4
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
```
 标签的一个常见应用就是用来表示计算机的源代码。
```

什么叫等宽字体：等宽字体（monospaced font）是指字符宽度相同的电脑字体。东亚语言中，方块字基本上都作为等宽字体处理，如各个地区的汉字、日语假名的全形字符、韩语谚文音节等字符都是等宽的。在传统西文印刷中，比例字体可以提高单词的可读性。但因早期的电脑显示器、打字机，由于技术的局限，无法进行字母宽度的比例调整，因此将每个字元都制作成一样的宽度，从而形成了等宽字体。

要想实现等宽文字效果，HTML中有 code 标签，参见：https://www.w3school.com.cn/tags/tag_code.asp

引用，代码2.4.5
blockquote 标签是引用一段长文本内容；是一个块级元素，引用的文本内容会形成一个独立的引用块；标签引用的文本内容会在左右两端缩进；blockquote标签已被所有主流的浏览器均支持。但主流浏览器均不支持其cite属性，不过，该属性可能会对搜索引擎有用，也可以便于其他应用程序获取引用文本内容的来源信息；
blockquote cite=“引用内容的来源出处”,这里是一段长文本内容的引用,

HTML中其他引用的标签：https://www.w3school.com.cn/html/html_quotation_elements.asp

列表标签

无序列表和有序列表，代码2.5.1有序列表开始序号，代码2.5.2自定义列表，代码2.5.3列表的嵌套，代码2.5.4

超链接标签

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

绝对路径与相对路径
绝对路径，从根目录为起点到你所在的目录；相对路径，从一个目录为起点到你所在的目录。
例如：文件结构如下： ABDCA是根目录，从A到D路径是 B\D，比如：D:\移动政务实验室培训\讲稿，代码\第2讲\code02
相对路径（如果你在C文件夹时），想要到达： A文件夹，路径是 …
文字超链接和超链接打开窗口的方式，代码2.6.1图片超链接，代码2.6.2书签链接，代码2.6.3