跳转至

HTML 入门


  • 用于描述网页的内容

VSCode 里面编写代码:输入 html 然后选择第二个提示选项,生成基本的 html 模板代码

1 元素

  • <p>​:开始标签
  • p​:标签(元素)名称
  • class="editor-note"​:元素的一个属性,格式为key="value"
  • </p>​:结束标签
  • 除了开始结束标签,其他部分不需要可以不写

元素之间可以嵌套

  • 嵌套顺序必须正确(类似于括号间嵌套)
  • 元素名大小写都可,一般习惯小写
  • HTML 忽略缩进和换行

  • 忽略缩进:多个连续空格显示为一个

  • 忽略换行:代码换行不影响网页

2 注释

<!--​开头,-->​结尾

3 一张网页的基本元素&结构

  • 第一个元素通常是<!DOCTYPE>​,表示文档类型,告诉浏览器如何解析网页
  • <html>​元素是网页的顶层容器

  • lang​属性代表网页内容默认语言,简中为zh-cn

  • <head>​元素

  • CSS代码可以嵌入到head​元素之中

4 通用属性

  • id​属性指定元素唯一标识符,同一个网页中不可以重复
  • `class属性指定元素的分类

  • class​后面的值用""括起来,里面单词由空格分开

  • style​属性用来指定当前元素样式(CSS)

5 基本元素

  • <div>​通用标签,没有特殊含义,默认块级元素(CSS学到)
  • <span>​通用标签,没有特殊含义,默认行内元素,常用来给某段文字附加样式
  • <h1>​~<h6>​一级标题到六级标题,可以被搜索引擎索引
  • <p>​一个段落,默认块级元素,不通段间会显示明显行间距
  • <a>​一个超链接 ^b7f9e9

  • herf​:指定链接的目标 URL。可以是相对路径、绝对路径或其他协议的链接(如 mailto:​、tel:​ 等)。

  • target​:指定链接打开的方式。常用值有:

    • _self​:在当前窗口打开(默认值)。
    • _blank​:在新窗口或标签页中打开。
    • _parent​:在父框架中打开(如果有框架的话)。
    • _top​:在整个窗口中打开,取消所有框架。
    • title​:提供关于链接的额外信息,通常在鼠标悬停时显示。
    • 换行
    • <hr />​水平线

6 块级元素和行内元素

  • 块级元素(block):默认占据一个独立区域,在网页上会另起一行,占据100%宽度
  • 行内元素(inline): 默认与其他元素在同一行,不产生换行
    HTML 入门-块级元素和行内元素

7 文本修饰

html 的内容其实基本用不上, CSS 都能替代

8 多媒体

  • <img />​用于插入图片

  • src​ 属性指定图片的 URL

  • alt​ 属性指定图片无法显示时的替代文字
  • <video>​ (*) 用于放置视频,但是播放器界面因浏览器而异,因此不常用

  • src​ 属性指定视频的URL

  • <audio>​ (*) 用于放置音频,用法和 <video>​ 基本一致
  • <embed>​ (*) 用于嵌入外部内容

9 列表

  • <ol>​ 元素是一个有序列表容器(ordered list),列表项目前会产生数字编号
  • <ul>​ 元素是一个无序列表容器(unordered list)
  • <li>​ 表示列表项,用在 <ol>​ 或 <ul>​ 容器之中。

  • value 属性表示当前项目的编号,会在 <ol>​ 中显示出来

10 表格

  • <table>​ 是一个块级容器元素,表格的容器
  • <caption>​ 总是 <table>​ 里面的第一个子元素,表示表格的标题。该元素是可选的
  • <tr>​ 元素表示表格的一行(table row)
  • <th>​ 和 <td>​ 用于定义表格的单元格。 <th>​ 是标题单元格, <td>​ 是数据单元格

11 表单*

  • <form>​ 元素用来定义一个表单,容器

  • action​ 属性指定服务器接收数据的 URL

  • name​ 属性指定表单的名称,唯一
  • target​ 在哪个窗口展示数据
  • method​ (* 提交数据的 HTTP 方法
  • <label>​ 行内元素,提供表单控件的文字说明

  • for​ 属性指定关联控件的 id​ 属性

  • <button>​ 标签会生成一个可以点击的按钮,没有默认行为 type​ 属性: submit, reset, button
  • <select>​ 下拉菜单

  • multiple​ 属性指定是否允许多选

  • <option>​ 元素可用于 <select>​ 的选项

  • value​ 属性指定值

  • selected​ 属性指定是否为默认选中

  • <input>​ 显示一个输入框

12 其它

  • <iframe>​ 生成一个指定区域,在该区域中嵌入其他网页

  • 语义结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<body>
  <header>页眉</header>
  <nav>导航栏</nav>
  <main>
    <aside>侧边栏</aside>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
    <section></section>
  </main>
  <footer>页尾</footer>
</body>