干嘛要用 HTML?
HTML:超文本标记语言(英语:HyperText Markup Language)是用来描述网页的一种标准语言。浏览器的工作其实就是翻译 HTML。HTML 不是一种编程语言,只是一种标记语言。
设想一下,假如你要做一个网页,你不可能只用纯文本吧?标题、颜色、字号、图片等等的元素都要合理排版,你需要一种现成的语言去 mark 这种布局。如果说 Markdown 是给用户使用的一种轻量级标记语言,HTML 就是专门给浏览器看的一种更为规范化的网页标记语言。
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets),这个名字不重要,反正我的理解就是一个格式刷,本来你需要用 HTML 给每个元素设定一个样式,工作量很大,现在有了 CSS,样式相同的元素你就可以合并起来一起刷。
这么做的好处就是,内容和样式可以分离,比如你只需要指定这是一段正文,你在样式表里设定了正文的字体、大小、颜色等等,以后碰到正文都以这个样式呈现。
你可以在一篇 HTML 中单独用 <style> 标签设定样式,也可以使用外部样式表。外部样式表通常存储在 CSS 文件中,比如 WordPress 的主题编辑器里就有一个文件叫做 style.css 。外部样式表可以改变所有页面的外观和布局。
PHP 是什么?
- PHP(Hypertext Preprocessor,超文本预处理器)是一种编程语言。更准确地说是一种脚本语言。(两者没有明确界限,脚本语言更轻巧一点。)
- PHP 是开源的、免费的。适用于网络开发并可嵌入 HTML 中使用。
- PHP 代码由服务器执行,结果以纯 HTML 形式返回给浏览器。
- PHP 文件可包含文本、HTML、JavaScript 代码和 PHP 代码。
- PHP 文件的默认文件扩展名是 .php
JavaScript 是什么?
- JavaScript 是一种轻量级的编程语言。可在 HTML 中通过 <script></script > 标签插入。
- JavaScript 由客户端执行,即用户的浏览器执行。
- JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。Java 是更复杂的编程语言。
四者的关系
- HTML 定义了网页的内容层级
- CSS 描述了网页的布局样式
- PHP 是让服务器预先处理的程序
- JavaScript 是让用户浏览器执行的程序
HTML 标签格式
HTML 标签格式:<标签>内容</标签>
HTML 注释格式:<!--注释-->
- HTML 标签是由尖括号包围的关键词,比如 <title>
- HTML 标签通常是成对出现的,比如 <p> 段落 </p>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 某些空元素可以没有结束标签,比如换行标签 <br>
HTML 标准实例
<!DOCTYPE html><!--声明为HTML5文档--> <html> <head> <meta charset="utf-8"><!--对于中文网页需要声明编码,否则会出现乱码。--> <title>网页标题</title> </head> <body> <p>这是一个段落。</p><!--两个body之间为可见内容--> </body> </html>
浏览器显示结果:
这是一个段落。
HTML 常用标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <p>段落</p> <hr><!--水平线分隔符--> <br><!--换行--> <b>粗体文本</b> <i>斜体文本</i> <strong>粗体文本</strong> <a href="https://crowya.com">鸦鸦的巢穴</a><!--超链接--> <img src="https://crowya.com/wp-content/uploads/2020/04/cropped-basicimg-niaolei.png" width="42" height="42" style="position:relative;top:-40px;left:-40px;"><!--图像-->
部分显示效果:
粗体文本 斜体文本 粗体文本 鸦鸦的巢穴
HTML 标签 + 属性
可通过 style 属性设置内联样式。前面超链接标签里的的 href 其实也是一种属性。
<p style="text-align:center;font-family:serif;color:blue;font-size:20px;">我是鸦鸦。</p>
显示效果:
我是鸦鸦。
组合多个 HTML 元素共同设定样式(内部样式表)
<div>多个元素</div>
标签常用于组合元素块,以便通过 CSS 来对这些元素进行格式化。
<div id="block"> <h1>这是一个标题</h1> <p>这是一个段落。</p> </div> <style> #block<!--井号对应id,点号对应class--> { color:blue; text-align:center; font-size:20px; } </style>
注:貌似样式标签 <style></style > 要放在 < head></head > 标签对内。但是我没放好像也可以。
HTML 常用字符实体
实体名称 | 含义 |
  | 空格 |
< | 小于号 |
> | 大于号 |
在 HTML 代码中直接敲空格、回车是没有用的,不管你敲多少个,它们都会被解析成 1 个空白字符。这就是为什么要使用字符实体。