.标题

标题可能是最容易学习的代码之一，并考虑到 它们对您的SEO至关重要，这是一件好事。共有六种不同类型，如下所示。要创建标题，只需将文本包装在所选的标题标签中：

2.段落

没有一段要详细说明该消息的标题会是什么？要获得类似于您现在正在阅读的段落，只需将文本包装在<p>标记中，如下例所示，并且别忘了用</ p>标记将其关闭！

<p>嘿，我是一个段落！</ p>

嘿，我是一段！

3.链接

如果不将您本已丰富的内容链接到其他相关文章和网站文章，则入站营销就算什么。尝试使用以下<a>代码在段落中链接单词或短语：

<a href="http://www.impactbnd.com">让我们访问IMPACT的真棒网站！</a>

奇迹般地变成：让我们访问IMPACT的真棒网站！

代码语句的href部分指定了您要链接访问的目标网站地址。

4.图片

这很有趣。图像使一切变得更好，它们使您的内容对读者更具吸引力。插入这样的图像：

<img class =“ lazy” data-src =“ http://cdn2.hubspot.net/hubfs/145335/Cute-Puppy.jpg” alt =“ Cute-Puppy” style =“ width：500px; height：333px; “>

image标签为空，因为它仅包含属性，因此不需要关闭。上面列出的属性包括“ class =“ lazy” data-src“或图像URL。我还包括了图像替代文本（对于SEO而言很重要），以及一些样式属性（宽度和高度）。

您可以根据需要自定义图像。哦，对于你们那里所有的小狗爱好者-像我一样-这是我上面编码的实际图像：

5.换行

换行符也是一个空元素，因此不需要将其关闭。换行符基本上是用<br>创建的两行文本之间的有意空格。

<p>在此句子下放置换行符。
<br>
在此句子上方放置换行符。</ p>

在此句子下放置换行符

在此句子上方放置换行符。

转换完上述HTML后，与使用<p>标记分隔两个段落相比，您可以说第一行和第二行之间的空间较小。添加换行符有助于使句子位于同一段落的不同行中。

6.大胆而坚强

为了使内容醒目，有两个有效的代码元素。但是，我的开发人员告诉我<strong>的使用量远超过<b>。不要忘记关闭<strong>标签！</ strong>

<strong>将整个句子加粗！</ strong>
或仅<strong>加粗</ strong>一个字！

大胆的整句话！
或只加粗一个字！

7.斜体和强调

斜体和强调文本与粗体和强文本相似。有两个代码元素，但一个元素比另一个元素使用更多。在这种情况下，<i>将起作用，但是<em>更常用。

<em>这句话很漂亮</ em>

这句话很漂亮。

8.下划线

粗体，斜体，并加下划线。这一个和其他两个一样容易。只需将要加下划线的文本包装在<u>标记中，例如。

<u>看，我们可以加下划线！</ u>

看，我们可以强调！

9.有序列表

有序列表和无序列表之间有区别。有序列表包含数字，而无序列表包含项目符号。它们都遵循相同的结构，但是一个字母会发生变化。

这是有序列表的代码语句。<ol>是整个“有序列表”，而<li>是一个“列表项”。您可以根据需要包括任意数量的列表项。

10.无序列表

从一个有序列表切换到一个无序列表，只需要更改一个字母即可。

11.上标

要在文本中插入上标格式，请将要显示为上标的文本包装在<sup>标记中。</ sup>您将得到类似这样的结果。

商标应使用上标<sup> TM </ sup>书写。

商标应使用上标TM书写。

12.下标

如果您知道如何上标，那么您应该知道如何下标。只需使用<sub>标记</ sub>即可获得这样的文本。

有时，引文用下标写成。

有时，引文用下标写成。

13.水平线

是否要拆分页面或文章的各个部分？尝试一条水平线！只需使用空元素（无需关闭它）<hr>。

在我和句子2之间插入一条水平线。
<hr>
嗨，我是句子2。

在我和句子2之间插入一条水平线。

嗨，我的句子是2。

14.标记或突出显示的文本

我敢打赌，您不知道可以通过HTML代码突出显示文本，是吗？太酷了，太容易了。将要在<mark>标记</ mark>中突出显示的文本换行，以便获得酷炫的突出功能。

仅突出显示<mark>最重要的注释</ mark>。

仅突出显示 最重要的注意事项。

15.删除（贯穿）文本

如果您想在文本上显示穿越效果（也许您创建了一个任务列表，并希望在执行过程中对每个任务进行划线），则有相应的代码。尝试使用<del>标记删除完整的句子甚至一个单词。</ del>

<del>喂狗。</ del>
<del>写我的博客文章。</ del>
做饭。

喂狗。
写我的博客文章。
做晚饭。

16.短期和长期报价

到目前为止，您可能想知道我如何将所有示例都放在文本框中。好吧，惊喜！也有一个代码。它实际上称为块引用或长引号。您可以在下面看到长引号和短引号（普通引号）之间的区别。

<blockquote>与其余示例一样，所有这些文本都将以blockquote出现。</ blockquote>
<q>之所以引用这是因为我是大声说出来。</ q>

与其余示例一样，所有这些文本都将以大括号显示。
我引用此内容是因为我要大声说出来。

17.设置特定字体

接下来的几个会变得有些棘手，所以请尝试和我在一起。现在，您知道如何创建标题，段落和样式化的文本，这对您知道可以使用元素“字体家族”轻松更改字体很有用。

不要忘记所有小的细节，例如等号，引号和分号。查看以下示例。

<h4 style =“ font-family：Georgia;”>我想将此标题更改为Georgia字体。</ h4>

<p style =“ font-family：Verdana;”>我想将此段落更改为Verdana字体。</ p>

我想将此标题更改为Georgia字体。

我想将此段落更改为Verdana字体。

18.设置特定的文本颜色

该代码使用与上一个示例相同的代码类型，但是使用“颜色”代替使用字体家族。您可以尝试使用实际的颜色（蓝色，红色，橙色等），也可以插入十六进制颜色以自定义品牌的文字。

<p style =“ color：blue;”>今天的天空真的是蓝色。</ p>
<p style =“ color：＃ff471a;”>火是橘红色的</ p>

今天的天空真的很蓝。

火是橘红色的。

19.设置特定的文字大小

同样，此代码使用相同的基本代码逻辑，但使用元素“ font-size”。将字体大小设置为像素或px。

<p style =“ font-size：36px;”>将此段落设置为36字体。</ p>
<p style =“ font-size：12px;”>将此段落设置为12字体。</ p>

使此段落大小为36字体。

使此段落大小为12字体。

20.设置特定的文本对齐方式

左，居中，右或对齐。您如何看待您的文字？使用“文本对齐”以任何方式进行设置。

<p style =“ text = align：center;”>此段落应居中。</ p>
<p style =“ text-align：right;”>此段落应右对齐。</ p>

本段应居中。

本段应右对齐。

21.桌子

我把最好的留在了最后！好吧，我不知道这是否是最好的，但我认为这很酷。用于创建表的HTML代码可能会变得非常复杂，但是如果您掌握了基本知识，那么您应该不会有太大的问题。

我将在下面显示如何创建一个简单表。

为了易于理解，<tr>代表表行，而<td>代表表数据。请记住，您可以更改字体，文本大小，文本颜色，文本对齐方式等。

开始编码！

您刚刚阅读的21个代码非常不错，可以开始练习来增强HTML技能。

avaScript基础概念

JS的组成：

1.ECMAScript：Js语法

2.DOM：文档对象模型 ， 文档：html文档 ，操作html文档 （操作html文档的工具）

3.BOM：浏览器对象模型 ， 操作浏览器的工具

JS的三种书写方式

行内式，内嵌式，外部链接

JavaScript输入·输出语句

alert(msg) 浏览器弹出警告框

consle.log(msg) 浏览器控制台打印输出信息

prompt(info) 浏览器弹出输入框 用户可以输入信息

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

变量的概念

通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

变量理解：变化的量，变化的内容，变化的数据

变量存储数据理解：程序运行过程中的数据存储在内存中，但是内存比较大，为了方便管理，所以将内存分成一个一个的盒子（变量）来存储

变量的使用

1.声明变量 var 变量名；var age；（声明一个 名称为age 的变量）

2.变量的赋值 var 变量名 = 值; var age = 18; 声明变量age同时赋值为 18

变量案例

var myname = '旗木卡卡西'; // 字符串
var address = '火影村';
var age = 30; // 数字
var email = 'kakaxi@itcast.cn';
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(‘gz’); // gz
console.log(gz); // 2000

注意：

• 变量赋值时，值如果是字符串需要添加’’,“”
• 每行代码结束，都需要添加;
• 变量在使用时，不能添加引号 （定义，声明变量的时候，没有引号，使用的时候自然也不能添加引号）
  案例2：

// 1. 用户输入姓名 存储到一个 myname的变量里面
var myname = prompt('请输入您的名字');
// prompt 做的事情：
// (1). 弹出输入框 , 用户输入内容:zs
// (2). 将用户输入内容返回 ，相当于 ：var myname = 'zs';
// 2. 输出这个用户名
alert(myname); // zs

变量命名规范

规则

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name ***

严格区分大小写。var app; 和 var App; 是两个变量

不能 以数字开头。 18age 是错误的

不能 是关键字、保留字。例如：var、for、while

变量名必须有意义。 MMD BBD nl → age

遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

推荐翻译网站： 有道 爱词霸

变量案例-交换两个变量

// js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做 
// 1. 我们需要一个临时变量帮我们
// 2. 把apple1 给我们的临时变量 temp 
// 3. 把apple2 里面的苹果给 apple1 
// 4. 把临时变量里面的值 给 apple2 
var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);

简单数据类型
JavaScript 中的简单数据类型及其说明如下：

数字型范围：JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 （10的正308次方）

alert(Number.MIN_VALUE); // 5e-324 5e-324 （10的负324次方）

数字型三个特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN ***
//课堂代码：
// 5. 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大 
// 6. 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
// 7. 非数字
console.log('pink老师' - 100); // NaN：字符串是无法与数字进行运算的，所以结果是一个非数字

isNaN
用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字

字符串型 String
字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

字符串引号嵌套
JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""

var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''

// 常见错误

var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

字符串长度

• 字符串是由若干字符组成的，这些字符的数量就是字符串的长度
• 通过字符串的 length 属性可以获取整个字符串的长度

var strMsg = "我是帅气多金的程序猿！";

 alert(strMsg.length); // 显示 11

字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112 
//以上的字符串拼接都没有意义，一般我们字符串会与变量进行拼接

原文链接：https://blog.csdn.net/H_eartbeat/article/details/103102782