HTML常用的知识点总结

最新推荐文章于 2025-03-14 19:58:46 发布

总有一天success

最新推荐文章于 2025-03-14 19:58:46 发布

阅读量406

点赞数 1

分类专栏： html 文章标签： html html5 前端 visual studio code

本文链接：https://blog.youkuaiyun.com/qq_53524948/article/details/122362178

版权

html 专栏收录该内容

1 篇文章

订阅专栏

一、什么是HTML

（1）HTML是一种超文本标记语言，超文本就是在电脑纸质上实现不了的。
（2）HTML的标签有单标签和双标签两种：
单标签：<单词>
双标签：<单词></单词>

二、HTML标签的属性

书写格式：<单词属性1:“属性值1” 属性2:“属性值2”></单词>
作用:用来修饰标签,给标签提供更多信息,附加一些额外的功能

三、HTML的模板

在visual studio Code软件上你只需要在英文状态下打一个感叹号回车即可出现模板

<!DOCTYPE html>
<html lang="en"> //lang的属性是设置你浏览器翻译的语言en是英文 zh-cn为中文
<head>
    <meta charset="UTF-8">  //设置字符集为UTF-8
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
//显示页面内容
</body>
</html>

四、HTML注释

HTML注释分为两种
（1）单行注释：//
（2）多行注释：< !–注释的内容–>

五、常用的标签

（1）https://www.runoob.com/tags/html-reference.html
（2）标题标签：<h1><h2><h3><h4><h5><h6>且标题标签为单标签
（3）段落标签：<p></p>
（4）文本加粗标签：<strong></strong> 下划线标签： <ins></ins> 删除线标签：<del></del>
（5）文本斜体标签：<em></em>
（6）图片标签：<img src=“路径” alt=“无法正常加载图片时显示的文字”/>
（7）音频标签：<audio src=“路径” controls：作用是显示播放的按钮 loop：作用是循环播放 autoplay：作用是自动播放/></audio >
（8）视频标签：<video src=“路径” muted:作用是规定音频的输出应该被静音/></video >
（9）路径：
绝对路径：网络路径或者是从盘符开始找
相对路径：相对于当前的一个位置
./ 当前文件夹
…/ 上一级文件夹
…/…/ 上上一级文件夹
（10）跳转标签：<a href=“想要跳转的地址” target=“跳转时是否要用新开的页面是的话：_blank 否的话_self”></a>
跳转标签的应用之一：锚点
在需要添加锚点的地方设置标签的id=“英文名”，然后在a标签上添加 href="#英文名",在网页上点击a标签即可跳到设置锚点的地方例如：

<body>
<a href="#info">简介</a>
<h1 id="info">简介</h1>
</body>

（11）列表标签

无序列表
容器：<ul></ul>
具体的项：<li></li>
有序列表
容器：<ol></ol>
具体的项：<li></li>
自定义列表
容器：<dl></dl>
列表的名称：<dt></dt>
具体的项：<dd></dd>

（12）表格标签

<table></table>

表格属性：
边框：border=“1px” 设置表格的边框为1px
表格的内边距：cellpadding = “0” 设置表格的内边距为0px
表格线之间的距离：cellspacing=“0” 设置表格的单元格到单元格的空间为0px
行：<tr></tr>
列：<td></td> 先有行再有列所以它是dd（弟弟）
表头： <th></th>
表格合并：
合并行：rowspan
合并列：colspan 单词里面字母有L所以它是合并列
表格标题：<caption></caption>
下面是一个具体的示例：

  <body>
    <table border="1" cellspacing="0" cellpadding="0px">
      <caption>
        最喜欢的音乐
      </caption>
      <tr>
        <th width="200" height="20">歌曲</th>
        <th width="200" height="20">歌手</th>
      </tr>
      <tr>
        <td height="20">云烟成雨</td>
        <td height="20">房东的猫</td>
      </tr>
      <tr>
        <td height="20">十年</td>
        <td height="20" rowspan="2">陈奕迅</td>
      </tr>
      <tr>
        <td height="20">富士山下</td>
        <!-- <td height="20">陈奕迅</td> -->
      </tr>
      <tr>
        <td height="20" colspan="2">合计</td>
      </tr>
    </table>
  </body>

在这里插入图片描述
（13）表单标签

功能：用于收集用户输入的信息
表单容器：<form action=“服务器数据要提交的地址”></form>
input输入框：<input type=“text”>

type属性值：
text：文本输入框
password：密码输入框
hidden：隐藏输入框不会显示在网页中但是提交的话数据也是会随着提交
radio：单选输入框其中设置checked可以默认选中设置disabled是禁止选中
checkbox：多选框同样设置checked可以默认选中设置disabled是禁止选中
file：文件上传
name属性：提交数据时用户输入值的存放位置
placholder：输入框默认显示的提示文字
value属性：
-type为text,password,hidden的情况,功能:定义输入框的初始值
-type为radio,checkbox的时候,功能:定义选择相关联的值
-type为submit,reset,功能:定义按钮的文字

具体的例子：

<body>
    <h1>账号密码登录</h1>
    <form action="https://www.baidu.com/">
      <input
        type="text"
        name="username"
        placeholder="请输入用户名"
        value="总有一天会success"
      />
      <p>
        <input
          type="password"
          name="password"
          placeholder="请输入密码"
          value="123"
        />
      </p>
      <input type="hidden" value="123" name="隐藏id" />
      <input type="submit" />
      <input type="reset" />
    </form>
  </body>

在这里插入图片描述
5. 下拉框
容器： <select name=""></select>
下拉框选项：<option>具体内容</option>
6. 多行文本输入框：<textarea name="" cols=“30” rows=“10”></textarea >其中的cols表示宽度，rows表示高度
7. lable标签：lable标签可以将文字和选项框绑定，即使你点的是文字也会触发多选框的勾选，有以下两种设置方法

<input type="checkbox" id="one">
    <label for="one">敲代码</label>
    <label>
        <input type="checkbox">熬夜
    </label>

（14）div和span
div：div是行内块元素，从上到下排序
span：span是行内元素，主要用于修饰文字，没有大小，大小是由内容定的，从左到右排序
其他内容也可查询：https://www.w3school.com.cn/