博客
关于我
HTML基础标签(一)
阅读量:310 次
发布时间:2019-03-03

本文共 2526 字,大约阅读时间需要 8 分钟。

HTML基础标签(一)

主要对HTML的基础知识和初学常用的标签进行总结。

1.HTML介绍

网站中的一页我们一般称之为网页,以.html或.htm结尾,故称其为HTML文件。
HTML是Hyper Text Markup Language(超文本标记语言)的缩写,是超文本标记语言,是构成Web页面的基本元素,是一种规范,一种标准。 HTML不是一种编程语言,而是一种描述性的标记语言。
我们现在用的是2014年发布的HTML5。

2.HTML工作原理

  • HTML是部署在服务器上的文本文件;

  • 根据HTTP协议,浏览器发出请求给服务器,服务器做出响应,给浏览器返回一个HTML;

  • 浏览器解释执行HTML,从而显示内容;

  • HTML部署在服务器上,运行在浏览器上。

3.HTML主要结构

代码如下:

<!DOCTYPE html> <!--于文档中的最前面的位置,处于 <html> 标签之前,不是 HTML 标签,它是文档类型声明标签。--><html lang="en"> <!--zh-CN定义采用语言为中文-->//HTML 文件开始<head>//文件头开始    <meta charset="UTF-8"> <!--必须写.采取UTE-8来保存文字-->    <meta name="viewport" content="width=device-width, initial-scale=1.0">    //用于定义页面元信息    <title>标题</title></head>//文件头结束<body>//文件体开始	...</body>//文件体结束</html>//HTML 文件结束

4.常用标签

4.1标题标签

<h#>…</h#>;
#表示从1、2、3、4、5、6;
标题级别h1最大,依次减小,h6最小

<h1>内容</h1>	...<h6>内容</h6>

标题元素让文本以醒目的方式显示,字体加粗变大,往往用于文章的标题

4.2段落标签

如果有大段文字的情况下,用p标签进行分段

<p>    第一段文字.....</p><p>    第二段文字.....</p>

4.3换行标签

<br/>

单标签,可以省略 /

4.4分割线

<hr color="颜色" size="粗细" width="宽度"/>

4.5文本格式化标签

<b>加粗</b><strong>加粗、并且具有语义化效果</strong><i>倾斜</i><em>倾斜、并且具有语义化效果</em><del>倾斜</del><em>倾斜、并且具有语义化效果</em><u>下划线</u><ins>下划线</ins>  推荐使用

4.6文本样式标签

<font size="字体大小" color="字体颜色" face="字形"> 内容 </font>  可以设置内容的字体大小、颜色、字形

4.7文本语义标签

(1)高亮显示

   <mark> 内容 </mark>

(2)引用标签

   <cite> 内容 </cite>

4.8特殊字符

	(1)空格:&nbsp;     --  浏览器不识别空格字符,因此需要使用&nbsp;		(2)小于: &lt;		(3)大于:&gt;	(4)版权符号:&copy;		(5)注册商标:&reg;		(6)摄氏温度:&deg;		(7)乘号:&times;		(8)除号:&divide;		(9)平方:&sup2;		(10)立方:&sup3;

4.9下标标签

<sub> 内容 </sub>

4.10图像标签

<img src="图像文件全名" />

例如:

<img src="./images/6.png" />

路径:

(1)相对路径:从文件当前位置开始的路径

例如:

   demo/004.html

(2)绝对路径:从磁盘根目录开始的路径

例如:

   E:\\前端\\2021-4-3\\demo\\004.html`、

反斜杠(’’):在windows操作系统中以双反斜杠(’\’)作为路径分隔符

斜杠(’/’):是Linux操作系统下的路径分隔符

 E:/前端/2021-4-3/demo/004.html

‘./’ :当前目录(当前文件夹)

‘…/’:表示当前目录的上一级目录

图像标签的属性:

 <img src="图像的名称" alt="图像加载异常时的提示信息"   width="宽度" height="高度" border="边框线"    vspace="垂直间距" hspace="水平间距"/>

4.11超链接标签

<a></a> ,可以进行页面跳转

(1)文字超链接:

   <a href="网页的地址"> 文字 </a>

(2)图像超链接

   <a href="网页的地址">		<img src="图像名" />	</a>

4.12设置页面背景

(1)设置页面背景颜色:

<body bgcolor="颜色值">

(2)设置背景图像:

  <body background="图像名">

4.13滚动标签

(1)图像滚动:

 <marquee behavior="500" direction="down">	<img src="./images/7.png" width="500" height="280"> </marquee>
  • direction:表示滚动的方向,值可以是left,right,up,down,默认为left
  • behavior:表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
  • loop:表示循环的次数,值是正整数,默认为无限循环 scrollamount:表示运动速度,值是正整数,默认为6
  • scrolldelay:表示停顿时间,值是正整数,默认为0,单位是毫秒

(2)文字滚动

 <marquee behavior="500" direction="down">	 <font color="" size="" face="">滚动的文字</font> </marquee>

转载地址:http://ojpm.baihongyu.com/

你可能感兴趣的文章
NIFI大数据进阶_Kafka使用相关说明_实际操作Kafka消费者处理器_来消费kafka数据---大数据之Nifi工作笔记0037
查看>>
NIFI大数据进阶_Kafka使用相关说明_实际操作Kafka生产者---大数据之Nifi工作笔记0036
查看>>
NIFI大数据进阶_NIFI的模板和组的使用-介绍和实际操作_创建组_嵌套组_模板创建下载_导入---大数据之Nifi工作笔记0022
查看>>
NIFI大数据进阶_NIFI监控功能实际操作_Summary查看系统和处理器运行情况_viewDataProvenance查看_---大数据之Nifi工作笔记0026
查看>>
NIFI大数据进阶_NIFI监控的强大功能介绍_处理器面板_进程组面板_summary监控_data_provenance事件源---大数据之Nifi工作笔记0025
查看>>
NIFI大数据进阶_NIFI集群知识点_认识NIFI集群以及集群的组成部分---大数据之Nifi工作笔记0014
查看>>
NIFI大数据进阶_NIFI集群知识点_集群的断开_重连_退役_卸载_总结---大数据之Nifi工作笔记0018
查看>>
NIFI大数据进阶_使用NIFI表达式语言_来获取自定义属性中的数据_NIFI表达式使用体验---大数据之Nifi工作笔记0024
查看>>
NIFI大数据进阶_内嵌ZK模式集群1_搭建过程说明---大数据之Nifi工作笔记0015
查看>>
NIFI大数据进阶_内嵌ZK模式集群2_实际操作搭建NIFI内嵌模式集群---大数据之Nifi工作笔记0016
查看>>
NIFI大数据进阶_外部ZK模式集群1_实际操作搭建NIFI外部ZK模式集群---大数据之Nifi工作笔记0017
查看>>
NIFI大数据进阶_实时同步MySql的数据到Hive中去_可增量同步_实时监控MySql数据库变化_实际操作_03---大数据之Nifi工作笔记0035
查看>>
NIFI大数据进阶_实时同步MySql的数据到Hive中去_可增量同步_实时监控MySql数据库变化_操作方法说明_01---大数据之Nifi工作笔记0033
查看>>
NIFI大数据进阶_实时同步MySql的数据到Hive中去_可增量同步_实时监控MySql数据库变化_操作方法说明_02---大数据之Nifi工作笔记0034
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_01_实际操作---大数据之Nifi工作笔记0029
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_说明操作步骤---大数据之Nifi工作笔记0028
查看>>
NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027
查看>>
NIFI数据库同步_多表_特定表同时同步_实际操作_MySqlToMysql_可推广到其他数据库_Postgresql_Hbase_SqlServer等----大数据之Nifi工作笔记0053
查看>>
NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068
查看>>