由开发者和作者组成的开源社区；推动web发展，

　　MDN(Mozilla Developer Network) 维基，共同维护做贡献；

　　需要使用到github账号进行验证，以此再创建MDN账号；

HTML入门：

　　HTML（HyperText Markup Language）标记语言，用于告诉浏览器如何访问构造您的访问网页，由一系列的元素组成。对不同内容进行包装使其以某种形式显示；html标签不区分大小写，从可读性和一致性角度来说，最好是小写。元素主要包括开始标签、结束标签、内容。前三者合起来就是元素

用于单词强调可以使用<strong></strong>将其嵌套再p元素里。所有标签正确嵌套。

　　块级元素和内联元素

　　块级以块呈现，相对于前面的内容会出现在新的一行，其后的内容会被挤到新的一行展现，块级多用于展示结构化的内容，段落，列表，导航菜单，页脚；一个块级元素不会被嵌套在内联元素里，但是可以嵌套在其他块级元素里；

　　内联元素通常出现在块级元素里，包裹文档内容的一小部分，不会导致换行，通常出现在a、em、strong元素里；

　　空元素     指那些不含有结束标记的标签，只有一个标签；通常用来插入一张图片或者嵌入一些东西，empty elements 也叫void elements

　　属性，元素拥有属性，包含了元素的额外信息，不会出现在实际内容中，元素和属性之间必须有个空格，属性之间也应有空格，属性后面紧跟着一个‘=’符号，属性值有引号引起来；

　　a 也叫锚，使得被该标签包裹的内容成为一个超链接，其拥有的属性有：

　　　　href:这个属性用来声明超链接的web地址，当被点击后跳转到指定的web地址;

　　　　title:标题title属性，鼠标悬停到元素上会显示title信息；

　　　　target:用于显示链接的浏览上下文，值为_blank则将在新标签页显示链接，默认是当前页

　　布尔属性   也叫没有值的属性称之为布尔属性，只能有跟它属性名一样的属性值，类似disabled属性，作用标记表单使之不可用置灰，此时用户不能再向他们输入数据；类似写法如下：

　　　　<input type="text" disabled="disabled"> 对于布尔属性，可以对此进行改写如下

　　　　<input type="text" disabled>

　　省略包围属性值的引号

　　　　有些奇怪的网站不给属性添加引号，例如可以写<a href = http:www.baidu.com>aa</a>这种情况能正常显示，但是再次添加一个title属性的似乎后，<a href = http:www.baidu.com title= the Mozilla homepage>aa</a>此时出错，会被认为title的值是the,然后mozilla,homepage分别是两个布尔属性值，鼠标悬停时将只显示一个文本；因此，最好始终使用引号；

　　单引号或者双引号

　　　　当然也可以使用单引号，风格问题，但是i单引号不能和双引号混用，双引号有开头则必须有结尾，可以在双引号里嵌套单引号；如果要将双引号显示在html里就必须使用实体引用了。

======================进行到这一步了，稍作休息，我们继续前行==============

　　分析HTML文档，了解怎么由这些个元素形成一个完整的html页面，

　　<!DOCTYPE html>            <!-- 这一句声明文档类型，目前最短的有效的文档声明-->

　　<html>　　　　　　　　　<!-- 这个元素包裹整个完整的页面，是一个根元素-->

　　　　<head>　　

　　　　　　<meta charset="utf-8">

　　　　　　<title>my test page</title>

　　　　</head>

　　　　<body>

　　　　　　<p>this is my page</p>

　　　　</body>

　　</html>

　　　　<!-- head元素，是一个容器，包含想在HTML页面中但不想在其中显示的内容-->

　　　　　<!--具体来说这些内容还包括你想在搜索结果中出现的关键字和页面描述CSS样式，字符集等等-->

　　　　meta 被称为元，这个元素指定设置文档使用utf-8字符集编码，该种编码能够识别大部分文字，将避免很多问题

　　　　title 用于设置页面标题，出现在浏览器的标签上，标记和收藏页面时用来描述页面；

　　　　body元素，包含页面所有能显示的内容，文本，图片，音频啊游戏等等。

HTML中的空白

　　html中的空格，无论用多少空白字符包括换行，当渲染代码的时候，html解释器会将连续出现的空白符减少到一个空格符，代码 层面写那么多空白只是为了可读性；每行缩进也是应该坚持的风格；

实体引用   html中的特殊字符

　　在html中，<,>,'',',和&是特殊字符，一共5个记好，记住，因为他们是HTML语法自身的一部分，如果真的想用这些特殊字符到文档里，那么必须使用字符引用--表示字符的特殊编码，每个字符引用以&开始以；分号结束。下面列出响应的对应关系；

　　<  等价实体&lt;         >等价&gt;       “等价&quot;   '等价&apos;  &等价&amp;　

<p>In HTML, you define a paragraph using the <p> element.</p>

　　//此时会报错，浏览器认为第二个p是一个新段落，

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
//第二段通过字符引用代替角括号。

HTML注释
　　注释被大多数浏览器所忽略，对用户不可见，目的在于注释不同部分代码做了什么事情；
因此可以用<!---->包括起来；
　　第一天的课程就到这里结束，给各位在前端路上的朋友加个油！！！

关于MDN，HTML入门来自MDN文档的更多相关文章

  1. OpenXml入门----给Word文档添加文字

    使用OpenXml给word文档添加文字,每个模块都有自己对于的属性以及内容,要设置样式就先声明属性对象,将样式Append到属性里面,再将属性append到模块里面,那么模块里面的内容就具备该样式了 ...

  2. OpenXml入门----给Word文档添加表格

    下面将展示如何使用Openxm向Word添加表格. 代码中表头和数据我用的同一个TableRow来添加,其实可以通过TableHeader来,其实都一样.后面教程我会给出如何设置单元格样式.表头那一行 ...

  3. linux入门教程(十) 文档的压缩与打包

    在windows下我们接触最多的压缩文件就是.rar格式的了.但在linux下这样的格式是不能识别的,它有自己所特有的压缩工具.但有一种文件在windows和linux下都能使用那就是.zip格式的文 ...

  4. Nginx入门详解文档

    1 文章内容 掌握nginx+tomcat反向代理的使用方法. 掌握nginx作为负载均衡器的使用方法. 掌握nginx实现web缓存方法. 2 nginx介绍 2.1 什么是nginx Nginx是 ...

  5. Linux实战（20）：Docker部署EKL入门环境记录文档

    安装环境: centos7 ,EKL全套为7.5.2版本 前期工作 拉取已下三个镜像 docker.io/logstash 7.5.2 b6518c95ed2f 6 months ago 805 MB ...

  6. pytest文档1-环境准备与入门

    前言 首先说下为什么要学pytest,在此之前相信大家已经掌握了python里面的unittest单元测试框架,那再学一个框架肯定是需要学习时间成本的. 刚开始我的内心是拒绝的,我想我用unittes ...

  7. ElasticSearch 5学习(8)——分布式文档存储（wait_for_active_shards新参数分析）

    学完ES分布式集群的工作原理以及一些基本的将数据放入索引然后检索它们的所有方法,我们可以继续学习在分布式系统中,每个分片的文档是被如何索引和查询的. 路由 首先,我们需要明白,文档和分片之间是如何匹配 ...

  8. JAVA：借用OpenOffice将上传的Word文档转换成Html格式

    为什么会想起来将上传的word文档转换成html格式呢?设想,如果一个系统需要发布在页面的文章都是来自word文档,一般会执行下面的流程:使用word打开文档,Ctrl+A,进入发布文章页面,Ctrl ...

  9. C# Word文档中插入、提取图片，文字替换图片

    Download Files:ImageOperationsInWord.zip 简介 在这篇文章中我们可以学到在C#程序中使用一个Word文档对图像的各种操作.图像会比阅读文字更有吸引力,而且图像是 ...

随机推荐

  1. Netty 源码分析

    https://segmentfault.com/a/1190000007282628 netty社区-简书闪电侠 :https://netty.io/wiki/related-articles.ht ...

  2. HDU 5963(游戏 博弈+规律)

    题意是: 一群男生和一群女生玩游戏:给出一棵 n 个节点的树,这棵树的每条边有一个权值 0 或 1. 在一局游戏开始时,确定一个节点作为根.从女生开始,双方轮流进行操作. 当一方操作时,要先选择一个不 ...

  3. Docker下安装GitLab

    1.需要先安装Docker和Docker Compose,参考:https://www.cnblogs.com/hackyo/p/9280042.html 2.配置GitLab SSL(可跳过): m ...

  4. 关于中国菜刀，如何"切菜"

    介绍 经典标题党,中国菜刀有大牛已经分析过了->传送门(http://blog.csdn.net/p656456564545/article/details/49671829).博主PHP刚接触 ...

  5. 高并发秒杀系统--Service接口设计与实现

    [DAO编写之后的总结] DAO层    -->    接口设计 + SQL编写 DAO拼接等逻辑    -->    统一在Service层完成 [Service层的接口设计] 1.接口 ...

  6. Flink学习（三）状态机制于容错机制，State与CheckPoint

    摘自Apache官网 一.State的基本概念 什么叫State?搜了一把叫做状态机制.可以用作以下用途.为了保证 at least once, exactly once,Flink引入了State和 ...

  7. Git入门——本地版本库操作

    作为一个一直用SVN的家伙,深深地感到了自己在版本控制工具上的落伍.... 首先必须强调的是: Git与Github不是一回事. Git是目前世界上最先进的分布式版本控制系统,于2005年被linux ...

  8. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  9. linux各文件夹含义和作用

    原文链接:https://blog.csdn.net/okyoung188/article/details/76315774 1.linux下各文件夹的意义:     /bin:是binary的缩写, ...

  10. iOS UIPrintInteractionController在iPad的 iOS10 和 11上的奇怪bug

    今天在弹出UIPrintInteractionController的时候,在ios10 和11的ipad 上测试,发现一直是protrait 方向弹出,结果就出现如下图的bug: 研究了好长时间,发现 ...