学习笔记—HTML(1)

HTML不是一门编程语言,而是一门标记语言HTML由一系列的 elements组成, 您可以使用它来封装,包装或标记内容的不同部分,使其以某种方式显示,或以某种方式执行。

Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

元素的主要部分是:

1.开始标签:包括元素的名称,包裹在开始和结束尖括号中。

2.结束标签:与开始标签相同,出来在元素名称之前的正斜杠。

3.内容:元素里面包含的内容。

4.元素:开始标记、结束标记加上内容等于元素。

(不是所有的元素都拥有开始标签、结束标签和内容)


把元素放到其他元素中间,叫做嵌套。

例子:

正确:<p>My cat is <strong>very</strong> grumpy.</p>

错误:<p>My cat is <strong>very grumpy.</p></strong>

嵌套时要先关闭里面的元素,才能关闭外层元素。


块级元素:在一个页面中以块的形势展示,相对于前面的内容,它会展示在新的一行,后面的内容也会被挤到下一行。块级元素通常用于页面结构化显示如段落、导航栏、页脚。一个以block形式展现的块级元素不能嵌套在内联元素中,但是可以嵌套在其他块级元素中。

内联元素:通常出现在块级元素之间,被一些其他的文本包围。内联元素不会导致文本换行,它通常出现在一堆文本之间。


元素也可以拥有属性:

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

属性包含元素的额外信息,但是这些信息并不会显示出来。

一个属性必须包含以下内容:

1.在元素和属性中间有个空格space。

2.属性名后面紧跟一个“=”。

3.有一对属性值,由一对“ ”引起来(也可以用单引号,单双引号不能在一个属性值里面混用)。

布尔属性没有值,只有跟属性名一样的属性值。


分析HTML文档:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<DOCTYPE html>声明文档类型。

<html></html>根元素,包裹了整个完整的页面。

<head></head>:head元素是一个容器,它包含了所有你想包含在html页面中但是不想显示在html页面中的内容。

<meta chatset="utf-8">:设置文档的字符集编码。

<title></title>:设置页面标题,出现在浏览器标签上,当收藏页面时用来描述页面。

<body></body>:包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。


在html页面中无论有多少个空白(空白字符、换行),当渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个单独的空格符(适当的添加空白,可以加强代码的可读性)。

在HTML中,字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分。

把特殊字符包含进文本,需要使用字符引用。每个字符引用以符号&开始, 以分号(;)结束。

Literal character Character reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
html中的注释使用<!--和-->包括起来。


如今,几乎你使用的所有网站都会使用 CSS 让网页更加炫酷, 使用JavaScript让网页有交互功能, 比如视频播放器,地图,游戏以及更多功能。这些应用在网页中很常见,它们分别使用 <link>元素以及 <script> 元素。

  •  <link> 元素经常位于文档的头部,它有2个属性, rel="stylesheet",表明这是文档的样式表,而 href,包含了样式表文件的路径:

    <link rel="stylesheet" href="my-css-file.css">
  • <script> 部分没必要非要放在文档头部; 实际上,把它放在文档的尾部(在 </body>标签之前)是一个更好的选择 ,这样可以确保在加载脚本之前浏览器已经解析了HTML内容(如果脚本加载某个不存在的元素,浏览器会报错)。

    <script src="my-js-file.js"></script>

    注意: < script >元素看起来像一个空元素,但它并不是,因此需要一个结束标记。您还可以选择将脚本放入< script >元素中,而不是指向外部脚本文件。

(学习笔记,文档内容摘自MDN、菜鸟教程等网站 )
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值