HTML

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

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

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

CSS

层叠样式表(Cascading Style Sheet,简称:CSS)是为网页添加样式的代码

CSS 是一门样式表语言, 不是一门编程语言,也不是标记语言。

CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释,不支持 // 注释。

  • padding:即内边距,围绕着内容(比如段落)的空间。

  • border:即边框,紧接着内边距的线。

  • margin:即外边距,围绕元素外部的空间

  • width :元素的宽度

  • background-color :元素内容和内边距底下的颜色

  • color :元素内容(通常是文本)的颜色