HTML学习-面向对象部分

已于 2023-10-28 22:17:20 修改
阅读量58 收藏
点赞数
分类专栏： HTML 文章标签： html 前端
于 2023-10-28 22:16:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53776714/article/details/134097238
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象部分</title>
    <style>
        abbr{text-decoration:none;
             background-color:yellow;
        }
    </style>
</head>
<body>
    <h1>HTML面向对象部分</h1>
    <hr>

    <h2 style="text-align:center">两个布局大BOSS</h2>
    <dl>
        <dt><strong>&lt;div&gt;布局：</strong></dt>
            <dd>1.使用经常使用div来作为底层图层的规划；格式：&lt;div id="container" style="width:900px"&gt;</dd>
            <dd>2.也可以用来作为某一个部分的布局，比如三段式布局：标题、左侧栏、中间栏、右侧栏、页脚组成的“口”字。参考样本如下：</dd>
    </dl>
    <img src="div布局.png" width="1200px" border="1">
    <dl>
        <dt><strong>&lt;table&gt;布局：</strong></dt>
            <dd>1.这种布局适合用于一些精细部分或div难以实现的部分，她最经典的例子就是报纸的排版</dd>
            <dd>2.参考例子如下：</dd>
    </dl>
    <img src="table布局.png" width="1200px" border="1">

    <h2 style="text-align:center">表单功能的一家</h2>
    <dl>
        <dt>&lt;input&gt;输入类型</dt>
            <dd>1.&lt;input type="text" name="firstname"&gt;文本类型输入框（<a href="FunctionStyle.html/#form1" target="_blank">点击查看样本</a> ）</dd>
            <dd>2.&lt;input type="password" name="pwd"&gt;密码类型输入框（<a href="FunctionStyle.html/#form2" target="_blank">点击查看样本</a> ）</dd>
            <dd>3.&lt;input type="radio" name="sex" value="male"&gt;单选按钮（<a href="FunctionStyle.html/#form3" target="_blank">点击查看样本</a>）</dd>
            <dd>4.&lt;input type="checkbox" name="vehicle" value="Bike"&gt;复选按钮（<a href="FunctionStyle.html/#form4" target="_blank">点击查看样本</a>）</dd>
            <dd>5.&lt;input type="submit" value="send"&gt;提交按钮（<a href="FunctionStyle.html/#form5" target="_blank">点击查看样本</a>）</dd>
            <dd>6.&lt;input type="button" value="click"&gt;普通按钮（<a href="FunctionStyle.html/#form5" target="_blank">点击查看样本</a>）</dd>
        <dt>&lt;select&gt;列表类型</dt>
            <dd>7.&lt;select name="foots"&gt;下拉列表（<a href="FunctionStyle.html/#form6" target="_blank">点击查看样本</a>）</dd>
            <dd>8.&lt;option name="apple"&gt;下拉列表选项（<a href="FunctionStyle.html/#form6" target="_blank">点击查看样本</a>）</dd>
            <dd>9.&lt;optgroup name="fruits"&gt;下拉列表选项分组（<a href="FunctionStyle.html/#form6" target="_blank">点击查看样本</a>）</dd>
        <dt>&lt;form&gt;表单</dt>
            <dd>10.&lt;fieldset&gt;和&lt;legend&gt;分别并表示表单的外框和表单外框的标题（<a href="FunctionStyle.html/#form7" target="_blank">点击查看样本</a>）</dd>
            <dd>11.&lt;textarea rows="10" cols="30"&gt;</dd>
            <dd>12.action 属性规定当提交表单时，向何处发送表单数据</dd>
        <dt>&lt;button&gt;普通按钮属性</dt>
            <dd>1.第二种写法：&lt;button type="button"&gt;点我&lt;/button&gt;</dd>
            <dd>2.定义焦点：<abbr title="如果你打开百度的网页，autofocus属性会使输入框自动获得焦点。这意味着当页面加载时，你的键盘焦点会自动移动到输入框中，你可以立即开始在输入框中键入搜索内容，无需进行额外的点击或滚动操作。">
                &lt;button type="button" autofocus onclick="alert('Hello world!')"&gt;点我&lt;/button&gt;</abbr></dd>
            <dd>3.禁用或启用：&lt;button type="button" disabled&gt;点我&lt;/button&gt;</dd>
            <dd>4.指定表单：<abbr title="当页面中有多个表单时，可以给&lt;form&gt;定义一个id，然后按钮索引那个表单的id。当点击按钮时是对指定的表单进行操作">
                &lt;button type="submit" form="nameform" value="提交"&gt;提交&lt;/button&gt;</abbr></dd>
            <dd>5.指定处理表单数据的脚本：使用formaction属性，可以避开form的action属性，重新使用一个指定的脚本来处理该表单</dd>
            <dd>6.formtarget属性可以帮助你将网页打开在指定地方，比如_black表示新窗口打开</dd>
            <dd>7.定义重置按钮：&lt;button type="reset" value="重置"&gt;重置&lt;/button&gt;</dd>
            <dd>8.value属性表示定义按钮的名称</dd>
            <dd></dd>
        <dt>&lt;textarea&gt;文本框属性（<a href="FunctionStyle.html/#textarea" target="_blank">点击查看样本</a>）</dt>
            <dd>1.autofocus、disabled、form、name属性与button中的一样</dd>
            <dd>2.placeholder="描述信息..."表示在文本框中会显示"描述信息..."字样</dd>
            <dd>3.readonly属性和required属性表示该文本框为只读和该文本框为必填否则会提示必填</dd>
            <dd>4.maxlength属性表示文本框内最多能填多少个字符（文字）</dd>
        <dt>&lt;select&gt;下拉列表属性</dt>
            <dd>1.autofocus、disabled、form、name、required属性同上述button一样</dd>
            <dd>2.&lt;option value="audi" selected&gt;Audi&lt;/option&gt;selected属性表示下拉列表默认选择Audi选项</dd>
            <dd>3.&lt;optgroup label="Swedish Cars"&gt;label属性表示下拉列表选项分组中的组名</dd>
        <dt>input输入框属性</dt>
            <dd>1.autofocus、disabled、form、formaction、formtarget、required、readonly、maxlength、placeholder属性与上述的文本框类型和按钮类型相似</dd>
            <dd>2.&lt;datalist id="browsers"&gt;表示预选列，当鼠标点击输入框时，下面会显示预选内容（<a href="FunctionStyle.html/#form6" target="_blank">点击查看样本</a>）</dd>
            <dd>3.alt 属性为用户由于某些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）无法查看图像时提供了替代文本。</dd>
            <dd>4.<abbr title="value 属性对于不同 input 类型，用法也不同：对于 ”button”、”reset“、”submit“ 类型 - 定义按钮上的文本；对于 ”text“、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值；对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。">
                value属性</abbr> </dd>
            <dd>5.type类型属性值，参考如下：<img src="/HTML-input.jpg"></dd>
            <dd>6.&lt;input src="/statics/images/submit.gif"&gt;src属性表示可以将按钮的样式换成图片按钮，通过src来索引图片路径</dd>
        <dt>&lt;dialog&gt;对话框</dt>
            <dd>1.&lt;dialog open&gt;标签定义一个对话框、确认框或窗口。</dd>
    </dl>

    <h2 style="text-align:center">框架夫妇</h2>
    <dl>
        <dt>iframe单边内联框架（<a href="FunctionStyle.html/#frame1" target="_blank">点击查看样本</a>）</dt>
            <dd>1.width和height分别表示宽和高（单位px）</dd>
            <dd>2.frameborder表示框架边框的粗细</dd>
            <dd>3.taget="iframe_a"表示&lt;a&gt;链接指定在内联框架中打开</dd>
        <dt>frameset多变框架</dt>
            <dd>1.frameborder边框粗细（<a href="FunctionStyle.html/#frame2" target="_blank">点击查看样本</a>）</dd>
            <dd>2.noresize和scrolling分别表示边框滚动设置和边框的滚动条是否显示</dd>
    </dl>
</body>
</html>

ArdyStudio2020
关注
专栏目录
面向对象方法在HTML编码中的应用
03-06
面向对象方法在HTML编码中的应用. 面向对象方法在HTML编码中的应用.
html面向对象js
qq_43127471的博客
04-15 317
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象</title> <!--单体--> <!--<script type="text/javascript"> ...
html语言面向对象,JavaScript面向对象-简单对象的创建和JSON对象
weixin_26795171的博客
06-03 191
JavaScript是一种基于对象(Object-based)的编程语言，它的本质实际上是面向对象。面向对象的语言的特点是它们都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。但是在JavaScript中没有类的概念，通常称JavaScript中的对象为原型对象，我们可以直接通过Object来创建对象。例如下面的代码：var person = new Object();person.n...
html语言面向对象,自学html5教程之JavaScript面向对象
weixin_39958137的博客
06-03 194
原标题：自学html5教程之JavaScript面向对象1.对象是什么面向对象编程(Object Oriented Programming，缩写为 OOP)是目前主流的编程范式。 它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此...
html是面向对象的语言吗,javascript什么是面向对象？
weixin_34080081的博客
05-31 717
本篇文章给大家带来的内容是关于javascript什么是面向对象？js中对象的理解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。js就是个面向对象语言，一切皆对象！一、什么是面向对象？面向对象的语言最基本的标志就是类的概念。什么是类？类是包含多个属性和方法的集合，类的实例即对象。因为历史原因，ECMAScript(后面简称JS)中对象的概念与基于类的语言的对象有所不同。ECMA-...
学习javascript面向对象 实例讲解面向对象选项卡
10-23
在学习JavaScript面向对象编程时，选项卡是一个常见的前端交互模式，它可以帮助用户通过点击不同的标签切换内容区域，从而实现信息的分组展示。本文档提供了一个面向对象选项卡的实现方法，主要通过面向对象的方式来...
html5面向对象小试牛刀
milijiangjun的博客
10-28 366
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function createStudent(id,name,pw...
HTML学习心得(5)——什么是面向对象
Heimdall_vata的博客
06-12 822
HTML学习心得(5) 面向对象 在我们来看JS与JQ之前，我们首先要了解一个概念——面向对象。JS作为一个基于对象的脚本语言，我们在进入JS的内容之前了解面向对象对我们的JS理解和使用有很大的帮助。 什么是面向对象 现在的高级语言基本上分为两个大类——面向过程和面向对象。我们在这里对面向过程不做解释，主要来看什么是面向对象的编程思想和方法。 需要解释的基本组成概念 类 类的...
HTML-JavaScript对象及初识面向对象
南劲竹的博客
09-16 774
对象是什么 对象是包含相关属性和方法的集合体（属性）（方法） 什么是面向对象 1.面向对象仅仅是一个概念或者编程思想 2.通过一种叫做原型的方式来实现面向对象编程 JavaScript中的基本数据类型： number（数值类型） string（字符串类型） boolean(布尔类型) null(空类型)    【判断后的值是object】 undefined(未定义类型) ...
HTML语义：面向对象的前端架构
高级网络营销师的博客
01-05 194
语义就是研究符合和标志以及其所代表的事物之间的关系。在学习语言的时候，主要是研究符号所要表达的意思（单词、短语或是声音），在Web前端开发过程中，语义涉及HTML元素、属性（attribute）及属性（attribute）值的意义（其中包括一些扩展、例如微数据）。对于定义好的语义，通常具有正式性的规范，但是定义了规范之后，元素、属性及其属性值的语义还会受到开发商共同选择和实现等因素的影响，这也是导...
HTML/CSS/JS用面向对象理解
热爱我的热爱
10-27 806
用个面向对象的思想理解。 好比一个人， HTML（就是人的四肢眼睛骨头这种实质性的） CSS (就是衣服，肤色，妆扮) javaScript(就是人的行为动作,比如吃饭，走路，说话)
JavaScript中的面向对象
wuyufa1994的博客
01-06 1万+
一个例子：集合类 集合（set）是一种数据结构，用以表示非重复值的无序集合。集合的基础方法包括添加值、检测值是否在集合中，这种集合需要一种通用的实现，以保证操作效率。JavaScript的对象是属性名以及与之对应的值的基本集合。因此将对象只用做字符串的集合是大材小用。例子9-6用JavaScript实现了一个更加通用的Set类，它实现了从JavaScript值到唯一字符串的映射，然后将字符...
html5面向对象的变成记录
milijiangjun的博客
05-25 506
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Index&lt;/title&gt; &lt;script type="text/javascript"&gt; console.
HTML5面向对象的游戏开发简单实例总结
fareise的博客
07-15 4404
在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子，通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是：将一个CSS sprite中的图像绘制到canvas中。首先创建一个SpriteSheet对象，代码如下： var SpriteSheet = new function(){ this.map = { }; this.load = function(sprite
全方位深入理解JavaScript面向对象
热门推荐
moyigg的博客
03-30 2万+
JavaScript面向对象程序设计 本文会碰到的知识点： 原型、原型链、函数对象、普通对象、继承 读完本文，可以学到 面向对象的基本概念 JavaScript对象属性 理解JavaScript中的函数对象与普通对象 理解prototype和proto 理解原型和原型链 详解原型链相关的Object方法 了解如何用ES5模拟类，以及各种方式的优缺点 了解如何用ES6实现面向对象 目录...
前端中的面向对象（通俗向）
水稻南曦jsnancy的博客
05-17 1万+
话不多说。面向对象，面向过程， 面向数据本篇主要说 前端中的面向对象。一、对象：一切事物皆对象     电视、收音机、手机eg: var new Date(); arr；总结：不了解原理的情况下，就能使用其功能。   面向对象          不了解内部原理的结构，知道表面的各种操作（电视机按钮）。   对象          你只管用,不用操心内部的具体实现          对象：万物...
前端用html写excel文件直接打开
全易
09-10 825
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
最新发布
S筱潇S四维Smile
09-11 412
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
JavaScript面向对象基础学习指南
"JavaScript面向对象基础.pdf" 这是一本面向JavaScript初学者的教程，重点讲解了JavaScript中的面向...通过学习这个教程，初学者将能够掌握JavaScript中的面向对象编程基础，为开发复杂的Web应用程序打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值