HTML

最新推荐文章于 2024-07-18 08:55:40 发布

Kirl z

最新推荐文章于 2024-07-18 08:55:40 发布

阅读量308

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_47230102/article/details/115433061

版权

Web开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

HTML

1. 什么是HTML?
2. 元素
3. 属性
4. HTML 文档结构
5. HTML 注释
6. 实体引用
7. 常用的元素

1. 什么是HTML?

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML 是用来描述网页的一种语言。

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

2. 元素

2.1 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

2.2 HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签.

开始标签	元素内容	结束标签
< p>	这是一个段落	< /p>
< a href=“default.htm”>	这是一个链接	< /a>
< br>	换行

实例:

<p>我的第一个网页</p>

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

2.3 嵌套元素

把元素放到其它元素之中——这被称作嵌套
HTML 文档由相互嵌套的 HTML 元素构成

<p>我爱我的<strong>祖国</strong></p>

这里使用 <strong> 标签，来强调祖国这一内容。

2.4 块级(block)元素和内联(inline)元素

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>

<strong>第一句话</strong>
<strong>第二句话</strong>
<strong>第三句话</strong>
<strong>第四句话</strong>

块级元素在页面中默认以块的形式展现。更多的是表示一类段落的语义。
内联元素不会导致文本换行。更多的表示一个词、一句话等语义。

2.5 空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img> 是用来在元素<img> 所在位置插入一张指定的图片。

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

<img src="图片地址源">

在这里插入图片描述

注意:
HTML 标签对大小写不敏感：<P> 等同于 <p>。

3. 属性

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

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。

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

3.1 布尔属性

<input type="text" disabled>
<input type="text" disabled="true">
<input type="text" disabled="false">
<input type="text" disabled="随便写什么">

上述四种写法，其实效果是完全一样的。都是使得一个输入(input)禁止输入(disabled)。

<input type="text">

3.2 属性实例

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

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

3.3 HTML 属性常用引用属性值

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

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

注意:
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

 name='John "ShotGun" Nelson'

在一个HTML中已使用一种引号，你可以在此引号中嵌套另外一种引号：

<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>
<a href="http://www.example.com" title='你觉得"好玩吗"？'>示例站点链接</a>

4. HTML 文档结构

<!DOCTYPE html>
<html lang="zh-hans">
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		<h1>这是我做的第一个网页</h1>
		<p>我的第一个段落。。</p>
		<img src="image/bite.jpg" alt="比特">
	</body>
</html>

5. HTML 注释

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号 包括起来，比如：

<p>我在注释外！</p>
<!-- <p>我在注释内！</p> -->

6. 实体引用

原义字符	等价字符引用
<	<lt 是小于(little) 的意思
>	> gt 是大于(great) 的意思
"	" quot 是引号(quotation mark) 的意思
’	' apos 是单引号(apostrophe)的意思
&	& amp 是 and 符(ampersand)的意思

实例:

<p>HTML 中用 <p> 来定义段落元素。</p>
<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

7. 常用的元素

7.1 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。
<hr> 标签在 HTML 页面中创建水平线。

<h1>学习 Java</h1>
<h2>学习 Java 基础</h2>
<h2>学习 数据结构</h2>
<h3>学习线性表</h3>
<h3>学习树</h3>
<h2>学习 Java Web</h2>

标签	描述
< html>	定义 HTML 文档
< body>	定义文档的主体
< h1> - < h6>	定义 HTML 标题
< hr>	定义水平线
< !–…-->	定义注释

7.2 段落

HTML 可以将文档分割为若干段落。
段落是通过 <p> 标签定义的。

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

标签	描述
< p>	定义一个段落
< br>	插入单个折行（换行）

7.3 列表

无序列表(Unordered Lists)： <ul>
有序列表(Ordered Lists): <ol>
列表项目(List Items): <li>

无序列表

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

有序列表

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

嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

7.4 超链接

HTML使用标签 <a>来设置超文本链接。

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

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

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

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

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

超链接

<a href="https://www.baidu.com/">访问百度</a>

图片

<img src="图片地址">

块级无语义元素

<!-- 某个版块 -->
<div>
	<h2>...</h2>
	<p>...</p>
</div>
<!-- 另一个版块 -->
<div>
	<h2>...</h2>
	<p>...</p>
</div>

内联无语义元素

<p>大家一起往前<span>冲</span>啊！</p>

Kirl z

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录