HTML概念、语法及常用基础标签

HTML基础语法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body bgcolor="red">

    hello HTML~

    <hr/>

    <!-- 这是注释 -->

</body>

</html>

sublime快捷键
ctrl+n 新建文件
ctrl+s 保存文件
ctrl+? 注释

文档声明 <!DOCTYPE html>
meta解决文字乱码 <meta charset="UTF-8">

文字和段落
标题 h1~h6
段落 p标签对齐方式：
align="left" 左对齐
align="right" 右对齐
align="center" 居中对齐
align="justify" 两端对齐
 换行
  空格
pre 预格式化的文本，常见应用就是用来表示计算机的源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>h1标题</h1>

    <h2>h2标题</h2>

    <h3>h3标题</h3>

    <h4>h4标题</h4>

    <h5>h5标题</h5>

    <h6>h6标题</h6>

    <p align="left">HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p align="right">HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p align="center">HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p align="justify">HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <p>&nbsp;&nbsp;&nbsp;&nbsp;HTML称为超文本标记语言，是一种标识性的语言。<br>它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。<br>HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

    <pre>

        HTML称为超文本标记语言，是一种标识性的语言。

    它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

    HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</pre>

</body>

</html>

修饰标签和特殊符号
<hr/> 水平线
 文字斜体
 文字加粗
 文字下标
 文字上标

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p align="left">HTML标签总是成对出现的，如&lt;b&gt;&lt;/b&gt;</p>

    <hr/>

    <div align="center">

        <p>关于我们 | 招聘信息 | 联系我们 | 意见反馈</p>

        <hr/>

        <p>版权信息：Copyright &copy; 2020 cyy</p>

    </div>

</body>

</html>

列表标签-无序列表
type="disc" 圆点
type="square" 正方形
type="circle" 空心圆

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<h1>什么是HTML？</h1>

<p>HTML是用来描述网页的一种语言</p>

<ul type="disc">

    <li>HTML指的是超文本标记语言</li>

    <li>HTML不是一种编程语言，而是一种标记语言</li>

    <li>标记语言是一套标记标签</li>

    <li>HTML使用标记标签来描述网页</li>

</ul>

<ul type="square">

    <li>HTML指的是超文本标记语言</li>

    <li>HTML不是一种编程语言，而是一种标记语言</li>

    <li>标记语言是一套标记标签</li>

    <li>HTML使用标记标签来描述网页</li>

</ul>

<ul type="circle">

    <li>HTML指的是超文本标记语言</li>

    <li>HTML不是一种编程语言，而是一种标记语言</li>

    <li>标记语言是一套标记标签</li>

    <li>HTML使用标记标签来描述网页</li>

</ul>

</body>

</html>

列表标签-有序列表
type="1" 数字
type="a" 小写字母
type="A" 大写字母
type="i" 小写罗马数字
type="I" 大写罗马数字

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<h1>什么是HTML？</h1>

<p>HTML是用来描述网页的一种语言</p>

<ol type="1">

    <li>HTML指的是超文本标记语言</li>

    <li>HTML不是一种编程语言，而是一种标记语言</li>

    <li>标记语言是一套标记标签</li>

    <li>HTML使用标记标签来描述网页</li>

</ol>

<ol type="a">

    <li>HTML指的是超文本标记语言</li>

    <li>HTML不是一种编程语言，而是一种标记语言</li>

    <li>标记语言是一套标记标签</li>

    <li>HTML使用标记标签来描述网页</li>

</ol>

<ol type="I">

    <li>HTML指的是超文本标记语言</li>

    <li>HTML不是一种编程语言，而是一种标记语言</li>

    <li>标记语言是一套标记标签</li>

    <li>HTML使用标记标签来描述网页</li>

</ol>

</body>

</html>

列表标签-定义列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<dl>

<dt>什么是HTML？</dt>

<dd>HTML是用来描述网页的一种语言</dd>

<dt>HTML标签</dt>

<dd>HTML指的是超文本标记语言</dd>

<dd>HTML不是一种编程语言，而是一种标记语言</dd>

<dd>标记语言是一套标记标签</dd>

<dd>HTML使用标记标签来描述网页</dd>

</dl>

</body>

</html>

列表标签实际应用
开发中常常会把ul和ol的样式去掉，使用自定义图片来代替

图像
绝对路径：从盘符开始写起
相对路径：
图片与当前网页在同一目录下 <img src="cat.jpg" alt="cat">
图片在上一级目录下 <img src="../cat.jpg" alt="cat">
图片在下一级目录下 <img src="文件夹名/cat.jpg" alt="cat">

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <!-- 绝对路径 -->

    <!-- 宽度固定为50px -->

    <img src="C:\Users\96579\Desktop\cat.jpg" alt="cat" width="50px">

    <!-- 相对路径 -->

    <!-- 宽度为父容器的10% -->

    <img src="cat.jpg" alt="cat" width="10%">

</body>

</html>

超链接
属性：
href 链接地址
target 链接的目标窗口
_self 当前页面
_blank 新页面
_top 框架相关，了解即可
_parent 框架相关，了解即可
title 链接提示文字
name 链接命名

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="demo2.html">站内链接</a>

    <a href="http://www.baidu.com">站外链接，如友链等</a>

    <hr/>

    <a href="#">空链接</a>

</body>

</html>

锚链接
a链接如果不加href属性，不会有链接样式

当链接为空的时候，点击超链接会刷新页面
<a href="">链接</a>

不同页面的锚链接
<a href="demo2.html#couse1">课程1</a>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<a href="#couse1">课程1</a>

<a href="#couse2">课程2</a>

<a href="#couse3">课程3</a>

<br/>

<a name="couse1"><h1>课程1</h1></a>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<a name="couse2"><h1>课程2</h1></a>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<a name="couse3"><h1>课程3</h1></a>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

</body>

</html>

链接扩展功能
邮箱链接
<a href="mailto:cyy@qq.com">反馈意见</a>
如果想成功打开邮箱，需要在本机电脑上安装邮箱软件如foxmail等

文件下载
下载的文件需要压缩，否则会直接打开文件，而不是下载
<a href="cyy.rar">文件下载</a>

HTML概念、语法及常用基础标签的更多相关文章

HTML常用基础标签
HTML常用基础标签带有语义的标签 强调 比em强调级别高 <abbr> &l ...
【HTML基础】常用基础标签
什么是HTML? HTML(HyperText Markup Language,超文本标记语言),所谓超文本就是指页面内可以包含图片.链接.甚至音乐等非文字元素,HTML不是一种编程语言,而是一种标记 ...
Office·Word高级·VBA基础概念语法
阅文时长 | 5.21分钟字数统计 | 1823字符『Office·Word高级·VBA基础概念语法』编写人 | SCscHero 编写时间 | Monday, June 29, 2020 文章 ...
Python3.x：常用基础语法
Python3.x:常用基础语法 1,if else语句: 不执行if内的语句,需要用:pass if i>2: #跳过不执行 pass else: print("i= %s" ...
Java基础概念语法
Java基础概念语法注释单行注释 //行注释说明多行注释 /* 多行注释说明 */ 文档注释 /** *@author 程序的作者 *@version 源文件的版本 *@param 方法的参数说 ...
HTML&CSS基础-html常用的标签
HTML&CSS基础-html常用的标签作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
openresty开发系列13--lua基础语法2常用数据类型介绍
openresty开发系列13--lua基础语法2常用数据类型介绍一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...
Oracle常用基础语法（未完待补和操作）
这篇博客主要是Oracle常用基础语法, 另外,存储过程和存储函数很重要,这个后期看视频学习,还有DB优化,另外,还有plsql develop和navicat的使用,重点是数据的导入导出: ---- ...
简明易懂，将细节隐藏，面向新手树立web开发概念——学完Java基础语法，超快速上手springboot+mybatiJavaWeb开发
简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

随机推荐

CUDA学习（一）之使用GPU输出HelloWorld
最近在学习CUDA,编程入门第一步便是“HelloWorld”,主要代码如下: #include "cuda_runtime.h" #include "device_la ...
PTA 7-10 树的遍历（二叉树基础、层序遍历、STL初体验之queue）
7-10 树的遍历(25 分) 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(≤30),是二叉树中结点的个数 ...
zip压缩包伪加密技术
一个 ZIP 文件由三个部分组成: 压缩源文件数据区 + 压缩源文件目录区 + 压缩源文件目录结束标志压缩源文件数据区: 50 4B 03 04:这是头文件标记(0x04034b50) 14 00: ...
ASP.NET Core使用环境变量
前言通常在应用程序开发到正式上线,在这个过程中我们会分为多个阶段,通常会有开发.测试.以及正式环境等.每个环境的参数配置我们会使用不同的参数,因此呢,在ASP.NET Core中就提供了相关的环境 ...
VFP 的 CursorAdapter 相关
VFP 的 CursorAdapter 是在VFP 8 中增加的最重要的新功能,它提供了一种采用统一接口的方式来访问远程数据源. 现在正值新冠肺炎期间,闲着也是闲着,在整理原理的资料时,发现十多年前的 ...
Java中类锁和对象锁
类锁类锁锁的其实是类的Class对象,类锁的代码写法是对类方法加synchronize,或者 synchronize(xx.class){} 对象锁对象锁锁的是类的实例对象,对象锁的形式有对 ...
Linux高级系统恢复技术
一,MBR毁坏: 查看系统分区在那: 毁坏MBR: 如果没有重启动,可以直接恢复: 如果重启之后就不可启动系统,需要恢复系统: 出现这样的情况: force off关机,使用光盘启动,添加一个镜像光盘 ...
2014.1.21 DNS大事故(dns原理、网络封锁原理)
1.21那天发生了什么,由1.21联想补充…… 很多网站都上不去,域名解析都到了65.49.2.178这个IP地址先科普,再深挖 dns查询类型递归查询,迭代查询 DNS解析过程,这里使用 ...
HTML,Css,JavaScript之间的关系
简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...
Mysql性能优化全揭秘-庖丁解牛
「为什么写」一直想写数据库相关的文章,最直接的原因是数据库这块我们工作中每天都会用到,也是面试求职绕不开的话题,无论你是何种测试,优秀的数据库能力都会非常加分,最近我在总结数据库性能优化这块内容,性 ...

HTML概念、语法及常用基础标签

HTML概念、语法及常用基础标签的更多相关文章

随机推荐

热门专题