前端语法重温从0到1入门
文章目录
- 前言
- 一、HTML是什么？
- 二、HTML标签
- 三、HTML文档=网页
- 四、HTML编辑器
- 五、HTML 标题
- 六、HTML 段落
- 七、HTML 链接
- 八、HTML 图像
- 九、HTML 元素
- 十、HTML 元素语法
- 十一、嵌套的 HTML 元素
- 十二、空的 HTML 元素
- 十三、HTML 属性是什么
- 十四、HTML 提示：使用小写属性
- 十五、始终为属性值加引号
- 十六、HTML 属性实例
- 十七、HTML标题
- 十八、HTML 水平线
- 十九、HTML 注释
- 二十、条件注释
- 二十一、软件程序标签
- 二十二、HTML 段落
- 二十三、HTML 换行
- 二十四、HTML的style属性
- 二十五、HTML 样式实例 - 背景颜色
- 二十六、HTML 样式实例 - 字体、颜色和尺寸
- 二十七、HTML 样式实例 - 文本对齐
- 二十八、HTML 文本格式化实例
- 文本格式化：此例演示如何在一个 HTML 文件中对文本进行格式化。
- 预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制。
- 计算机输出标签：此例演示不同的“计算机输出”标签的显示效果。
- 地址：此例演示如何在 HTML 文件中写地址。
- 缩写和首字母缩写：此例演示如何实现缩写或首字母缩写。
- 文字方向：此例演示如何改变文字的方向。
- 块引用：此例演示如何实现长短不一的引用语。
- 删除字效果和插入效果：此例演示如何标记删除文本和插入文本。
- 二十九、HTML 颜色
- 颜色
- 颜色值
- 颜色名
- Web安全色
- 颜色名列表
- 三十、总结
前言
`为了顺利完成毕业设计，那就开始学习怎么搬砖？IT男超哥码代码永远在摸鱼中，话不多少，开始啦！
一、HTML是什么？
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
二、HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML标签是有尖括号包围的关键词，比如html；
- HTML 标签通常是成对出现的，比如b和 /b；
- 标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 开始和结束标签也被称为开放标签和闭合标签。
三、HTML文档=网页
- HTML 文档可以用来描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也可以被称为网页
**浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。**代码如下（示例）：
<!DOCTYPE html>
<html>
<body><h1>IT男超哥的个人网页</h1><p>Hello world！这是每个人一生中敲代码开始的第一个代码！</p><p>由此生成我的第一个段落。</p></body>
</html>
语法说明：
- html与 /html之间的文本描述网页；
- body与/body之间的文本是可见的页面内容；
- h1与/h1之间的文本被显示为标题；
- p与/p之间的文本被显示为段落。
四、HTML编辑器
可以使用专业的 HTML 编辑器来编辑 HTML：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
步骤一：启动记事本
如何启动记事本：
- 开始
- 所有程序
- 附件
- 记事本
步骤二：用记事本来编辑 HTML
在记事本中键入 HTML 代码：
步骤三：保存 HTML
- 在记事本的文件菜单选择“另存为”。
- 当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
- 在一个容易记忆的文件夹中保存这个文件，比如 w3school。
步骤四：在浏览器中运行这个 HTML 文件
启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。
五、HTML 标题
HTML 标题（Heading）是通过h1 - h6等标签进行定义的。
代码如下（示例）：
<!DOCTYPE html>
<html>
<body><h1>这是第一级标题</h1><h2>这是第二级标题</h2><h3>这是第三级标题</h3></body>
</html>
六、HTML 段落
HTML 段落是通过p标签进行定义的。
七、HTML 链接
HTML 链接是通过a标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
八、HTML 图像
HTML 图像是通过img标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
九、HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签p和结束标签/p、单标签/a、br。
十、HTML 元素语法
- HTML 元素以开始标签起始。
- HTML 元素以结束标签终止。
- 元素的内容是开始标签与结束标签之间的内容。
- 某些 HTML 元素具有空内容（empty content）。
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）。
- 大多数 HTML 元素可拥有属性。
十一、嵌套的 HTML 元素
- 大多数 HTML 元素可以嵌套（可以包含其他 - HTML 元素）。
- HTML 文档由嵌套的 HTML 元素构成。
- HTML 文档实例
<!DOCTYPE html>
<html>
<body><p>这是我的第一个段落。</p></body>
</html>
实例解释：
- 实例中出现的p是在HTML中定义的段落元素，他有开始标签和结束标签，是双标签。元素之间是所要表述的内容。
- body元素是在HTML文档中定义的主体，该元素有开始标签和结束标签。一般写的是网页的正文内容。
- html元素定义了整个HTML文档。该元素有开始标签和结束标签。它所包含的内容有head元素、body元素、p元素等。
- 一般而言，不要忘记结束标签。即使我们忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。忘记使用结束标签会产生不可预料的结果或错误。
- HTML 标签对大小写不敏感：P等同于p。许多网站都使用大写的 HTML 标签。
十二、空的 HTML 元素
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
- br就是没有关闭标签的空元素（br标签是用来换行的）。
- 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
- 在开始标签中添加斜杠，比如br /，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
- 即使br在所有浏览器中都是有效的，但使用br /其实是更长远的保障。
十三、HTML 属性是什么
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称/值对的形式出现，比如：name=“value”。
- 属性总是在 HTML 元素的开始标签中规定。
十四、HTML 提示：使用小写属性
- 属性和属性值对大小写不敏感。
- 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。
十五、始终为属性值加引号
- 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
- 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。
十六、HTML 属性实例
代码如下（示例）：
<!DOCTYPE html>
<html>
<body><a href="http://wwww.w3school.com.cn">This is a link.</a></body>
</html>
<!DOCTYPE html>
<html>
<body><h1 align="center">This is heading1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p></body>
</html>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body b><h2>快看改变了颜色背景。</h2></body>
</html>
十七、HTML标题
标题（Heading）是通过1-6等标签进行定义的。
h1定义最大的标题。h6定义最小的标题。
注释：
- 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
- 搜索引擎使用标题为您的网页的结构和内容编制索引。
- 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
- 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
- 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
<!DOCTYPE html>
<html>
<body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6></body>
</html>
十八、HTML 水平线
hr标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
示例如下：
<!DOCTYPE html>
<html>
<body><p>This is a paragraph.</p><hr /><!-- hr定义水平线--><p>This is a paragraph.</p><!-- 这是段落标记--><hr /><p>This is a paragraph.</p></body>
</html>
十九、HTML 注释
一般来说，浏览器不会显示注释的内容，而会忽略代码，注释代码如下：
<!-- This is a comment --> 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。<!--这是一段注释。注释不会在浏览器中显示。--><p>这是一段普通的段落。</p>
注释的作用：对于 HTML 纠错也大有帮助，因为我们可以一次注释一行 HTML 代码，以搜索错误。
二十、条件注释
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
实例：
<!-- [if IE 8]>... some HTML here ...<![endif]-->
二十一、软件程序标签
- 各种 HTML 软件程序也能够生成 HTML 注释。
- 例如 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。
- 作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。
二十二、HTML 段落
段落标签是由p标签定义的。
注释：浏览器会自动地在段落的前后添加空行。（p是块级元素）
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来。
提示：使用空的段落标记去插入一个空行是个坏习惯。用 br标签代替它！（但是不要用br标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）
<!DOCTYPE html>
<html>
<body><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p></body>
</html>
二十三、HTML 换行
如果我们希望在不产生一个新段落的情况下进行换行（新行），请使用 br标签。
br元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
<!DOCTYPE html>
<html>
<body><p>To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p></body>
</html>
<!DOCTYPE html>
<html>
<body><h1>春晓</h1><h2>春晓</h2>
<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</p><p>需要注意的是，浏览器忽略了源代码的排版，即省略了好多的空行和换行</p></body>
</html>
二十四、HTML的style属性
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
二十五、HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色。
代码实例：
<!DOCTYPE html>
<html><body style="background-color:red"><h2 style="background-color:yellow">This is a heading
</h2><p style="background-color:green">This is a paragraph.
</p></body></html>
二十六、HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸.
<!DOCTYPE html>
<html>
<body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body>
</html>
二十七、HTML 样式实例 - 文本对齐
text-align 属性规定了元素中文本的水平对齐方式。
<!DOCTYPE html>
<html>
<body><h1 style="text-align:center">This is a heading.</h1>
<p>英文写的标题位于页面中间。</p></body>
</html>
二十八、HTML 文本格式化实例
文本格式化：此例演示如何在一个 HTML 文件中对文本进行格式化。
<!DOCTYPE html>
<html>
<body><b>This text is bold</b>
<br /><strong>This text is strong.</strong>
<br /><big>This text is big.</big>
<br /><em>This text is emphasized.</em>
<br /><i>This text is italic.</i>
<br /><small>This Text is small.</small>
<br /><sub>This text contains subscript</sub>
<br /><sup>This text contains superscript</sup></body>
</html>
预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制。
<!DOCTYPE html>
<html>
<body><pre>
这是预格式文本。它保留了 空格和换行。</pre><p>pre 标签很适合显示计算机代码：</p><pre>
for i = 1 to 10print i
next i
</pre></body>
</html>
计算机输出标签：此例演示不同的“计算机输出”标签的显示效果。
<!DOCTYPE html>
<html>
<body><code>Computer code</code>
<br /><kbd>Keyboard input</kbd>
<br /><tt>Teletype text</tt>
<br /><samp>Sample text</samp>
<br /><var>Computer variable</var>
<br /><p><b>注释：</b>这些标签常用于显示计算机/编程代码。
</p></body>
</html>
地址：此例演示如何在 HTML 文件中写地址。
<!DOCTYPE html>
<html>
<body><address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA
</address></body>
</html>
缩写和首字母缩写：此例演示如何实现缩写或首字母缩写。
<!DOCTYPE html>
<html>
<body><abbr title="etcetera">etc.</abbr>
<br /><acronym title="World Wide Web">WWW</acronym><p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p><p>仅对于 IE 5 中的 acronym 元素有效。</p><p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p></body>
</html>
文字方向：此例演示如何改变文字的方向。
<!DOCTYPE html>
<html>
<body><p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；</p><bdo dir="rtl">
Here is some Hebrew text
</bdo></body>
</html>
块引用：此例演示如何实现长短不一的引用语。
<!DOCTYPE html>
<html>
<body>这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>这是短的引用：
<q>
这是短的引用。
</q><p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p></body>
</html>
删除字效果和插入效果：此例演示如何标记删除文本和插入文本。
<!DOCTYPE html>
<html>
<body><p>一打有 <del>二十</del> <ins>十二</ins> 件。</p><p>大多数浏览器会改写为删除文本和下划线文本。</p><p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p></body>
</html>
二十九、HTML 颜色
颜色
由红色、绿色、蓝色混合而成。
颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
Web安全色
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择的还是你自己。
颜色名列表
单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。
三十、总结
例如：以上就是今天重温回顾的内容，最终发现这篇文章好长啊！这真的是我第一次写得这么长的文章。
今天学的内容包括基本的HTML语法，如目录所呈现的那样。未完待续…
前端语法重温从0到1入门相关推荐
- Day51 前端开发 浮动、定位 、js入门
Day51 前端开发 浮动.定位 .js入门 文章目录 Day51 前端开发 浮动.定位 .js入门 1.盒子模型 2.浮动布局 3.溢出属性 4.定位 4.1.z-index 5.纯手搭页面练习 6 ...
- 【黑马程序员 C++教程从0到1入门编程】【笔记3】C++核心编程（内存分区模型、引用、函数提高）
黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难 文章目录 1 内存分区模型 1.1 程序运行前 1.2 程序运行后(手动开辟内存:c语言malloc,c++new) 1.3 new操作 ...
- 【黑马程序员 C++教程从0到1入门编程】【笔记1】数据类型、运算符、程序流程结构、数组、函数、指针、结构体
黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难 文章目录 1.C++初识 1.1 第一个c++程序 1.2 注释 1.3 变量 1.4 常量 1.5 关键字 1.6 标识符命名规则 2 ...
- 第1阶段C++ 匠心之作 从0到1入门
第1阶段C++ 匠心之作 从0到1入门 C++基础入门 1 C++初识 1.1 第一个C++程序 1.1.1 创建项目 1.1.2 创建文件 1.1.3 编写代码 1.1.4 运行程序 1.2 注释 ...
- Tensorflow2.0深度学习入门与实战（日月光华）（学习总结1）
Tensorflow2.0深度学习入门与实战(学习总结1) 我是刚学的,网易云课堂跟着日月光华老师,现在对每节课的学习课程做一下记录,总结,仅仅作为总结. 1.使用快捷键 shift+enter执行代 ...
- 0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
- c++资料匠心精作C++从0到1入门编程（二）- c++核心
目录 C++核心编程 1 内存分区模型 1.1 程序运行前 1.2 程序运行后 1.3 new操作符 2 引用 2.1 引用的基本使用 2.2 引用注意事项 2.3 引用做函数参数 2.4 引用做函数 ...
- c++资料匠心精作C++从0到1入门编程（三）- c++核心（基于STL的泛式编程）
目录 C++提高编程 1 模板 1.1 模板的概念 1.2 函数模板 1.2.1 函数模板语法 1.2.2 函数模板注意事项 1.2.3 函数模板案例 1.2.4 普通函数与函数模板的区别 1.2.5 ...
- eclipese web前端开发教学_web前端技术开发视频教程：Javascript 从入门到精通（百度云盘资源）...
<JavaScript视频教程>这是一个帮助您系统学习JavaScript编程语言的课程,该课由浅入深的介绍JavaScript的语言特性,结合实际例子解析常见误区,启发你的思考,帮助学习 ...
最新文章
- 室内装修隐蔽工程验收知识拓展_装修之前先看知贤，『装修微课堂』室内装修隐蔽工程详解，装修小白防坑避雷手册！...
- jquery-绑定事件与解除事件的绑定
- Flutter 动态饼状图 让你的APP中无聊的统计图动起来 挻舒适的感觉瞬间提升一个档次 -深夜创作
- sqlserver2000内存突破4g_友商都上16G，华为手机为何一直用8G内存？网友：效仿iOS...
- Tricks（四十二）—— 数据集分块
- C#程序员开发WinForm必须知道的 Window 消息大全(转)
- ECMAScript 6细说转码的常见的几种方案
- [Mongodb]安装与启动
- Qt 环境下MAPX组件的编程
- 统计学中常被误用的分析方法
- hadoop 运行原理
- 烘培赛道的2021：资本重押下，老字号向左，新秀向右？
- 店盈通：拼多多新店怎么起步 ？四招教你解决
- c语言中测长度的函数,c读入文本后，用strlen函数测不出正确长度
- Taylor定理证明
- PAT 1094 谷歌的招聘 (20 分) c语言
- 用友携YonSuite亮相云栖大会，全方位生态合作再提速
- L版本12小时制状态栏时间不显示AM/PM mtk
- Windows下安装Redis教程
- vue2.0构建淘票票webapp