HTML学习(全内容)

已于 2023-05-03 16:38:01 修改
阅读量313 收藏 9
点赞数 2
文章标签： html 学习 前端
于 2023-05-03 16:36:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73715441/article/details/130474301
版权

目录

1. HTML简介

HTML 是一个超文本标记语言

主要运用标签来在网页上展示文字

和其他语言类似，html也有注释，单行注释使用 // 表示，多行注释用 <-- --> 包裹

//标签分为双标签和单标签。标签都是成对出现
//双标签
<strong>加粗</strong>
//单标签
<br> //换行
<hr> //水平线

2. HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

vs code 直接输入 ! tab 键可以直接生成

3. 排版标签

  1. h1 ~ h6 (双标签，从1-6字体减小) --文字标签

    50%

  2. h1 只用一次 ，其他标签次数不做限制

  3. 段落标签：p(双标签)

    1. 独占一行

    2. 段落之间有空隙

4.换行和水平线标签

  • 换行：<br> （单标签）

  • 水平线：<hr> (单标签)

  • ! :浏览器不认识回车键换行

5. 文本格式化标签

在这里插入图片描述

  • 加粗 <strong> 123

  • 倾斜 <em> 123

  • 下划线 <ins> 123>

  • 删除线 <del> 123

6. 图像标签

<img src="图片的URL"> URL是图片的位置

src 是 img标签的一个属性

其他属性：

  • alt 属性：替换文本，图片无法显示的时候显示的文字
  • title属性：提示文本，鼠标悬停在图片上面的时候显示的文字

7. 超链接标签

<a href="网址">百度</a> href属性中填写网址跳转

其他属性：

  • target属性：属性值为 _black 是新窗口打开 target="_black"

开发初期不知道跳转页的时候，可以在href中输入#

<a href="#">空连接</a> 这样就可以实现不跳转，但是超链接

8. 音视频标签

8.1 音频标签

<audio src="音频的URL"></audio>

常见属性：

  • src 音频URL
  • controls 显示音频控制面板
  • loop 循环播放
  • autoplay 自动播放(一般浏览器会禁用此属性)

8.2 视频标签

<video src="视频URL"></video>

常见属性：

  • src 视频的URL
  • controls 显示视频控制面板
  • loop 循环播放
  • muted 静音播放
  • autoplay 自动播放(禁用)

9.列表

作用：布局内容排列整齐的区域

  • 无序列表( ul 内只可以包含 li 标签，每个 li 独占一行)

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

  • 有序列表(有1、2、3等)

        <ol>
      <li>hh</li>
      <li>hh</li>
      <li>hh</li>
      <li>hh</li>
    </ol>

  • 定义列表(dl嵌套dt和dd，dl是定义列表，dt是定义列表标题，dd是定义列表的描述/详情)

        <dl>
      <dt>服务中心</dt>
      <dd>申请售后</dd>
    </dl>
    <!-- dd中内容显示自动比dt内容向后缩进，并且都是独占一行 -->

10. 表格

table 嵌套 tr ，tr 嵌套 td / th

  • table 表格

  • tr 行

  • th 表头单元格

  • td 内容单元格

  • (表格默认没有边框线，可以用border给表格添加边框线)

        <table border="1">
      <tr>
        <th>姓名\学科</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td>99</td>
        <td>88</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>97</td>
        <td>96</td>
        <td>98</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>99</td>
          <td>88</td>
        </tr>
      </tbody>
     <tfoot>
      <tr>
        <td>李四</td>
        <td>97</td>
        <td>99</td>
        <td>98</td>
      </tr>
     </tfoot>
     <!-- 看不出来差距，但是结构更加清晰 -->
    </table>

10.1 合并单元格

  • 跨行合并(保留上面单元格) 添加属性rowspan

       <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">99</td>
          <td>88</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>97</td>
          <!-- <td>99</td> -->
          <td>98</td>
        </tr>
      </tbody>
      <tfoot></tfoot>
     <!-- 看不出来差距，但是结构更加清晰 -->
    </table>

  • 跨列合并(保留左边单元格) 添加属性colspan

        <table border="1">
      <thead>
        <tr>
          <th>姓名\学科</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td colspan="2">99</td>
          <!-- <td>99</td> -->
          <td>88</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>97</td>
          <td>99</td>
          <td>98</td>
        </tr>
      </tbody>
      <tfoot></tfoot>
     <!-- 看不出来差距，但是结构更加清晰 -->
    </table>

11. 表单

11.1 input简介

<input type="..."> type值不同，功能不同

可选属性:

  1. **text **文本框，可以输入单行文字
  2. password 密码框(输入的以 … 显示)
  3. **radio ** 单选框
  4. **checkbox ** 多选框
  5. **file ** 上传文件

在这里插入图片描述

11.2 占位文本：提示信息

<input type="..." placeholder="提示信息">

在这里插入图片描述

11.3 单选框 radio 常用属性

  1. name 控件名称，同组只可以选一个(单选功能)

在这里插入图片描述

  1. **checked **默认选中 (简写为一个单词) --设置默认选择女，进入页面即选择女

在这里插入图片描述

11.4 上传文件-file

<input type="file" multiple> 可以同时选择多个文件

11.5 多选框-checkbox

<input type="checkbox" checked>

  • checked 默认选中

在这里插入图片描述

12 下拉菜单

select 包裹 option 标签，select是下拉菜单整体，option 是下拉菜单的每一项

想要哪一个是默认选中的，就在标签的属性中添加 selected 属性

    <select >
      <option>武汉</option>
      <option>北京</option>
      <option>上海</option>
      <option>陕西</option>
      <option  selected>天津</option>
    </select>

在这里插入图片描述

13. 文本域

<textarea></textarea>> 可以实现换行操作

在这里插入图片描述

第一种在文本框中输入后，提示文字不会被替代

在这里插入图片描述

第二种输入文字后，提示文字会被替代，效果更好

14. label标签

两种写法，第二种不需要给 label 添加属性

在这里插入图片描述

label 标签的 for 属性必须和 input 中的 id 属性值相同

可以达到点击汉字也可以实现选中功能

支持label增大点击范围的表单控件有：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等

15. 按钮

<button type="...">按钮<button> ‘

三种属性：

  • submit 提交按钮，点击后可以提交到后台(默认功能)
  • reset 重置按钮，点击后将表单控件恢复默认值
  • button 普通按钮，默认没有功能，一般配合javascript使用

在这里插入图片描述

<!-- form 表单区域，有了表单区域，reset才能正常使用 -->
<!-- action="" 中填写的是项目中将用户名和密码发送的地址 (目标地址/后台地址) -->
	<form action="">
      用户名：<input type="text">
      <br>
      密码：<input type="password " >
      <br>

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

16. div和span标签和字符实体

16.1 div标签

在浏览器中换行展示(独占一行)

<div>独占一行</div>

16.2 span标签

在浏览器中不换行

<span>一行</span>

16.3 字符实体

电脑浏览器会自动将 “ ” “<” “>” 解析，不会正常显示

在这里插入图片描述

想要能够正常显示需要使用字符实体名称

在这里插入图片描述

17. html 综合案例(注册页面)

目标效果：

在这里插入图片描述

代码实现(以上页面包含前面所有内容，不会写的部分继续学习哦！)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html综合案例</title>

</head>
<body>
    <form action="">
    <h1>注册信息</h1>
    <!-- 个人信息 -->
    <h2>个人信息</h2>
    姓名：<input type="text" placeholder="请输入真实姓名">
    <br>
    密码：<input type="password" placeholder="请输入密码">
    <br>
    确认密码：<input type="password" placeholder="请在此输入密码">
    <br>
    性别：<input type="radio" name="gender" id="man"><label for="man">男</label>
          <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    <br>
    居住城市：
    <select>
      <option value="">北京</option>
      <option value="">上海</option>
      <option value="">陕西</option>
      <option value="">天津</option>
    </select>
    <!-- 教育经历 -->
    <h2>教育经历</h2>
    最高学历：
    <select>
      <option value="">小学</option>
      <option value="">初中</option>
      <option value="">高中</option>
      <option value="">职中</option>
      <option value="">职高</option>
      <option value="">大专</option>     
      <option value="">本科</option>
      <option value="">研究生</option>
      <option value="">博士</option>
    </select>
    <br>
    学校名称：<input type="text" placeholder="请输入正确的学校名称">
    <br>
    所学专业：<input type="text" placeholder="请输入所学专业"> 
    <br>
    在校时间：
    <select>
      <option value="">2015</option>
      <option value="">2016</option>
      <option value="">2017</option>
      <option value="">2018</option>
    </select>
    --
    <select>
      <option value="">2019</option>
      <option value="">2020</option>
      <option value="">2021</option>
      <option value="">2022</option>
    </select>
    <!-- 工作经历 -->
    <h2>工作经历</h2>
    公司名称：<input type="text" placeholder="请输入公司名称">
    <br>
    工作描述：<br>
    <textarea cols="30" rows="3"></textarea>
    <br>
    <input type="checkbox" name="" id=""> 已经阅读并同意以下协议
    <br>
    <a href="#">《用户服务协议》</a>
    <a href="#">《隐私服务》</a>
    <br><br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
  </form>
  </script>
</body>
</html>

好了，html学习到此结束，接下来，我们将踏入CSS和JavaScript的领域继续学习！

晊恦－love
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html学习内容.zip
01-01
html学习内容html学习内容html学习内容html学习内容html学习内容html学习内容 html学习内容html学习内容html学习内容html学习内容html学习内容html学习内容 html学习内容html学习内容html学习内容html学习内容html...
HTML学习内容创建兔小白网页
最新发布
04-19
在这个"HTML学习内容创建兔小白网页"的压缩包中，我们可以期待找到一系列关于HTML的学习资源，可能包括教程、示例代码以及与网页设计相关的图像。 首先，让我们深入理解HTML的基本结构。一个HTML文档由一系列元素...
HTML+CSS小白入门与进阶教程
qq_29192703的博客
08-07 9万+
本文旨在让你快速了解HTML语法结构，通过实例操作快速从无到有的入门与进阶。Html语言学习的特点有点像刚开始学word软件，word的功能就像html标签，用多了就熟悉了，不常用的一些功能现学现用即可（你要不知道什么是标签的意思不要着急，下面会讲到）。 [注]本文使用的开发软件是Notepad++，我在文章的最后提供的所有需要素材和网站源码，但我希望你能在看完整篇文章后再去下载，文章中实验代码...
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
wangluoanquan111的博客
09-05 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 1354
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
初学HTML详细全过程
m0_56364861的博客
04-21 3825
写的比较啰嗦，主要为了确保以后复习还能看懂。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html学习手册.md
11-26
此文件为个人学习HTML语言时自己写的学习笔记总结整理而成的教程，此文档为自己一人编辑，其中不免有一些错误及表达不当的内容，此文档仅用于学习交流
HTML学习总结
09-16
学习前端，HTML、CSS是必不可少的基础内容，但是有太多的标签需要记忆，初学者可能因此而感到烦恼，这也是我在学习过程中的一些感受，通过这段时间的努力学习，我将这段时间所学的内容进行了一番总结，希望对初学者...
HTML 标签的学习
m0_66030479的博客
06-06 529
html的学习
学习css及html中主要内容的总结。希望对初学则有帮助
02-18
学习css及html中主要内容的总结。希望对初学则有帮助。学习css及html中主要内容的总结。希望对初学则有帮助。
HTML学习
login_at_march_13的博客
05-11 425
HTML(Hyper Text Makeup Language)，超文本标记语言，是一种用于创建网页的标准标记语言（非编程语言）。html文档后缀名为html或htm，两者没有区别。html文档可由浏览器解析为我们常见的网页。 文档声明：在一个html文档的最前方可声明此文档的html版本，这有助于浏览器解析，声明不区分大小写，格式为<!doctype 声明>，现行的html5文档声明直接写html即可，即<!doctype html>；其他以前html版本声明方式网上可查（太复.
HTML学习笔记
知识在于理解,运用在于总结,高阶在于巩固!
08-12 222
补习一下前端基础知识。
HTML入门
李宥的博客
12-08 2870
指的是 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。浏览器内核（渲染引擎）： 负责读取网页内容，整理讯息，计算网
HTML详细教程
qq_40046544的博客
10-17 6811
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晊恦－love

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值