HTML基本应用

最新推荐文章于 2024-07-24 16:53:23 发布

滚滚球

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量662

点赞数 1

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

本文链接：https://blog.csdn.net/lzx2953763519/article/details/104389750

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2020.2.11HTML基本应用：

什么是HTML以及HTML文档解释：

HTML ：是一种超文本标记语言（HyperText Markup Language简称HTML），也是一种用于创建网页的标准标记语言，使用标记标签来描述网页

HTML文档：包含了HTML标签及文本内容，也叫做web页面

HTML文档的后缀名：.html或者是.htm(两者是没有什么区别的)

元素组成：

//这是声明为HTML5文档

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uYfA096L-1582082806808)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1581393286284.png)]

通用声明：

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//元素是HTML页面的根元素

//元素包含了文档的元（meta）数据，如定义网页编码格式为utf-8。

//元素描述了文档的标题

//元素包含了可见的网页内容

HTML标题：

–

元素定义一个标题（

定义最大的标题，

定义最小的标题。浏览器会自动地在标题的前后添加空行。）

HTML段落：

一个段落

元素定义一个段落（浏览器会自动地在段落的前后添加空行）

HTML图像：通过标签来定义的。例如

<br>换行，无结束标签

注意：图像的名称和尺寸是以属性的形式提供的。

注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML标签：

HTML标记标签：通常被称为HTML标签（HTML tag），也是由尖括号包围的关键词，比如<html>，通常			   是成对出现的。
    		比如<b>（开始标签/开放标签）和</b>（结束标签/闭合标签）
格式：<标签>标签内容</标签>

HTML元素：

HTML标签和HTML元素意义相同，但严格来说一个HTML元素包含了开始于结束标签

HTML元素：

<p>段落</p>
某些元素具有空内容（empty content）

web浏览器：是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来解决如何展现HTML的内容给用户。

<a href="default.html"></a>
HTML的链接：通过标签<a>来定义的。例如<a href="https://www.runoob.com">这是一个连接</a>
提示:在 href 属性中指定链接的地址。

换行

大多数HTML元素拥有属性。

HTML空元素：

没有内容的HTML元素，空元素在开始标签就是关闭的
<br>是在没有关闭标签的空元素
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

嵌套的HTML元素：

HTML文档由嵌套的HTML元素构成。

HTML文档实例：

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>
包含是三个HTML元素

HTML实例解析：

<p>元素

元素定义了HTML文档的主体。元素定义了整个HTML文档。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8h60TZh6-1582082806809)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1581393208680.png)]

HTML编译器：

HTML编辑器推荐：VS Code：https://code.visualstudio.com/

Sumlime Text：http://www.sublimetext.com/

接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件，其他两个工具操作步骤类似。

VS Code

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

使用步骤：

1、新建HTML文件，

2、另存HTML文件（文件名.html 或者文件名.htm）

3、在浏览器中运行这个HTML文件（右击编辑器上的文件名，选择默认浏览器打开Open In Default Browser，也可以是其它的浏览器Open In Other Browsers）

HTML属性：

属性解释：

属性是HTML元素提供的附加信息，可以在元素中添加附加信息，属性一般描述于开始标签，并且总是以名称/值对的形式出现，例如：name=“value”。HTML可以设置属性。

HTML属性常用引用属性值：

属性值应该始终被包括在引号以内。

双引号是最常用的，不过使用单引号也没有问题。

提示：在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号，例如：name=‘John“ShotGun”Nelson’

HTML提示：使用小写属性

HTML提示：使用小写标签

HTML标签对于大小写不敏感

等同于

。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在 (X)HTML 新版本中强制使用小写属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tw41Nn2-1582082806810)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1581472306940.png)]

HTML标题：

标题的重要性：

标题很重要，请确保锦囊HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为你的网页的结构和内容编制索引。

因为用户可以用过标题来快速浏览你的网页，所以用标题来呈现文档是很重要的。

应该将h1用作主标题（最重要的），其后是h2（次重要的），以此类推。

HTML水平线：

<hr>标签在HTML页面中创建水平线。<hr>元素可用于分隔内容

HTML注释：

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!-- 这是一个注释 -->
注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML 提示 - 如何查看源代码

单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

HTML段落：

HTML 输出- 使用提醒

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<br>,<br/>和<br />的区别：
<br>是HTML写法，也是XHTML1.1的写法，还是XML写法
<br/>是XHTML为兼容HTML的写法，也是XML写法
HTML5因为兼容XHTML，所以三种都可以使用。

HTML文本格式化：

HTML 格式化标签

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的： 
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

HTML文本格式化标签：

定义粗体文本

定义着重文字

定义斜体字

定义小号字

定义加重语气

_{定义下标字}

^{定义上标字}

定义插入字

~~定义删除字~~

HTML“计算机输出”标签

定义计算机代码

定义键盘码

定义计算机代码样本

定义变量

<pre>定义预格式文本

HTML引文，引用，及标签定义

定义缩写

<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目

HTML链接：

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 超链接（链接）

HTML使用标签来设置超文本链接。(定义一个超级文本链接)

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML链接语法

<a href="default.html">链接文本</a>

target属性：

使用target属性，可以定义被链接的文档在何处显示。

例如：

target="_blank"新打开一个窗口。

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

HTML链接-id属性：

id属性可用于创建在一个HTML文档书签标记。

提示：书签不是以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的

例如：

在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到“有用的提示部分（id="tips"）”
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

HTML头部：

HTML 元素

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

HTML 元素：

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

HTML元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML元素：

<link>标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">（href后接的是）
</head>

HTML

<style>标签定义了HTML文档的样式文件引用地址。
在<style>元素中你也可以直接添加样式来渲染HTML文档
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML 元素

meta标签描述了一些基本的元数据。

标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

一般放置于区域

实例：

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML

<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述。

HTML元素

<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面的链接标签的默认链接地址  
<link>定义了一个文档和外部资源之间的关系    
<meta>定义了HTML文档中的元数据    
<script>定义了客户端的脚本文件    
<style>标签定义了HTML文档的样式文件引用地址。

HTML样式CSS

CSS用于渲染HTML元素标签的样式。

如何使用CSS：

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

最好的方式是通过外部引用CSS文件.

内联样式：

使用内联样式的方法是在相关的标签中使用样式属性。

样式属性可以包含任何 CSS 属性。

以下实例显示出如何改变段落的颜色和左外边距。

例如:

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色，字体大小：

可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

HTML 样式实例 - 文本对齐方式：

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

颜色标记：background：rag（）；

内部样式表：

当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表：

直接在内部输入link+enter

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML样式标签：

定义资源引用地址

HTML图像：

HTML图像标签源属性（Scr）

在 HTML 中，图像由标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义地址：

<img src="url" alt="some_text">

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

在浏览器无法载入图像时，替换文本属性显示失去的信息

<img src="boat.gif" alt="Big Boat">

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML表格

表格定义由：

行由：

单元格:

表头：（会自动把内部的字体变粗）

创建表格：<table+enter>

隐藏边框属性

合并单元格：<td rows+enter键=“2”>大部分单元格都是上下合并，并且合并一个，会挤出相应的单元格在整个表的外部，所以合并过后要注意删除一些多余的单元格

table属性除了broder还有cellspacin、 cellpadding（这两个相当于表格的大小） bordercolor（背景颜色）

HTML列表：

<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定义列表项描述

HTML有序列表：使用
标签，并且项目使用粗圆点进行标记。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7kJELyLq-1582082806810)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1582050509697.png)]

HTML无序列表：使用
标签，项目使用数字标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HpNahdhi-1582082806810)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1582050608840.png)]

HTML区块：

<div>
    块级元素，可用于组合其他HTML元素的容器。显示拆行。
    文档布局。使用表格定义布局的老式方法。
    定义文档区域。
    如果与 CSS 一同使用，可用于对大的内容块设置样式属性
<span>
    （行内元素）
    内联元素、用作文本容器。
    当与 CSS 一同使用时，可用于为部分文本设置样式属性。
这两种元素组合就合成了HTML

HTML区块元素：

<h1><p><ul><table>等等（有开始标签和结束标签的，以新行开始）

HTML内敛元素：

<b><td><a><img>等（不会以新行开始）

HTML表单：

一个区域，允许用户在表单中输入内容。用标签

为输入元素

<form>
input 元素
</form>

比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本域：

文本域：通过标签来设定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mzRRLjh-1582082806812)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1582052093140.png)]

密码字段：通过标签来定义:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bGkJw3vz-1582082806813)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1582052120484.png)]

单选按钮：由定义

复选框：定义了复选框

提交按钮：定义了提交按钮

HTML框架：

iframe语法:
<iframe src="URL"></iframe>
URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。也可以指定其按比例显示 (如：“80%”)。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的属性必须使用iframe的属性的页面，

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

中文编码问题：

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

滚滚球

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基本应用

2020.2.11HTML基本应用：什么是HTML以及HTML文档解释：HTML ：是一种超文本标记语言（HyperText Markup Language简称HTML），也是一种用于创建网页的标准标记语言，使用标记标签来描述网页HTML文档：包含了HTML标签及文本内容，也叫做web页面HTML文档的后缀名：.html或者是.htm(两者是没有什么区别的)元素组成：/...
复制链接

扫一扫