软件设计之HTML5

最新推荐文章于 2024-09-08 09:42:35 发布
最新推荐文章于 2024-09-08 09:42:35 发布
阅读量2k 收藏 33
点赞数 36
分类专栏： 软件设计之前端基础 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thm19990903/article/details/140888641
版权

软件设计之HTML5

【狂神说Java】HTML5完整教学通俗易懂

学习内容：

软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点参照：Java学习完整路线，强烈建议收藏转发

  1. HTML简介
  2. 常用标签
  3. 行内元素与块元素
  4. 页面结构框架
  5. iframe内联框架
  6. 框
  7. 文本域与文件域

1、HTML简介

HTML：Hyper Text Markup Language 超文本标记语言

DOCTYPE

DOCTYPE： 告诉浏览器使用规范

<!-- 注释内容-->
<!DOCTYPE html><!-- 告诉浏览器使用规范-->

title标签

用来命名网页标题
在这里插入图片描述

2、常用标签

<!-- 你好-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<!--  title标签：网页名字-->
  <title>网页名字</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<!--一根水平线-->
<p>A</p>
<p>B</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
C <br>
D <br>
<!--粗体、斜体-->
粗体：<strong>你好</strong>
斜体：<em>你好</em>
<!--特殊符号-->
空格： &nbsp; <br>
大于号：&gt;<br>
小于号：&lt; <br>
</body>
</html>

图像标签

在这里插入图片描述

超链接标签

<!--a标签
href:必填，表示要跳转的页面
target:表示窗口在哪里打开
  _blank 在新标签中打开
  _self 在自己的网页中打开-->
<a href="https://www.baidu.com"target="_blank"></a>

锚连接

<a id="top">顶部</a>
<!--锚链接
1、锚标记
2、跳转到标记-->
<a href="#top">回到顶部</a>

列表

<!--有序列表-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
</ol>
<!--无序列表-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
</ul>
<!--自定义列表-->
<!--dt:列表名称
    dd：列表内容-->
<dl>
  <dt>学科</dt>
  <dd>Java</dd>
  <dd>Python</dd>
  <dd>C/C++</dd>
</dl>

在这里插入图片描述

表格

HTML5 中不推荐使用 border 属性来设置表格边框。相反，建议使用 CSS 来实现同样的效果，这里先不阐述。

<!--
行：tr
列：td-->
<table>
  <tr>
<!--colspan 跨列-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
<!--rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
</table>

在这里插入图片描述

按钮

在这里插入图片描述)

3、行内元素与块元素

在这里插入图片描述

4、页面结构框架

在这里插入图片描述

5、 iframe内联框架

iframe 标签用于在一个网页内嵌入另一个 HTML 页面
src: 要嵌入的页面的 URL。
width 和 height: 指定 iframe 的宽度和高度。
此处代码功能是点击跳转，随后网页在所设置的内联框架中显示！

<body>
<iframe src="" name="show" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com" target="show">点击跳转</a>
</body>

在这里插入图片描述

表单

Chrome的表单数据在Payload里：(每个浏览器的不一样)
在这里插入图片描述

在这里插入图片描述

<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
  post：比较安全，传输大文件
  get：可以在url中看到提到的信息，不安全，高效-->
<form action="index.html" method="post">
  <!--  文本输入框：input type="text"-->
  <p>名字：<input type="text" name="username"></p>
  <!--  密码框：input type="password"-->
  <p>名字：<input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>

在这里插入图片描述

6、框

单选框

<p>性别
  <input type="radio" value="boy" name="sex">男
  <input type="radio" value="girl" name="sex">女
</p>

多选框

<p>爱好
  <input type="checkbox" value="sleep" name="hobby">睡觉
  <input type="checkbox" value="code" name="hobby">写代码
</p>

下拉框

<p>下拉框
  <select name="列表名称">
    <option value="选择项">中国</option>
    <option value="选择项">美国</option>
    <option value="选择项">英国</option>
  </select>
</p>

在这里插入图片描述

7、文本域与文件域

文本域

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

在这里插入图片描述

文件域

上传文件

<p>
  <input type="file" name="files">
</p>
柳叶寒
关注
  • 36
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页设计软件列表HTML,十种网页设计软件
weixin_42347324的博客
06-07 7603
网页设计所使用的软件因为使用对象、制作内容、网页用途等的不同而有不同的适合的类型，这里我将所简述的十款软件按等级的不同，分初级、中级、高级这样三个等级一一介绍。下面和小编一起来看十种网页设计软件，希望有所帮助！(1)Microsoft FrontPage熟悉Word的用户，在使用FrontPage进行网页设计一定会非常顺手，这是一款与word有许多相似地方的软件。使用FrontPage制作网页，你...
html5手机页面设计软件,5个非常优秀的免费H5页面制作工具（推荐）
weixin_30456153的博客
06-07 1万+
经常在微信里看到一些活动推荐页面，非常酷炫，自己也想做，但不会H5，也不懂移动开发规范，怎么办？中国1. 易企秀百度指数：★★★★★易企秀界面作 为百度指数最热的易企秀其实很容易定义，就是移动版PPT的H5页面制作工具，用来在手机上做简单动态演示。所以它各方面的组件，比如文本、按钮、图表、 动效这些都和微软的PowerPoint非常相像，用于问卷类型的表单采集，但不能自主设计。总的来说，使用难度比...
html界面设计用什么软件,html网页开发常用软件有哪些
weixin_39640085的博客
06-05 6627
1、InitializrInitializr是制作HTML5网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr会为你生成代码简洁的可定制的网页模板。2、HTML5 visual cheat sheetHTML5 visual cheat sheet是一个非常酷的速查手册，每个Web开发人员的必备神器，可以帮助大家快速超找一个标签或者属性。3、Cro...
中级软件设计师知识总结
热门推荐
weixin_38009144的博客
05-26 3万+
内容包括：1.数据库模式2.ER模型3.关系代数与元组演算4.规范化理论5.并发控制6.数据库完整性约束7.分布式数据库8.数据仓库与数据挖掘文法的定义一个形式文法是一个有序四元组G=(V,T,S,P)，其中：V:非终结符。不是语言组成部分，不是最终结果，可理解为占位符。大写字母代表，这种符号是可以推出其他符号的。T: 终结符。是语言的组成部分，是最终结果。以小写字母代表S:起始符。是语言的开始符号P:产生式。用终结符替代非终结符的规则文法的类型分为0型、1型、2型、3型。
html5毕业设计程序,网页毕业设计制作流程
weixin_34593328的博客
06-08 4532
一，确定主题二，做好结构规划(板块)三，收集素材，(文字、图片、视频，声音等素材)四，安装好Dreamweaver，软件对网页进行设计制作。本设计使用Dreamweaver cs5软件建立的网站、Photoshop图片处理、flash动画设计辅助完成(利用所学知识对网页进行设计)制作过程1、在自已电脑中新建一个文件夹(自定义命名)，做为站点如下图，文件夹根目录下再建一个名为一个为images的文件...
交互设计软件 html,5款优秀的交互动效设计软件推荐，让你用到爽
weixin_33643798的博客
06-05 4115
当我们在看到一些漂亮的APP动效设计的时候，大家就会问，这些动效到底是用哪些动效设计软件制作的 呢？今天学堂君给大家整理出了10款优秀的动效设计软件。你看哪些你听过或者用过呢?第一款动效设计软件:Adobe After EffectsAE这个软件我想大家都知道，火得一塌糊涂，如果没猜错的话，它目前属于设计师学动效的首选。目前市场上出现了很多AE培训的课程。也特别的多。报名人数也很多。它的特点就是...
网页设计软件列表HTML,【网站设计用什么软件】网页设计软件具体有哪些，常见的十种网页设计软件介绍！...
weixin_39708854的博客
06-07 3223
网页设计软件具体有哪些，常见的十种网页设计软件介绍。网络设计所使用的软件由于使用对象、制作内容、网页用途等的不同，有不同的适用性，在这里，我就把所简述的十款软件按等级分别介绍，分为初级、中级、高级三个等级。下面一起看看吧!靠前部分，基本的网页制作软件。(1)MicrosoftFrontPage。了解Word的用户，在使用FrontPage网页设计时一定会很顺手，这是一个和word有很多相似之处的软...
常用的HTML5网页制作软件
bamboozxl的博客
08-21 4842
HTML5被看做是Web开发者创建流行web应用的利器，增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。今天,我将为大家推荐几个主流的HTML5开发工具。 1、Sublime Text Sublime
有哪些开源html5的组态软件,FScada组态软件
weixin_42550052的博客
06-09 3988
1.7.1 绘制图像绘制图像需要使用 drawImage() 方法。此方法需要一个图像对象和一个起始点坐标作为参数，其中起始点坐标是相对于canvas的左上角的位置。如：context.drawImage(imageObj, x, y);效果图代码 body{ margin:0px; padding:0px;}#myCanvas{border:...
网页设计html5实训心得,网页设计实习心得
weixin_39928686的博客
06-22 7025
网页设计实习心得实习结束后你是不是有很多话想说呢?不妨写出来吧!下面是小编收集整理的网页设计实习心得范文，欢迎参考学习!更多内容请关注应届毕业生考试网!篇一：网页设计实习心得21世纪的时期，中国的网络正在实飞猛进，大多的企业都是通过建立网站来进入企业宣传，通过企业网站来打广告，宣传产品、品牌推广，促进销售等 方法来实现企业营利的目的。所以，中国的互联网在中国的近几年来，有了非常大的发展空间，如“网...
2023软件设计师上半年真题解析（上午题）
11-07 2万+
真题＋解析，解析仅供参考，具体简便解题思路可以观看博主的讲解视频
静态HTML网页设计作品 HTML5+CSS大作业——个人网页设计(7页)
qq_524614081的博客
04-11 6569
HTML5+CSS大作业——个人网页设计(7页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——个人网页设计(7页)一、作品展示二、文件目录
HTML5 主流制作网页的标记语言(1)
daoliuweisong12的博客
09-05 463
HTML是一种用于创建网页的标准标记语言。它不是编程语言，而是由一系列元素组成的标记语言，这些元素告诉浏览器如何显示页面上的内容。CSS用于设置HTML元素的样式，包括布局、颜色、字体等。它允许开发者将内容与表现分离，使得网页的维护更加容易。
HTML5 --- 进阶教程
daoliuweisong12的博客
09-06 1414
本教程涵盖了HTML5的多个进阶知识点，包括语义化标签、表单新特性、多媒体、Canvas与SVG、Web Sockets、Web Storage和Geolocation等。通过实战演示，我们深入了解了这些技术的应用场景和具体实现方法。HTML5作为现代网页开发的核心技术之一，不仅继承了HTML4的所有功能，还引入了大量新特性和API，极大地丰富了网页的表现力和交互性。Canvas是一个用于绘制图形的HTML元素，它提供了通过JavaScript和Canvas API来绘制图形、图表、图像等的功能。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1377
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
如何区分html和html5
最新发布
hexadecimal_001的博客
09-08 407
HTML与HTML5在多个方面存在显著的区别。
HTML5好看的花店商城源码3
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-05 1267
HTML5好看的花店商城源码3，花店商城源码，最全商城模板，花店模板，一款大气的网上花店/鲜花店购物商城HTML模板，内置三十个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
在HTML5中使用Noto Sans CJK字体的详细指南
engchina的专栏
09-05 1813
在HTML5中使用Noto Sans CJK字体的详细指南
HTML5好看的花店商城源码2
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-02 1270
HTML5好看的花店商城源码2，花店商城源码，花店模板，一款大气的网上花店/鲜花店购物商城HTML模板，酷炫的界面效果，简易的整体风格，实现了花店的所需功能，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5期末大作业设计：抗击疫情感动人物专题网页设计
HTML5网页设计小作业知识点总结 HTML5网页设计小作业是指使用HTML5、CSS、JavaScript等技术设计和开发的网页设计作品。这种作品通常具有响应式布局、多媒体元素、交互效果等特点。下面是该作品的知识点总结： 一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值