一 HTML概述

1、HTML文档基本结构

　　先来看一个关于HTML的例子，里面包含了几个主要的HTML标签：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>This is my first html</title>

</head>

<body>

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

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

</body>

</html>

　　简单说明：

　　中文网页需要使用<meta charset="utf-8">声明，否则会出现乱码；

　　DOCTYPE声明了文档类型，指定了文档的引用规范，有助于浏览器中正确显示网页，DOCTYPE声明不区分大小写；

　　<html></html>定义了整个HTML文档，描述了文档类型；

　　<head></head>定义了文档的头部，是所有头部元素的容器；

　　<body></body>定义了HTML文档的主体，为可视化网页内容；

　　<h1></h1>定义了HTML文档中的一个标题；

　　<p></p>定义了HTML文档中的一个段落；

　　运行结果：

2、什么是HTML？

　　HTML（HyperText Markup Language）：是用来描述网页的一种超文本标记语言，严格意义上说，HTML不是一种编程语言，而是一种标记语言。

　　所谓标记语言，是由一套标记标签构成。

　　HTML使用标记标签描述网页，HTML文档包含了HTML标签及文本内容。

3、什么是HTML文档？

　　HTML文档：包含HTML标签和纯文本，用来描述网页。

　　HTML文档也被称为网页。

4、什么是HTML标签？

　　HTML标记标签（HTML tag）：是由尖括号包围的、成对出现的关键词。

　　标签对中的第一个标签称为开始标签（开放标签），第二个标签称为结束标签（闭合标签），如<html></html>。

　　语法格式：<标签>内容</标签>　

二 HTML元素

1、HTML元素概念

　　HTML文档由HTML元素定义。

　　HTML元素是以开始标签作为起始，以结束标签作为终止，元素的内容是开始标签与结束标签之间的内容。

　　具有空内容的元素称为空元素，即没有内容的元素，可在开始标签中进行关闭，例如<br />。

　　大多数HTML元素可以拥有属性。

2、嵌套的HTML元素

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

　　以上述实例为例，“<p>这是一个段落！</p>”为一个元素，该元素拥有一个开始标签<p>，元素内容“这是一个段落！”，以及一个结束标签</p>。而该元素嵌套在元素<body></body>元素中。

PS：

　　在XHTML、XML以及未来版本的HTML中，所有的元素必须被关闭，空元素在开始标签中添加斜杠是关闭元素的正确方法。

　　HTML标签对大小写不敏感，但是尽量使用小写，因为万维网联盟（W3C）在HTML4中推荐使用小写。

三 HTML属性

　　属性是HTML元素提供的附加信息，一般添加在开始标签中。

　　属性值应该始终被包括在单引号或者双引号中，如果属性值本身就含有双引号，那么属性值需要使用单引号包围，例如name=‘Love “story” fish’。

　　属性总是以“名称/值对”的形式出现，如name="value"。

　　属性实例：

<img src="google.JPG"  width="30" height="30">

　　其中，图片文件位置在src属性中指定，图片的大小由width和height属性设置。

　　属性和属性值对大小写不敏感，推荐使用小写的属性/属性值。

　　常用的属性：

属性 描述
class 为HTML元素定义一个或多个类名，类名从样式文件引入
id 定义元素的唯一id
style 规定元素的行内样式
title 描述元素的额外信息（作为工具条使用）

HTML笔记（一） HTML相关概念的更多相关文章

  1. jenkins自动发布java代码

    注:本文来源于<KaliArch> jenkins笔记 一.相关概念 1.1 Jenkins概念: Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台. ...

  2. [网络编程]mqtt概念&数据包

    目录 前言 1. MQTT 简介 2. MQTT 通信模型 2.1 MQTT 协议 2.2 MQTT 协议中的订阅&主题&会话 2.3 MQTT 协议中的方法 3. MQTT 协议数据 ...

  3. [原创]java WEB学习笔记105：Spring学习---AOP介绍，相关概念，使用AOP，利用 方法签名 编写 AspectJ 切入点表达式

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. Java笔记1-Java相关概念和如何实现跨平台

    一.Java相关概念 1.Java语言的核心特点跨平台面向对象 2.Java的历史版本JDK1.0,JDK1.1,JDK1.2....JDK5.0,JDK6.0,JDK7.0,JDK8.0 注意:JD ...

  5. Java框架spring 学习笔记（十一）：aop相关概念

    为什么要引入aop? 比如如下情景: 在父类的方法名称发送了变化,在子类调用的方法也需要变化,当工程规模越来越大的时候,维护起来相当不方便,于是就引入了横向切面aop. aop的相关概念: 连接点:类 ...

  6. SLAM学习笔记（3）相关概念

    SIFT,即尺度不变特征变换(Scale-invariant feature transform,SIFT),是用于图像处理领域的一种描述子.这种描述具有尺度不变性,可在图像中检测出关键点,是一种局部 ...

  7. Java框架spring 学习笔记（七）：Spring相关概念

    Spring是开源.轻量级.一站式框架. Spring核心主要两部分 aop:面向切面编程,扩展功能不是修改源代码实现. ioc:控制反转,把对象的创建交给Spring进行配置,比如一个类,在类里面有 ...

  8. ASP.NET学习笔记（一）相关概念

    ASP.NET 是一个开发框架,用于通过 HTML.CSS.JavaScript 以及服务器脚本来构建网页和网站. ASP.NET 支持三种开发模式: Web Pages MVC Web Forms ...

  9. H.264学习笔记1——相关概念

    此处记录学习AVC过程中的一些基本概念,不定时更新. frame:帧,相当于一幅图像,包含一个亮度矩阵和两个色度矩阵. field:场,一帧图像,通过隔行扫描得到奇偶两场,分别称为顶场和底场或奇场和偶 ...

  10. MySql优化相关概念的理解笔记

    MySQL架构 查询执行流程 查询执行的流程是怎样的: 连接1.1客户端发起一条Query请求,监听客户端的‘连接管理模块’接收请求1.2将请求转发到‘连接进/线程模块’1.3调用‘用户模块’来进行授 ...

随机推荐

  1. encodeURI和encodeURIComponent

    encodeURI和encodeURIComponent的作用对象都是URL,唯一的区别就是编码的字符范围: encodeURI不会对ascii字母.数字.~!@#$&*()=:/,;?+' ...

  2. Mysql数据库基础第二章：（九）分页查询

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...

  3. 解决idea不能自动下载maven配置文件pom.xml下的jar包依赖的问题

    表现:无法下载pom配置文件中的依赖包,或只能下载少数包,各项配置都正确的情况 理由未知: 百度了很长一段时间,网上给出比较精准的解决之一是 setting>>maven>>去 ...

  4. 用cmd的方式执行exe程序

    在asp.net中调用process.start执行程序,需要设置运行iis进程用户的权限,比较麻烦, MS的站点上有一篇说明:http://support.microsoft.com/default ...

  5. 每日一抄 Go语言死锁、活锁和饥饿概述

    DeadLock package main import ( "fmt" "runtime" "sync" "time" ...

  6. jmeter参数化时最常用随机函数

    邮箱类: ${__RandomString(8,abcdefghijklmnopqrstuvwxyz,)}@126.com 手机号类: ${__Random(18000000000,189999999 ...

  7. Log4NET 日志分割删除与压缩解决思路（附源码）

    最近公司发现,日志产生的太多了,于是让我写个方法来解决,一开始是让我删除,后来想了想让我先压缩再删除文件夹,下面提供两个版本的源代码及简单使用. 注:这两个代码也是博主CV的网上然后修改的,如侵权,请 ...

  8. Astra-20190405

    Usage: astra.py [-h] [-c COLLECTION_TYPE] [-n COLLECTION_NAME] [-u URL] [-headers HEADERS] [-method ...

  9. Alfred 好用工具分享

    好用的mac工具分享 1.带历史记录的剪切板 根据快捷键切换选择保存的数据 2.创建热键工作流程 将常用的工具变为热键,快捷切换 如何创建: 设置热键 单击右键 创建actions 打开app 然后将 ...

  10. 杭电OJ--1048-C++实现

    #include <iostream>#include<vector>#include<string>#include<cctype>#include& ...