本篇博客是参考了以下教程做的笔记:开始学习 HTML:https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started
文章目录
文件处理
文件命名规范
文件夹名和文件都使用小写字母,且没有空格。因为很多计算机,特别是 Web 服务器,是对大小写敏感的。浏览器、Web 服务器,还有编程语言处理空格的方式不一致。
最好使用中划线,而不是下划线来分离单词:对比 my-file.html 和 my_file.html 。简言之,文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符, 但不会识别下划线。
文件路径
若引用的目标文件位于 HTML 文件的上级,需要加上两个点。比如,如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录,你可以在 index.html 里使用 ../my-image.png
引用 my-image.png 。
../
文件上级目录
./
文件根目录
Windows 文件系统使用反斜杠而不是正斜杠,比如 C:\Windows 。但与 HTML 没什么关系,即使在 Windows 上做 Web 开发,代码中仍应使用正斜杠/
。
HTML — 构建 Web
HTML概念
HTML (HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言。
HTML 标签不区分大小写。也就是说,输入标签时既可以使用大写字母也可以使用小写字母。例如,标签 <title> 写作<title>、<TITLE>、<Title>、<TiTlE>
,等等都可以正常工作。不过,从一致性、可读性等各方面来说,最好仅使用小写字母。
HTML元素:
块级元素和内联元素:
块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行:它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>
空元素:
不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素<img>
是用来在元素<img>
所在位置插入一张指定的图片。
<img src="images/firefox-icon.png">
属性:属性值应该加上""
HTML文档结构
引用特殊字符:
重点掌握 空格 <小于号 >大于号
HTML 头部元素
HTML <head>
元素与 <body>
元素不同,它的内容不会在浏览器中显示,它的作用是保存页面的一些元数据,大型页面的 head 会包含很多元数据。
<title>
元素用于表示整个 HTML 文档的标题(而不是文档内容)。
HTML有一个“官方的”方式来为一个文档添加元数据—— <meta>
元素,许多<meta>
元素包含了name 和 content 特性:name 指定了meta 元素的类型; 说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。
许多 <meta>
特性已经不再使用。 例如,keyword <meta> 元素(<meta name="keywords" content="fill, in, your, keywords, here">)
— 提供关键词给搜索引擎,根据不同的搜索词,查找到相关的网站 — 已经被搜索引擎忽略了, 因为作弊者填充了大量关键词到keyword, 错误地引导搜索结果。
在元数据中添加对自定义图标的引用,添加到HTML <head>
中以引用它:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
要使用 CSS 让网页更加炫酷,就在HTML头部元素中使用 <link>
元素。 link元素有2个属性,rel="stylesheet"表明这是文档的样式表,而 href包含了样式表文件的路径,例如:<link rel="stylesheet" href="my-css-file.css">
要使用JavaScript让网页有交互功能,就使用<script>
元素。<script>
部分没必要非要放在文档头部;实际上,把它放在文档的尾部(在 标签之前)是一个更好的选择,这样可以确保在加载脚本之前浏览器已经解析了HTML内容(如果脚本加载某个不存在的元素,浏览器会报错)。例如:<script src="my-js-file.js"></script>
注意: <script>
元素看起来像一个空元素,但它并不是,因此需要一个结束标记。您还可以选择将脚本放入
为站点设定语言, 这个可以通过添加lang属性到HTML开始标签中来实现:
HTML 基础文字
<sub> <sup>
HTML 高阶文字排版
描述列表
描述列表使用与其他列表类型(<ol> <ul>)不同的闭合标签— <dl>;
此外,每一项都用 <dt> (description term) 元素闭合。
每个描述都用 <dd> (description description) 元素闭合
引用
如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,
你应该把它用<blockquote>元素包裹起来表示,
并且在cite属性里用URL来指向引用的资源。
行内元素用同样的方式工作,是使用<q>元素。
eg.
<p>你好!欢迎访问我的激励网页!<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰:</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
<p>譬如为山,未成一篑,止,吾止也。譬如平地,虽覆一篑,进,吾往也。</p>
</blockquote>
<p>要保持乐观,<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。
(源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。)</p>
缩略语
<abbr>常被用来包裹一个缩略语或缩写,并且提供缩写的解释(包含在title属性中)
<pre> d:</pre>
d:
HTML 布局元素
<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>,且直接位于 <body> 中。最好不要把它嵌套进其它元素。
<article> 包围的内容即一篇文章,与页面其它部分无关(比如一篇博文)。
<section> 与 <article> 类似,但 <section> 更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以 标题 作为开头;也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中,也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中,取决于上下文。
<aside> 包含一些间接信息(术语条目、作者简介、相关链接,等等)。
<header> 是简介形式的内容。如果它是 <body> 的子元素,那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素,那么它是这些部分特有的页眉(此 <header> 非彼 标题)。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer> 包含了页面的页脚部分。
无语义元素<div> <span>
<br>
可在段落中进行换行
<hr>
元素在文档中生成一条水平分割线
HTML 图片
<img src="images/dinosaur.jpg"
alt="一张关于恐龙的照片"
width="400"
height="341"
>
使用 HTML5 的 <figure>
和 <figcaption>
元素,它正是为此而被创造出来的:为图片提供一个语义容器,在标题和图片之间建立清晰的关联
<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
width="400"
height="341">
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
如果图像对您的内容里有意义,则应使用HTML图像。 如果图像纯粹是装饰,则应使用CSS背景图片:为页面中的所有段落设置一个背景图片
p {
background-image: url("images/dinosaur.jpg");
}
HTML 音频和视频
HTML5 标准提出,其中有许多的新特性,包括 <video> 和 <audio> 标签
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
浏览器并不全支持相同的 codecs,所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持,那么媒体文件将不会播放。
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
浏览器将会检查 <source> 标签,并且播放第一个与其自身 codec 相匹配的媒体。
<audio> 标签与 <video> 标签的使用方式几乎完全相同
<audio> 标签不支持 width/height 属性 —
由于其并没有视觉部件,也就没有可以设置 width/height 的内容。
同时也不支持 poster 属性 — 同样,没有视觉部件
HTML 表单元素
CSS — 设计Web
text-indent: 2em;首行缩进2个字
选择器
.classname{} 类选择器
#idname{} ID选择器
*{} 通配符选择器
p{} 标签选择器
复合选择器
后代选择器:空格分隔,选的是最后一个元素,儿子孙子符合的都选
子元素选择器:大于号分隔,只选儿子,孙子不选
并集选择器:逗号分隔,全部选中
链接伪类选择器:LVHA顺序
a:link{}没点过
a:visited{} 点过
a:hover{} 鼠标滑过
a:active{} 选中时
focus伪类选择器:input:focus 表单元素焦点
元素显示模式
块元素:指定高宽,独占一行,文字块中不能放块元素
行内元素:不能指定高宽,高宽默认为内容大小,一行可以放多个行内元素,行内元素不能放块元素
行内块元素:一行可以放多个行内元素,可以指定高宽
相互转换
display:inline;
display:block;
display:inline-block;
文字居中
水平居中:text-align: center;
垂直居中:让文字的行高等于盒子的高度 height: 40px; line-height: 40px;行高偏大文字靠下,行高偏小文字偏上
图片
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;
background-attachment:
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
选择器优先级
继承或* 0000
标签选择器 0001
类选择器、伪类选择器 0010
ID选择器 0100
!important 1000
权重虽然有叠加,但是永远不会有进位