由开发者和作者组成的开源社区；推动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. C++回顾day03---<纯虚函数和抽象类以及虚析构函数，delete使用>

    一:纯虚函数和抽象类 纯虚函数是一个在基类中说明的虚函数,在基类中没有定义,要求任何派生类都定义自己的版本 纯虚函数为各个派生类提供一个公共接口 纯虚函数的形式: virtual 类型 函数名(参数列 ...

  2. python chrome的自定义启动

    # encoding:utf-8 """@version: python27@author: fafa@site: http://www.phpgao.com@softw ...

  3. Coursera, Big Data 3, Integration and Processing (week 5)

    Week 5, Big Data Analytics using Spark     Programing in Spark   Spark Core: Programming in Spark us ...

  4. luogu P5286 [HNOI2019]鱼

    传送门 这题真的牛皮,还好考场没去刚( 这题口胡起来真的简单 首先枚举D点,然后对其他所有点按极角排序,同时记录到D的距离.然后按照极角序枚举A,那么鱼尾的两个点的极角范围就是A关于D对称的那个向量, ...

  5. day 16 - 1 内置函数（二）

    内置函数(二) reversed()  返回一个反向的迭代器 k = [1,2,3,4,5] k.reverse() #反转 print(k) k = [1,2,3,4,5] k2 = reverse ...

  6. Django 实现list页面检索

    在list.html写入from表单 在views渲染list方法写入,从前台获取的searchtitle根据name实现检索

  7. linux tomcat单机部署多应用

    1.修改/etc/profile 增加tomcat环境变量

  8. ASP.NET Web API 之一 入门篇

    一.基于RESTful标准的Web Api 原文讲解:https://www.cnblogs.com/lori/p/3555737.html 微软的web api是在vs2012上的mvc4项目绑定发 ...

  9. 第十一篇：Mysql系列

    Python开发基础之路 第十一篇:Mysql系列 Python-数据库 基本SQL语句 Python-数据类型 主键auto_increment Python-多表关联 外键 级联 Python-s ...

  10. noj算法 迷宫问题 回溯法

    描述: 给一个20×20的迷宫.起点坐标和终点坐标,问从起点是否能到达终点. 输入: 多个测例.输入的第一行是一个整数n,表示测例的个数.接下来是n个测例,每个测例占21行,第一行四个整数x1,y1, ...