HTML笔记

2024-10-13

字数统计: 2.5k字 | 阅读时长≈ 10分

HTML

HTML简介

DOCTYPE html声明为 HTML5 文档
html 元素是 HTML 页面的根元素
head 元素包含了文档的元（meta）数据，如 meta charset=”utf-8” 定义网页编码格式为 utf-8。
title元素描述了文档的标题
body 元素包含了可见的页面内容
h1 元素定义一个大标题
p 元素定义一个段落

HTML标签

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

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

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

HTML基础标签

HTML 文档

HTML 文档是通过html标签来定义的。

HTML文档主体

HTML 标题主体是通过body标签来定义的。

标题

HTML 标题（Heading）是通过h1 - h6 标签来定义的。

段落

HTML 段落是通过标签 p 来定义的。

链接

HTML 链接是通过标签 a 来定义的。

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

在 href 属性中指定链接的地址。

图像

HTML 图像是通过标签 img 来定义的.

1	<img src="/images/logo.png" width="258" height="39" />

src指向图像的地址，图像的名称和尺寸是以属性的形式提供的。

换行

换行标签为br

水平线

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

hr 元素可用于分隔内容。

注释

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

注释写法如下:

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

HTML属性

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

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

属性总是以 name=”value” 的形式写在标签内，name 是属性的名称，value 是属性的值。

HTML 文本格式化标签

标签	描述
b	定义粗体文本
em	定义着重文字
i	定义斜体字
smail	定义小号字
strong	定义加重语气
sub	定义下标字
sup	定义上标字
ins	定义插入字
del	定义删除字

HTML链接属性

1、href：定义链接目标。

这是超链接最重要的属性，用来指定链接的目的地，可以是另一个网页、文件、邮件、电话号码或 JavaScript。

2、target：定义链接的打开方式。

_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接（默认）。
_parent: 在父框架中打开链接。
_top: 在整个窗口中打开链接，取消任何框架。

3、rel：定义链接与目标页面的关系。

nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。

noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target=”_blank” 时。

noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。
noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。
noopener noreferrer: 同时使用noopener和noreferrer。例子: <a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

4、download：提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名，浏览器会提示下载并保存为指定文件名。

5、title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。

6、id：用于链接锚点，通常在同一页面中跳转到某个特定位置。

HTML 样式- CSS

如何使用CSS

内联样式- 在HTML元素中使用”style” 属性
内部样式表 -在HTML文档头部 head 区域使用style 元素来包含CSS
外部引用 - 使用外部 CSS 文件

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（字体大小）属性来定义字体的样式:

1
2
3

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

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

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

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

HTML 表格

HTML 表格由 table标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义），表格可以包含标题行（th）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

HTML 列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用

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

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。

列表项使用数字来标记。

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

HTML区块

HTML 区块元素

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

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: h1, p, ul, table

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: b, td, a, img

HTML div元素

HTML div 元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。

元素的作用是显示表格化的数据。

HTML span 元素

HTML span 元素是内联元素，可用作文本的容器

span 元素也没有特定的含义。

当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。

HTML布局

使用div元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

结果

使用表格

使用 HTML table 标签是创建布局的一种简单的方式。

大多数站点可以使用 div 或者 table 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
 
</body>
</html>

本文作者： 林姜
本文链接： http://example.com/2024/10/13/HTML笔记/