HTML

HTML (HyperText Markup Language) 是一种用于定义内容结构的标记语言。

HTML 属性包含了关于元素的一些额外信息,这些信息本身不会显现在内容中。

常用标签

  • button 标签定义一个按钮。

span

<span> 用来来组合行内元素,例如包含文本,没有固定的格式显示,通常用于样式来格式化。

div

div是块元素

列表(List)

Web 上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为:

  • 无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 <ul> 元素包围。

  • 有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个 <ol> 元素包围。

    列表的每个项目用一个列表项目(List Item)元素 <li> 包围。

无序列表

<ul>
<li>列表内容1</li>
<li>列表内容2</li>
<ul>

有序列表,type可以指定编号类型 , i小写阿拉伯字母,I大写阿拉伯数字。

start指定起始编号。

<ol type=”I”, start=”2”> <li>北京</li> <li>天津</li> <li>上海</li> </ol>

超链接

在下载链接时使用 download 属性 当您链接到要下载的资源而不是在浏览器中打开时,您可以使用 download 属性来提供一个默认 的保存文件名(译注:此属性仅适用于同源URL)。下面是一个下载链接到Firefox 的 Windows最新版本的示例

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows(64位)
</a>

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup> 和<sub>元素可以 解决这样的问题。例如

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9,那么 x 的值必为 3 或 -3。</p>

布局

  • <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>,且直接位于 <body> 中。最好不要把它嵌套进其它元素。

  • <article> 包围的内容即一篇文章,与页面其它部分无关(比如一篇博文)。

  • <section> 与 <article> 类似,但 <section> 更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以 标题 作为开头;也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中,也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中,取决于上下文。

  • <aside> 包含一些间接信息(术语条目、作者简介、相关链接,等等)。

  • <header> 是简介形式的内容。如果它是 <body> 的子元素,那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素,那么它是这些部分特有的页眉(此 <header> 非彼 标题)。

  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。

  • <footer> 包含了页面的页脚部分。

aside

class

class 属性定义元素的类名。class 用于指向样式表中的类(class),也可以通过 JavaScript 来改变带有指定 class 的 HTML 元素。

<html>
<head>
<style type="text/css">
        div.blog-1 {color:blue;}
        div.blog-2 {color:red;}
</style>
</head>

<body>
<p>class 演示如何使用, 使用CSS控制分类class的颜色</p>
<div class="blog-1">aaa</div>
<div class="blog-2">bbb.</div>
</body>
</html>

table

  • tr 一行

  • th 定义表格内的表头单元格。

  • td 定义表格内的标准单元格。

示例

<table border="2">
  <tr><th>编号</th><th>名称</th>
  </tr>
  <tr>
        <td>1</td>
        <td>智能路由器开发指南</td>
  </tr>
</table>

form

form表单用于和后台交互数据。默认为get 例如

    <form method="get", action="#">
    name:<input type="text", name="name"></input>

    mail:<input type="text", name="mail"></input>

<input type="submit", value="提交"></input>
    </form>