前端笔记_html进阶

二锤子

已于 2022-02-14 10:00:11 修改

阅读量229

点赞数

分类专栏：笔记文章标签：前端 html

于 2021-12-15 10:28:37 首次发布

本文链接：https://blog.csdn.net/weixin_42125762/article/details/121946696

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

iframe元素
在页面中使用flash
表单元素
表格元素
其他元素

iframe元素

框架页

通常用于在网页中嵌入另一个页面

iframe 可替换元素

通常为行盒
通常显示的内容取决于元素的属性
css不能完全控制其中的样式
具有行块盒的特点

<!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.huya.com" target="myfirme">虎牙</a>
    <a href="https://www.douyu.com/" target="myfirme">斗鱼</a>
    <a href="https://www.taobao.com/" target="myfirme">淘宝</a>
    <iframe name="myfirme" src="https://www.douyu.com/" frameborder="0"></iframe>
</body>

</html>

在页面中使用flash

object：表示嵌入一个对象

embed：表示嵌入

他们都是可替换元素

MIME（多用途互联网邮件扩展类型）

例如：资源是一个jpg图片，MIME：image/jpeg（表示告诉浏览器这里引用的资源是jpg图片）

写法见：页面中使用flash文件夹

表单元素

一些列元素，主要用于收集用户数据。

input元素

输入框

type属性：输入框类型

type：text，普通文本输入框

type：password，密码框

type：date，日期选择框，兼容性问题

type：search，搜索框

type：range，滑块

type：color，颜色选择器

type：number，数字输入框

type：checkbox，多选框

type：radio，单选框

type：file，上传文件

    <!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"><br>
    <!-- 密码框 -->
    <input type="password"><br>
    <!-- 日期选择 -->
    <input type="date"><br>
    <!-- 搜索框 -->
    <input type="search"><br>
    <!-- 滑块 -->
    <input type="range" min="0" max="5"><br>
    <!-- 颜色选择 -->
    <input type="color"><br>
    <!-- 数字输入框 -->
    <input type="number" min="0" max="100" step="20"><br>
    <!-- 多选框 -->
    爱好：
    <input type="checkbox" name="" id=""> 音乐
    <input type="checkbox" name="" id=""> 电影<br>
    <!-- 单选框 -->
    性别：
    <input type="radio" name="nan" id="">男
    <input type="radio" name="nan" id="">女<br>
    <!-- 上传文件 -->
    <input type="file" name="" id="">
</body>

</html>

value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示

input元素可以制作按钮

当type值为reset、button、submit时，input表示重置按钮、普通按钮、提交按钮。

select元素

下拉列表选择
通常和option配合使用

<p>
        请选择城市：
        <select name="" id="">
            <option selected value="深圳">深圳</option>
            <option value="">西安</option>
            <option value="">四川</option>
        </select>
    </p>

分组选择

<p>
        <select>
            <optgroup label="才艺主播">
                <option>冯提莫</option>
                <option>小团团</option>
            </optgroup>
            <optgroup label="游戏主播"></optgroup>
                <option value="">uzi</option>
                <option value="">小站</option>
                <option value="">theshy</option>
        </select>
    </p>

textarea元素

文本域，多行文本框

<p>
    请填写简介：
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入简介"></textarea>
</p>

按钮元素

button

type属性：reset、submit、button

<p>
        <input type="image" src="1.jpg">
        <button>
            <img src="1.jpg" alt="">
            <p>Lorem, ipsum.</p>
        </button>
    </p>

配合表单元素的其他元素

label：普通元素

- 显示关联
  可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值。
<p>
    <input name="gender" id="radMail" type="radio">
    <label for="radMail">男</label>
    <input name="gender" id="radFemail" type="radio">
    <label for="radFemail">女</label>
</p>
<!-- 第二种方式 -->
- 隐式关联
  可以将用label元素将input元素包起来
 <p>
    <label>
        <input name="gender" type="radio">
         男
    </label>
    <label>
        <input name="gender" type="radio">
         女
    </label>
</p>

datalist元素

数据列表

该元素本身不会显示到页面，通常用于和普通文本框配合

<p>
    请输入你的居住地：
    <input type="text" list="selectAger">
    <datalist id="selectAger">
        <option value="shanxixian">陕西西安</option>
        <option value="guangdongshenzhen">广东深圳</option>
        <option value="jiangsunanjing">江苏南京</option>
        <option value="anhuianqing">安徽安庆</option>
        <option value="henanzhnegzhou">河南郑州</option>
    </datalist>
</p>

form元素

通常，会将表单元素，放置在form元素的内部。作用是当提交表单时，会将form元素内部的表单以合适的方式提交到服务器。

form对开发静态页面没有什么意义。

 <form action="https://www.douyu.com" method="GET">
        账号：
        <input type="text" name="logeiptxt"><br> 密码：
        <input type="password" name="logeippwd">
        <p>
            城市：
            <select name="city">
                <option value="1">成都</option>
                <option value="2">重庆</option>
                <option value="3">深圳</option>
                <option value="4">广州</option>
            </select>
        </p>
        <button type="submit">提交</button>
    </form>

fieldset元素

表单分组

 <!-- 用法 -->
    <fieldset>
        <legend>账号信息</legend>
        <p>
            用户账号：
            <input type="text">
        </p>
        <p>
            用户密码：
            <input type="password">
        </p>
    </fieldset>
    <fieldset>
        <legend>用户信息</legend>
        <p>
            用户姓名：
            <input type="text">
        </p>
        <p>
            联系方式：
            <input type="number">
        </p>
    </fieldset>

    <p>
        <button>提交</button>
    </p>

表单状态

readonly属性：布尔属性，是否只读（不会改变表单显示样式）

disabled属性：布尔属性，是否禁用（会改变表单显示样式）

表格元素

在css技术出现以前，网页通常使用表格布局。

现在后台管理系统可能会使用表格布局。

前台：面向用户

后台：面向管理员。对界面要求不高，对功能要求搞。
表哥不再适用页面布局？表格的渲染速度太慢。

表格：table
表格标题：caption
表头：thead
表格主体：tbody
表尾：tfoot

<!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>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
            font-weight: bold;
        }
        
        table caption {
            font-size: 2em;
            font-weight: bold;
            color: #333;
            margin: 1em 0;
        }
        
        th,
        td {
            border: 1px solid #ccc;
            padding: 20px 0;
        }
        
        thead tr {
            background-color: #008c8c;
            color: #fff;
        }
        
        tbody tr:nth-child(even) {
            background-color: #e5e5e5;
        }
        
        tbody tr td:first-child {
            color: #ff8c08;
        }
        
        tfoot tr td {
            text-align: right;
            padding-right: 30px;
        }
    </style>
</head>

<body>
    <!-- 表格 -->
    <table>
        <!-- 表格标题 -->
        <caption>
            这会是一个表格
        </caption>
        <!-- 表头 -->
        <thead>
            <!-- table row 一行 -->
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody>
            <tr>
                <!-- 跨行 -->
                <td rowspan="2">数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>

                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
        </tbody>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <!-- 跨列 -->
                <td colspan="5">总计:xxxxxx</td>
            </tr>
        </tfoot>
    </table>



</body>

</html>

其他元素

HTML5元素周期表

abbr元素
缩写词

写法
 <p>
    <abbr title="cascading style sheet">css</abbr>是用于为页面添加样式
</p>

time元素
提供给浏览器或搜索引擎阅读的时间

用法
<p>
    <time datetime="2020-5-27">今年5月27日，</time>我来到了深圳。
</p>

b元素
区分开同等重要的对象

用法
<p>
        我们公司有项目很多，有<b>城市更新</b>和<b>地产投资</b>。
    </p>

q元素
一小段引用文本

<p>
        电视剧里说：<q>不要一边担心着未来，一边浪费着现在。</q>
    </p>

blockquote
大段引用文本

<p>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laudantium laboriosam modi magnam minima voluptatum voluptatibus voluptates totam sint error?</blockquote>
    </p>

br
换行用（无语义）
hr
分割线（无语义）
meta
还可以用于搜索引擎优化
link
链接外部资源（css、图标）

 <link rel="stylesheet" type="application/x-shockwave-flash" href="./天诛忍凯旋.swf">

rel属性：relation，链接的资源和当前网页的关系

type属性：链接资源的MIME属性（可省略）
边浪费着现在。


5. blockquote
大段引用文本
```html
<p>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laudantium laboriosam modi magnam minima voluptatum voluptatibus voluptates totam sint error?</blockquote>
    </p>

br
换行用（无语义）
hr
分割线（无语义）
meta
还可以用于搜索引擎优化
link
链接外部资源（css、图标）

 <link rel="stylesheet" type="application/x-shockwave-flash" href="./天诛忍凯旋.swf">

rel属性：relation，链接的资源和当前网页的关系

type属性：链接资源的MIME属性（可省略）

二锤子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记_html进阶

html笔记
复制链接

扫一扫

专栏目录