前端HTML与CSS入门-一份媲美黑马培训班2万学费的知识干货

前端HTML与CSS入门&移动端布局-媲美黑马培训班2万学费的知识干货

---

作者 | 苏察哈尔灿
声明 | 原创作品 转载需注明出处,并附跳转链接.
寄语| 愿我们一马平川 ,我的江湖有酒 ,有诗有歌有远方,还有你.

感恩 | 如有误笔浅薄之处 ,望不吝指出 ,自当万分感谢!

---

总目录:

HTML部分

CSS部分

---

一: 初识HTML

	1. HTML的定义

	2.何为"超文本"

	3. 何为"标签"

	4. 何为"元素"

二: 初识浏览器

	1.前端开发常见的浏览器

    2.浏览器的内核

	3.网页与网站

三: 字符编码

	1.ASCII码

	2.GB2310

	3.GBK国标码

	4.UNICODE万国码

	5:UTF-8/UTF-16

四: 从写代码到浏览器展示页面之间,到底发生了什么?

	1.何为"URL"

	2.URL的组成:

	3.常见的协议

	4.IP的组成

	5.域名与DNS

五: 常用的前端开发工具

	1.VsCode
	
	2.Sulime

六: HTML主干知识

	1.搭建HTML骨架
	
	2.常见的标签
	
	3.表单
	
	4.表格
	
	5.列表

---

初识HTML

(一):何为HTML:

HTML:英文Hyper Text Markup language首字母的缩写,中文我们一般叫它超文本标记语言.

HTML的超文本与HTTP(Hyper Text transfer Protocol)的超文本是一样的,所谓超文本有两层含义:第一层:超越文本的限制,第二层:超级链接,可以实现页面的跳转.

标签由一组组<>这样的尖括号组成.

标签分为单标签和双标签,单标签即一对尖括号组成

诸如 ,双标签由开始标签和闭合标签组成,诸如<a></a>

双标签内可以插入文本内容.

内容加上标签便构成了元素.

---

初识浏览器

一名前端开发人员必须了解的四款市场主流浏览器:

前端的代码是由浏览器负责解析渲染并显示到页面上的,没有浏览器的前端代码只是一坨字符每一个前端开发人员都有必要充分的了解浏览器.

1: 谷歌浏览器 chrome: 谷歌浏览器在浏览器的市场占有份额超过百分之50,是前端人员电脑里必备的浏览器之一,自带的检查工具(快捷键F12)可以调试页面的结构,样式和与用户的交互效果.

浏览器的内核相当于电脑的cpu,是执行程序的大脑部分.谷歌浏览器所用的内核为blink,blink内核是在苹果浏览器(safari浏览器)内核webkit上进行二次开发的内核,一经推出,迅速风靡,现在已占有绝大的市场份额

2:苹果浏览器 safari.苹果浏览器内核为webkit,大多数国产浏览器,以及风靡的谷歌浏览器内核blink都是基于webkit内核的二次开发.

后两款欧朋浏览器和火狐浏览器已经逐渐没落,作为了解即可:

字符集:

起初一群美国人试图用八个晶体管来表示各种状态,

每个晶体管都有打开和闭合两种状态,那么八个晶体管共有2的八次方即128种状态,美国人试图用这128种状态表示各种所需要的功能.

这128种状态所对应的关系即成为ASCII码.

而128种状态这种数量关系被定义为一个字节,一个字节对应8个bit,一个bit对应了一个晶体管的两种状态,即打开和闭合的其中之一状态.

用数字表示这种打开和闭合状态,即0对应闭合,1对应打开.

ASCII码并不是从1开始编写的,而是从0编到了127,共计128

伴随着互联网的普及,除了美国人以外需要使用代码来编写电脑程序,但原有的ASCII码只兼容了美国人的语言,所以外国人便开始在ASCII码的基础上做拓展,一直扩展到第255位,这部分的编码叫做扩展字符集

计算机普及到中国的时候,犯了难,中文博大精深,中文多如牛毛,原有的字符集根本表示不了中文,于是开始再做扩展,所做出来的编码被称为GB2312

后来发现GB2312还是不能兼顾所有的中文字符,依然有许多中文不能被很好的表达出来,于是再做拓展,所做出来的编码被称为GBK,又称为国标码.

计算机行业又再不断发展,各个国家之间的交流势不可挡,但是问题出来了.

每个国家都有自己的暗号,编码.但你自己的暗号我怎么知道?就好比跟美国人讲中文,他没学过中文根本听不懂你在讲什么,而学习的成本太高了,交流的成本也水涨船高.沟通成为了大问题.

岁月荏苒,一个国际组织出现了,他将各个国家的编码暗号做了整理与统一,组成一张表,这种表就被称为unicode编码,又称为万国码.多形象,万国的编码.

原来在编写ASCII码时,只用了1个字节便可对应一个英文,在unicode中汉语由于已经没有位置了,必须用两个字节才能表示一个汉字,由于这种表示的原因,unicode编码规定每个字符由两个字节表示,

但问题是

假如一篇文章中英文混杂,原本可以用一个字节就表示的英文,被强制两个字节表示,会造成极大的浪费.

为了解决诸如此类的问题,便在unicode编码的基础上,进行了再编码,通过复杂的技术解决了这些问题,这种解决方案叫做UTF-8,除了UTF-8解决方案外,还有UTF-16等方案.其中各有特点.

四: 从写代码到浏览器展示页面之间,到底发生了什么?

假设我们已经是一名成熟的软件工程师了,当写完代码之后我们应该做些什么?又会发生些什么有趣的事情呢?

当我们写完代码后,比如写了完了一个淘宝的网站,我们想要让互联网上的其他用户访问这个网站,就需要把它存放在Web服务器中,有些大公司比如BAT是有自己的Web服务器的,如果我们没有自己的服务器,就需要租赁他人的服务器,在其内开辟一个小空间,以供其他用户获取这些文件.

记住,服务器也是一台计算机.

当用户试图访问你存储在Web服务器的文件时,他必须键入一个网址,也就是url,即统一资源定位符,url由三个部分组成,比如我们熟知的http://www.baiddu.com,它的URL由协议部分,域名/IP部分以及资源路径部分组成

HTTP就是他的协议部分.HTTP全称超文本传输协议,常见的协议还有https,多出来的s即safe,安全的意思.如其所意,https协议比http在网络传输中更加安全.

其他常见的协议还有FTP,file,分别是网络文件传输协议,本地文件传输协议.

当我们想要在网络上给WEB服务器发送自己的Html,css文件时会用到FTP协议,当我们打开本地文件夹时,会用到file协议.

baidu.com即使百度的域名,但实际上我们并不是访问域名所对应的网站的,它比我们想的要复杂一些,在域名和Web服务器之间还有一层,它就好比80年代的接话员,打电话是不能直接接到联系的对象的,需要接话员转接,电话才能打通.

这一层也是由服务器组成的:DNS服务器.

我们每台计算机在互联网中都有唯一的标识,好比身份证一样,独一无二.诸如127.0.0.1这样的格式,当我们试图访问另一台计算机时,必须键入那台计算机的IP地址,这也不难理解.你不知道比人家在哪里,怎么访问?

但这样的数字组合过于抽象,难以记忆,于是聪明的程序员建立一套系统来形象的记忆这些IP地址,那就是域名管理系统,DNS.

每一个域名对应一个IP地址,一一映射,当你输入了百度的域名,DNS会帮助你转接到域名对应的IP地址那里从而实现访问.

而URL最后的部分,资源路径的部分,就是存储在Web服务器中你说需要文件的路径.

总结一下,当我们写完代码,然后存储到Web服务器之中.其他的用户需要到这个服务器中提取文件.他们在浏览器中输入了完整的网址,即URL,浏览器帮助链接DNS服务器,DNS服务器转接到Web服务器.最后用户的浏览器终于拿到了你所写的代码.于是浏览器的内核开始运转,解析,渲染,最终把一个完整的页面呈现在用户眼前.

常见的开发工具

简单介绍两款前端人员必备的开发工具

(一):VsCode:英文visual studio code.为微软公司开发,前端开发的主流工具之一,
1:安装汉化插件:打开VsCoDE,在软件左侧,最下边的那个按钮,是拓展商店.打开拓展商店,搜索chinese,安装该插件可以汉化该软件

2:open in broswer插件,同样的在拓展商店搜索OpenInBroswer 可以安装该插件,其功能是在代码区右键弹出的菜单框中出现OpenInBroswer选项,点击后会启动浏览器运行代码,在浏览器中预览执行的效果,也可以通过浏览器自带的调试工具测试代码

3:在保存文件时候自动格式化:自己写的代码总是歪歪扭扭,难看的不行.实现这个功能便可以在Ctrl+S保存时自动格式化.具体流程如下:

第一步:打开设置,在顶端的搜索框中搜索"settings.json"
第二步:添加如下代码"editor.fomatOnType":true,"editor.fomatOnSave":true
如果出现爆红,请检查原有最后一行代码的末尾是否添加了逗号.

4:CSS文件的格式化,添加了3中的代码中只能在Html文件中实现自动格式化,如果想在CSS文件中有格式化功能请安装插件"beautify",安装后在CSS页面右键点击,在弹出的菜单框中即可选择格式化功能.

(二):Sublime:该软件不自带语法提示的功能,也是需要插件才能实现.在任务栏中单击"首选项",选中PcakageControl 选项.随即在弹出的搜索框中继续搜索"install package" 软件可能会卡顿一会,稍等片刻后会再弹出一个搜索框,在其中搜索"Emmet"回车,安装成功重启电脑便可使用.shift+! 一键生成HTML骨架.

HTML骨干知识

(一) :HTML的骨架:

<!DOCUTYPE html>
<html>
	<head></head>
	<body></body>
</html>

其中第一行标签的意思是指定了HTML的版本.html作为一种标记语言,不断发展.现在已更新到H5的版本

所有的HTML结构都应该包含在<html></html>双标签中,html语言被包在html标签中,一点毛病都没有.

head标签中放一些较为重要的内容,比如引入外部css文件,指定标题等等 展示如下:

<link rel="stylesheet" href="index.html">
<link rel="shortcut icon" href="favico.ico">
<meta name="viewport" content="width=device-width , initial-scale=1.0, user-scalable=no , minimum-scale=1.0 , maximum-scale=1.0:">
<meta name="description" content="">
<meta name="keyword" content="">
<base target="_blank">

body标签中置放都是最核心的内容,有关结构的标签.下边为大家介绍HTML中常见的标签:

(二):HTML常用标签

(1):文本类标签:

<p>在此标签中插入一段文字,每一段文字用一个p标签间隔开</p>

<!-- hr标签英文为horizontal,意思为水平线.它是一个单标签,可以创建出一道水平分割线 -->
<hr />

<!-- br标签英文为break,他可以使文本强制换行 -->
<br /> 

<!-- x可以是1-6的任一数字,标题标签,在其中包含的文字有字体粗体效果,以及字号增大的效果-->
<hx></hx>

<!-- 文本格式化标签 -->
<!-- 两组文本字体加粗标签,使用方法一样,但更推荐后者 -->
<b></b>    <strong></strong>

<!-- 两组文本字体倾斜标签,使用方法一样,但更推荐后者 -->
<i></i>    <em></em>

<!-- 两组删除线标签,使用方法一样,但更推荐后者 -->
<s></s>    <del></del>

<!-- 两组下划线标签,使用方法一样,但更推荐后者 -->
<u></u>    <ins></ins>

<!-- 预文本格式化标签:可以保留原有文本的样式,使用较少 -->
<pre></pre>

(二):图像类标签:

<img src="这里填图片的路径">

<!-- 图像标签有几个常见的属性如下: -->
<img src="" alt="alt属性可以指定当图片加载失败后,显示指定的内容">

<img src="" title="title属性可以指定当光标悬停在图片上时显示的提示文本">

<img src="" width="" height="宽高属性可以限制图片的宽高">

<img src="" border="border属性可以为图片指定一个实线边框" >

<!-- filter 滤镜属性可以为图片设置一个模糊的程度,也就是一种马赛克 -->
<img src="" style="filter:blur(px)" >

(三): 链接标签:

链接标签的写法为:<a></a>,是一组双标签

1:外链接:
比如百度的链接:<a href=“http://www.baidu.com”></a>

外连接必须写完整的URL,如果不写协议部分,简写成这种格式<a href=“www.baidu.com”></a>,则会导致从本地寻找,其结果就是找不到地址.

2:内连接:
内连接在href属性中填写的是路径.

根目录是指当前正在编写的文件所在的文件夹目录,

相对路径是指从当前正在编写的文件根目录出发,目标文件的路径.

绝对路径是从磁盘角度出发的一个完整的文件地址,比如C:\ProgramFiles\Google\Chrome. 这个从C盘角度出发的完整路径,就是我的谷歌浏览器在我的电脑上的绝对路径

3:空链接

<!-- 空连接的两种写法 -->
<a href="#"></a>
<a href="javascript:;"></a>

4:锚点链接

锚点链接可以实现点击便跳转到指定位置的作用。比如本篇博客，当你点击目录中的“HTML主干知识时” 就会跳转到相对应的文本位置。

格式如下：

<a href="#test">点击，并开始跳转的地方</a>
<h3 id="test">需要跳转的目的地</h3>

5：target属性

<!-- 浏览器默认链接打开新