1 HTML and CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/ever__ever/article/details/140260403

HTMl(超文本标记语言)

HTML 概述

超文本标记语言用来描述和定义网页的内容
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦;它定义了网页内容的含义和结构
“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接

1. HTML标签功能区分

<!DOCTYPE html>
<!-- * 语言设置 -->
<html lang="en">
  <head>
    <!-- ** 元信息 -->
    <!-- * 字符集设置 -->
    <meta charset="UTF-8" />
    <!-- * IE 兼容 -->
    <!--
      ? http-equiv="X-UA-Compatible" IE 特有属性
      ? content="IE=edge" 规定 IE 使用最新版本的标准模式渲染
     -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- * referrer 设置 -->
    <meta name="referrer" content="no-referrer" />

    <!-- * 移动端兼容 -->
    <!-- 
      ? name="viewport" 移动端设置
      ? width=device-width 可视区域的宽度为设备宽度
      ? height=device-height 可视区域的高度为设备高度
      ? initial-scale=1.0 页面首次被显示时可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
      ? maximum-scale=1.0, minimum-scale=1.0 可视区域的缩放级别
      ? user-scalable 是否可对页面进行缩放,no 禁止缩放
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- * 标题 -->
    <title>功能区分</title>
    <!-- * 介绍 -->
    <meta name="description" content="网页介绍" />
    <!-- * 关键字 -->
    <meta name="keywords" content="网页关键字" />

    <!-- * 链接默认地址、默认打开方式 -->
    <!-- 
      ? 1. href：url；
      ? 2. target：在何处打开链接； 
      ? _blank：新窗口；_parent：上一级窗口；_self：当前窗口(默认)；_top：在浏览器的整个窗口打开链接,忽略任何框架
    -->
    <base href="" target="_blank" />

    <!-- * 引入首页样式 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- * 引入首页脚本 -->
    <script src="index.js" async></script>
  </head>
  <body>
    <!-- ** 语义化标签 -->
    <h1-h6>一 ~ 六级标题</h1-h6>
    <p>段落</p>
    <div>块</div>
    <span>行内块</span>

    <!-- ** HTML5 新增HTML语义化标签 -->
    <header>头部</header>
    <nav>导航</nav>
    <main>主体</main>
    <article>章</article>
    <section>节</section>
    <aside>侧边栏</aside>
    <footer>底部</footer>

    <!-- ** 超链接 -->
    <a href="http://www.baidu.com" target="_blank"></a>

    <!-- ** 图像 -->
    <img src="./image/logo.png" alt="图像替换文本" />

    <!-- * 列表 -->
    <!-- * 有序列表 -->
    <ul>
      <li>列表项</li>
    </ul>
    <!-- * 无序列表 -->
    <ol>
      <li>列表项</li>
    </ol>
    <!-- * 定义列表 -->
    <dl>
      <dt>列表项目</dt>
      <dd>列表项目描述</dd>
    </dl>

    <!-- ** 表格 -->
    <!-- 
      ? border：边框
      ? cellpadding：单元格间距
      ? cellspacing：单元格内边距 
    -->
    <table border="1" cellpadding="0" cellspacing="0">
      <!-- * 表格头部 -->
      <thead>
        <tr>
          <th>表头</th>
        </tr>
      </thead>
      <!-- * 表格脚注 -->
      <tfoot></tfoot>
      <!-- * 表格主体 -->
      <tbody>
        <tr>
          <td>单元格</td>
        </tr>
      </tbody>
    </table>

    <!-- ** 表单 -->
    <!-- 
      ? action：提交地址；
      ? method：提交方式 
    -->
    <form action="http://www.baidu.com" method="post">
      <!-- 
        ? value="初始值"
        ? placeholder="提示文本"
        ? checked="加载时是否选中(true、false)"
        ? disabled 加载时输入字段禁用
        ? readonly 加载时输入字段只读
        ? autofocus 加载时自动获取焦点
       -->
      <!-- * input 输入框 -->
      <input type="text" />
      <!-- 输入框 -->
      <input type="password" name="name" id="id" />
      <!-- 密码框 -->
      <input type="button" value="value" />
      <!-- 按钮(不触发提交) -->
      <input type="checkbox" name="name" id="id" />
      <!-- 复选框 -->
      <input type="radio" name="name" id="id" />
      <!-- 单选框 -->
      <label for="name">元素标注</label>
      <!-- 元素标注  -->
      <input type="file" name="name" id="id" />
      <!-- 文件提交 -->
      <input type="image" src="src" alt="alt" />
      <!-- 图像形式文件提交 -->
      <input type="reset" value="value" />
      <!-- 表单重置 -->
      <input type="submit" value="value" />
      <!-- 表单提交 -->

      <!-- * input HTML5新增属性 -->
      <input type="search" name="name" id="id" />
      <!-- 搜索框 -->
      <input type="color" name="name" id="id" />
      <!-- 颜色选择器 -->
      <input type="range" name="name" id="id" />
      <!-- 滑动选择框 -->
      <input type="date" name="name" id="id" />
      <!-- 日期选择框 -->
      <input type="time" name="name" id="id" />
      <!-- 时间选择框 -->
      <input type="datetime-local" name="name" id="id" />
      <!-- 日期,时间选择框 -->
      <input type="url" name="name" id="id" />
      <!-- url输入框:提交验证 -->
      <input type="email" name="name" id="id" />
      <!-- email输入框:提交验证 -->
      <input type="number" name="name" id="id" />
      <!-- 数字输入框:提交验证 -->
      <input type="tel" name="name" id="id" />
      <!-- 手机号码输入框:提交验证 -->

      <!-- * button 按钮(触发提交操作) -->
      <button></button>

      <!-- * textarea 文本域 -->
      <textarea name="name" id="id" cols="30" rows="10"></textarea>

      <!-- * select 下拉框 -->
      <select name="name" id="id"></select>
      <!-- 下拉框选项 -->
      <option value="value"></option>
    </form>

    <!-- ** 脚本 -->
    <script src="./js/vue.js"></script>

    <!-- ** 样式 -->
    <style></style>

    <!-- ** 音、视频 -->
    <!-- 
      ? src：url地址
      ? autoplay：是否自动播放
      ? loop：重复播放
      ? muted：是否静音
      ? controls: 显示控件
    -->
    <audio src="url" autoplay loop muted controls></audio>
    <video src="url" autoplay loop muted controls></video>

    <!-- ** 图形 -->
    <canvas></canvas>

    <!-- ** 格式化标签(不推荐) -->
    <i>斜体</i>
    <em>强调文本</em>
    <b>粗体</b>
    <strong>强调文本</strong>
    <u>下划线</u>
    <ins>插入</ins>
    <s>删除线</s>
    <del>删除文本</del>
    <sup>上标</sup>
    <sub>下标</sub>
  </body>
</html>

2. HTML标签显示区分

块元素

可设置“width”和“height”

默认情况下,元素的宽度会占满整行,这就意味着块级元素的宽度会受到父级元素的宽度影响,而且不管元素是否占满整行,它的兄弟元素都会另起一行

<div></div>
<h1-h6></h1-h6>
<p></p>
<ol></ol>
<ul></ul>
<dl></dl>
<table></table>
<form action=""></form>

内联元素(行内元素)

不能设置“width”和“height”

默认情况下,元素的默认宽度为content的宽度,高度由font-size决定,内联元素在未填满父级元素的时候会水平排列,一般只会用来承载内容

行内元素在水平方向上的padding、border、margin的特性和块元素一模一样

行内元素在垂直方向上的padding和border可以设置,但是不参与布局,margin不能设置

除了a元素,行内元素不能包含块元素

行内元素脱离文档流后,会变成块元素

<a href=""></a>
<span></span>
<label for=""></label>
<code></code>
<!-- 格式化标签 -->
<i>斜体</i>
<em>强调文本</em>
<b>粗体</b>
<strong>强调文本</strong>
<u>下划线</u>