HTML、CSS、PHP、JavaScript 基础知识 | 磨刀不误砍柴工

干嘛要用 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 常用字符实体

实体名称含义
&nbsp空格
&lt小于号
&gt大于号

在HTML代码中直接敲空格、回车是没有用的,不管你敲多少个,它们都会被解析成 1 个空白字符。这就是为什么要使用字符实体。

参考资料

  1. 菜鸟教程
小提示:您还可以点击下方 [ 标签 ] 阅读相关文章。您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇