HTML基础之简介、结构、常见标签

HTML简介

  • 超文本标记语言(Hyper Text Markup Language,简称HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
  • HTML被用来结构化信息,也可用来在一定程度上描述文档的外观和语义。它是通向WEB技术世界的钥匙。
  • HTML是用来描述网页的一种语言。它不是一种编程语言,而是一种标记语言(markup language),标记语言是一套标记标签(markup tag),它使用标记标签来描述网页。

常用浏览器及内核

目前可称为五大浏览器四大内核
在这里插入图片描述
内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chorme/OperaBlinkchrome/opera浏览器内核 Blink是Webkit的分支

目前国内一般浏览器都会采用Webkit/Blink内核。如360、UC、QQ、搜狗等

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C(万维网联盟)是国际著名的标准化组织。
Web标准的构成:主要包括结构(HTML)、表现(CSS)和行为(JavaScript)。
最佳标准:结构、样式、行为相分离。分别写在HTML文件、CSS文件、JavaScript文件中

HTML、CSS、JavaScript的关系

  • HTML 用于构建网页结构,展示页面内容
  • CSS 用于美化网页,布局页面,设置网页元素
  • JavaScript 用于控制页面元素,与后端数据交互

HTML标签

标签的结构

<!DOCTYPE html> :表示当前的html文件是html5的文档(html5的规范)
<html lang="en"> : lang表示开发语言
<meta charset="UTF-8"> :charset表示使用的字符集,UTF-8支持中文
<html></html> : 页面的根标签
<head></head> :头部标签,页面的常规信息
<body></body>:主体标签,页面的主体信息

标签的类型

  • 单表签:<标签名/>
  • 双标签:<标签名></标签名>

常用标签

标题标签

<hn>内容</hn>    n的取值从1到6,数字越小字体越大,并且自动加粗、自动换行

段落标签

<p>内容</p>   

换行标签

<br/>

水平分割线标签

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

字体标签

<font size="字体大小" color="字体颜色" face="字形"> 内容 </font>  

文本格式化标签

<b>内容</b>  /  <strong>内容</strong>(推荐)   字体加粗   
<i>内容</i>  /  <em>内容</em>(推荐)           斜体           
<u>内容</u>  /  <ins>内容</ins>(推荐)         下划线       
<s>内容</s>  /  <del>内容</del>(推荐)         删除线  

图像标签

<img src="图像名" alt="图像加载异常提示信息" width="宽度" height="宽度"/>

关于路径:

  • 绝对路径:从根目录开始的路径
  • 相对路径:从当前目录开始的路径

路径的使用:

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

注意:

  • 反斜杠(’ \ ‘):在windows操作系统中以双反斜杠(’\’)作为路径分隔符
  • 斜杠(’ / '):是Linux操作系统下的路径分隔符

超链接标签

<a></a> 实现页面跳转

(1)文字超链接

<a href="URL(页面地址)" target="网页显示的位置"> 文字 </a>

(2)图像超链接

<a href="URL(页面地址)" target="网页显示的位置">
		<img src="图像名称"/>
</a>

特殊字符

    (1)空格:&nbsp;
	(2)大于:&gt;
	(3)小于:&lt;
	(4)版权符号:&copy;
	(5)注册符号:&reg;
	(6)摄氏温度:&deg;
	(7)乘号:&times;
	(8)除号:&divide;
	(9)平方上标:&sup2;
	(10)立方上标:&sup3;

下标标签

<sub>下标 </sub>

语义标签

<thead></thead>  表格头部
<tbody></tbody>  表格主体 

文本语义标签

<mark>内容</mark>     文本高亮显示
<cite>内容</cite>     应用标签

背景标签

<body bgcolor="颜色值">       设置页面背景颜色
<body background="图像名">    设置背景图像

滚动标签

(1)图像滚动

<marquee behavior=" " direction=" ">
    <img src="图像路径" width=" " height=" ">
</marquee>
  • direction属性表示滚动方向,取值有4个:left、right、up、down
  • behavior属性表示滚动的速度,数字越小速度越快

(2)文字滚动

<marquee behavior="" direction="">
   <font color="" size="" face="">滚动的文字</font>
</marquee>
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页