本人小白一枚,昨夜入睡之后,突然梦到自己变成了一名超级黑客,拯救天下于水火,发现人类原来都是寄生在母体之内....吹不下去了,一直想学前端,无奈没有时间,现在富裕时间比较多,准备自学一番,本人小学毕业,0基础学习,跟大家一起分享一下学习经验。

如果有志同道合之人,愿与小白一起学习,不慎荣幸,加入到群内探讨人生的学习经验啊~

话不多少,先给大家科普一下HTML历史吧

HTML基础介绍

HTML全称HyperText Markup Language(超文本标记语言),超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,由于HTML的简易型,可扩展性,平台无关性,通用性,使得HTML畅行无阻,经历了HTML2.0,HTML3.2,HTML4.0,HTML4.01,到如今畅行天下的HTML5,W3C推荐标准。

其实,从命名上就可以看出来html是一个文本,它可以用记事本或者写字板编写,当然也可以更专业的工具来编写,比如类似sublime这种专业的工具,可以帮助我们更好的完成学习。当然大家也可以选择Dreamweaver这种可见即可得的工具无需任何基础就可以编写一个html网页。虽然可见即可得简单快捷,且直观,但是生成的代码结构复杂,并不利于多人协作和精准定位等一些比较高级的功能。

HTML特点

  1. HTML不需要编译,直接由浏览器执行。

  2. HTML文件是一个文本文件

  3. HTML文件必须试用html或htm为文件名后缀

  4. HTML大小写不敏感,HTML与html一样


HTML基本结构

如图所示,这就是一个html的基本结构,<html></html>这就告诉浏览器,这是一个html文本,上图包含了head头部信息,body网页内容。

这其中head标签包含了网页的标题(head标签内容不会在网页内显示),关键字等等信息。

网页内容全部在body内。

body后的bgcolor是网页颜色自定义,<P>标签显而易见是网页文字内容,<hr/>标签是水平线,<!--这是注释格式-->网页是不会显示的,大家一定要养成注释的好习惯,方便自己以后调试,也方便团队之间分配交接。

HTML标签属性

语法:

<标签名 属性名1=“属性值” 属性名2=“属性值”...> ......</标签名>            (注意空格)

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

HTML常用标签以及解释

<html></html> 创建一个超文本标记语言文档。

<head></head> (头)设置文档标题和其它在网页中不显示的信息,比如direction方向、语言代码Language Code、指定字典中的元信息、等等。
<BASE> 文档中不能被该站点辨识的其它所有链接源的URL(统一资源定位器)
<LINK> 定义一个链接和源之间的相互关系,比如引用一个层叠样式表(英文缩写:css)、做一个链接到一个脚本、为某文件做一个链接(可打印的版本)、文档特定的工具栏/菜单。
<script></script>脚本语句标签,比如引用一个javascript脚本。
<body></body>文档体,文档的可见部分。
<title></title> 设置文档的标题。
当然,如果不使用以上基本框架结构,而直接使用在实体部分中出现的标记符,在浏览器下也可以解释执行。
内容描述
<h1></h1> 最大的标题(一号标题)
<pre></pre> 预先格式化文本 (英文全称:PREformatted
<u></u> 下划线(英文全称:Underline)
<b></b> 黑体字 (英文全称:Bold)
<i></i> 斜体字 (英文全称:Italics)
<tt></tt>打字机风格的字体
<cite></cite>引用,通常是斜体
<em></em> 强调文本(通常是斜体加黑体、英文全称:EMphasize
<strong></strong> 加重文本(通常是斜体加黑体)
<font size="" color=""></font> 设置字体大小从1到7,颜色使用名字或RGB(中文全称:红绿蓝)的十六进制值
<BASEFONT></BASEFONT>基准字体标记
<big></big> 字体加大
<SMALL></SMALL> 字体缩小
<DELECT></DELECT> 加删除线
<CODE></CODE>程式码
<KBD></KBD>键盘字(英文全称:KeyBoarD
<SAMP></SAMP> 范例(英文全称:SAMPle)
<VAR></VAR> 变量(英文全称:VARiable)
<BLOCKQUOTE></BLOCKQUOTE> 向右缩排(向右缩进、块引用)
<DFN></DFN> 述语定义(英文全称:DeFiNe)
<ADDRESS></ADDRESS>地址标记
<sup></SUP> 上标字 (英文全称:SUPerscript)
<SUB></SUB> 下标字(英文全称:SUBscript)
<xmp>...</xmp>;固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>;固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>;字体 颜色
<font size=1>...</font>;字体 大小等于1(最小)。
<font style ='font-size:100 px'>...</font>;字体 样式等于无限增大(100像素)
格式标志标签
<p></p> 创建一个段落 (英文全称:Paragraphs
<p align=""> 将段落按左、中、右对齐
<br/>定义新行
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 定义列表(英文全称:DefinitionList
<dt> 放在每个定义术语词前(定义术语、英文全称:DefinitionTerm
<dd> 放在每个定义之前(定义说明、英文全称:DefinitionDescription
<ol></ol> 创建一个标有序的列表,默认前面有数字,从数字“1”开始计数,依次叠加,也可以设置为字母或从任何自然数开始计数的列表项 (有序列表、外语全称:OrderedList
<ul></ul> 创建一个无序的列表,默认前面标有圆点,也可以自己设置为none或者其他形状,如空心圆、方块等。(无序列表、外语全称:UnorderedLists
<li> 放在每个列表项之前,若在<ol></ol>;之间则每个列表项加上一个数字,
若在<ul></ul>;之间则每个列表项加上一个圆点
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<MENU> 选项清单
<DIR> 目录清单
<nobr></nobr> 强行不换行(英文全称:nobreaking)
<hr size='9' width='80%' color='ff0000'>;水平线(设定宽度、外语全称:horizontalrule)
<center></center> 水平居中
网页表格标签
由于表格可以精确控制文本和图像在网页中的显示位置,所以在很多网站的主页中一般都使用表格来进行布局。
  表格的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<Table>
 
 <caption></caption>
 
 <tr>
 
 <th></th><th></th>...
 
 </tr>
 
 <tr>
 
 <td></td><td></td>...
 
 </tr>
 
 <tr>
 
 <td></td><td></td>
 
 </tr>
 
 <tr>
 
 <td></td><td></td>
 
 </tr>
 
 ...
 
 </Table>

  <Table>定义整个表格,即表格的内容要放在<Table>和</Table>标记中;在<Table>中的主要属性:border属性显示表格的边框,width, height属性定义表格的大小。<caption>标记符用来定义表格的标题。
  表格的表示以行为单位,在行中包含列。其中:一个<tr>...</tr>标记表示一行;一个<td>...</td>标记表示一列;<th>... </th>定义表头,一般可以不用。
链接标志表格标志
1
2
<a
 href="一个统一资源定位器"></a>
:创建超文本链接。
1
2
<a
 name="书签页"></a>
:创建位于文档内部的书签。
1
2
<a
 href="#书签页"></a>
:创建指向位于文档内部书签的链接。
使用
每种HTML标记符在使用中可带有不同的属性项,用于描述该标记符说明的内容显示不同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。
BGCOLOR(外语全称:BackgroundColor)用于定义网页的背景色,BACKGROUND用于定义网页背景图案的图像文件
TEXT用于定义正文字符的颜色,默认为黑色
LINK用于定义网页中超级链接字符的颜色,默认为蓝色
VLINK(外语全称:VisitedLINK)用于定义网页中访问过的超接链接字符的颜色,默认为紫红色
ALINK(中文全称:活动链接)用于定义被鼠标选中,但未使用时超链字符的颜色,默认为红色
例如:标记将定义页面的背景色为黑色,正文字体显示为白色。
以上属性使用中,需要对颜色进行说明,在HTML中对颜色可使用3种方法说明颜色属性值,即直接颜色名称、16进制颜色代码、10进制RGB码。
直接颜色名称,可以在代码中直接写出颜色的英文名称。如<font color="red">我们</font>,在浏览器上显示时就为红色。
16进制颜色代码,语法格式: #RRGGBB 。16进制颜色代码之前必须有一个“#”号,这种颜色代码是由三部分组成的,其中前两位代表红色,中间两位代表绿色,后两位代表蓝色。不同的取值代表不同的颜色,他们的取值范围是00--FF。如<font color="#FF0000">我们</font>,在浏览器上显示同样为红色。
10进制RGB码,语法格式: RGB(RRR,GGG,BBB) 。在这种表示法中,后面三个参数分别是红色、绿色、蓝色,他们的取值范围是0--255。以上两种表达方式可以相互转换,标准是16进制与10进制的相互转换。如<font color="rgb(255,0,0)">我们</font>,在浏览器上显示字体为红色。
使用图案代替背景颜色,可以使页面更生动、美观。
如今用一张大图当做网页的背景已经成为一种流行趋势,高质量的精美照片和抽象的设计图片能够给网站的外观带去深刻的影响。
可将图像文件“图像.gif”所表示的一幅图像作为页面的背景,若图像幅面不够大,将会将图像重复平铺在窗口中。