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

墨瑶_165

已于 2022-03-09 17:24:36 修改

阅读量368

点赞数 1

分类专栏：前端开发入门文章标签： html 学习 html5 前端

于 2022-03-09 14:44:28 首次发布

本文链接：https://blog.csdn.net/Echo_165/article/details/119058553

版权

前端开发入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习笔记（3）----html的标签（下）

1. 表格标签1.1 表格的作用表格不是用来布局页面的,而是用来展示数据的.1.2 表格的基本语法1.3 表头单元格标签1.4表格属性height 高度案例先书写表格的结构后书写表格属性1.5表格结构标签1.6合并单元格2.列表标签...
复制链接

扫一扫