前端入门学习笔记（1）--html部分

来源：互联网发布：mongodb java api 编辑：程序博客网时间：2024/05/22 10:15

这是在网上发表的第一篇文章，从来不喜欢在网上发表言论、文字和资源，是个名副其实的“伸手党”，在“伸手白拿”的多年间，也曾想过要贡献些什么，但总是害怕自己分享出来的东西不够好，于是放弃。如今，终于下定决心要开始转变，希望自己也能逐步成为一个可以给别人带来帮助或启发的人。

-------------------------------------------------------------------------------------------------------------------------------------------------

以上是题外话，下面是正文。

首先，在网上初步了解，学习前端，最基础的是要掌握好html、css及javascript。学完基础后，再决定下一步还要再学习些什么或做个小的项目练习。

html承载的是一个网页上最原始的元素，包括文字、图片、视频等。但是，有了这些内容是不够的，它还要以一定的形式呈现出来，才能吸引到人。这就要用到css了，通过css可以改变这些元素呈现的样式，包括字体、颜色、背景、边框等，让原本枯燥的内容看起来更加美观。到此为止，仍然是静态的呈现，如果要让页面更加生动，就需要给页面添加动画和交互，让人可以和你的页面“互动”，javascript可以很好的做到这一点。

用人来比喻，就再恰当不过了，html就像人身上的各个部分，头，手，脚，身体，有了这些，你就是一个人了，接着你需要穿上各种衣服（css），包装好自己，再走出家门去接触社会，但一个静止不动、木讷的人，是很难受欢迎的，你需要会走会跳，别人和你说话交流你要会回应（js），至于如何记住别人说的信息，如何处理这些信息，又要如何组织信息回应，这就是后端要研究的事情了。

今天的计划是把html基本了解一下，花了4个小时左右在慕课网学习，感觉讲的还是很基础，很有条理的，但深度不够，要深入学习还是要上网买相关的书籍。

以下是今天的学习的html内容：
1、html的基本结构

<!DOCTYPEHTML> 

<html> 

<head> 

……

</head> 

<body> 

……

</body> 

</html> 

html 的基本结构一般都是自动生成的，只做一个基本的了解，知道主要有哪几块，功能是什么即可。注意所有结束标签均比开始标签多一个“/“ 。另，html不区分大小写，但一般使用小写。

2、注释：

不管是用什么语言编程，注释都是最重要的，一定要养成写注释的好习惯，关键的注释不仅可以让别人一眼望去明白你写的代码的架构，更可以让自己有清晰的思路组织代码，某一日回过头来看也可以快速看懂。

3、head部分相关的标签
（1）网页标题标签：<title>…… </title>

打开浏览器页面时，我们会看到浏览器边框上有一些网页名称，如下图的“肖申克的救赎（高清）”和“百度一下，你就知道”，每一个网页的标签，都是不一样的，并且是这个网页最具有代表性的关键内容；

（2）样式标签：<style>…… </style>

用于css修改网页内容的呈现方式，如修改文字的颜色，大小，表格样式等，待学习到css再补充。

4、body部分标签：

（1）标题标签：<hx> …… </hx>

标题标签用来显示网页一段内容的标题，x代表的数字范围是1～6，h1的优先级最高，显示的字体也最大，x的数字越大，优先级越低，字体也越小，就好像我们写论文里的一级标题，二级标题，三级标题这样，"h"代表的是英文head。

（2）段落标签：<p>…… </p>

用来放常规的文字内容，一段对应一个p标签，默认每个段落后面空一行，不喜欢空行的话可再用css修改。"p"代表英文paragraph的缩写。

（3）强调文本--斜体：<em> …… </em>

使用该标签，可以将标签内的文字变成斜体，"em"指的是emphasis。

（4）强调文本--加粗：<strong>……</strong>

使用该标签，可以将标签内的文字加粗。

（5）短文本引用标签：<q>……</q>

有的时候，我们在网页的文字内容中需要加入一些引用的语句，如较短的名人名言，古诗词等等，可以用到短文本标签，它可以为标签内的引用语句自动加入双引号。但使用该标签的目的不是为了免去手工输入双引号的麻烦（实际上加入代码并不会减少麻烦），而是为了强调这部分文字是引用的。"q"指的是quote。

（6）长文本引用标签：<blockquote>……</blockquote>

只引用一、两句话的短文本时，可以使用短文本标签，但如果要成段的引用别人的文本时，显然就不适合了。我们在阅读书籍时，也会发现，当书里的作者成段的引用别人的文本时，会将其单独拿出来作为一段，并且格式也会和正文有所不用。blockquote就可以实现这样的功能，默认的样式是添加缩进样式。

（7）换行标签：<br/>或 <br>（html4）

在html中，换行（即回车符号）及空格是无法被识别的，若需要换行，则要添加br标签，注意它只有开始标签而没有结束标签。"br"指的是barter rabbet。

（8）空格标签：&nbsp；

在html中，需空格时可使用该标签，"nbsp"指的是no-breaking space，前面的"&"和后面的";"是固定格式。

（9）分割线标签：<hr/>或<hr> （html4）

使用该标签可在网页中添加分割线，"hr"指的是horizontal ruler。

（10）地址标签：<address>……</address>

在很多网页中，我们都会看到一些联系地址，这时候就要用到地址标签。使用地址标签可以为文本添加斜体及换行样式。再次强调，所有的这些属性标签，并不是为了改变文本的样式，而是为了赋予给它相应的属性，后面的代码标签也是如此，自己要分辨出哪些文本是什么类型的，单纯只为了改变样式的话，使用css完全可以给文本添加更加漂亮美观的样式。

（11）代码标签：<code>……</code>

在网页中，有时会需要呈现代码，少量代码可使用code标签，代码多的话可使用下面的pre标签。

（12）预格式化文本标签：<pre>……</pre>

pre标签中的内容会毫无变动的呈现出来，包括保留文本中原有的空格、换行等，可用于呈现多行代码。"pre"指的是predefined。

（13）列表标签（无序）：

<ul>

<li>

……

</li>

</ul>

有时，我们有一系列处于同等地位的内容要呈现出来，但又不希望添加数字序列，就可以使用无序列表标签，该标签会使每个li标签内的内容前面都带一个圆点。"ul"指unorder list，"li"指list item。

（14）列表标签（有序）

<ol>

<li>

……

</li>

</ol>

如需要让列表内容有序排列，则可使用有序列表标签，它会对每个li标签的内容从1开始自增的添加序列。"ol"指的是order list。

（15）表格标签：<table>……</table>

表格是文本呈现较为直观的一种方式，默认的表格样式是不显示边框的，可通过css改变样式。表格分为摘要、标题、表头、行、列，

1）表格摘要：<table summary="……">

表格摘要的内容不会显示在浏览器中，添加是为了让自己知道该表格的大致内容。

2）表格标题：<caption>……</caption>

标题内容居中置于表格上方。

3）行：<tr>……</tr>

表格的行，表格中有几个tr标签，就有几行。"tr"指table row。

4）表头：<th>……</th>

表格的第一行称为表头，置于第一个tr标签中，一般加粗显示。"td"指table head。

5）列：<td>……</td>

表格每一行的元素个数（我更喜欢称它为列），嵌套于tr标签中，有几个td标签就有几列。"td"指table data cell。

以下是使用范例。

<!DOCTYPEHTML>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>认识table表标签</title>

</head>

<body>

<tablesummary="2017下期末各班成绩单"> 

<caption>各班均分</caption> 

<tr> 

<th>班级</th> 

</tr>

<tr>

<td>一班</td> 

</tr>

<tr>

</tr>

</table>

</body>

</html>

代码运行后效果如下图：

（16）链接标签：<ahref="目标网址" title="鼠标飘过时显示的内容" target="页面以什么形式打开">……</a>

实现给某段文字添加链接的功能，"href"指Hypertext Refrence。范例如下，实现效果为在文字“知乎”上添加知乎首页链接，鼠标飘过时会显示“点我打开知乎”的消息。

<ahref="https://www.zhihu.com"title="点我打开知乎"target="_blank">知乎</a>

target中可选填的参数有以下几个

1）_blank：在新窗口中打开链接；

2）_parent：在父窗体中打开链接；

3）_self：在当前窗体中打开链接，为默认值；

4）_top：在当前窗体开口链接，并替换当前的整个窗体。

（17）链接Email地址：<a href="mailto：收件人地址1？收件人地址2&收件人地址3&subject=主题&body=邮件内容>……</a>

在网页中，如果你希望浏览者方便的联系你，可使用此标签，用户点击标签内容后，会自动弹出邮件程序（需浏览器支持及设置），并填写好收件人地址、主题等。注意，第一个间隔符是"?"号，后续不管内容是邮箱、主题还是其它，都使用"&"作为间隔符，且不空格。

使用范例如下，实现效果为点击”如有任何意见，请联系我“后，自动弹出邮件程序并填写好收件人（123456@qq.com，7890 @http://qq.com），主题为”反馈意见“，内容为”你好，我对此有些许建议“。

<ahref="mailto：123456@qq.com？7890@qq.com&subject=反馈意见&body=你好，我对此有些许

建议>如有任何意见，请联系我</a>

（18）图片标签：<imgsrc="图片url地址" alt="下载失败时显示的文本">

在网页中插入图片元素，"src"指standard requirment code。

（19）层次标签：<divid="标识名称">……</div>

将网页中要呈现的内容分好层次（可理解为板块，或者PS里面的图层），id标识的内容不会在网页中呈现，是为了让自己更快知道div里面的大致内容而设的。"div"指division，"id"指identification。

（20）区隔标签：<span>……</span>

将标签内的内容与同行的其它内容区分出来，结合css可改变其样式，如改变颜色、字体、样式等。

总结：

在慕课上学习了4小时左右，可是写这份东西却花了足足差不多7个小时，这是我看完慕课后结合笔记、回忆及自己的理解写出来的东西，如果有不正确的地方，欢迎指出。写这个笔记的目的不仅是为了帮自己理一下思路，也为了分享给同样一起准备学习前端“幼鸟”们，一起学习和进步。内容非常的基础，但基础也意味着以后会大量重复遇到，更应该重视。

学习的感悟就是英文真的非常重要，如果单纯的记每一个符号和它对应的功能的话，太繁杂了，建议还是要了解相应的英文及意思，记起来会快很多也牢固很多，因此我在每一个标签后都写了对应的英文；另外，在写这篇文章的过程中，发现知乎写文章的功能活生生的就是一个写html的过程啊，只是不是用代码，而是把代码封装成了工具，大家可以观察下写知乎文章时出现的工具条，其基本功能都在我上述提到的标签中可以实现。

因为一些原因，我放弃了计算机考研，在知乎上看了很久，决定从相对简单的前端开始自学。我有计算机学习的基础，并且也比较感兴趣，希望自己能坚持下去并成功转行。至于读研，等将来实现经济独立，有能力照顾好家人之后，我会再去读的，不管年龄多大，都会去！

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

以上是我在知乎写的一篇入门学习笔记，现也分享到这里，原地址：https://zhuanlan.zhihu.com/p/32207302

阅读全文

0 0