关于MDN,HTML入门来自MDN文档
由开发者和作者组成的开源社区;推动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语法自身的一部分,如果真的想用这些特殊字符到文档里,那么必须使用字符引用--表示字符的特殊编码,每个字符引用以&开始以;分号结束。下面列出响应的对应关系;
< 等价实体< >等价> “等价" '等价' &等价&
<p>In HTML, you define a paragraph using the <p> element.</p>
//此时会报错,浏览器认为第二个p是一个新段落,
<p>In HTML, you define a paragraph using the <p> element.</p>
//第二段通过字符引用代替角括号。
HTML注释
注释被大多数浏览器所忽略,对用户不可见,目的在于注释不同部分代码做了什么事情;
因此可以用<!---->包括起来;
第一天的课程就到这里结束,给各位在前端路上的朋友加个油!!!