一 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. P1068 [NOIP2009 普及组] 分数线划定 题解

    目录 题目 思路 code 题目 P1068 [NOIP2009 普及组 思路 算出人数 排序 输出 如果同分也输出 否则break code #include<bits/stdc++.h> ...

  2. CF1534F2 Falling Sand (Hard Version)

    个人思路: 每个点向相邻沙子连边,向本列和相邻 \(2\) 列下方第一个沙子连边. 对于一个 DAG,所有入度为 \(0\) 的点会覆盖全部点.我们缩点即可通过 F1. 但是这样做是过不了 F2 的. ...

  3. java中对list集合进行分组

    java中对list集合进行分组 Map<String, List<HealthImport>> excelIdCardNull = importList.stream() . ...

  4. windows检查

    # coding: UTF-8 import psutil import platform import re def get_cpu_used(upu_base, interval=1): perc ...

  5. 2022-04-12内部群每日三题-清辉PMP

    1.一个项目的成本绩效指数(CPI)为1.2,且关键路径上的一个可交付成果落后于进度. 如果项目经理将项目回正轨,项目会发生什么情况? A.活动将并行执行 B.范围将被修改 C.成本和风险将会增加 D ...

  6. 2022-3-17内部群每日三题-清辉PMP

    1.一个项目预算为6000万美元,预计需要24个月才能完成.12个月后,该项目完成了60%,并使用了3500美元.那么预算和进度的状态如何? A.符合预算,并超前于进度 B.超出预算,但超前于进度 C ...

  7. 在element plus中使用checkbox 多选框实现大区省市区选择回选

    1.产品拿来淘宝后台页面,希望我们的快递发货也用这一套 长这样: 2.后端说提供的数据是树形结构,大区id不要传,传省的id,勾选哪个传哪个 3.element  ui的树形插件和级联选择器在数据上是 ...

  8. 【IDEA】测试类(test)的模板及定义

    人和动物的区别是:能制造和使用工具.因为,工具大大便利了我们的生活. 我们在使用Idea开发java项目的过程中,有些代码是固定的,我们能不能只写几个字,就代表一连串的代码.例如,这里,我们只是输入了 ...

  9. [2007年NOIP普及组] 纪念品分组

    元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得 的纪念品价值相对均衡,他要把购来的纪念品根据价格进行分组,但每组最多只能包括两件纪念品, 并且每组纪念品的价格之和不 ...

  10. 快速了解 Kubernetes 的架构及特性

    kubernetes 已经成为容器编排领域的王者,它是基于容器的集群编排引擎,具备扩展集群.滚动升级回滚.弹性伸缩.自动治愈.服务发现等多种特性能力.本文将带着大家快速了解 kubernetes ,了 ...