HTML入门

最新推荐文章于 2024-08-10 00:19:28 发布

书生_yu

最新推荐文章于 2024-08-10 00:19:28 发布

阅读量537

点赞数 1

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

本文链接：https://blog.csdn.net/m0_56252128/article/details/118689296

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML概述

HTML指的是超文本标记语言是用来描述网页的一种语言。

您可以使用 HTML 来建立自己的 Web 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML不是一种编程语言，而是一种标记语言，它有一套标记标签。

HTML使用标记标签来描述网页。

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

HTML文档的后缀名包含.html .htm

HTML基本结构

1）<html> 标签：

<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签<html> ，以及一个结束标签</html>。

<html>
     …
    </html>

2) <head>标签：

<head> 元素必须包含文档的标题（title），可以包含样本、脚本、meta元数据信息以及其他更多的信息。

    <html>
      <head>…</head>
    </html>

3）<body>标签：

<body> 元素定义文档的主体。<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

  <html>
      <head>…</head>
      <body>
      …
      </body>
    </html>

HTML元素

HTML 文档由 HTML 元素定义。HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。HTML 文档由嵌套的 HTML 元素构成。

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

1）HTML标签分类

单标签：<hr />、<input type="text" />、<!Doctype html>等

双标签：<html></html>、<head></head>、<title></title>等

2）HTML标签关系

包含（嵌套）关系：<head> <title></title> </head> 父子关系，<title>嵌套在<head>中<head>为父、<title>为子。
并列关系：<html> <head></head> <body></body> </html> 兄弟姐妹， <head>与<body>并列同级于<html>中，<head>和<body>是兄弟关系。

注意：
在并列关系的例子中，<head>和<body>两者与<html>也是父子关系。

3）HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。例如，<br> 就是没有关闭标签的空元素，<br> 标签定义折行（换行）。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

<html>
  <body>
    <p>这是一个段落。</p>
    <p>这是一个<br />换行。</p>
  </body>
</html>

HTML 标签对大小写不敏感：<P>等同于 <p>，但一般建议用小写

HTML属性

1）属性是 HTML 元素提供的附加信息。

2）HTML 元素可以设置属性

3）属性可以在元素中添加附加信息

4）属性一般描述于开始标签

5）属性总是以键值对（名称/值）的形式出现，比如：name="value"。

键值对的定义：

键：值的编号或名称。值：要存放的数据。

例如：这是一个链接使用了 href 属性。

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

6）属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

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

7）属性和属性值对大小写不敏感。

常用属性：

属性	描述
`class`	为 html 元素定义一个或多个类名（类名从外部样式文件引入或在 HTML 文件的`<style>`标签中定义）
`id`	定义元素的唯一 id
`style`	规定元素的内联样式
`title`	规定元素的额外信息（可在工具提示中显示）

HTML class 与 id 属性

1）class 属性

class 属性为 HTML 元素定义一个或多个类名。

class 属性通常用于指向样式表中的类。

<p class="one">这是一个段落，定义了一个类名。</p>

<p class="one two">这是另一个段落定义多个类名。</p>

2）id 属性

id 属性定义 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

<h1 id="header">shuxing</h1>

HTML 标题标签

HTML 标题是通过 <h1> - <h6>标签进行定义的，分别对应文档结构中的每一级标题。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

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

HTML 水平线

<hr /> 是一个空元素，这里的“hr”是水平线的意思。

<hr /> 标签在 HTML 页面的作用是创建水平线。

<hr /> 元素可用于分隔 HTML 页面中的内容。

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

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

HTML 注释

添加或取消注释的快捷键：Ctrl+/

<!-- 这是一个注释 -->

HTML 注释写法如下：

HTML 段落

创建段落，是通过 <p> 标签定义的。

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

HTML 换行

<br> 标签是一个空标签，它没有结束标签。

HTML 格式化标签

标签	描述
`<strong>`与`<b>`	粗体标签
`<em>`与`<i>`	斜体标签
`<del>`与`<s>`	删除线标签
`<ins>`与`<u>`	下划线标签
`<sub>`	定义下标字
`<sup>`	定义上标字
`<small>`	定义小号字

HTML链接

<a> 标签

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

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

<a href="url">链接文本</a>

（1）HTML a 标签的target 属性

在 <a> 标签中使用 target 属性，规定在何处打开链接文档。

target 属性值有：

_blank：在新窗口中打开被链接文档。

_self：默认。在相同的框架中打开被链接文档。

_parent：在父框架集中打开被链接文档。

_top：在整个窗口中打开被链接文档。

framename：在指定的框架中打开被链接文档。

<a href="https://www.baidu.com" target="_blank">百度</a>

（2）HTML a 标签的 title 属性

title提示文本鼠标放到链接上显示的文字

<a href="https://www.w3cschool.cn" target="_blank" title="w3cschool">访问w3cschool</a>

HTML头部

<head> 元素包含了所有的头部标签元素。

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为：<title>, <style>, <meta>, <link>, <script>, <noscript>,<base>。

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<noscript>`	定义在脚本未被执行时的替代内容
`<style>`	定义了HTML文档的样式文件

（1）<title>元素：

<title> 标签定义了 HTML 文档的标题，在所有 HTML 文档中是必需的。

1）定义浏览器工具栏中的标题

2）提供页面被添加到收藏夹时的标题

3）显示在搜索引擎结果中的页面标题

<html>
   <head>
       <title>…</title>
   </head>
</html>

（2）<style>元素：

在<style> 元素中可以直接添加样式来渲染 HTML 文档:

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

（3）<meta>元素：

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

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者：

<meta name="author" content="书生">

每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="30">

（4）<link>元素：

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到 CSS 样式表:

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

<link>也可以设置网页的图标

<link rel="shortcut icon" href="图片url">

HTML图像

（1）<img>标签：

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

<img> 是空标签，它只包含属性，并且没有闭合标签。

定义图像的语法是：

<img src="url">

（2）alt属性：

在浏览器无法载入图像时，替代文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代

性的文本而不是图像。

<img src="logo.png" alt="html">

（3）设置图像大小：

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

width 与 height 属性值可以指定 px（像素）或 %（百分比）作为单位，默认单位为 px（像素）。

<img src="logo.png" alt="html" width="228" height="60">

HTML列表

HTML 支持有序列表、无序列表和自定义列表。

1）HTML 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<ul> 标签定义无序列表。将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

<ul>
<li>cf</li>
<li>cs</li>
<li>lol</li>
</ul>

2）HTML 有序列表

有序列表也是一列项目，列表项目使用数字进行标记。<ol> 标签定义了一个有序列表，列表排序以数字来显示。使用 <li> 标签来定义列表选项。

<ol>
<li>cs</li>
<li>cf</li>
<li>lol</li>
</ol>

3)自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的描述以 <dd> 开始。

<dl>
<dt>cf</dt>
<dd>枪战游戏</dd>
<dt>cs</dt>
<dd>枪战游戏</dd>
</dl>

HTML区块

大多数 HTML 元素被定义为块级元素或内联元素。

1）HTML 区块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束），另起一行的意思。例如： <div>, <h1>, <p>, <ul>, <table> 等元素。

2）HTML 内联元素

内联元素在显示时通常不会以新行开始。例如：<span>, <a>, <img>, <b>, <td> 等元素。

3）HTML <div> 元素

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器<div> 元素，没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行（换行）。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div style="color:#FF0000">
<h1>这是一个在 div 元素中的标题。</h1>
<p>这是一个在 div 元素中的文本。</p>
</div>

4）HTML <span> 元素

<span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<p>我的哥哥有 <span style="color:0000FF;font-weight:bold">蓝色</span> 的球鞋，我的姐姐有 <span style="color:FF0000;font-weight:bold">红色</span> 的球鞋。</p>

HTML框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

1）定义 <iframe> 标签的高度与宽度

height 和 width 属性用来定义 <iframe> 标签的高度与宽度。

2）定义 <iframe> 标签是否显示边框

frameborder 属性用于定义 <iframe> 是否显示边框。frameborder 属性默认值为“1”，表示开启边框。设置 frameborder 属性值为 "0" ，则表示移除 <iframe> 的边框。

<iframe src="https//www.baidu.com" width="300" height="300" frameborder="0">

HTML字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷