🪴 Obsidian Publish

html

8分钟阅读

HTML 格式化

HTML 文本格式化中包含“文本格式化标签”、“计算机输出标签”、“引用、引用和术语定义”。如，加粗、倾斜、短引用、长引用、地址等标签。

HTML CSS

<head>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
 
<!-- 内部样式表 -->
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
 
<!-- 内联样式-->
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
 
</head>

HTML 超链接

<a href="http://www.w3school.com.cn/">访问 W3School</a>
<!-- target 属性，什么方式打开。
下面是在新窗口打开文档 -->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
 
<!-- name 创建锚定?没懂 -->
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>

HTML 图像

<!-- src 链接，
alt 属性用来为图像定义一串预备的可替换的文本，当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息
align 所在文本的位置
-->
<img src="boat.gif" alt="Big Boat" align="bottom">
<!-- 图像还有下面两个标签 -->
<map>	定义图像地图。
<area>	定义图像地图中的可点击区域。

HTML 表格

<table>		<!-- 定义表格 -->
<caption>	<!-- 定义表格标题 -->
<th>		<!-- 定义表格的表头 -->
<tr>		<!-- 定义表格的行 -->
<td>		<!-- 定义表格单元 -->
<thead>		<!-- 定义表格的页眉 -->
<tbody>		<!-- 定义表格的主体 -->
<tfoot>		<!-- 定义表格的页脚 -->
<col>		<!-- 定义用于表格列的属性 -->
<colgroup>	<!-- 定义表格列的组 -->

HTML 列表

<!-- 无序列表 -->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 
<!-- 有序列表 -->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 块元素和行内元素

<div>	<!-- 定义文档中的分区或节（division/section）。 -->
<span>	<!-- 定义 span，用来组合文档中的行内元素。 -->

HTML 类和 ID

  • class - 类，通过 . 加上 class 来定位。
  • id：不能存在多个有相同 id 的元素，通过 # 加上 ID 来定位，id 名称对大小写敏。
<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
 
/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
  • 通过 ID 和链接实现 HTML 书签
  • 在 JavaScript 中使用 id 属性
<h2 id="C4">第四章</h2>
<a href="#C4">跳转到第四章</a>
 
<!-- 另一个页面中引用 -->
<a href="html_demo.html#C4">Jump to Chapter 4</a>
 
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

HTML Iframe

<!-- iframe 用于在网页内显示网页。 -->
<iframe src="_URL_"></iframe>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
 
<!-- iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性： -->
<iframe src="demo_iframe.htm" name="iframe_a" ></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a" >W3School.com.cn</a></p>

HTML 路径

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
<!-- 相对路径指向了相对于当前页面的文件。
在本例中，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：-->
<img src="/images/picture.jpg" alt="flower">
<!-- 在本例中，文件路径指向了位于当前文件夹中 images 文件夹里的一个文件：-->
<img src="images/picture.jpg" alt="flower">
<!-- 在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件：-->
<img src="../images/picture.jpg" alt="flower">

HTML 头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>Title of the document</title>
 
<!-- <base> 标签为页面上的所有链接规定默认地址或默认目标（target）： -->
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
 
<link rel="stylesheet" type="text/css" href="mystyle.css" />
 
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
 
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

HTML 布局

HTML5 语义元素

标签描述
<article>定义文章。
<aside>定义页面内容以外的内容。
<details>定义用户能够查看或隐藏的额外细节。
<figcaption>定义 <figure> 元素的标题。
<figure>规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>定义文档或节的页脚。
<header>规定文档或节的页眉。
<main>规定文档的主内容。
<mark>定义重要的或强调的文本。
<nav>定义导航链接。
<section>定义文档中的节。
<summary>定义 <details> 元素的可见标题。
<time>定义日期/时间。

W3School TIY Editor

HTML 字符实体与符号

HTML 文档类型

HTML 有多个版本。

 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">

如需完整的文档类型声明列表，请访问我们的 DOCTYPE 参考手册。

HTML 快速参考

HTML 快速参考

HTML 框架

参考(后面没看完)

HTML 教程