请随意编辑 反正能退回
这想必会是一个天坑,我尽量补完它,就像真嗣一样
这是我的个人笔记,而我学习HTML的时候目的只是为了玩,最高目标也只是做一个自己的网站(我当时甚至不知道blog的存在),因此可能并不适合所有人作为入门参考
教材:MDN-学习Web开发
介绍:HTML,全称
现在你心中只需要有一个概念:网页是由若干个“元素”(element)组成。标题是一个元素,文本是一个元素,图片是一个元素……所谓的HTML代码就是一个个元素的堆叠、嵌套。
我们先从一个十分基本的例子引入学习:我要做个网页,要求不是很高,页面只要一句话“欢迎访问我的网页”。
.txt
文件)index.html
(其中.html
是文件扩展名而不是文件名。windows用户请选择“显示文件扩展名”,不懂的自行百度)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teaching example</title>
</head>
<body>
<p>欢迎访问我的网页</p>
</body>
</html>
保存,关闭文档。
随便找一个浏览器打开这个文件(打开的方式也请自行百度)
如果在如此敷衍的指导下你还是历经万难完成了所有的操作,那么你应该看到了以下界面(我这里选择的浏览器是Google Chrome,不过不同的浏览器也不会差太多):
然后我们可以开始学习一些HTML上的基本概念了,它们分别是:元素、元素名称、标签、开始标签、结束标签、内容、属性、属性名称、属性值
以<p>欢迎访问我的网页</p>
这一“元素”为例
这个元素的主要部分有:
<p>
),被大于号、小于号所包围。表示元素从这里开始或开始起作用。元素也可以有属性(Attribute):
属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class
是属性名称,editor-note
是属性的值。class
属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。
属性应该包括:
注:有些简单的属性值可以不使用引号,但还是建议将所有的属性值用引号括起来,这样的代码一致性更佳,更易于阅读。
然后我们来看刚才我们写的代码都是些什么意思
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teaching example</title>
</head>
<body>
<p>欢迎访问我的网页</p>
</body>
</html>
<!DOCTYPE html>
:文档类型。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,DOCTYPE
用来链接一些 HTML 编写守则,比如自动查错之类。DOCTYPE
在当今作用有限,仅用于保证文档正常读取。现在知道这些就足够了。<html></html>
:html
元素。该元素包含整个页面的内容,也称作根元素。<head></head>
:head
元素。该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。<meta charset="uft-8">
:元素指定文档使用 UTF-8 字符编码 ,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,没有理由再选用其他编码。<title></title>
:title
元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述性文字。<body></body>
:body
元素。该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。<p></p>
:p
元素。该元素表示文本的一个段落,通常表现为一整块与相邻文本分离的文本。-
(不是下划线_
)代替空格。要做一个网站并不是一个html文档就能解决的 虽然暂时我们不会用到其他的文件 ,如何管理这些文件就成了一个问题(你总不能全丢桌面吧 好像也不是不行)
以下只是我的建议
web-projects
的文件夹,它是你所有网站项目的存放地。test-site
。以下的文件或文件夹都建立在test-site
文件夹之下。
index.html
:这个文件一般会包含主页内容。images
文件夹:用于存放网站上使用的所有图片。styles
文件夹:用于存放所有 CSS 代码。scripts
文件夹:用于存放所有 JavaScript 代码。URL有相对URL与绝对URL两种
相对URL:
目标文件名.文件类型
文件夹名/文件夹名/.../文件夹名/目标文件名.文件类型
../目标文件名.文件类型
../../web-projects/test-site/styles/style.css
<head>
元素与<body>
元素不同,它的内容不会再浏览器中显示,它的作用是保存页面的一些'元数据。以下的所有标签都是<head>
元素的内容(的一部分)
<title>
标签给页面设定标题,注意与<h1>
标签的区别。<h1>
元素是页面(或 HTML 文档)中内容的一个标题<title>
元素是一项元数据,用于表示整个页面(或 HTML 文档)的标题,而不是页面(或 HTML 文档)内容元素名称:title
是否为空元素:否
属性:全局属性
<title>my first web</title>
<meta>
标签添加其他元数据。元素名称:meta
属性:
charset
:用于指定文档的字符编码。属性值用utf-8
就行了name
:与content
搭配使用,用于说明该元素包含了什么类型的信息。任意字符串。content
:用于指定该元素的元数据内容。任意字符串。注意事项:
<meta charset="utf-8"/>
<meta name="author" content="Mark Chen"/>
<meta name="my email" content="3215628793@qq.com"/>
<meta name="description" content="This is my first web"/>
严格来说这不算是元数据,因为其并不是写在<head>
元素中,但是我还是将其分到这个类别之下。
<html>
标签添加参数来设定文档的主语言如果你想把文档的主语言设定为中文,那么只需要将原来的<html>
变为<html lang="zh-CN">
元素名称:blockquote
元素名称:q
元素名称:abbr
元素名称:address
元素名称:sup
元素名称:sub
元素名称:header
元素名称:nav
元素名称:main
元素名称:aside
注:经常嵌套在<main>
中
元素名称:footer
元素名称:span
元素名称:div
注:它们非常便利,因此经常被滥用。但由于它们没有语义值,会使HTML代码变得混乱。只有在没有更好的语义方案时才选择它,而且要尽可能少用。否则文档的升级和维护工作会非常困难。
元素名称:hr