1.简介

什么是HTML?

HTML 是用来描述网页的一种语言。

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

HTML 标签

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

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

Web 浏览器

Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

2.基础

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

<h1>这是一个标题</h1>

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

<p>这是一个段落。</p>

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.runoob.com">这是一个链接</a>

HTML 图像

(有些版本对大小写可认为相同,而xhtml中强制使用小写)

HTML 图像是通过标签 <img> 来定义的.

<img src="/images/logo.png" width="258" height="39" />

3.元素

开始标签 * 元素内容 结束标签 *
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行  

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素构成。


HTML 文档实例

<!DOCTYPE html>

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个 HTML 元素。

不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

HTML 提示:使用小写标签

【回顾】html简介、基础、元素的更多相关文章

  1. Java回顾之Spring基础

    第一篇:Java回顾之I/O 第二篇:Java回顾之网络通信 第三篇:Java回顾之多线程 第四篇:Java回顾之多线程同步 第五篇:Java回顾之集合 第六篇:Java回顾之序列化 第七篇:Java ...

  2. Ansible的基础元素和YAML介绍

    本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML. ...

  3. ansible入门三(Ansible的基础元素和YAML介绍)

    Ansible的基础元素和YAML介绍   本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...

  4. 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解

    目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...

  5. Web UI自动化测试基础——元素定位(二)

    本篇文章整理了元素定位的基础知识——多个元素定位方式. 一.多个元素定位方式简介 同单个元素定位方式相同,多个元素定位方式也有与之对应的8种方式,即id.name.class_name.tag_nam ...

  6. Web UI自动化测试基础——元素定位(一)

    本篇文章整理了元素定位的基础知识——单个元素定位方式. 一.单个元素定位方式简介 1. find_element_by_id 通过元素的id属性进行定位.以百度首页为例,首先进入https://www ...

  7. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  8. Selenium:WebDriver简介及元素定位

    参考内容:官方API文档,下载链接:http://download.csdn.net/detail/kwgkwg001/4004500 虫师:<selenium2自动化测试实战-基于python ...

  9. python 全栈开发,Day32(知识回顾,网络编程基础)

    一.知识回顾 正则模块 正则表达式 元字符 : . 匹配除了回车以外的所有字符 \w 数字字母下划线 \d 数字 \n \s \t 回车 空格 和 tab ^ 必须出现在一个正则表达式的最开始,匹配开 ...

  10. C++ 基础知识回顾(string基础、智能指针、迭代器、容器类)

    [1] string基础 [1.1] string 的构造 #include <iostream> #include <string> int main() { using n ...

随机推荐

  1. linux shell 之尝试编写 企业级 启动脚本

    企业Shell面试题10:开发企业级MySQL启动脚本 说明: MySQL启动命令为: 1 /bin/sh mysqld_safe --pid-file=$mysqld_pid_file_path 2 ...

  2. 利用C#进行AUTOCAD的二次开发

    众所周知,对AutoCAD进行二次开发用到的主要工具有:ObjectArx,VBA,VLisp.但它们的优缺点是显而易见的:ObjectArx功能强大,编程效率高,但它的缺点是编程者必须掌握VC++, ...

  3. vc++基础班[26]---进程的相关操作

      ①.ShellExecute 进行进程的创建,属于 shell api: //int iRet = (int)ShellExecute(m_hWnd, _T("open"), ...

  4. Ubuntu16下apache2安装ssl阿里云证书

    1.用下面的命令确保ssl模块已经加载进apache: a2enmod ssl 如果你看到了“Module ssl already enabled”这样的信息就说明你成功了,如果你看到了“Enabli ...

  5. 【转】Java并发编程:如何创建线程?

    一.Java中关于应用程序和进程相关的概念 在Java中,一个应用程序对应着一个JVM实例(也有地方称为JVM进程),一般来说名字默认是java.exe或者javaw.exe(windows下可以通过 ...

  6. $Django 路飞之课程下的分类,用户登陆成功前端存cookie,

    一 课程分类显示 宗旨:总的再次过滤 二 Cookie # export default new Vuex.Store({ state: { name:'', token:'', }, mutatio ...

  7. Linux VPS基础命令 - cp复制文件命令

    cp命令在Linux VPS操作和应用过程中还是比较常用的,我们可以用来复制文件或者文件夹,重命名一个新的文件以及复制到其他路径中用于文件的转移. 举例用法: 1.复制root目录下的itbulu.c ...

  8. python安装提示No module named setuptools,wget提示ERROR 403: SSL is required

    在下载安装一个python工具时提示报错No module named setuptools [root@kermit supervisor-3.3.0]$ sudo python setup.py ...

  9. 前端 ----js的事件流的概念(重要)

    09-JS的事件流的概念(重点)   在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页 ...

  10. php如何实现图片点击下载,并保存本地?-----本例子为二维码的生成图片,并支持点击下载

    ### 今天因为工作需要,完成了一个二维码的生成图片,并支持点击下载的 ### 控制器文件,相关代码 // 生成二维码 $url = action('Apih5\\VersionController@ ...