由开发者和作者组成的开源社区；推动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. 爬虫解析之css,xpath语法

    一.xpath语法 xpath实例文档 <?xml version="1.0" encoding="ISO-8859-1"?> <bookst ...

  2. Linux中的pipe(管道)与named pipe(FIFO 命名管道)

    catalogue . pipe匿名管道 . named pipe(FIFO)有名管道 1. pipe匿名管道 管道是Linux中很重要的一种通信方式,是把一个程序的输出直接连接到另一个程序的输入,常 ...

  3. CMDB服务器管理系统【s5day88】：采集资产之Agent、SSH和Salt模式讲解

    在对获取资产信息时,简述有四种方案. 1.Agent  (基于shell命令实现) 原理图 Agent方式,可以将服务器上面的Agent程序作定时任务,定时将资产信息提交到指定API录入数据库 优点: ...

  4. EF CodeFirst系列（4)--- 数据注释属性

    EFCodeFirst模式使用的是约定大于配置的编程模式,这种模式利用默认约定根据我们的领域模型建立概念模型.然后我们也可以通过配置领域类来覆盖默认约定. 覆盖默认约定主要用两种手段: 1.数据注释属 ...

  5. word中中文保持正体,英文用斜体的方法.

    有时候,大段的文字中夹杂着英文字母,英文需要斜体,如果一个接一个选中再斜体,费时费力,那么怎样快速实现文斜体中文不斜体呢? 工具/原料 word软件 方法/步骤 选中要修改的段落,替换-查找内容-特殊 ...

  6. Design Principles and Design Patterns

    设计原则解读. 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力. 设计模式也是在此四项设计原则上的具体化实例化衍生物. Martin原文: http: ...

  7. 一个QQ旋风的BUG

    本人喜欢用QQ旋风下载工具,很不幸的是这个工具BUG太多了. 下载不同COOKIE,相同文件名.URL的文件时候会QQ旋风崩溃. 感兴趣可以试下.

  8. sort与uniq命令详解

    1.sort的作用 (排序) sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出. 如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行 ...

  9. What a Ridiculous Election UVALive - 7672 （BFS）

    题目链接: E - What a Ridiculous Election  UVALive - 7672 题目大意: 12345 可以经过若干次操作转换为其它五位数. 操作分三种,分别为: 操作1:交 ...

  10. C++设计模式——中介者模式

    前言 我们都知道,这个国际政治是一门很深的学问,不玩政治的人是搞不懂的.那么多的国家,国家之间的关系又及其复杂:就好比现在,美国和中国有经济利益关系,美国又和日本有盟友关系,朝鲜又和中国有说不清道不明 ...