HTML的标签

时间 2019-12-05

标签 html 标签栏目 HTML 繁體版

原文原文链接

引言：在介绍html的 img标签前，我会先简要讲一下html是什么。第一次接触html理解可能不会很深入，如有错误请帮忙指出。

什么是HTML?

HTML是一种超文本标记语言-Hyper Text Markup Language,它不是编程语言而是一种标记语言，是网页制做必备的html

超文本指的是页面内的图片、连接、音乐、程序等非文本元素
标记语言是一套标记标签，通俗的讲就是编程语言里的关键字
HTML使用标记标签来描述网页
HTML文档也叫web页面
而浏览器则用于读取HTML文件，并将其做为网页显示

HTML 标签

HTML标签是HTML语言中最基本的单位，也是最重要的组成部分实例:web

<body>
 <h1>个人第一个标题</h1>
 <p>个人第一个段落。</p>
 </body>
 </html>
复制代码

以上是一段html代码
HTML标签是指用尖括号包围起来的关键词，好比：<html>,</html>,<body>,<h1>,<p>
HTML标签一般是成对出现的，好比<h1>和</h1>
其中，前者是开始标签（开放标签），后者是结束标签（闭合标签）
每一个标签有其不一样的做用，常见的有

<h1>-定义标题chrome

<p>-定义段落shell

<a>-定义连接数据库

<img>-定义图像编程

HTML 图像

图像标签(`<img>`)和源属性(Src)

在HTML中，图像由<img>标签订义。<img>是空标签，只包含属性，没有闭合标签。若要在页面上显示图像，咱们须要用源属性（src）。src-“source”。源属性的值是图像的URL地址浏览器

定义图像的语法：

<img src="URL"/>缓存

如图所示

URL指储存图像的位置。若是名为“boat.gif”的图像位于www.w3school.com.cn的images目录中，那么其URL就是http://www.w3school.com.cn/images/boat.gif

替换文本属性

alt 为图像定义一段预备的可替代文本，在浏览器没法载入图像时，就会显示出这段文本，告诉读者浏览器失去的图片的信息安全

定义格式

<img src="URL" alt="text">cookie

图像尺寸

经过改变width和height的值来改变图片尺寸

定义格式

<img src="URL" width="50" height="50">

浏览器控制台（Chrome开发者工具）

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

如何打开？

在页面任意位置点击鼠标右键，->检查元素，或摁键盘上的F12便可打开

####了解面板

分为元素面板、控制台面板、源代码面板、网络面板、性能面板、内存面板、应用面板和安全面板

元素面板

使用元素面板能够自由的操做DOM和CSS来迭代布局和设计页面.

控制台面板

在开发期间，可使用控制台面板记录诊断信息，或者使用它做为 shell在页面上与JavaScript交互。

源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者经过Workspaces（工做区）链接本地文件来使用开发者工具的实时编辑器。

网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

性能面板

使用时间轴面板能够经过记录和查看网站生命周期内发生的各类事件来提升页面的运行时性能。

内存面板

若是须要比时间轴面板提供的更多信息，可使用“配置”面板，例如跟踪内存泄漏。

应用面板

使用资源面板检查加载的全部资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

安全面板

使用安全面板调试混合内容问题，证书问题等等。

参考文章

1.developers.google.com/web/tools/c… 2.www.w3school.com.cn/html/html_i…