Hexo
0%

html

发表于 更新于 分类于

HTML 教程

html 基础

因为在visdom中的text支持html标签，所以来简单学学html。
参考链接:菜鸟教程
[菜鸟工具在线编辑工具]https://c.runoob.com/front-end/61

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


实例解析

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

网页结构

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title> 页面标题</title>
  </head>

  <body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <p>这是另一个段落</p>
  </body>
</html>

只有与之间的元素才会显示

标题

-

这是一个标题


段落

这是一个段落。

段前段后有空行
链接 这是一个链接
图片

html元素


空元素标签
html属性 html设置属性，常以键值对的形式出现 这是一个链接 常用属性： class id style title
html
水平线


换行

注释
格式化标签
1
2
3
4
5
6
<b>加粗文本</b><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<small>这个文本是缩小的</small>
<big>这个文本字体放大</big>

1
2
3
4
5
6
7
8
9
<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

此例演示如何使用 pre 标签
对空行和    空格
进行控制
1
2
3
4
5
6
7
8
9
10
11

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

地址

1
2
3
4
5
6
7
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

创建电子邮件标签

首字母缩写和缩写

1
2
3
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

文字显示方向
1
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

块引用

1
2
3
<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

删除字和插入字的效果
1
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

html 链接属性 target:定义文档在哪个窗口打开 id属性

1
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

1
2
3
4
5
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

html

, <style>, <meta>, <link>, <script>, <noscript>, and <base>.</p> <p><title> </p> <ul> <li>定义了浏览器工具栏的标题</li> <li>当网页添加到收藏夹时，显示在收藏夹中的标题</li> <li>显示在搜索引擎结果页面的标题<br><base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><base href="http://www.runoob.com/images/" target="_blank"></span><br></pre></td></tr></table></figure> <link> 标签定义了文档与外部资源之间的关系。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><link rel="stylesheet" type="text/css" href="mystyle.css"></span><br></pre></td></tr></table></figure> <style> 标签定义了HTML文档的样式文件引用地址.<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><style type="text/css"></span><br><span class="line">body {background-color:yellow}</span><br><span class="line">p {color:blue}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure> <meta> 元素 META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"></span><br><span class="line"><meta name="description" content="免费 Web & 编程 教程"></span><br><span class="line"><meta http-equiv="refresh" content="30"></span><br></pre></td></tr></table></figure> </li> </ul> <h1 id="HTML-样式-CSS"><a href="#HTML-样式-CSS" class="headerlink" title="HTML 样式- CSS"></a>HTML 样式- CSS</h1><p>CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"># 使用添加到 <head> 部分的样式信息对 HTML 进行格式化 内部样式表 应用于单个文件</span><br><span class="line"><head></span><br><span class="line"><meta charset="utf-8"> </span><br><span class="line"><title>菜鸟教程(runoob.com)</title></span><br><span class="line"><style type="text/css"></span><br><span class="line">h1 {color:red;}</span><br><span class="line">p {color:blue;}</span><br><span class="line"></style></span><br><span class="line"></head></span><br><span class="line"></span><br><span class="line"># 使用 style 属性制作一个没有下划线的链接 内联样式 应用于个别元素</span><br><span class="line"><a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a></span><br><span class="line"># 标签链接到一个外部样式表 外部引用</span><br><span class="line"><head></span><br><span class="line"><meta charset="utf-8"> </span><br><span class="line"><title>菜鸟教程(runoob.com)</title> </span><br><span class="line"><link rel="stylesheet" type="text/css" href="styles.css"></span><br><span class="line"></head></span><br><span class="line">font-family（字体），color（颜色），和font-size（字体大小）， text-align（文字对齐）</span><br><span class="line"></span><br><span class="line"># 图像</span><br></pre></td></tr></table></figure><br><img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"><br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"># 表格</span><br></pre></td></tr></table></figure></p> <p><table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table><br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"># 列表</span><br></pre></td></tr></table></figure></p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <p>```</p> <h1 id="区块-块级和-内联级"><a href="#区块-块级和-内联级" class="headerlink" title="区块 块级和 内联级"></a>区块 <div> 块级和<span> 内联级</h1><h1 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h1><hr> <p>2018-10-05</p> <h1 id="前言：主要是为了爬虫做一些补充，此次主要是为了爬虫做补充，不涉及html的理论"><a href="#前言：主要是为了爬虫做一些补充，此次主要是为了爬虫做补充，不涉及html的理论" class="headerlink" title="前言：主要是为了爬虫做一些补充，此次主要是为了爬虫做补充，不涉及html的理论"></a>前言：主要是为了爬虫做一些补充，此次主要是为了爬虫做补充，不涉及html的理论</h1><h2 id=""><a href="#" class="headerlink" title=""></a><script></h2><p>用于加载脚本文件，指一段javascript代码，暂时不影响后续操作。</p> <h2 id="amp"><a href="#amp" class="headerlink" title="&"></a><div>&<span></h2><p>区块 <div> 块级和<span> 内联级，本身没有太强的含义，前者以新行显示，后者不以新行显示。主要是作为容器存在，用于布局。</p> <h2 id="id-amp-class"><a href="#id-amp-class" class="headerlink" title="id&class"></a>id&class</h2><p>id具有唯一性，在一个网页内同一个命名只能使用一次，定义以#开头<br>class命名的类可以在一个网页使用无数次，定义以.开头<br>但两者都是定义的样式而已。</p> </style>