HTML复习总结

最新推荐文章于 2024-07-25 11:26:35 发布

太阳花ˉ

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量819

点赞数 34

分类专栏：前端学习文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_62831076/article/details/140217891

版权

前端学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML知识点汇总

简要概括

HTML（HyperText Markup Language)即超文本链接，是用来描述网页的一种语言，其本质不是编程语言，而是一种超文本标记语言
HTML通过标记标签来描述网页
HTML文档通过Web浏览器进行读取解析，最后以网页的形式显示出来

骨架结构

html:整个网页
head:网页头部，用来存放给浏览器看的信息
body:网页主体，存放给用户看的信息，如图片文字

<html>
 < head>
   <title>网页标题</title>
   <style></style>
  </head>
  <body>
    网页主体
  </body>
</html>

注释快捷键：Ctrl+/ ；

作用：读代码的解释和说明，提高可读性

标签介绍

排版标签

包括标题、段落、换行、分割线、文本格式化等标签

标题标签

h1-h6,用在文章标题、产品名称等，随着数字的增加字号逐渐减小

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

段落标签

<body>
  <p>段落</p>
</body>

换行和水平线

换行：
水平线：

文本格式化

<body>
  <!-- strong、em、ins、del自带强调含义 -->
  <strong>strong 加粗</strong>
  <b>b 加粗</b>
  <em>em 倾斜</em>
  <i>i 倾斜</i>
  <ins>ins 下划线</ins>
  <u>u 下划线</u>
  <del>del 删除线</del>
  <s>s 删除线</s>
</body>

多媒体标签

包括排版、超链接、图片、视频音频等

图像标签

在这里插入图片描述

<body>
  <!-- 以前网速慢，可能导致图片加载不出来，不想影响网页内容的浏览，用alt替换 -->
  <img src="./cat1.jpg" alt="这是一只猫">

  <img src="./dog.jpg" title="这是一只狗">

  <!-- 浏览器缩放图片，默认是等比例缩放 -->
  <img src="./cat.jpg" width="100">

  <img src="./dog.jpg" height="600">
</body>

超链接标签

作用：点击跳转到其它页面

<body>
  <a href="https://www.baidu.com/">跳转到百度</a>
  
  <!-- 跳转到本地文件：相对路径查找 --> 
  <!-- target="_blank" 新窗口跳转页面 --> 
  <a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

  <!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
  <a href="#">空链接</a>
</body>

音频

<body>
  <!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
  <!-- src:音频URL; controls:显示音频的控制面板； loop: 循环播放； autoplay: 自动播放-->
  <audio src="./media/music.mp3" controls loop autoplay></audio>
</body>

视频

<body>
  <!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
  <!-- src:视频URL; controls:显示音频的控制面板； loop: 循环播放；muted:静音播放； autoplay: 自动播放-->
  <video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>

列表标签

无序列表：排列整齐但不需要规定顺序，ul嵌套li

 <ul>
    <li>列表条目1</li>
    <li>列表条目2</li>
    <li>列表条目3</li>
  </ul>

有序列表:排列整齐且需要规定顺序，ol嵌套li

 <ol>
    <li>步骤1</li>
    <li>步骤2</li>
    <li>步骤3</li>
  </ol>

定义列表:dl嵌套dt和dd, dl→定义列表；dt→列表标题； dd→列表内容

<dl>
    <dt>服务中心</dt>
    <dd>申请售后</dd>
    <dd>售后政策</dd>
  </dl>

最终效果：

表格

基本使用

标签：table 嵌套 tr，tr 嵌套 td / th
注意：表格默认没有边框线，可使用border为其添加

<table border="1">
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td>100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>100</td>
      <td>198</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>全市第一</td>
      <td>全市第一</td>
      <td>全市第一</td>
    </tr>
  </table>

合并单元格

标签：thead:表格头部； tbody:表格主体； tfoot: 表格底部

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

在这里插入图片描述

表单

作用：收集用户信息，多用于注册、登录以及搜索
input标签：type属性值决定其功能

<body>
  <!-- 特点：输入什么就显示什么 -->
  文本框：<input type="text">
  <br><br>
  <!-- 特点：输入什么都是以 点 的形式显示 -->
  密码框：<input type="password">
  <br><br>
  单选框：<input type="radio">
  <br><br>
  多选框：<input type="checkbox">
  <br><br>
  上传文件：<input type="file">
</body>

占位文本：可用于提示信息

<body>
  文本框：<input type="text" placeholder="请输入用户名">
  <br><br>
  密码框：<input type="password" placeholder="请输入密码">
</body>

单选框：name:控件名称；checked:默认选中

 性别：
  <input type="radio" name="gender"> 男
  <input type="radio" name="gender" checked> 女

上传文件：默认只能上传一个，添加multiple即可实现多个共同上传

上传文件：<input type="file" multiple>

多选框：

<body>
  兴趣爱好：
  <input type="checkbox"> 敲代码
  <input type="checkbox" checked> 敲前端代码
  <input type="checkbox" checked> 敲前端 HTML 代码
</body>

在这里插入图片描述

下拉菜单：select 嵌套 option，select 为下拉菜单整体，option为每一项

<body>
  水果：
  <select>
    <option>提子</option>
    <option>葡萄</option>
    <option>柚子</option>
    <option>橘子</option>
    <option selected>橙子</option>
  </select>
</body>

文本域：

<textarea>请输入评论</textarea>

label标签：为了增大点击的范围

<body>
  性别：
  <input type="radio" name="gender" id="man"> <label for="man">男</label>
  <label><input type="radio" name="gender"> 女</label>
</body>

按钮：附带type属性值，submit:提交； reset:重置；

<body>
  <!-- form 表单区域 -->
  <!-- action="" 发送数据的地址 -->
  <form action="">
    用户名：<input type="text">
    <br><br>
    密码：<input type="password">
    <br><br>

    <!-- 如果省略 type 属性，功能是 提交 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
  </form>
</body>