第48天学习打卡（HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 ）

其他 2021-03-03 19:36:03 阅读次数: 0

行内元素和块元素

块元素

​ 无论内容多少，该元素独占一行

​ (p、h1-h6)

行内元素

​ 内容撑开宽度，左右都是行内元素的可以排在一行

​ (a.strong.em…)

列表

什么是列表

​ 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

列表的分类

无序列表

有序列表

定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序 order list 列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<hr/>

<!--无序unordered list列表
应用范围：导航，侧边栏...

-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dt>位置</dt>

    <dd>成都</dd>
    <dd>重庆</dd>
    <dd>深圳</dd>
</dl>


</body>
</html>

表格

为什么使用表格

简单通用

结构稳定

基本结构

单元格

行

列

跨行

跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行  tr   :rows
列  td
border="1px":给表格加宽度

-->

<table border="1px">
    <tr>
<!--        colspan 跨列-->
        <td colspan="4">1-1</td>

    </tr>
    <tr>
<!--        rowspan:跨行-->
<!--        style="text-align:center:居中-->
        <td rowspan="2">2-1</td>
        <td style="text-align:center">2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
        <td>2-6</td>

    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>


    </tr>
</table>
</body>
</html>

视频和音频

视频元素

video

音频元素

audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src 资源路径
controls 控制条
autoplay 自动播放
-->

<video src="../resouces/video/9f4f28b2c3b7883b883e4f176e41a651.mp4"controls autoplay></video>

<audio src="../resouces/audio/60.mp3"controls autoplay></audio>
</body>
</html>

页面结构分析

元素名 描述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>


<section>
    <h2>网页主体</h2>
</section>


<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

<iframe src="path"name="mainFrame"></iframe>
上行代码代表的是：引用页面地址 框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--  px代表大小-->
<iframe src=""name="hello" frameborder="0"width="1000px"height="800px"></iframe>
<a href="1.我的第一个网页.html"target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"> </iframe>-->
</body>
</html>

表单语法

image-20210225093048322

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>


<h1>注册</h1>

<!--表单form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post , get提交方式
      get:方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效，不能传输大文件
      post:比较安全，传输大文件

-->
<!--表单提交到第一个网页-->
<form action="1.我的第一个网页.html" method="post">
<!--    文本输入框 :input type="text"-->

    <p>名字:<input type="text" name="username"></p>
<!-- 密码框： input type="password" name="pwd"   -->
    <p>密码:<input type="password" name="pwd"></p>

        <p>
<!-- submit提交   reset重置           -->
            <input type="submit">
            <input type="reset">
        </p>

</form>


</body>
</html>

表单元素格式

属性 说明
type 指定元素的类型。text、password、checkbox、 radio 、submit、 reset、 file、 hidden、 image和 button默认为text
name 指定表单元素的名称
value 元素的初始值。type 为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为 text或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中

表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

表单初级验证

常用方式

placeholder 提示信息

required 非空判断

pattern 正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>


<h1>注册</h1>

<!--表单form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post , get提交方式
      get:方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效，不能传输大文件
      post:比较安全，传输大文件
      maxlength:只能输入的最大长度字符
      size:文本框长度

-->
<!--表单提交到第一个网页-->
<form action="1.我的第一个网页.html" method="get">
<!--    文本输入框 :input type="text"
value="好好学习"  ：默认初始值
maxlength="8"   ：最长能写几个字符
size="30"     ：文本框的长度
   <p>名字:<input type="text" name="username"value="好好学习" maxlength="8"size="30">

-->
<!--
 <p>名字:<input type="text" name="username"value="admin" readonly></p>
value="admin" readonly只读
placeholder:提示信息
required:非空信息
-->
    <p>名字:<input type="text" name="username" placeholder="请输入用户名" required></p>
<!-- 密码框： input type="password" name="pwd"   -->
<!--    hidden:隐藏-->
    <p>密码:<input type="password" name="pwd" hidden value="123456"></p>

    <p>性别
<!-- radio单选框
input type="radio"
value:单选框的值
name:表示组 名字一样就是一个组的
checked:默认选择
disabled 禁用

-->
        <input type="radio" value="boy"name="sex"checked disabled/>男
        <input type="radio" value="girl"name="sex"/>女

    </p>
<!--    多选框
checked 默认选择
-->
    <p>游戏
        <input type="checkbox"value="sleep" name="hobby">睡觉
        <input type="checkbox"value="code" name="hobby"checked>敲代码
        <input type="checkbox"value="chat" name="hobby">聊天
        <input type="checkbox"value="game" name="hobby">游戏
    </p>
<!--    按钮
input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset"重置
-->
    <p>
        <input type="button"name="btn1"value="点击变长">
        <input type="image"src="../resouces/image/2.jpg">
    </p>
    
    
    
<!--    下拉框，列表框
selected:默认选择
-->
    <p>国家:
        <select name="列表的名称" >

            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="newz">新西兰</option>
        </select>

    </p>

<!--    文本域
cols="50" 行
rows="10"列



-->
    <p>反馈：
        <textarea name="textare" cols="50" rows="10">文本内容</textarea>
    </p>

<!--文件域
input type="file"name="files"

-->
    <p>
        <input type="file"name="files">
        <input type="button"value="上传" name="upload">
    </p>

<!-- 邮件标签

-->
    <p>邮箱:
        <input type="email"name="email">

    </p>

<!--    URL-->
    <p>URL:输入网址
        <input type="url"name="url" required>

    </p>
<!--数字-->
    <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="1">

    </p>

<!--    滑块
input type="range"
-->
    <p>音量:
        <input type="range" name="voice" min="0" max="100"step="1">

    </p>
    <!--搜索值
-->
    <p>搜索:
        <input type="search"name="search">

    </p>

<!--增强鼠标可用性-->
    <p>
        <label for="mark">你点一下试试</label>
        <input type="text" id="mark">
    </p>
<p> 自定义邮箱:
<!--正则表达式网站    https://www.jb51.net/tools/regexsc.htm-->
    <input type="text"name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    
</p>


        <p>
<!-- submit提交   reset重置
 <input type="submit" disabled>
    disabled禁用
        -->
            <input type="submit" >
            <input type="reset"value="清空表单">
        </p>





</form>


</body>
</html>

image-20210225121004348

猜你喜欢

转载自blog.csdn.net/doudoutj/article/details/114092317
今日推荐
周排行
win7之session理解
如何快速上手 AB Testing ？阿里技术专家秘方公开
数据库自助查询平台
【CCF 2017-12-2】游戏问题
Fire!(BFS)
修复GRUB引导故障
老倪祖膏药分销系统
MySQL慢查询日志-捕获慢SQL
批归一化(Batch Normalization)
ssm整合问题-------一
每日归档
更多
2025-03-02(0)
2025-03-01(0)
2025-02-28(0)
2025-02-27(0)
2025-02-26(0)
2025-02-25(0)
2025-02-24(0)
2025-02-23(0)
2025-02-22(0)
2025-02-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022