这是在网上发表的第一篇文章,从来不喜欢在网上发表言论、文字和资源,是个名副其实的“伸手党”,在“伸手白拿”的多年间,也曾想过要贡献些什么,但总是害怕自己分享出来的东西不够好,于是放弃。如今,终于下定决心要开始转变,希望自己也能逐步成为一个可以给别人带来帮助或启发的人。
-------------------------------------------------------------------------------------------------------------------------------------------------
以上是题外话,下面是正文。
首先,在网上初步了解,学习前端,最基础的是要掌握好html、css及javascript。学完基础后,再决定下一步还要再学习些什么或做个小的项目练习。
html承载的是一个网页上最原始的元素,包括文字、图片、视频等。但是,有了这些内容是不够的,它还要以一定的形式呈现出来,才能吸引到人。这就要用到css了,通过css可以改变这些元素呈现的样式,包括字体、颜色、背景、边框等,让原本枯燥的内容看起来更加美观。到此为止,仍然是静态的呈现,如果要让页面更加生动,就需要给页面添加动画和交互,让人可以和你的页面“互动”,javascript可以很好的做到这一点。
用人来比喻,就再恰当不过了,html就像人身上的各个部分,头,手,脚,身体,有了这些,你就是一个人了,接着你需要穿上各种衣服(css),包装好自己,再走出家门去接触社会,但一个静止不动、木讷的人,是很难受欢迎的,你需要会走会跳,别人和你说话交流你要会回应(js),至于如何记住别人说的信息,如何处理这些信息,又要如何组织信息回应,这就是后端要研究的事情了。
今天的计划是把html基本了解一下,花了4个小时左右在慕课网学习,感觉讲的还是很基础,很有条理的,但深度不够,要深入学习还是要上网买相关的书籍。
以下是今天的学习的html内容:
1、html的基本结构
<!DOCTYPEHTML> <!--标准网页声明,为固定格式,置于所有代码最前面 end-->
<html> <!--根标签,为固定格式 end-->
<head> <!--定义文档的头部,为固定格式end-->
……
</head> <!--head对应的结束标签,为固定格式 end-->
<body> <!--定义网页的主要内容,如文字,图片,视频等 end-->
……
</body> <!--body对应的结束标签,为固定格式 end-->
</html> <!--html对应的结束标签,为固定格式 end-->
html 的基本结构一般都是自动生成的,只做一个基本的了解,知道主要有哪几块,功能是什么即可。注意所有结束标签均比开始标签多一个“/“ 。另,html不区分大小写,但一般使用小写。
2、注释:<!--……end-->
不管是用什么语言编程,注释都是最重要的,一定要养成写注释的好习惯,关键的注释不仅可以让别人一眼望去明白你写的代码的架构,更可以让自己有清晰的思路组织代码,某一日回过头来看也可以快速看懂。
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)空格标签: ;
在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下期末各班成绩单"> <!--表格摘要,不显示在浏览器中end-->
<caption>各班均分</caption> <!--表格标题,一般放在table第一行end-->
<tr> <!--表格的行,有几个tr就有几行end-->
<th>班级</th> <!--表头,会加粗,置于第一个tr内end-->
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>一班</td> <!--表格的列,有几个td就有几列end-->
<td>85</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>二班</td>
<td>86</td>
<td>88</td>
<td>87</td>
</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