Html及常用标签简介

最新推荐文章于 2023-05-06 14:51:06 发布

han_han__

最新推荐文章于 2023-05-06 14:51:06 发布

阅读量768

点赞数 1

分类专栏： html 文章标签： html 前端

本文链接：https://blog.csdn.net/han_han__/article/details/126411213

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML简介

此图为转载图片。

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML?

HTML 指的是超文本标记语言: HyperText Markup Language。
HTML 不是一种编程语言，而是一种标记语言。
将标签文字输入到浏览器当中。
标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。
HTML 文档包含了HTML 标签及文本内容。
HTML文档也叫做 web 页面。

如何创建html

！+teb快捷键，快速建成框架。
后缀名为.html或者.htm

html的结构

文字文本标签

（1）标题标签h

h标题标签是通过<h1> - <h6> 标签来定义的。

h标签特点：

可以使文字样式改变：大小和颜色。（h标签字体32px，普通字体16px）
独占一行。
双标签。

（2）段落标签p

双标签
独占一行

下划线和换行标签。

（3）下划线 hr

<hr>

（4）换行标签

<br>

新建多个标签的快捷键：br*10+teb键

hr和br特点：

都是不参与独占一行的元素讨论
都是单标签

浏览器

常见：UC qq浏览器 360浏览器

五大浏览器：chorme、Firefox、IE、Safari、Opera

1.Internet Explorer浏览器（IE）
IE浏览器微软公司旗下，目前用户量最多（主要是因为微软的绑定销售）。
IE开发计划开始于1994年夏天，微软为抵抗当时主流的网景浏览器（Netscape Navigator），要在Windows中开发适合自己的浏览器。
微软和Spyglass合作开发的IE浏览器
IE内核：Trident
IE渲染引擎：Trident
IEjs引擎：Chakra

2.Opera浏览器（欧朋）
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行
Opera浏览器创始于1995年4月。
2016年2月确定被奇虎360和昆仑万维收购。
特点：Opera浏览器因为它的快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇
Opera内核： Presto
直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。

3.Safari浏览器（苹果）
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。

为什么Safari浏览器能崛起，主要因为苹果手机的份额比较高。
Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与iPad和iPod touch的指定浏览器
Safari内核：Webkit
Safari渲染引擎：WebCore
Safari引擎：JavaScriptCore

4.Mozilla Firefox浏览器（火狐）
Firefox浏览器使Mozilla公司旗下浏览器，也是网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织。
2004年推出自己的浏览器Firefox，是一个自由及开放源代码的网页浏览器。
Firefox内核：Gecko
Firefox渲染引擎：Gecko
Firefox引擎：Monkey
Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。

5.Google Chrome浏览器（谷歌）
Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面
编程界的独爱
开始Chrome采用webkit作为浏览器内核
到2013年4月份，Google宣布称将为Chrome浏览器开发新的自主浏览器引擎Blink，在最新的Chrome开发版本中，Blink已经正式现身。
Chrome内核：Blink
Chrome渲染引擎：webcore
Chrome引擎：V8

（5）div和span

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。定义了文档的区域，块级 (block-level)
HTML <span> 元素是内联元素，可用作文本的容器。用来组合文档中的行内元素，内联元素(inline)。
特点：div独占一行，span非独占一行。

（6）锚点标签<a>

链接的分类：

1.外部链接 ：需要添加http://的域名，如 <a href="http://www.baidu.com/">百度</a>

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称，如<a href="index.html">内部链接</a>

3.空连接：如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#”），表示该链接暂时为一个空链接。

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件，如<a href="image.zip">下载图片</a>

5.网页元素链接：在网页中各种网页元素，如文本、图像、表格、音频、视频等都可以插入超链接

标签定义及使用说明

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的链接语法

href后写链接的目的地，可以是网络路径，本地路径，图片，也可以用于下载和定位。

特点：

1.颜色和文字样式有变化。
有链接跳转的功能。
非独占一行。

（6）base标签使用的注意事项

base 标签在使用的时候，如果原本的a标签有target属性的就按照自身的来，如果没有才按照base来。在head中定义。

target属性

可以定义被链接的文档在何处显示

_blank新启一个页面
_self本页面打开

总结

标签名	双标签/单标签	是否独占一行
h	双标签	独占一行
p	双标签	独占一行
hr	单标签	一般不参与讨论（独占）
br	单标签	一般不参与讨论（非独占一行）
div	双标签	独占一行
span	双标签	非独占一行
a	双标签	非独占一行