关于MDN，HTML入门来自MDN文档

时间：2021-12-24 13:05:05

　　由开发者和作者组成的开源社区；推动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入门教程&lpar;十&rpar; 文档的压缩与打包

    在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学习&lpar;8&rpar;——分布式文档存储（wait&lowbar;for&lowbar;active&lowbar;shards新参数分析）

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

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

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

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

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

随机推荐

  1. 【先定一个小目标】Windows下Redis的安装使用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  2. 配置Chrome Driver

    书中使用Firefox driver出现莫名问题,大概是firefox的版本太新了,懒得降级处理,故学习配置Chome driver进行测试. 1.到http://chromedriver.stora ...

  3. jdk之jhat命令

    jhat命令 -- JavaHeap Analyse Tool 用途:是用来分析Java堆的命令,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询语言第一步:导出堆  ...

  4. POJ2524&plus;并查集

    题意简单. 询问n个人的宗教关系. #include<stdio.h> ; int fa[ maxn ]; int vis[ maxn ]; void init( int n ){ ;i& ...

  5. rails3 Bundle简介

    Rails 3开始使用bundle来管理项目的gem依赖.该命令只在一个含有Gemfile的目录下执行. Gemfile: Rails 项目所有的依赖包都在这里配置,不像以前通过require来查找 ...

  6. gulp学习笔记（一）

    gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览器自动 ...

  7. 使用Kernel NetEm和tc模拟复杂网络环境

    关键词:netem(Network Emulator).tc(Traffic Control). 大部*域网环境良好,但是产品实际网络环境可能千差万别,为了对产品进行各种情况测试就需要模拟网络环境. ...

  8. 百度UEditor的config&period;json

    配合自己修改的.net core DLL使用 /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": &qu ...

  9. 【PAT】B1081 检查密码（15 分）

    水题 #include<cstdio> #include<string.h> #include<ctype.h> #include<algorithm> ...

  10. linux查看端口命令和kill

    1.查看  netstat -atunlp 2kill:kill -9 PID

相关文章