前端学习：HTML的学习总结（图解）

TML简介

HTML基本标签

HTML表单标签

HTML内联框架标签和其他

TML+CSS学完好久了，一直没啥时间总结，现在总结了下学的过程：

之所以放在一起总结，是因为HTML和CSS没有啥很多的编程逻辑，都是需要去记住并且熟练使用的，熟练使用是得去一个个敲过一遍。所谓的代码量积累好像就是这么回事，只有多敲才能会。

小白用的哔哩哔哩上的教程视频，因为个人学习方法的原因，都是跟着那教程去敲的，当然课后练习的话，都是自己先摸索敲了一遍在去看的讲解，小白觉得这样可以加深印象。

还有就是没有熟练之前要天天的去练，哪怕一天半小时也好。因为一旦一天没有练就会忘掉，还得回去找之前的笔记来看。（因为有事耽搁了两三天没去学，结果又重头的看了一遍，血淋淋的学习效率教训。不管怎样，贵在坚持。）

当然，因为小白基础是真的差，没有什么教程是可以完完全全都讲完的，使用小白看完了哔哩哔哩的教程又跑去了网易云课堂找了一份HTML+CSS的教程来看，为的是查漏补缺。

有一种播放叫做1.5倍播放。看的过程，别跟播放器里一倍的速度看，调成1.5倍或是2.0倍播放速度，因为那些东西，多数都是理解使用的。哪怕忘了，百度一下就可以直接搞定了。打基础阶段所以还是记住熟练使用才好。

HTML小白也就看了两天吧，用了半天做了下练习；CSS对于零基础的人来说建议12-15天，当然小白之前有过这些概念，所以用了五天多点的时间。JS才刚刚开始学，所以不知道时间怎么算才好。因为前端三大基石：HTML+CSS+JS，HTML+CSS学习所使用的时间占比才百分之五，剩下的百分之九十五都是JS的学习时间。

找课程时记住，找一两个课程，一个全心去学，一个查漏补缺就好，别一会儿这个课程看一下，那个课程看一下的。这样子反而会使自己心浮气躁没法静下心来去学。打基础的视频教程，其实都一样的，没啥有特别好的特别坏的。

lt;!doctype html>

<html>

<!--

常见问题答疑

Question 1：HTML标签可以大写吗？

大小写都可以，比如<P> 和 <p> 都一样，但是推荐小写，XHTML强制小写（小写肯定对，大写……看情况）

Question 2：有<h7>、<h8>、<h9>……吗？

没有。<h1>最大，<h6>最小.

Question 3：所有HTML标签都需要<></>吗？

不是。有特例，比如<img>是自闭合的，没有</img>;<br>是空元素，需要在开始标签闭合<br/>;<hr> <link> <base>不需要闭合，等等。

Question 4：标签里的属性有先后顺序吗？

没有。比如<img src="" alt="" width="" height="">和<img alt="" width="" height="" src="">效果是一样的。

-->

<head>

<!--

!元数据也不显示在页面上，但会被浏览器解析。

-->

<title>HTML复习 2019-2-3</title>

<!--

<base>定义了所有链接的URL（地址） URL->Uniform Resource Locator（全球资源定位器）

<base href="http://www.baidu.com/"> 所有链接都指向www.baidu.com

-->

<!--

通常引用 css文件和 js文件

调用样式的优先级：<link>外部文件 < 文件内<style> < 标签内style属性

-->

<!--

1.直接定义标签样式标签名{ 属性1:值; 属性2:值; }

2.定义具有某一ID的标签样式 #id名{ 属性1:值; 属性2:值; }

3.定义某一类（class）的标签样式 .类名{ 属性1:值; 属性2:值; }

#多个元素用 , 隔开

-->

<style>

td,p{

text-align:center;

}

#top{

font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

}

.show{

background-color: aqua;

}

</style>

alert("lycute!"); //弹出一个消息框

</script>

</head>

<body>

<!--

常用HTML属性：

class 定义一个或多个类名(classname)；相当于把不同的标签分到一个组，属于同一类

id 定义元素的唯一id；id是唯一的，不能两个标签用一个，相当于学号，不能重复

style 定义元素的行内样式(inline style)；只能修改该标签的样式（大小、颜色、位置等）

-->

<h1 id="top">This is a title level 1</h1>

<h2 class="show">This is a title level 2</h2>

<h3 class="show">This is a title level 3</h3>

<h4 class="show">This is a title level 4</h4>

<h5>This is a title level 5</h5>

<h6>This is a title level 6</h6>

<!--

<p>标签定义段落 p->paragragh（段落）

HTML文档中不能直接敲回车，需要使用 <br/> 标签 br->break(打断？……可能是这个吧)

HTML文档中不能直接打空格，需要使用 nbsp->Non-breaking Space(不间断空格)

！！上两条在<pre>标签内不受影响

<hr>标签用于创建水平线,用于分隔内容 hr->horizontal line(水平线)

<b>和<strong>都可以加粗文字

<i>和<em>都可以定义斜体文字

通常使用<strong>和<em>，因为它们有强调的含义

-->

<p>

This is a paragragh.<br/>

And this is the second line.

</p>

<hr>

<p>

This is another paragragh<br/>

<!--常用文本格式化属性：

<b> 定义粗体文本 b->bold(粗体)

<em> 定义着重文字 em->emphasize(强调)

<i> 定义斜体字 i->italic(斜体)

<small> 定义小号字

<strong>定义加重语气

<sub> 定义下标字 sub->subscript(下标)

<sup> 定义上标字 sup->superscript(上标)

<ins> 定义插入字 ins->insert(插入)

<del> 定义删除字 del->delete(删除)

-->

<em>I am italic</em><br/>

<small>I am small</small><br/>

<sub>I am subscript</sub>

<sup>I am superscript</sup><br/>

</p>

<!--

段落中“计算机”输出标签（一般不用，了解就行）

<code> 定义计算机代码

<kbd> 定义键盘码 kbd->keyboard(键盘)

<samp> 定义计算机代码样本 samp->sample(样例)

<var> 定义变量 var->variate(变量)

<pre> 定义预格式文本 pre->preposition(前置？……这个，应该吧)

-->

<p>

<pre>

<code>

#include"stdio.h"

int main()

{

printf("Hello World!");

}

</code>

</pre>

<kbd>Shift键 VK_SHIFT</kbd><br/>

<samp>system.out.print("hello world");</samp><br/>

</p>

<!--

HTML引文、引用和标签定义

<abbr> 定义缩写 abbr->abbreviation（缩写）

<address> 定义地址

<bdo> 定义文字方向 bdo->Bi-Directional Override

<blockquote> 定义长的引用

<q> 定义短的引用语 q->quote（引用）

<cite> 定义引用、引证

<dfn> 定义一个定义项目 dfn->definition（定义）

-->

<p>

<address>Hebei,Shijiazhuang</address><br/>

<bdo dir="rtl">text direction from right to left</bdo>

<bdo dir="ltr">text direction from left to right</bdo>

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

</blockqoute><br/>

<q>This is a short qoute</q><br/>

</p>

<!--

<a>标签定义链接 a->anchor(锚点)

href属性定义链接地址 href->hypertext reference（超文本引用）

target属性定义被链接的文档在何处显示

1.可以用来链接到外部地址实现页面跳转功能

2.可以链接到当前页面的某部分实现内部导航功能

3.链接不一定是文本，也可以是图片或者其他HTML元素

-->

<a href="http://www.baidu.com/" target="_blank">This is a link to baidu</a><br/>

<!--

<img>标签定义图像、图片 img->image(图像)

<img>是一个自闭合标签，不需要也不存在</img>.

src属性指向图像的地址 src->source(来源)

alt属性定义如果图片加载不出来时的替换文字 alt->alter(变更)

height、width属性分别定义图片的高度和宽度,值可以是数字（单位px：像素）或者百分比（相对于源文件） px->pixel(像素)

-->

<p>This is a paragragh in a div</p>

<a href="http://www.nelzh.cn/">www.nelzh.cn</a>

</div>

<p>

Ly <span style="background:pink;">cute</span>

</p>

<!--

HTML表格 <table> (table有表格的意思)

<th> 定义表格的标题栏 th -> table headline(我jiao着应该是……)

<tr> 定义表格的行 tr -> table row

<td> 定义表格的列 td -> table ???

<caption> 定义表格标题

<colgroup> 定义表格列的组

<col> 定义用于表格列的属性

<thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot> 定义表格的页脚

-->

<caption>LYCUTE</caption>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

<!--

有序列表<ol> & 无序列表<ul> & 自定义列表<dl>

ol -> ordered list

ul -> unordered list

dl -> ??? list

-->

<ol>

<li>lycute</li>

</ol>

<ul>

<li>lycute</li>

</ul>

<dl>

</dl>

<form>

Username:<input type="text" name="username"><br/>

Password:<input type="password" name="pwd"><br/>

<!--

下拉列表（select）

<select> 定义了下拉选项列表

<optgroup> 定义选项组

<option> 定义下拉列表中的选项

-->

<option value="python">python</option>

</optgroup>

<option value="cute">lycute</option>

<option value="verycute">lyverycute</option>

</optgroup>

</select><br/>

<input type="radio" name="sex" value="female">Female<br/>

<input type="checkbox" name="program" value="python">python<br/>

</form>

</center>

</body>

</html>

在线咨询

上一篇：适合初学者的个人博客网页设计模板
下一篇：「HTML」什么是 HTML 中的 div 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端学习：HTML的学习总结（图解）

TML简介

HTML基本标签

HTML表单标签

HTML内联框架标签和其他

您的项目需求