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

行内元素和块元素

块元素

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

(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>

表单语法

<!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>

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

html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
第48天学习打卡（CSS）
HTML + CSS +JavaScript 结构+表现+交互 HTML:结构 CSS:表现 JavaScript:交互 1什么是CSS 如何学习 1.CSS是什么 2.CSS怎么用(快速入门 ...
html行内元素，块元素，空元素
行内元素:img span input a b br lable ; 块元素:dl dt dd div form table li ol ul li h1- ...
div和css：行内元素和块元素的水平和垂直居中
行内元素: 水平居中:text-align:center ul水平居中:加 display:table; margin:0 auto; 此元素会作为块级表格来显示(类似 <table>), ...
从css属性和布局来说明一下，行类元素和行类块元素和块元素的区别
//布局 inline: 如果水平宽度足够大,那么将在一行显示 inline-block: 如果水平宽度足够大,那么将在一行显示 block: 独占一行 //css属性 inline: 无法设置高度, ...
html行内元素和块元素标签分组
转载 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fields ...
IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
第50天学习打卡（CSS 圆角边框盒子阴影定位）
4.4圆角边框圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

charles（3）charles防止30分钟自动重启
前言 Charles是收费软件,可以免费试用30天.试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过30分钟,并且启动时将会有10秒种的延时. 此时,我们只需网上找一个注册码即可解 ...
设计模式（十五）——命令模式（Spring框架的JdbcTemplate源码分析）
1 智能生活项目需求看一个具体的需求 1) 我们买了一套智能家电,有照明灯.风扇.冰箱.洗衣机,我们只要在手机上安装 app 就可以控制对这些家电工作. 2) 这些智能家电来自不同的厂家,我们不想针 ...
P4254 [JSOI2008]Blue Mary开公司 (李超树)
题意:插入一些一次函数线段每次询问在x = x0处这些线段的最大值题解:李超树模版题维护优势线段注意这题的输入是x=1时的b #include <iostream> #includ ...
Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) A. Contest for Robots（数学）
题意: n 道题,2 个答题者,已知二者的做题情况,你是受贿裁判,可以给每题指定分值(≥1),求甲乙分数(甲>乙)相差最小时最大分值的最小值. 思路: 统计只有甲或乙做出的题目数. 加一取下整判 ...
用servlet在网页中打印字符串(初接触)、servlet调用过程
一.servlet是什么: 二.在官方文档中点servlet 这就是servlet的方法,这里说一下什么叫生命周期的方法(life-cycle methods):就是这个对象一旦创生之后一定会执行的方 ...
二叉排序树的构造 && 二叉树的先序、中序、后序遍历 && 树的括号表示规则
二叉排序树的中序遍历就是按照关键字的从小到大顺序输出(先序和后序可没有这个顺序) 一.以序列 6 8 5 7 9 3构建二叉排序树: 二叉排序树就是中序遍历之后是有序的: 构造二叉排序树步骤如下: 插 ...
win7 & centos7 双系统安装方法
1.准备 1)Centos7镜像官方:https://www.centos.org/ 阿里镜像:http://mirrors.aliyun.com/centos/ 2)安装windows7系统的电脑 ...
Java对象延迟初始化的实现
一.什么是延迟初始化? 在Java多线程程序中,有时候需要采用延迟初始化来降低初始化类和创建对象的开销. 延迟初始化实际上就是:当我们要进行一些高开销的对象初始化操作时,只有在使用这些对象时才进行初始 ...
1.nginx安装和基本配置
作者微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-07-10 20:56:10 星期三欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...
C++ part3
函数和const references: C++中const用于函数重载有些情况可以重载,有些不行,具体看↑. 隐式类型转换 references: nowcoder 对于内置类型,低精度的变量给高 ...

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