HTML浅学一下：多看手册多写代码-优快云博客

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144176077

HTML是什么？

1、HTML是用来编写网页的

2、浏览器解析页面，只能识别HTML、CSS、JavaScript

3、HTML 页面的结构、内容；CSS 页面的样式；JavaScript 动态修改页面，与后端交互等

HTML案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>HelloWorld</h1>
  <p>HelloWorld</p>
</body>
</html>

<!DOCTYPE html>，声明html的版本为html5。这也是目前最常用的html版本。

常用标签

标题：h1~h6

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>标题标签：h1~h6</h1></title>
  </head>
  <body>
    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
  </body>
</html>

段落：p

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>段落</title>
</head>
<body>
  <p>我是一个段落</p>
</body>
</html>

文本格式化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本格式化</title>
</head>
<body>
  <b>b加粗</b><hr/>
  <strong>strong加粗</strong><hr/>
  <i>i斜体</i><hr/>
  <em>em斜体</em><hr/>
  <small>small小号字</small><hr/>
  <sub>下标字</sub><hr/>
  <sup>上标字</sup><hr/>
  <ins>插入字</ins><hr/>
  <del>删除字</del><hr/>
</body>
</html>

链接：a

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>连接：a</title>
</head>
<body>
  <a href="https://www.baidu.com" target="_blank" title="baidu">逛百度</a>
  <a href="#maodian">我跳转到锚点</a>
  <a name="maodian">我是锚点</a>
</body>
</html>

head中定义的属性

meta：文档元信息
title：文档标题
base：文档内链接默认标签
style：css样式
link：外部css、js
script：文档内js

html中定义css

内联样式：标签的style属性中定义样式

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

内部样式：style标签中定义样式

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式：link引入css文件

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

图片：img

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

表格：tr、td、th

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格</title>
</head>
<body>
  <table border="2">
    <thead>
      <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1，列1</td>
        <td>行1，列2</td>
        <td>行1，列3</td>
      </tr>
      <tr>
        <td>行2，列1</td>
        <td>行2，列2</td>
        <td>行2，列3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

列表：ul、ol、li

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表</title>
</head>
<body>
  <h1>无序列表</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <h1>有序列表</h1>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
</body>
</html>

区块元素：div、span

html中的每一个元素都可以分为块级元素和行内元素。

他们在html中有不同的展现策略。

如果需要需要将一堆html元素整合在一起，以一个整体进行操作，这个时候我们往往会在这些元素的外层包裹div。

把div理解为画布就行

div，是块级元素，浏览器在展示的时候永远会新起一行

span，是内敛元素，并不会新起一行，一般用来包裹文字

html布局

html是无法单独布局的，往往需要结合css才行。

在古早时期，才会使用html的table实现布局。

本质上就是把画面当做一个表格，然后通过单元格在横纵坐标方向上的合并，实现排版的效果，

目前已经没人在这么干了

表单：form、input、label、select

网页除了展示之外，另一个重要功能就行执行用户交互。

用户是通过表单将数据传递给后端的。

而一次提交的数据，就是被封装在了一个表单中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>
</head>
<body>
  <form action="/" method="post"></form>
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>
</body>
</html>

iframe

当需要在页面中嵌入页面的时候，会用到iframe功能

<iframe src="URL"></iframe>

html5新特性

以上都是最基础的html标签，在html中提供了更多的功能

新元素

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

标签	描述
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。