html讲义

最新推荐文章于 2024-07-31 14:35:30 发布

Amin02

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量735

点赞数 13

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

本文链接：https://blog.csdn.net/weixin_74050482/article/details/137585400

版权

前端讲义专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML结构

HTML的结构一般包括<head>标签和<body>标签

<head>和<body>这2个标记符分别表示网页的头部和正文。

头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
<body></body>当中是网页实际显示的内容，正文标记符又被称为实体标记。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

实例

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

HTML编辑规范

文件拓展名默认使用htm或者html，便于操作系统或者程序辨认文件，而图片则基本上存为gif或jpg
浏览器默认忽视回车符，不过为了方便阅览，人们还是会习惯地在写完一段代码后进行回车
标记符号用尖括号括起来，带斜杠的元素表示该标记说明结束，大多数标记符必须成对使用，用以说明起始和结束。
必须使用半角而不是全角字符
HTML注释<--注释内容-->的内容不给予显示。

HTML 基础

标题<h1>-<h6>

HTML 标题是通过 <h1>-<h6>标签来定义的.(h是英文header标题的缩写)

这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：

<h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

实例

 <h1>这是标题1</h1>

 <h2>这是标题2</h2>

 <h3>这是标题3</h3>

 <h4>这是标题4</h4>

 <h5>这是标题5</h5>

 <h6>这是标题6</h6>

HTML 水平线<hr>

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

<p>hr 标签定义水平线：</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

HTML 注释

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

段落`<p>`

HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落。

实例

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 换行<br>

<br> 标签定义为一个换行符，它可以理解为简单的输入一个空行

<br> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

链接`<a>`

HTML 链接是通过标签<a>来定义的。既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

例：

<a href="http://www.w3cschool.cn">这是一个链接</a>

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。

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

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

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

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

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

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

HTML 空链接

HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

临时加的空链接，主要为了能更好的看到最终的效果。

基本语法：

<a href="#">链接文字</a>

其中“ # ”表示空链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。

示例：

<a href="https://www.w3cschool.cn/" target="">访问W3Cschool教程!</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

图像`<img>`

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。

举例如下：<img src="https://www.baidu.com/your-image.jpg" rel="external nofollow" >

请注意：img元素是自关闭元素，不需要结束标记。

示例：

 <img src="logonew2.png" width="206" height="36">

HTML 属性

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

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="https://www.baidu.com">这是一个链接使用了 href 属性</a>

HTML 属性常用引用属性值

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

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

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

属性参考

适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)