html语法学习笔记

已于 2022-04-22 16:55:33 修改
阅读量222 收藏
点赞数
分类专栏： 网页前端学习笔记 文章标签： html5
于 2022-04-22 16:44:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65188455/article/details/124347649
版权

目录

1.标题

2.段落

3.文本格式化标签（加粗，下划线，删除线，倾斜）

 4.图片

​

5.音频标签

6.视频标签

7.链接标签

 8.列表无序

9.列表有序

10列表自定义

 11.表格

 12.表格的标题表头

13.表格结构

14.表格合并单元格

 15.表单input基本使用

 16.表单input占位符

 17.表单input单选框

18.表单input上传文件

 19.表单input按钮

20.表单button按钮

 21.表单-下拉菜单

 22.表单-文本域

 23.表单-label标签

 24.没有语义的标签

25.字符实体

1.标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

</body>
</html>

运行结果：

2.段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <p>哔哩哔哩  <br>  （NASDAQ:BILI；HKEX:9626），英文名称：bilibili，简称B站，现为中国年轻世代高度聚集的文化社区和视频平台，该网站于2009年6月26日创建，被粉丝们亲切地称为“B站”。2018年3月28日，哔哩哔哩在美国纳斯达克上市。2021年3月29日，哔哩哔哩正式在</p>
    <hr>
    <p>北京时间2021年11月17日，哔哩哔哩公布了截至2021年9月30日的第三季度未经审计的财务报告。财报显示，B站三季度营收达52.1亿元人民币，同比增长61%，各项社区运营数据再创新高。 [243]  2022年2月，bilibili直播将上线开播前人脸认证功能，确保开播人与实名认证者一致，后续逐步在各个分区开放</p>
</body>
</html>

运行结果：

3.文本格式化标签（加粗，下划线，删除线，倾斜）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <b>加粗</b>
    <strong>加粗</strong>
    <hr>
    <u>下划线</u>
    <ins>下划线</ins>
    <hr>
    <i>倾斜</i>
    <em>倾斜</em>
    <hr>
    <s>删除线</s>
    <del>删除线</del>
</body>
</html>

运行结果：

 4.图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <img src = "./cuteboy.jpg" alt="这是个小男孩" title="鼠标悬停在图片的时候显示">
    <img src = "./cuteboy.jpg" alt="这是个小男孩" title="鼠标悬停在图片的时候显示" width="200">
    <img src="./cuteboy.jpg" width="200" height="300">
</body>
</html>

运行结果：

5.音频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <audio src="./11.mp3" controls autoplay loop></audio>
    <audio src="./11.mp3" controls ></audio>
</body>
</html>

运行结果：

6.视频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="./VID.mp4" controls autoplay muted loop></video>
</body>
</html>

7.链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <a href="https://www.baidu.com">跳转到百度</a>
    <br>
    <a href="./01标题.html">去0101标题.html</a>
    <hr>
    <a href="https://www.baidu.com" target="_blank">跳转到百度(新页面)</a>
</body>
</html>

运行结果：

 8.列表无序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
</body>
</html>

运行结果：

9.列表有序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <ol>
        <li>zhangsan:100</li>
        <li>lisi:80</li>
        <li>wanger:20</li>
    </ol>
</body>
</html>

运行结果：

10列表自定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <dl>
        <dt>购物中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>
</html>

 运行结果：

 11.表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <table border="2" width="300" height="200">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>帅</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>90分</td>
            <td>漂亮</td>
        </tr>
    </table>
</body>
</html>

 12.表格的标题表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <table border="1">
        <caption><strong>表头标题</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>帅</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>90分</td>
            <td>漂亮</td>
        </tr>
    </table>
</body>
</html>

运行结果：

13.表格结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <table border="1">
        <caption><strong>表头标题</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>帅</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>90分</td>
                <td>漂亮</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td>总结</td>
                <td>优秀</td>
                <td>优秀</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

运行结果：

14.表格合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <table border="1">
        <caption><strong>表头标题</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td >小哥哥</td>
                <td rowspan="2">100分</td>
                <td>帅</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <!-- <td>90分</td> -->
                <td>漂亮</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">优秀</td>
                <!-- <td>优秀</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

运行结果：

 15.表单input基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框：<input type="text">
    <br>
    密码框：<input type="password">
    <br>
    单选框：<input type="radio">
    <br>
    多选框：<input type="checkbox" name="" id="">
    <br>
    上传文件：<input type="file" name="" id="">
</body>
</html>

运行结果：

 16.表单input占位符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">
</body>
</html>

运行结果：

 17.表单input单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- checked默认选中 -->
    性别：<input type="radio" name="sex"> 男
         <input type="radio"name="sex"> 女

     <hr>
     性别：
     <input type="radio" name="sex"> 男
    <input type="radio"name="sex" checked> 女
     <hr>
     <input type="checkbox" checked>
</body>
</html>

运行结果：

18.表单input上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <input type="file">
    <hr>
    <!-- 批量上传文件 -->
    <input type="file" multiple>
</body>
</html>

运行结果：

 19.表单input按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <form action="">
        用户名：<input type="text">
        <br>
        <br>
        密码：<input type="password">
        
        <hr>
    <!-- 按钮 -->
        <input type="submit">
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
</body>
</html>

运行结果：

20.表单button按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <button type="submit"> 提交按钮 </button>
    <button type="reset"> 重置按钮 </button>
    <button type="button">普通按钮</button>
</body>
</html>

运行结果：

 21.表单-下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
        <option value="">重庆</option>
    </select>
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
        <option value="" selected>重庆</option>
    </select>
</body>
</html>

运行结果：

 22.表单-文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <textarea name="" id="" cols="30" rows="10">
        
    </textarea>
</body>
</html>

运行结果：

 23.表单-label标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    性别：
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <input type="radio"name="sex" id="nv"> <label for="nv">女</label>
    <hr>
    <label ><input type="radio" name="sex" >男 </label>
    <label ><input type="radio"name="sex" id="nv">女 </label>
</body>
</html>

 

 24.没有语义的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    普通文字
    <div>这是div标签1</div>
    <div>这是div标签2</div>
    <span>这是span标签1</span>
    <span>这是span标签2</span>
</body>
</html>

运行结果：

25.字符实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <!-- 网页不认识多个空格，只认识一个 -->
    这是html文档，我在       学习。
    这是html文档，我在&nbsp;学习。
    这是html文档，我在&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学习。
</body>
</html>

运行结果：

生信研究猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html学习笔记
sakura997577的博客
02-24 697
#HTML主讲：刘晓勇 Hector ##一、HTML简介 ###1.HTML是什么？HTML:Hyper Text Markup Language超文本标记（标签）语言 由多种标签组成，用来制作网页，告浏览器该如何显示页面 ###2.HTML语言的作用？制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接检索信息 使用表单获取用户信息，实现交互 ###3.版本W3C:Wo...
html语法笔记
1071178244的博客
02-14 407
前端 web 网页 网页的运转 服务器 ：用于接收用户请求并响应，提供数据支撑 浏览器 ：电脑上的程序，客户端，帮用户发请求并且处理服务器端返回的数据，图形化呈现给用户 通信协议 ： 网络请求最常用的 HTTP HTTPS 服务器及浏览器产品 服务器 ： Tomcat Apache Nginx IIS(Internet Information Service) 浏览器 ： 五大浏...
Html 语法学习笔记一
weixin_33895516的博客
07-06 93
作者：jiankunking 出处：http://blog.csdn.net/jiankunking 一、HTML文档的基本结构 HTML部分：每个HTML文档必须以打开HTML标记开始，以关闭HTML标记结束 <HTML></HTML> 说明其间内容为HTML格式文档。 ...
HTML语法大全----学习笔记
Java开发，人工智能，边缘计算，致力于掌握前沿技术
06-01 478
<![endif]-->   HTML学习笔记（更新时间：20190531） 序号 名称 说明/代码 标签属性 属性值 备注 1 html中英文名称 超文本标记语言Hype...
HTML基本语法（慕课网学习笔记）
莫安逸无风雪
10-20 1588
标题 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;学习html标题&amp;lt;/title&amp;
HTML学习笔记–HTML的语法详解(必看)
12-14
1.什么是HTML标记语言？ HTML是表示网页信息的符号标记语言。 2.HTML的标记和他的属性 1.HTML文档的保存格式：.html、.htm、.xhtml 2.标记和被标记的内容构建出HTML文档。...以上这篇HTML学习笔记–HT
Html语法学习汇总
05-31
值得注意的是，HTML语法并不区分大小写，但为了代码的可读性，通常建议使用小写字母。对于属性值，推荐使用双引号包围，例如`文件名">`用于插入图像。 在HTML中，可以使用`<FONT>`标签来改变文字的样式，例如`文字...
javascript基础语法学习笔记
10-23
JavaScript是Web开发中不可...掌握这些基础语法是学习JavaScript的第一步，通过不断地实践和学习，你可以进一步探索更高级的主题，如作用域、闭包、面向对象编程以及更现代的特性，如ES6模块、Promise和async/await等。
html经典学习笔记.zip
11-01
"HTML经典学习笔记"是一个压缩包文件，包含了深入理解和学习HTML的重要资料。这个压缩包可能包含了一系列的章节、实例和练习，旨在帮助学习者掌握HTML的基本语法、元素以及如何创建动态和交互式的网页。 在HTML的...
学习HTML5过程笔记
03-19
"学习HTML5过程笔记" 本笔记涵盖了HTML5的基础知识点，包括HTML的基本概念、标签的使用、浏览器的渲染引擎、Web标准、HTML标签的构成、页面结构、列表标签、表格标签、表单标签、选择器、样式、布局案例等。 一、...
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
CSS 实用笔记(代码详解)
weixin_30625691的博客
12-27 193
●CSS分类：按其位置可以分成三种1、内嵌样式： 内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例： <pstyle="color:sienna;margin-left:20px;">这是一个段落</p&g...
HTML入门笔记（附完整代码）
微子细的博客
06-19 9476
本文笔记基于B站资源：千峰教育 目录 1.写博客 2.新闻列表 3.图片的使用 4.超链接与图片的知识补充 5.网盘的制作 6.简单表格的制作 7.个人简历 8.个人简历补充 9.登录表单 10.get获取和post提交 1.写博客 初识HTML,了解一些常用的标签： h1:标题； p:段落； i：斜体； b：加粗； br：换行； hr：水平线； &a...
HTML语法、常用结构、标签 初学者学习笔记
XXLoveSHT的博客
06-14 4528
第一节：HTML简介hmtl：超文本标记语言，主要说下：页面的元信息 meta ：三个作用1：显示字符集的设定2：设置刷新后，跳转到哪个界面3：向搜索引擎提供查询关键词：代码如下： &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" &gt;   #设置编码格式  &lt;meta http-equiv="...
html笔记（完整版）
热门推荐
秦哥的博客
08-09 2万+
目录 码仙励志 背景颜色 bgcolor 注释 空格  版权符© 网页标题 标题标记 网页编码 设置连接颜色link、alink、vlink 强制换行标记 换段落标记 居中对齐白标记 预格式化标记 列表项目标记 无序列表标记 有序列表标记 定义型列表 水平分割线标记 分区显示标记 字体设置标记 粗字体标记 斜字体标记 文字下标字体标记​ 文字上标字体...
HTML笔记
我的博客
12-23 5372
<!--HTML简介 • HTML 是用来描述网页的一种语言。 • HTML 指的是超文本标记语言: HyperText Markup Language • HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 文档包含了HTML 标签及文本内容 • HTML文档也叫做 web 页面HTML 标签 • HT
HTML5使用＜pre＞标签：保留原始排版方式
pan_junbiao的博客
07-06 120
在网页创作中，一般是通过各种标记对文字进行排版的。但是在实际应用中，往往需要一些特殊的排版效果，这样使用标记控制起来会比较麻烦。解决的方法就是保留文本格式的排版效果，如空格、制表符等。如果要保留原始的文本排版效果，则需要使用。使用<pre>标签保留原始排版方式。
HTML5五十六个民族网站模板源码
xcLeigh
06-26 1336
HTML5五十六个民族网站模板源码，民族网站模板源码，源码设计灵感来源于大作业，课设的民族介绍，这里以高山族网站为列，用登录、注册、首页、中国民族、关于高山族、联系我们等6个页面介绍了中国民族高山族。里面使用了轮播图、动画、表格、电梯导航、多媒体、视频、表单、单选/多选/全选、导航菜单、下拉框、CSS、JS等技术点。这个可用于五十六个民族任意一个民族的介绍网站模板，功能点多，可以部分使用，也可以全部使用，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML5使用＜progress＞进度条、＜meter＞刻度条
最新发布
pan_junbiao的博客
07-06 277
定义进度信息使用的是 progress 标签。它表示一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成，也可以用0到某个最大数字（如：100）之间的数字来表示准确的完成情况（如：进度百分比）。表示已经完成了多少工作量表示总共有多少工作量在网页中使用 progress 标签添加进度条。
html、css、html5、css3
03-27
学习HTML和CSS是成为一名Web开发者的基础，掌握HTML5和CSS3的最新特性，则能够创建出更加现代、功能丰富的网页。通过不断的实践和学习，开发者可以熟练地利用这些技术构建美观且功能强大的网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值