前端零基础讲解来了！html讲解分享

　　前端职位，在程序员中的地位越来越高，薪资也是越来越高，那么前端好学吗？

　　我可以肯定的对大家说，很好学！

　　零基础学前端可以大致分为：html、css、javascript、jq、各种框架、小程序等等

　　以上几个技能点只要掌握了，不难找一个高薪的工作。

　　那么我们从头开始

　　一、html概述

　　html就是超文本标记语言的简写，是最基础的网页语言。html通过标签来定义语言，代码都是由标签所组成。

　　1.html代码从<html>开始</html>结束，里面分为两部分：

　　一部分是头<head></head>，里面是网页属性信息，它里面的内容会最先加载

　　一部分是体<body></body>，里面是网页显示内容，真正存放页面数据的地方

　　2.html 不区分大小写，是非严谨语言

　　3.大多数标签都是有开始标签和结束标签，其中个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

　　一些特殊的标签，比如换行标签，就没有结束标签，但是为了规范，书写还是要成对要有结束，所以使用<br/>代替<br>。也就是凡是实现单一功能的标签都要在内部进行闭合。

　　hr标签，是特殊标签，直接闭合，表示的是一条直线。

　　4想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，就可以增加了更多的效果。

　　属性与属性值之间用“=”连接，对于属性中的属性值，可以用单引号，也可以是双引号，也可以不用，但是规范里用双引号，同时双引号里面可以嵌套单引号。

　　有的公司的规范是标签大写，属性小写，属性值要双引号。

　　一般tab使用两空格代替，节省宽度与字节数。

　　5.格式：

　　<标签名属性名="属性值">数据内容</标签名>

　　<标签名属性名=“属性值”/>

　　6.操作思想：

　　为了操作数据，需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

　　7.写html css的工具adobe dreamweaver cs3

　　或者使用Sublime Text 3内部可以装插件

8.

　　二。html常用标签的使用

　　1.字体标签（font）

　　颜色除了用了英文单词表示外，还可以用16进制表示，加#前缀

　　2.标题标签（h1,h2,…，h6）

　　3.特殊字符

　　如果需要在网页上显示一些特殊符号，比如< > &等。因为这些符号在html中会被浏览器识别并解释，所以用一些特殊的方式来表示，

　　也就是需要转义，具体需要转义的字符见图0:

　　4.列表标签（dl）

　　<dl>

　　<dt>:上层项目

　　<dd>:下层项目

　　列表中具有项目符号的标签：

　　<ol>:数字标签（a A i）

　　<ul>:符号标签（。。）

　　<li>:具体项目内容标签，此标签只在<ol> <ul>中有效

　　通过type属性更改项目符号，如果想做出来效果更好的列表，比如，黑色圆点用图片表示，就用到css。

　　5.图像标签（img）

　　标签：

　　<img>

　　属性：

　　src（连接一个文件）=

　　alt（表示图片的说明信息）=

　　height=

　　width=

　　border（边框）=

　　，也是闭合标签。

　　6.图像地图（map）

　　也就是可以在图片上点击，点击后显示另一个东西。这种效果需要在工具上的设计界面选择操作，选择源，选择链接。

　　map标签要和img标签联合使用：

　　<map>

　　</map>

　　7.表格标签（table）

　　特点是对数据进行格式化，方便阅读与展示，表格由行组成，行里面是单元格

　　table表格标签 border=bordercolor=width=cellspacing（单元格之间的间距）=“0”（表示重合，看起来只有一条线） cellpadding（单元格中内容和单元格边框的距离）=

　　caption 表格标题标签

　　tbody 默认标签

　　tr 行标签

　　td 单元格标签 colspan（单元格所占的列数，当等于2时表示合并两列）=rowspan（单元格所占的行数，当等于2时表示合并两行）=，单元格都是从左开始数

　　th 也是单元格标签，只不过显示的是标题样式（居中并加粗） <b>xx</b>表示加粗xx

　　早期设计网页的时候，都是画一张大的表格，然后在里面放数据。为防止表格加载到一半，没加载完就显示不了数据，就引入的tbody标签即表体，把行标签放在tbody标签中，

　　网页读完一个tbody就能显示出一个tbody里面的内容，同时也就是有了表头标签thead,表尾标签tfoot

　　8.超链接标签（a）

　　a标签

　　属性：href=

　　1）。使用超链接时要指明服务，或者说是引擎。

　　比如：

　　<a href="http:" target="_blank">xinlang</a>

　　使用的是http协议，http服务，target表示在新的页面上目标是怎么打开，blank表示新建页面打开

　　使用的是mailto协议，邮件引擎，将打开邮箱进行相关操作，其中？subject=hahaha，？后面带的是参数

　　<a href="">dianying</a>

　　使用迅雷协议，启动迅雷服务，因为迅雷协议已经在注册表里注册了，所以可以启动。

　　默认，也就是没有加协议，则使用的是文件服务，启动的是文件引擎，也就是打开本地文件。

　　2）。使用超链接，实现页面内跳转（专业词，锚）：

　　<a name="top">顶部位置</a> top就是标记名，打标记

　　<a href="#top">回到顶部位置</a> #表示不启动服务，表示回到标记的位置

　　注意，访问网站，即http时，一般是先访问本地的hosts文件得到ip地址，如果没有再去dns上找Ip,得到Ip后再访问。

　　3）。图片也是可以变为超链接的

　　也就是把超链接的内容改为图片即可，

　　9.框架标签（frameset）

　　框架标签不可以放到<body>,一般为了代码的可读性，会放到head和body之间

　　框架标签的用途，早期比较多，现在用表格的更多，

　　用途在于由于一个窗体只能显示一个资源（一个html或者一个图片），同时可以把网页不变和变化的区分出来，所以用框架划分出几个部分，每个部分显示不同的内容，把不变的和变的分别进行显示，这样一个框架出现就可以使得一个窗体显示多个资源，每个部分显示不同的资源。还可以带来复用的方便性，比如框架中的一部分放的是Logo，则所有页面都可以用这个部分。

　　frameset 标签中用 rows来划分几行，用cols属性来划分几列（可以一行中再用frameset划分几列出来），行列之间的占比用百分号表示，多余的可以用*号代替

　　其中超链接打开资源的显示位置可以指定为某个子窗体，只要让a标签的target属性等于子窗体的名字即可。（name属性与id属性的区别？在表单中name用于包含一个整体，id用于被js操作，同时，在一个页面中，name可以相同，id要唯一）

　　代码见frame文件夹framedemo.html

　　10.画中画标签（iframe）

　　可以在窗体的任意位置上打开一个区域并链接资源进来，也就是可以在页面上随意挖个洞去显示一个资源。

　　其中src属性表示的就是链接的资源，除了可以是html资源文件，也可以一段js程序（一个。js文件）height width 等属性可以改变区域大小，都等于0则看不到，但是还是会打开src指向的资源，

　　也就是什么都看不到的情况下，打开了资源（程序，可能是恶意的程序），

　　同时主要iframe中的内容无论是页面还是鼠标放上去，都不是显示的

　　代码如下：

　　<iframe src="" height=0 width=0>这是画中画标签，您如果看到该文字，很遗憾，您的浏览器不支持该标签</iframe>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60032.shtml