HTML入门笔记实录

最新推荐文章于 2024-08-08 14:18:17 发布
最新推荐文章于 2024-08-08 14:18:17 发布
阅读量187 收藏
点赞数
分类专栏： 前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56910425/article/details/127233975
版权

HTML（超文本标记语言）笔记

一、排版标签

1.标题标签

<h1>——1级标题

<h2>——2级标题

<h3>——3级标题

<h4>——4级标题

<h5>——5级标题

<h6>——6级标题

2.段落标签

<p>

特点：

  • 段落之间存在间隙
  • 独占一行

3.换行标签

<br>

特点：

  • 单标签
  • 让文字强制换行

4.水平线标签

<hr>

特点：

  • 单标签
  • 在页面中显示一条水平线

二、文本格式化标签

标签标签说明
bstrong加粗
uins下划线
iem倾斜
sdel删除线

三、媒体标签

1.图片标签

<img src="目标图片路径" alt="替换文本" title="提示文本" width="宽度" height="高度">

alt:

  • 当图片加载失败时才显示alt的文本
  • 当图片加载成功时不会显示alt文本

title:

  • 当鼠标悬停时才显示的文本
  • 注：title属性不仅可以用于图片标签，还可以用于其他标签

width、height:

  • 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）

  • 如果同时设置了width和height两个，若设置不当，图片将会变形

属性注意点：

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分

2.路径

绝对路径
  • 指目录下的绝对位置，通常从盘符开始的路径或完整的网络路径
相对路径
  • 从当前文件开始出发现目标文件的过程
  1. 同级目录—
    • <img src="目标图片.gif">
    • <img src="./目标图片.gif">
  2. 下级目录
    • <img src="文件名/目标图片.gif">
  3. 上级目录
    • <img src="../目标图片.gif">

3.音频标签

<audio src="./music.mp3" controls>

常见属性：

  • src：音频的路径
  • controls：显示播放的控件
  • autoplay：自动播放
  • loop：循环播放

注意点：

  • 音频标签目前支持三种格式：MP3、Wav、Ogg

4.视频标签

<video src="./video.mp4" controls>

常见属性：

  • src：视频的路径
  • controls：显示播放的控件
  • autoplay：自动播放（谷歌浏览器需要配合muted实现静音播放）
  • loop：循环播放

注意点：

  • 视频标签目前支持三种格式：MP4、WebM、Ogg

四、链接标签

<a href="./目标网页.html">超链接</a>

target属性：

  • _self：默认值，在当前窗口中跳转（覆盖原网页）
  • _blank：在新窗口中跳转（保留原网页）

五、列表标签

1.无序列表

标签说明
ul表示无序列表的整体，用于包裹li标签
li表示无序列表的每一项，用于包含每一行的内容

注意点：

  • 列表的每一项前默认显示原点标识
  • ul标签只允许包含li标签
  • li标签可以包含任意内容

2.有序列表

ol表示有序列表的整体，用于包裹li标签
li表示无序列表的每一项，用于包含每一行的内容

注意点：

  • 列表的每一项前默认显示序号标识
  • ol标签只允许包含li标签
  • li标签可以包含任意内容

3.自定义列表

标签说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项

注意点：

  • dd前默认显示缩进
  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

六、表格标签

标签说明
table表格整体，可用于包裹多个tr
tr表格每行，可用于包裹td
td表格单元格，可用于包裹内容

注意点：

  • 标签的嵌套关系：table>tr>td

常见相关属性：

标签说明
border边框宽度
width表格宽度
height表格高度

表格标题和表头单元格标签

标签名名称说明
caption表格大标题表示表格整体大标题，默认在表格整体顶居中位置显示
th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部（用于替换td标签）

表格的结构标签

标签名称
thead表格头部
tbody表格主体
tfoot表格底部

注意点：

  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略

合并单元格

属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan合并单元格的个数跨列合并，将多列的单元格水平合并

注意点：

  • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）

七、表单标签

1、input系列标签

input标签可以通过type属性值的不同展示不同效果

标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文件选择，用于之后上传文件
inputsubmit提交按钮，用于提交
inputreset重置按钮，用于重置
inputbutton普通按钮，默认无功能，之后配合js添加功能
1.1 input系列标签-文本框（text）

常用属性：

属性名说明
placeholder占位符（提示用户输入内容的文本）
1.2 input系列标签-单选框（radio）

常用属性：

属性名说明
name分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked默认选中

注意点：

  • name属性对于单选框有分组功能
  • 有相同name属性值的单选框为一组，一组中只能有一个被选中
1.3 input系列标签-文件选择

常用属性：

属性名说明
multiple多文件选择
1.4 input系列标签-按钮

注意点：

  • 如果需要实现按钮功能，需要配合form标签使用
  • form使用方法：用form标签把表单标签一起包裹起来

<input type="button" value="按钮名">

2、button按钮标签

type属性值：

标签名type属性值说明
buttonsubmit提交按钮。点击之后提交数据给后端服务器
buttonreset重置按钮。点击之后恢复表单默认值
buttonbutton普通按钮。默认无功能，之后配合js添加功能

3、select下拉菜单标签

北京 上海 运城 广州

常见属性：

  • selected：下拉菜单默认选中

4、textarea文本域标签

常见属性：

  • cols：规定了文本域内可见宽度
  • rows：规定了文本域内可见行数

5、label标签

用于绑定内容与表单标签的关系

<label><input type="radio" name="sex">男</label>

<label><input type="radio" name="sex">女</label>

八、语义化标签

1、没有语义的布局标签

  • div标签：一行只显示一个（独占一行）
  • span标签：一行可以显示多个

2、有语义的布局标签

HTML5新版本中使用：

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

3、字符实体

常见字符实体：

显示结果描述实体名称
空格& nbsp;
<小于号& lt;
>大于号& gt;
&和号& amp;
"引号& quot;
’撇号& apos;
¢分（cent）& cent;
£镑（pound）& pound;
¥元（yen）& yen;
€欧元（euro）& euro;
§小节& sect;
©版权（copyright）& copy;

九、HTML标签

  • !-- --

    定义注释

  • a

    • href属性链接的默认外观：

      1. 未被访问的链接带有下划线而且是蓝色的
      2. 已被访问的链接带有下划线而且是紫色的
      3. 活动链接带有下划线而且是红色的

    • <a href="/images/logo.png" download="/images/logo.png">

      点击链接下载图片

    • <a href="http://www.runoob.com" target="_blank">访问菜鸟教程！</a>

      target属性：

      属性值说明
      _blank在新窗口中打开被链接文档
      _self默认，在相同框架中打开被链接文档
      _parent在父框架集中打开被链接文档
      _top在整个窗口中打开被链接文档
      framename在指定的框架中打开被链接文档

    • 图像作为链接

      https://www.runoob.com/try/try.php?filename=tryhtml_link_image

    • 创建电子邮件链接

      https://www.runoob.com/try/try.php?filename=tryhtml_link_mailto

    • 使用锚跳转到同一个页面的不同位置

      https://www.runoob.com/try/try.php?filename=tryhtml5_a_href_anchor

  • abbr

    定义缩写

    标签用来表示一个缩写词或者首字母缩略词

  • address

    定义文档作者或拥有者的联系信息

    https://www.runoob.com/try/try.php?filename=tryhtml_address

    标签定义文档作者/所有者的联系信息。

    如果

    元素位于 元素内部，则它表示该文档作者/所有者的联系信息。

    如果

    元素位于
    元素内部，则它表示该文章作者/所有者的联系信息。

    address 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

  • area

    定义图像映射内部的区域

    https://www.runoob.com/try/try.php?filename=tryhtml_areamap

  • article

    定义一个文章区域

  • aside

    定义页面的侧边栏内容

  • b

    定义文本粗体

  • base

    定义页面中所有链接的默认地址或默认目标。

    在一个文档中，最多能使用一个 元素。 标签必须位于 元素内部。

  • bdi

    允许设置一段文本，使其脱离其父元素的文本方向设置。

  • bdo

    定义文字方向

    该段落文字从左到右显示。

    该段落文字从右到左显示。

  • button

    属性属性值说明案例
    autofocusautofocus规定当页面加载时按钮应当自动地获得焦点。https://www.runoob.com/try/try.php?filename=tryhtml5_button_autofocus
    disableddisabled规定应该禁用该按钮。https://www.runoob.com/try/try.php?filename=tryhtml_button_disabled
    formform_id规定按钮属于一个或多个表单。https://www.runoob.com/try/try.php?filename=tryhtml5_button_form
    formactionURL规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用。https://www.runoob.com/try/try.php?filename=tryhtml5_button_formaction
    formenctypeapplication/x-www-form-urlencoded multipart/form-data text/plain规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 配合使用。https://www.runoob.com/try/try.php?filename=tryhtml5_button_formenctype
    formmethodget post规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=“submit” 配合使用。https://www.runoob.com/try/try.php?filename=tryhtml5_button_formmethod
    formnovalidateformnovalidate如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=“submit” 配合使用。https://www.runoob.com/try/try.php?filename=tryhtml5_button_formnovalidate
    formtarget_blank _self _parent _top framename规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用。https://www.runoob.com/try/try.php?filename=tryhtml5_button_formtarget
    namename规定按钮的名称。https://www.runoob.com/try/try.php?filename=tryhtml_button_name
    typebutton reset submit规定按钮的类型。https://www.runoob.com/try/try.php?filename=tryhtml_button_type
    valuetext规定按钮的初始值。可由脚本进行修改。https://www.runoob.com/try/try.php?filename=tryhtml_button_value2

  • canvas

    定义图形，比如图表和其他图像,标签只是图形容器，必须使用脚本来绘制图形

  • caption

    定义表格标题

  • code
    标签是一个短语标签，用来定义计算机代码文本。

    标签描述
    呈现为被强调的文本。
    定义重要的文本。
    定义一个定义项目。
    定义计算机代码文本。
    定义样本文本。
    定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
    定义变量。您可以将此标签与 
     及  标签配合使用。

  • col

    定义表格中一个或多个列的属性值

  • colgroup

    定义表格中供格式化的列组

  • datalist

    定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

    https://www.runoob.com/try/try.php?filename=tryhtml5_datalist

  • del

    定义被删除文本

  • dialog

    定义对话框，比如提示框

    https://www.runoob.com/try/try.php?filename=tryhtml5_dialog

  • embed

    定义嵌入的内容，比如插件。

    https://www.runoob.com/tags/tag-embed.html

  • fieldset
    定义围绕表单中元素的边框

十、附录

  • 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

  • 标签在 HTML 页面中创建水平线。

  • HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

    标签描述
    定义粗体文本
    定义着重文字
    定义斜体字
    定义小号字
    定义加重语气
    定义下标字
    定义上标字
    定义插入字
    定义删除字

链接

form

SmartBoy️
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
ARM入门笔记.zip
07-25
ARM入门笔记.zip
CSS入门笔记实录
qq_56910425的博客
10-09 143
CSS入门笔记实录
VIP实习笔记 --公共技术
qq_52560624的博客
12-20 1026
后端开发，实习：JAVA代码编写规范，RPC框架，Redis，MySQL，Thrift，Netty，
Java实战笔记
Thomas_Cai的记忆殿堂
04-18 434
文章目录0 Java踩坑记录1 Java学习笔记1. 去除黄色警告线2. 标注的含义3. 各个文件的含义 0 Java踩坑记录 .xml文件的注释规范：<!--//thomas 加于0417--> 注： 用快捷键ctrl+/或者ctrl+shift+/更为方便 错误提示：invalid bound statement (not found) 解决方法： 检查mapper.java 接...
学习RVC SDK（如本相机）实录（一）
NothingToSay
04-06 347
学习RVC SDK（如本相机）实录
Swing入门级项目全程实录第一讲
a285277134的专栏
05-11 174
Swing入门级项目全程实录第一讲 主要内容： 常用的Eclipse快捷方式 Debug模式讲解 项目架构简单搭建 登录功能实现源码，数据库脚本，视频笔记下载地址：http://www.java-coder.com/thread-204-1-1.html第一讲上集高清视频讲解下载地址：http://www.java-coder.com/thread-204-1-1.html第一讲下集高清视频讲解...
TypeScript 快速入门
技术杂谈
02-23 7746
本文来自作者 孙亖 在 GitChat 上分享 「TypeScript 快速入门」，「阅读原文」查看交流实录。「文末高能」编辑 | 哈比TypeScript 是微软开发和控制的开源项目，我在应用 Anguar 2+ 和 Ionic 2+ 框架开发系统时使用的就是 TypeScript，但我一直把 TypeScript 当作 JavaScript 来用的，甚至是照猫画虎。所以我想正儿八经的学习下 T
计算机视觉入门
热门推荐
初学者的博客
05-18 11万+
目录简介方向热点简介计算机视觉（Computer Vision）又称为机器视觉（Machine Vision），顾名思义是一门“教”会计算机如何去“看”世界的学科。在机器学习大热的前景之下，计算机视觉与自然语言处理（Natural Language Process， NLP）及语音识别（Speech Recognition）并列为机器学习方向的三大热点方向。而计算机视觉也由诸如梯度方向直方图（Hi...
信息收集学习笔记
人饭子的博客
10-31 1001
信息收集 注 : 笔记中拓扑图 xmind 源文件在其图片目录下 免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关. 大纲 漏洞信息 DAST web漏扫 主动漏扫 被动漏扫 综合漏扫 IAST SAST SRC历史漏洞) 服务-组件-协议 空间测绘 网络 IP扫描 MAC扫描 端口扫...
巩固基础《C#入门经典（第三版）》阅读笔记1
06-10 104
1、region的使用 #region xxxx N行当代码块 #endregion 使用region 可以将N行代码缩小成名为XXXX的.....这个怎么形容 就是你可以把这N行代码缩小展开的那么个东西..不错~ Q:#region 中使用中文是否会在编译时产生错误? A:OK,经过测试，完全没有问题^_^ 2、数据类型的作用 对于整数类型来说，用int来存储...
python入门笔记.rar
09-22
中文 Python 笔记 笔记内容使用 `ipython notebook` 来展示。 目录： - [01. **Python 工具**](01-python-tools) - [02. **Python 基础**](02-python-essentials) - [03. **Numpy**](03-numpy) - [04. **Scipy**](04...
Spring入门学习笔记|Spring学习.pdf
10-17
Spring入门学习笔记，内容包括Spring介绍，Spring配置文件，Spring配置数据源，Spring的注解开发，Spring集成Junit，Spring的AOP，jdbcTemplate介绍，Spring控制事务流程，Spring集成web。
3DSMAX入门笔记2
07-22
资源名称：3DS MAX 入门笔记2 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
剖析HTML 元素——WEB开发系列02
一条晒干的咸鱼的博客
08-07 920
HTML元素是构成HTML文档结构的基本单位，定义了页面上的不同部分和内容。HTML元素可以包含不同类型的内容，如文本、图片、链接、表格等，每种元素都有其特定的用途和语义。通过组合和嵌套不同的HTML元素，可以创建复杂的网页结构和布局。一、HTML 元素语法HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容...
html--前端
m0_60274660的博客
08-07 320
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
how to set mpdf HTML contains invalid UTF-8 character(s)
Tinywan
08-07 262
PDF导出中文洗衣液厂家(品牌；海依恋+纤维大师�<br>�� Invalid input characters. Did you set $mpdf->in_charset properly? 解决方案 #Try this $html = mb_convert_encoding($html, 'UTF-8', 'UTF-8'); #before calling: ...
【Dash】HTML 组件创建直方图
最新发布
持续更新中...
08-08 1176
创建一个标题组件 html.H1，显示 Hello Dash，文本居中，并定义文本颜色。设置 app 布局，用 html.Div 组件包裹所有子组件，并设置背景颜色。创建一个 dcc.Graph 组件，用于显示之前创建的图表 fig。创建一个 html.Div 组件，文本居中，并定义文本颜色。children是一个列表，包含所有要显示的子组件。id 参数用于标识这个图表，以便在应用程序中引用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值