html 学习笔记

bug智造
116 阅读4分钟

1.HTML简介

   超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

   我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

• HTML 指的是超文本标记语言: HyperText Markup Language • HTML 不是一种编程语言，而是一种标记语言 • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 文档包含了HTML 标签及文本内容 • HTML文档也叫做 web 页面

555d58f45c69785e6307f06178eff910.jpeg

                       图1-1 HTML实例

  上图表示的是一种HTML实例。从该实例可以看出一个完整的HTML应该包括：
      1.声明HTML文档版本类型；
      2.头部元素；
      3.可见的页面（该部分的内容是web浏览器上可见的内容）。
          如将该文档在web上运行后，页面显示内容如下：

48c11ad0ce439ebe30935e2b2e2d9c36.png 图1-2 图1-1实例在web网页显示的画面

  这就是一个简单的HTML页面。

2.HTML标签和元素

2.1.HTML标签

   HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

例：<标签>内容<标签>

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

2.2.HTML元素

    HTML文档由HTML元素定义，一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:<p>这是一个段落</p>。

    HTML元素的语法有以下几点：
        HTML 元素以开始标签起始
        HTML 元素以结束标签终止
        元素的内容是开始标签与结束标签之间的内容
        某些 HTML 元素具有空内容（empty content）
        空元素在开始标签中进行关闭（以开始标签的结束而结束）
        大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。 HTML 文档由相互嵌套的 HTML 元素构成。 除此之外，在书写标签是应使用小写字母。

3.HTML属性

属性是 HTML 元素提供的附加信息。它拥有以下特点：
    HTML 元素可以设置属性
    属性可以在元素中添加附加信息
    属性一般描述于开始标签
    属性总是以名称/值对的形式出现，比如：name="value"。

   HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> 
    <a href="http://www.runoob.com">这是一个链接使用了 href 属性</a>
</body>
</html>

在使用HTML属性时，还需注意：属性值应该始终被包括在引号内；使用小写属性；双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

在初步了解HTML文档的组成后，要掌握html各个部分的主要内容。

4.HTML标题

 首先是HTML可见的页面内容里的标题元素，在 HTML 文档中，标题很重要。
 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
 <h1> 定义最大的标题。
 <h6> 定义最小的标题。（浏览器会自动地在标题的前后添加空行。）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>
</html>

5.HTML段落

 学习完了标题的应用，接下来要学习段落的特点与应用。
 HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。
 浏览器会自动地在段落的前后添加空行。
 在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签。
 <hr>标签是在HTML页面创建水平线，如以下实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
 
<body>
    <h1>春晓</h1>
    <p>
        春眠不觉晓，<br/>
          处处闻啼鸟。<hr/>
            夜来风雨声，
              花落知多少。
    </p>
</body>
</html>

个人小思考： 对HTML简单的学习就到这了，学习都是一步一个脚印，H5学习也是从前端开发的基础学起，首先学习使用HTML、CSS、Java、Jquery等一系列前端技术，实现一些网页动态效果。再到后面的Vue。js、bootstrap、Type等一些主流框架，还有微信小程序的学习。培训课程当然不是上课听懂就可以，而是必须能要去动手操作，达到熟练使用的要求和效果，为了保证学习效果，课程以理论和实例相结合的方式进行授课。而且每个学习阶段的结束都会做一个实训项目，做项目不仅能是学到一些新知识，也能查缺补漏，巩固自己所学知识。

avatar
文章
阅读
粉丝