干嘛要用 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 个空白字符。这就是为什么要使用字符实体。