整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天开始小编将会给大家讲解HTML的入门知识以及做项目会遇到的某些问题以及如何解决此类问题的方法。说道网页设计，HTML是我们必不可少的一部分。基础网页的构成，无论怎么变幻，都是由原声的HTML代码组成构成网页。
下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。
一、什么是HTML。
HTM不是一段编程语言，而是一款标记语言，本身不能显示在浏览器中。经过浏览器的编释和编译，才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的文本显示功能到多功能互动，已经成为了一款非常成熟的标记语言。
二、HTML文件的基本结构
<!doctype html>
<html>文件开始标记
<head>文件头开始的标记
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<title>XX系统</title>
</head>文件头结束
<body>文件主题的内容
</body>文件主题的结束
</html>文件结束的标记
这里主要说明title和meta(元信息)
<!--说明文件头-->
<title>XX网站</title>
<!--添加作者信息-->
<meta name="author" content="_永不言弃" >
<!--设置网页文字及语言 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<!--设置网页定时(20秒后)跳转-->
<meta http-equiv="refresh" content="20;url=index.html">
三、HTML主要常用标签
3.1标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.2 标题字对齐属性align
默认情况下，标题文字是左对齐的。在网页制作过程中，常常需要选择对其他的方式，这时我们就需要用到align属性。
3.3 段落标记p
段落标记是文档中最常见的标记，<p>用来起始的一个段落。
3.3 换行标记
换行标记<br>作用是在不另起一段的情况下将当前文本强制换行。
3.4 不换行标记nobr
<nobor>表示的是不换行的标记</nobor>
3.5 水平线
<hr/>
四、建立超链接
与自身网站页面有关的连接被称为内部连接
4.1绝对路径
绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则连接不会失效。
4.2相对路径
为了避免绝对路径的缺陷，对于在同一站点之中的连接来说，使用相对路径是一个很好的方法。
4.3 内部连接
<a href="# target="目标窗口的打开方式 " >
属性值
含义
-self在当前页面中打开连接
-blank在一个全新的空白窗口中打开连接
-top在顶层框架中打开连接，也可以理解为在根框架中打开连接
-parent在当前框架的上一层里打开连接
4.4 锚点连接
锚点到本页面中的位置
<a href="#1" >商品名称</a>
<a href="#2" >产品特点</a>
<a href="#3" >产品规格</a>
<a neme="1">XX商品</a>
<a neme="2">XX产品特点</a>
<a neme="3">XX规格</a>
锚点到其他页面的位置
<a href="index.html#1"></a>对应连接到index.html中name=1的位置
4.5 连接到外部网站
在设置友情链接时，需要打开HTTP协议进行外部连接访问。
<a href="wwww.baidu.com" >百度</a>
4.6 连接到E-mail
<a href="mailto:邮件地址">。。。</a>
4.7 连接到FTP
FTP代表文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。
大部分FTP网站需要使用用户名和密码来登录。
当然还有其他的一些连接方式，例如文件下载，连接到Telnet等。这些都会可以用a标签实现。
HTML基础就先讲到这里，后面退出DIV设计网页格式已经网页分框的实现。
大家在浏览网页的时候，是否思考过这样一个问题：怎样才能制作出一个网页呢？制作出一个网页是很简单的，只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页，今天我就为讲解HTML的入门及结构组成。
一、什么是HTML?
1、在我们开始学习HTML之前我们需要知道什么是HTML？
HTML的全称为Hyper Text Markup Language，中文名称为超文本标记语言，阅览方式为网页浏览器，同时HTML也被称为网页。
2、一个简单的HTML文档
二、HTML编辑器
我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。
1、记事本
① 创建一个TXT文本
② 输入HTML代码
③ 点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。
④ 然后双击这个文件运行。
运行结果
2、专业编辑器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
这其中我比较推荐HBuilder这款编辑器，界面简单，编辑起来很快。
三、HTML的组成部分
在上面的案例中我们可以看到HTML是由头部（head）和身体（body）所组成的。
1、头部（head）
通常包含标题（title），也就是一个网页的名称
网页标题
2、身体（body）
body的部分是整个网页的重要内容部分，让人一眼就浏览到这个网页的内容，可以插入文本、图片、多媒体等内容。
四、HTML元素
l HTML元素是指以开始标签起始，以结束标签终止的元素：元素内容即为开始标签与结束标签之间的内容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素，在上面的案例中就有六个元素。
l 也有部分元素只有开始标签，例如<br>,以开始标签的结束而结束。
五、HTML的属性
l 一般来说HTML的属性就是HTML元素的属性，属性可以在元素中添加附加信息。
l 属性总是以名称/值对的形式出现，比如：name=”value”。
l 属性一般描述于开始标签。
l style中会有更多的属性。
六、HTML格式化
HTML可定义很多供格式化输出的元素，比如粗体字和斜体字。
HTML文本格式化标签
标签 | 描述 |
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
运行结果示意图
HTML“计算机输出”标签
标签 | 描述 |
<code> | 定义计算机代码 |
<kdd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML引文、引用及标签定义
标签 | 描述 |
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目 |
七、HTML超链接
超链接可以是图片、文字、多媒体也可以是一个网址
示例：
结果：
点击带有下划线的两个字就可以进入某度的网站
八、HTML CSS
1、CSS是一种层叠样式表，可以修饰html元素的样式并可以精确地进行排版
2、CSS有三种方式：
l 内部样式，在HTML元素中使用“style”属性
l 内部样式表，在头部<head>区域使用<style>元素来包含CSS
l 外部引用，引用带有后缀css的文件，示例：
html文档
css文档
如果你看到了这里，就说明你已经打开了制作网页的大门啦~
文来自为图灵社区与CSS魔法的访谈CSS魔法， 原名张鹏，国内知名CSS技术专家，《CSS 揭秘》译者，QCon 讲师，CSS Conf 讲师，前百姓网前端架构师。
CSS魔法：对一个专业的 CSS 开发者来说，首先，CSS2 的核心知识必须完全掌握。以《CSS权威指南》（第三版）为例，除了 “声音样式” 之外，这本书的所有内容都是应该透彻理解的。即使记不住某些冷僻属性的名称与行为，也需要知道在哪里可以快速查阅。
接下来，关于 CSS3，很多同学都问过我这样一个问题：“魔法哥，现在浏览器都支持 CSS3 了，我跳过 CSS2 直接学 CSS3 可以吗？”
在回答这个问题之前，我们需要先搞清楚 “CSS3” 到底是什么。读过《CSS揭秘》这本书的同学应该都很清楚了，“CSS3” 是一个俗称，并不是 W3C 的官方术语。基本上它是CSS2 之后更新或新增的 CSS 规范模块的合称。
实际上，CSS3 相对于 CSS2 并不是类似软件版本更替那样的升级。CSS2 的全称是 “CSS Level 2”，后续的 CSS 规范并不是完全以替代品的形态出现的，某些 Level3 的 CSS 规范模块（或新增的规范模块）往往是基于 CSS2 来扩展的。
因此，对于 CSS 学习者来说，如果买了一本只讲 CSS3 新增内容的教程或参考书，那还需要搭配 CSS2 的书来看。事实上，由于篇幅所限，市面上绝大部分以 “CSS3” 为卖点的图书确实都不会重复讲解 CSS2 的内容。看到这里，相信上面的问题在大家心中已经得出答案了吧。
魔法哥自己的学习路径是这样的：
如果新入门的同学面对庞杂的 CSS 体系感觉无从下手，不妨参考这条路径。
CSS魔法：01.首先，推荐大家使用 CSS 预处理器。由于 CSS 并不是编程语言，并不具备抽象能力，当网站的规模发展到一定程度之后，原生 CSS 很难解决抽象与复用的问题。而预处理器则正好弥补了 CSS 在这方面的不足。
即使你不打算学习预处理器的特有语法，甚至还有些排斥，那也不妨尝试利用它的模块机制来拆分和组织代码。由于预处理器大多兼容 CSS 原生语法，因此你可以保持原来写代码的习惯，仅利用预处理器在模块化方面的功能。
对于多人合作的团队来说，通过模块来拆分代码尤为重要。虽然引入预处理器会要求你在工作流中加入构建环节，但我认为这个成本是完全值得的。
02.做好 CSS 代码的 “分层”。我设计的 CSS 架构通常都会由“Normalize + Reset → 通用基础样式 → UI 组件 → 页面通用的布局框架 → 单个页面的布局和样式”这几个层级构成，越往左越靠近架构，越往右越靠近业务。
划好层级并把代码写到正确的层级去，可以带来很多好处：在团队分工上，可以把不同层级的代码交给不同的人来开发和维护，相当于关注点分离；从架构角度来看，也可以实现 “控制复杂度” 这一重要目的。
03.善用工具。比如通过 Lint 程序来保障代码规范的执行，通过构建工具来让重复劳动尽可能自动化，通过 Autoprefixer 这样的工具来加工或生成代码，等等。俗话说，磨刀不误砍柴工，多看多听多试，用开放的心态去了解和尝试新工具，往往会有不错的收获。
如果想问 “有哪些实用的 CSS 特性”，那我觉得至少要提一下 Flexbox。它是 CSS3 引入的更强大、更易用的布局方式，而且我们在移动端已经可以安全地使用 Flexbox 的基础特性了。其它的特性，比如高级选择符、渐变、动画等高级特性，也非常有价值，我在编写 UI 框架时都有实际应用。
此外，大家可能还想了解在编写 CSS 时需要掌握的原则和思路。这里我会推荐《CSS揭秘》这本书中的“CSS 编码技巧”一节。我一直想写篇文章来讲述自己多年积累的 CSS 经验，但一直苦于找不到合适的切入点，总怕挂一漏万。而当我读到这一节时终于释然——原来已经有人帮我做了这件事情！随后我也将它亲手翻译了出来，也算了却了一桩心事。
CSS魔法：确实，近些年前端领域的新技术、新工具、以及新的实践方式都层出不穷，稍不留神就会有落伍的感觉。而每个人精力都是有限的，面对这样的局面，难免会有一种疲于奔命的压迫感。
我自己的应对方式是抓住核心，放弃自己很难精通的、一时用不到的、或者对当下想做的事情价值不大的技术方向。比如一路以来，我放弃了富媒体方向的 Flash，放弃了图形与游戏方向的 Canvas 和 WebGL，放弃了单页应用方向的 MV*，放弃了语言方向的 FP ，等等。
当然这些 “放弃” 都是战略性的，而不是永久性的。毕竟精力有限，不可能面面俱到。不过，一旦某个方向变成自己必须攻克的战略要地，那我也必然会义无反顾跃入新坑。
除了在技术范畴内作取舍，我还会把一部分精力放在 “人” 身上——就是写代码的这群人。个人英雄的时代一去不复返了，单打独斗能力再强，也难成气候。因此，帮助身边的小伙伴快速成长，打造一支梯队完备、技能互补的前端开发团队，往往更具现实意义。有些时候，这也可以成为一种 “突破瓶颈” 的解决方案——每当团队里的小伙伴攻克了某项新技术时，我都可以宽慰自己：我不会，没关系，有小伙伴可以顶上！
CSS魔法：哇噢，这个问题完全是面试题的既视感啊！好的，我来好好回答一下，重温被面试的感觉。
根据 Web 标准的 “分离” 原则，网页界面由三层构成：结构层、表现层、行为层。这三者在技术上分别由 HTML、CSS、JS （JavaScript）来实现。大家都知道有句话叫 “术业有专攻”，在网页上也是一样，不同的层应该由不同的技术来实现。
在近些年，CSS 的能力得到了不少提升，比如：hover 伪类的增强以及 :checked、:target 等新伪类的出现，令原本只能由 JS 实现的交互功能也可以用 CSS 来实现了。这意味着，在某些场景下，这两者的功能有重叠的地方。
不过从原理上来说，CSS 只具备修改渲染树的能力，无法修改 DOM 结构（“渲染树” 是指 DOM 树在应用样式之后产生的、用于渲染网页界面的数据模型）。CSS 可以通过 display、visibility、opacity 等属性来控制元素的显隐，但无法把元素从 DOM 树上删除或移动，也无法创建新的 DOM 元素。这是 CSS 的能力边界。
虽然这两者的功能有一些重叠，但它们并不是互斥的。JS 和 CSS 是可以合作的，而且我们应该擅用这种合作关系，发挥各自所长。举例来说，CSS 的声明式特性比较简单易懂，在管理样式方面更加易于书写和维护。因此，在实现某些动态效果的时候，我们可以把不同状态的样式以类的形式写在 CSS 中，然后让 JS 通过切换元素的类来实现样式的变化。
CSS魔法：简单地说：不可能。
首先说一下 “UI” 这个概念。UI 并不是静态的布局和样式，不是设计师发给我们的 PSD 图像。UI 是用户界面，它的核心是交互，而交互需要由 JS 来实现。交互以及交互传达出的用户体验，才是眼下前端的核心价值。
接下来，我们回到实际的开发场景中来看待这个问题。如果是团队作战，那么团队中的个体当然可以有所侧重和取舍。在整个技术栈中，自己放下的某个环节只要有小伙伴可以顶上，那就没啥大问题。不过如果是打算通吃前后端的全栈工程师给自己做职业规划，那么 JS 是绕不开的。
CSS魔法：这要看你给自己的定位是什么。我认为技术工作者大致可以分为两类。第一类人单纯被技术本身所吸引——相信我们都有感触，技术本身就有一种迷人的美！而第二类人把技术作为手段，他们学习技术的最终目的是通过技术来推动一些事。这两种技术人都有各自合理的出发点，并没有孰对孰错之分。
那么，如果你是第一类人，那你对自己的规划和定位必然是某个领域的技术专家。所有有价值的技术都应该被你吃透，而且相信你自己也会有源源不断的强烈兴趣，去把这些技术掰开了、揉碎了研究到极致。
而如果你是第二类人，那么 “知其所以然” 就不是必须的了。尤其是在团队中，你可以把 “知其所以然” 的任务交给技术专家，把有限的精力投入到更适合自己的地方去。
CSS魔法：我这些年写博客始终以初中级开发者作为主要受众，创建的“CSS魔法” 微信公众号也仍然关注前端初学者群体。因此可以聊的经验有很多，最重要的应该是——“系统学习、打好基础”，因为真正基础的东西是不会过时的。
我也曾模仿别人网站的代码，或是在网上收集别人发表的各种技巧，然后把找来的一句句代码拼凑在一起。虽然这种方法通常也可以生效，但我完全不知其所以然，那些代码片断对我来说无异于外星人的咒语。由于无人指导，无法系统地学习知识，当时的状态就像是在黑暗的迷宫中摸索一样。
当时在书店里能找到的相关书籍也无非是一些迎合国人 “短平快” 心理的快餐书，什么“现学现用”“代码速查 300 例” 之类。我是一个喜欢打破沙锅问到底的人，这些没头没尾的所谓技巧显然无法满足我的好奇心，失望而归。
几年之后，以图灵为代表的科技图书公司开始引进国外的经典教程和参考书。当《精通CSS》《JavaScript 高级程序设计》这些著作捧到我手上时，你可以想像我当时有多么欣喜若狂。
在疯狂求知的过程中，我发现，前些年我在网上费尽辛苦收集到的珍稀黑魔法，其实在书里都有着更加全面和系统的讲解。当我稳固地掌握了 HTML、CSS、JS 的基础知识之后，我惊讶地发现，原先那些看似神奇、背都背不下来的外星咒语，早已融入我的血液，成为信手拈来的本能。
现在的孩子们是幸福的，你们生活在一个信息通畅、资源富足的时代。因此不需要眼巴巴地乞求 “大神们” 施舍只言片语的秘技，只要多读几页书，你也可以成为别人眼中的大神！
希望这样的“CSS魔法”能对大家有所帮助！
*请认真填写需求信息，我们会在24小时内与您取得联系。
