由开发者和作者组成的开源社区；推动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. 1.5分布式通讯框架-RMI

    分布式通信框架-RMI讲解 什么是RPC Remote procedure call protocal RPC协议其实是一个规范.常用PRC框架:Dubbo.Thrif.RMI.Webservice. ...

  2. SQL修改日期类型字段为字符串类型

    select * from test1 --添加行 ) --将转换格式后的数据放到列中 ) --删除老的字段 alter table test1 drop column startdate --修改字 ...

  3. Python包中__init__.py作用

    在创建python包的过程中,IDE都会在包根目录下创建一个__init__.py文件,该Python文件默认是空的.目录结构如下: Pycharm下的package树结构: 在Finder中的目录结 ...

  4. 清除Windows访问共享时保存的凭据记录

    场景:某些时候我们连接了某台PC或服务器的共享目录或打印机,但因为一些原因突然连接不上了(或是对方组策略发生变化,或是对方计算机用户密码变更 等等..) 又或者电脑给其它用户使用,因一些安全问题需要临 ...

  5. thymeleaf : input/select/radio回显

    thymeleaf中不用自己去写checked="checked" selected="selected"这种代码,他自己会选. input <input ...

  6. 微信小程序-制作简易豆瓣笔记

    demo截图: 图书:      电影:        共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...

  7. 【easy】111. Minimum Depth of Binary Tree求二叉树的最小深度

    求二叉树的最小深度: /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...

  8. zabbix3.2监控mongodb

    模板地址:https://share.zabbix.com/databases/mongodb/mongodb-for-zabbix-3-2 .安装jq依赖 # yum install jq -y . ...

  9. LNMP环境搭建：Nginx安装、测试与域名配置

    Nginx作为一款优秀的Web Server软件同时也是一款优秀的负载均衡或前端反向代理.缓存服务软件 2.编译安装Nginx (1)安装Nginx依赖函数库pcre pcre为“perl兼容正则表达 ...

  10. 最简单有效的关于linux下配置Git操作免登录ssh公钥

    ssh-keygen -t rsa -b 4096 -C “someone@xxx.com” 然后回车三连击… 进入目录(执行cd ~/.ssh),可以看到当前目录下多出两个文件 id_rsa.pub ...