标签(空格分隔): 环境


开发环境:

市面上有很多的HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

文件后缀名规范

文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名,网页文件没有区别与区分,html与htm后缀网页后缀可以互换,对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别,唯一区别即多与少一个“l”。

对于开发环境我们不做多余的介绍啊,那么我们正式进入HTML标签的学习吧。 ps:同学们!同学们 如果你想知道整个前端所有的标签有哪一些,那么你可以打开一个百度首页,F12或者右击检查,你就会发现,如图:

HTML标签

HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。

那什么是标签呢?

  1. 在HTML中规定标签使用英文的的尖括号即<>包起来,如<html><p>都是标签。
  2. HTML中标签通常都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个/,如<p>标签内容</p><div>标签内容</div>。开始标签和结束标签之间的就是标签的内容。
  3. 标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么</p>必须放在</div>的前面。
  4. HTML标签不区分大小写,<h1><H1>是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。

注意:不是所有标签都支持互相嵌套

HTML文档结构

我们来学习HTML文件的结构:一个HTML文件是有自己固定结构的。

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

让我们来解释一下上面的代码:

首先,<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

<html></html> 称为根标签,所有的网页标签都在<html></html>中。
<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签; 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在<body>标签中的内容 HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。

前端需要学的东西

HTML注释

无论我们学习什么编程语言,一定要重视的就是注释, HTML中注释的格式:

<!--这里是注释的内容-->

注意: 注释中可以直接使用回车换行

并且我们习惯用注释的标签把HTML代码包裹起来。如:

<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->

HTML注释的注意事项:

HTML注释不支持嵌套。

HTML注释不能写在HTML标签中。

html开发环境的更多相关文章

  1. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  2. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  3. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  4. 在Ubuntu下搭建ASP.NET 5开发环境

    在Ubuntu下搭建ASP.NET 5开发环境 0x00 写在前面的废话 年底这段时间实在太忙了,各种事情都凑在这个时候,没时间去学习自己感兴趣的东西,所以博客也好就没写了.最近工作上有个小功能要做成 ...

  5. Linux安装LAMP开发环境及配置文件管理

    Linux主要分为两大系发行版,分别是RedHat和Debian,lamp环境的安装和配置也会有所不同,所以分别以CentOS 7.1和Ubuntu 14.04做为主机(L) Linux下安装软件,最 ...

  6. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  7. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  8. 使用ubuntu作为web开发环境的一些感受

    从ms-dos,win95,win98,winMe,winXp,vista,win7,win10我都有使用的经历,我使用时间最长的应属winxp,其次是win7,说实话,我觉得这两个系统是微软做的最好 ...

  9. 自定义搭建PHP开发环境

    学习了一段时间php了,因为之前是刚接触php,所以用的是集成安装包(wamp).现在想进一步了解apache.mysql.php之间的关系以及提升自己所以进行自定义搭建PHP开发环境.废话不多说,请 ...

  10. Nova PhoneGap框架 第十章 开发环境

    10.1 Visual Studio + ReSharper PhoneGap程序由HTML.CSS和JS编写而成,这3种语言的编写你都可以用记事本来完成,但显然效率比较低,出错的概率也比较大.一个强 ...

随机推荐

  1. JS 变量是否有值的判断

    var node; …… 判断 node 是否有值,是否为 undefine,是否 null,直接使用两个!!,否定之否定: if (!!node){ .... }else{ .... } 这个条件判 ...

  2. python学习笔记_week10

    一.多进程multiprocessing io 操作不占用cpu,计算占cpu(如1+1),上下文切换耗资源(多线程可能不如单线程快),python多线程不适合cup密集操作型的任务,适合io操作密集 ...

  3. winform 布局、容器

    一.布局 属性:1.Anchor:  绑定控件到容器边缘位置保持不变 注:四周全锁定时控件随界面变化时变大 2.Dock:绑定到容器的边缘 注:下控件到边需先将下控件定义到边再将左右控件新建.到边 3 ...

  4. dockerfile 镜像 指定虚拟机的内存

    dockerfile eg: # sea, FROM frolvlad/alpine-oraclejdk8:slim #add volume VOLUME /tmp #add project ADD ...

  5. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  6. 机器学习进阶-图像特征sift-SIFT特征点 1.cv2.xfeatures2d.SIFT_create(实例化sift) 2. sift.detect(找出关键点) 3.cv2.drawKeypoints(画出关键点) 4.sift.compute(根据关键点计算sift向量)

    1. sift = cv2.xfeatures2d.SIFT_create() 实例化 参数说明:sift为实例化的sift函数 2. kp = sift.detect(gray, None)  找出 ...

  7. UI5-学习篇-1-Eclipse开发工具及环境搭建

    最近研究SAP-UI5好几个月了,将相关学习经历及问题点做个记录. 1.先了解学习资料相关站点 SAP官网:https://www.sap.com/china/index.html SAP开发工具:h ...

  8. DJango之视图函数

    一)Django WEB框架 2) request.path和request.get_full_path() 是请求的路径 3)render:页面渲染 4)redirect:页面跳转 3)模板语法: ...

  9. 2018SDIBT_国庆个人第五场

    A - ACodeForces 1060A Description Let's call a string a phone number if it has length 11 and fits th ...

  10. oracle第二天笔记

    多表查询 /* 多表查询: 笛卡尔积: 实际上是两张表的乘积,但是在实际开发中没有太大意义 格式: select * from 表1,表2 */ select * from emp; select * ...