HTML入门学习笔记（3）----html的标签 （下）

已于 2022-03-09 17:24:36 修改
阅读量385 收藏 1
点赞数 1
分类专栏： 前端开发入门 文章标签： html 学习 html5 前端
于 2022-03-09 14:44:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echo_165/article/details/119058553
版权

目录

1. 表格标签

1.1 表格的作用

1.2 表格的基本语法

 1.3 表头单元格标签

 1.4 表格属性

 案例

1.5 表格结构标签

1.6 合并单元格

 2. 列表标签

 3、表单

① input表单

②textarea 标签表单 — — 多行文本框

③ 下列列表

4、插入音频、视频、flash

5、插入背景音乐

6、悬浮框架 iframe

 7、HTML5 新标签

1. 表格标签

1.1 表格的作用

表格不是用来布局页面的,而是用来 展示数据 的.

1.2 表格的基本语法

  

 1.3 表头单元格标签

 1.4 表格属性

height  高度

 案例

先书写表格的结构

后书写表格属性

1.5 表格结构标签

1.6 合并单元格

 

 

 

 2. 列表标签

  • <ol>   有序列表
  • <ul>   无序列表
  • <dl>   定义列表

语法：

<!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>列表练习</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>兴趣是最好的老师，其次是耻辱。</li>
        <li>好听的话不该记着，也不该当真。</li>
    </ol>
    <!-- 无序列表 -->
    <!-- disc(实心圆);circle(空心圆)；square(实心正方形) -->
    <ul type="disc">
        <li>兴趣是最好的老师，其次是耻辱。</li>
        <li>好听的话不该记着，也不该当真。</li>
    </ul>
    <!-- 定义列表 -->
    <dl>
        <dt>杨绛先生</dt>
        <dd>你的问题主要在于读书太少而想的太多。</dd>
        <dd>故人笑比中庭树，一日秋风一日疏。</dd>
    </dl>
</body>
</html>

页面效果

 3、表单

① input表单

<input type="表单类型">

type 属性值 ：

  • text（单行文本框）
  • passward（密码文本框）
  • button（按钮）或者<button>按钮</button>
  • submit（提交按钮）
  • reset（重置按钮）
  • image（图像形式的提交按钮）
  • radio（单选按钮）
  • checkbox（复选框）
  • hidden（隐藏字段）
  • file（文件上传）

（用户体验细节：刷新后想让第一个输入框默认选中状态，给输入框设置autofocus="autofucus"）

②textarea 标签表单 — — 多行文本框

<textareas rows="行数" cols="列数">多行文本框内容</textarea>

注意：每个浏览器解析不一样，多行文本框可以在CSS上设置width & height

③ 下列列表

由<select>标签和<option>标签配合使用

语法：

<select multiple="multiple" size="可见列表项数目">
    <option value="选项值" selected="selected">选项显示的内容</option>
    <option value="选项值" >选项显示的内容</option>
    <option value="选项值" >选项显示的内容</option>
</selected>

4、插入音频、视频、flash

<embed src="多媒体文件地址" width="播放界面宽度" height="播放界面高度"></embed>
#px作为单位

5、插入背景音乐

<bgsound src="背景音乐地址" loop="播放次数"/>

bgsound标签 只适用于IE浏览器（除了bgsound,还有embed标签和object标签）

loop = "2"   重复2次

loop = "infinite"  或 loop = "-1"     无限次循环

6、悬浮框架 iframe

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scroling="设置浮动框架是否显示滚动条"></iframe>
  • scrolling = "auto"    根据需要显示（默认值），在浏览器页面左对齐
  • scrolling = "yes"     总是显示
  • scrolling = "no"      不显示

 7、HTML5 新标签

<body>
    <header>头部</header>
    <nav>导航条</nav>
    <aside>侧导航</aside>
    <article>文章块</article>
    <footer>底部</footer>
</body>

这些 HTML5 新标签IE低版本不识别，只能用在手机网站的书写。

墨瑶_165
关注
专栏目录
HTML入门学习笔记-常用的标记标签tag
wsl_cnxw的博客
08-25 3196
HTML超文本标记语言 (Hyper Text Markup Language)，是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <...
Python学习笔记---前端（1）认识html
F19950920的博客
08-05 1190
Python学习笔记分享----认识html
【Java Web学习笔记】 1 - HTML入门
qq_41891655的博客
12-02 1573
1). HTML ( HyperText Mark-up Language)即超文本标签语言(可以展示的内容类型很多)2). HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等3). HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息.
HTML入门笔记3-HTML中h1到h6标签
Anthony_tester的博客
07-15 2476
本篇学习HTML中的标题控制标签，我们知道标题指的是文章文章的标题，或者每个段落前面那个标题，就像word里面会根据不同层级标题进行显示目录。在THML中标题写在body标签下，一共有六级标题，h1表示最大标题，h2表示第二大标题，直到h6表示最小标题。记住，只有六级标题，标题标签有一个align属性，就是控制标题左对齐还是右对齐，或者居中显示的这个属性，现在不推荐使用，推荐用样式调整而不是直接在
学习笔记--Docker
kussm_的博客
09-02 1898
包装自己的java程序镜像就是包含了应用程序、程序运行的系统函数库、运行配置等文件的文件包。构建镜像的过程其实就是把上述文件打包的过程。
HTML入门笔记5-居中标签和空格
Anthony_tester的博客
07-17 2705
这篇学习HTML中的居中标签和如何控制空格显示。 1.先看看居中效果，这里用标题来演示。默认不使用居中会在居左显示。 <!DOCTYPE html HTML中的居中标签center 标题居中显示 这个居左边显示 2.如果我想要标签内容左边缩进2空格如何实现，我们在html代码中直接敲两个空格试试 <!DOCTYPE ht
HTML入门笔记13-HTML中font标签
Anthony_tester的博客
07-22 959
本篇练习HTML中的字体标签，用来显示控制文本大小，颜色和字体，font下主要学习三个属性，face表示字体，例如我们常说的宋体和隶书，还有微软雅黑。size表示文本的字体大小。color表示文本显示的颜色。 HTML中字体标签
【前端开发学习笔记01】黑马-HTML+CSS入门
weixin_48056218的博客
04-08 2023
注意写在开始标签内部可以同时存在多个属性属性之间以空格隔开标签名与属性之间必须以空格隔开属性之间没有顺序之分< dl > < dt > 主题一 </ dt > < dd > 主题一项目1 </ dd > </ dl >< dl > < dt > 主题一 </ dt > < dd > 主题一项目1 </ dd > </ dl ></< dl > < dt > 主题一 </ dt > < dd > 主题一项目1 </ dd > </ dl >
HTML入门笔记4-段落标签和换行
Anthony_tester的博客
07-16 1991
这篇学习HTML的段落标签和换行。前一篇我们知道HTML中用标签表示不同大小字体的标题，在HTML中段落用表示，段落英文单词第一个字母的缩写就是p，下面来看看例子，主要学习段落写法和断行写法。 <!DOCTYPE html HTML中的段落标签p 这是 第一段落 第二段落 第三段落 换行 效果截图
HTML入门笔记8-上脚注和下脚注标签
Anthony_tester的博客
07-18 5906
本篇学习HTML中上脚注和下脚注标签。上脚注长什么样呢？想想一下3的3次方的数学写法就知道了。有时候wold文档里面脚注和文献中脚注都需要用到上脚注或者下脚注。 <!DOCTYPE html HTML中上角标和下角标标签 文本上显示删除线 33等于 27 aa*b 等于 c c 表示文本上显示删除线 表示上脚注 表示文下脚注 运
html+css入门学习笔记
01-24
本入门学习笔记将帮助初学者理解这两门技术的基本概念，逐步掌握创建动态、美观网页的方法。 HTML是用于创建网页内容的语言，它通过一系列标签来定义网页的各个部分，如标题、段落、图片、链接等。在HTML5中，新增...
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
这篇学习笔记主要介绍了`<video>`标签的基本使用，包括如何初始化视频播放器，设置视频源，控制播放行为以及美化播放器界面。 首先，使用`<video>`标签非常简单，只需要在HTML文档中插入一个空的`<video>`标签即可...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 780
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 734
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 553
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
常见前端代码分析面试题Javascript|html
最新发布
警警的博客
11-08 361
html\CSS\Javascript
CSS:基础选择器,文字控制属性(HTML)
m0_75035023的博客
11-04 364
CSS:基础选择器,文字控制属性(HTML),javaweb
W3C HTML 活动
wjs2024的博客
11-08 159
W3C于2008年1月22日发布了HTML 5的工作草案。W3C不仅推动了HTML语言的发展，也促进了Web技术的标准化和普及【7†source】【8†source】【9†source】。这个版本在HTML 2.0的基础上增加了许多广泛使用的特性，如字体、表格、applets、围绕图像的文本流、上标和下标等。它是HTML的早期版本，但目前已不再使用，因为现有的浏览器都依赖于更新的HTML版本。关于W3C（万维网联盟）的HTML活动，我们可以从HTML的不同版本的发展历程中了解其主要的活跃时期和贡献。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值