HTML

最新推荐文章于 2024-01-10 17:04:40 发布
最新推荐文章于 2024-01-10 17:04:40 发布
阅读量67 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45395810/article/details/97298562
版权

推荐学习网站：http://www.w3school.com.cn/

标签：

以<开始，以>结束

标签是成对出现的，结束标签有/

关键字即为名字

标签需要嵌套

字节数标签不能嵌套其他标签

标签的属性写在标签内 属性的写法 key=value

<head></head>为配置，不显示

补充：

用iframe 内联框架，在一个页面中嵌入另一个页面（常用）（被嵌套的窗体为子窗体）

必加属性：frameborder  边框 取0或1  默认为1

  heigth    高

  weigth   宽

  name     iframe的名称

  scrolling  是否有滚动条（一般为no）

src       在iframe中显示的文档的URL

<!--在页面hello中嵌套一个2.html页面-->

<iframe name="kid" src="2.html" width="500" height="300" scrolling="no" ></iframe>

 

超链接<a></a>

href：加锚点或者超链接

target：

_blank 在新标签页打大

_self   在当亲页面打开

_parent 在父窗体打开（iframe中包含的窗体为子窗体）

_top   在祖宗窗体（最顶层的窗体）打开

子窗体的名字（inframe中的name）   在该子窗体打开

<iframe name="kid" src="2.html" width="500" height="300" scrolling="no" ></iframe>
<!--添加链接，鼠标单击百度，子页面kid跳转为百度-->
<a href="http://baidu.com" target="kid">百度</a>

 

表单代码练习

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

<!--表单-->
<!--method 提交的方式 不写的话默认get-->
<!--get:显式提交，一次最高255个字符，容易出现中文乱码
post：隐式提交，一次可以提交2M字符，更安全，使用https加密
共同：只能提交文本，以文本的方式提交-->
<!--action 为提交地址-->
<form action="/login" method="post" >
<!-- input ->文本 name必须有 type 是类型 -->
<!--    前三个是H4有的，其他都是新加的-->
<!--    value表示显示的值-->
    <input name="userName" type="text" value="2131">
    <input name="password" type="password" value="dsad">
    <input name="" type="tel">
    <input name="" type="number">
    <br>
    <input name="" type="hidden">
    <input name="" type="search">
    <input name="" type="date">
    <input name="" type="email">
    <br>
<!--input->  选择：单选，复选-->
    <input type="radio" name="sex" value="man" checked>男<!--单选,name相同的为一组  checked为默认选项-->
    <input type="radio" name="sex" value="women">女
    <input type="checkbox" name="in" value="lan">篮球<!--复选-->
    <input type="checkbox" name="in" value="zu">足球
    <input type="checkbox" name="in" value="pai">排球
<!--input -> 按钮  submit reset button image-->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
    <input type="image" value="提交" src="" width=""><!--效果跟提交一样-->
<!--input -> 其他  file color   -->
    <input type="file">浏览<!--选择文件，返回文件地址-->
<!--非input-->
<!--下拉列表 value为提交值，一月为显示值-->
    <select name="month">
        <option value="1">一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="4">四月</option>
        <option value="5" selected>五月</option><!--selected 为默认选项-->
    </select>
    <br>
<!--文本域-->
    <textarea name="" rows="5" cols="10" >两个标签之间写值，表示默认值</textarea><!--行数和列数控制宽度和长度-->

</form>
</body>
</html>

效果图

表单综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formTest.html</title>
</head>
<body>
填写用户注册信息
<form action="/login" method="post">
<table border="1" >

    <tr>
        <td>用户名:</td>
        <td>
            <input name="name" type="text">
        </td>
        <td>登录用户名</td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input name="password" type="password"></td>
        <td>登录密码，6个以上字母，<br>
            数字组合，不区分大小写</td>
    </tr>
    <tr>
        <td>注册邮箱：</td>
        <td><input name="email" type="email"></td>
        <td>录入后不可更改</td>
    </tr>
    <tr>
        <td>性别：</td>
        <td><input name="sex" type="radio" value="man">男
            <input name="sex" type="radio" value="women">女</td>
        <td>选择您的性别</td>
    </tr>
    <tr>
        <td>出生年月：</td>
        <td>
           <select>
               <option value="2013" selected>2013</option>
               <option value="2014">2014</option>
               <option value="2015">2015</option>
               <option value="2016">2016</option>
           </select>
            年
            <select>
                <option value="10" selected>10</option>
                <option value="9">9</option>
                <option value="8">8</option>
                <option value="7">7</option>
                <option value="6">6</option>
                <option value="5">5</option>
            </select>
            月
        </td>
        <td>选择您的出生年月</td>
    </tr>
    <tr>
        <td>兴趣标签：</td>
        <td>
            <input name="happy" type="checkbox" value="live">生活
            <input name="happy" type="checkbox" value="play">娱乐
            <input name="happy" type="checkbox" value="sport">体育<br>
            <input name="happy" type="checkbox" value="money">财经
            <input name="happy" type="checkbox" value="fashion">时尚
            <input name="happy" type="checkbox" value="view">新闻
        </td>
        <td>选择您感兴趣的标签</td>
    </tr>
    <tr>
        <td>头像</td>
        <td>
            <input name="headPicture" type="file" value="浏览" accept="image/jpeg">
        </td>
        <td>选取您的图像文件</td>
    </tr>
    <tr>
        <td>个人简介</td>
        <td><textarea name="" rows="5" cols="20" ></textarea>
        </td>
        <td>请添加您的个人简介情况<br>
            以方便朋友们更了解您</td>
    </tr>

</table>
    <input name="save" type="submit" value="免费注册">
</form>

</body>
</html>

效果

仲夏余四
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
HTML基本结构
qianniao_yingmo的博客
03-30 9467
一、网页三大组成部分 结构：html，是超文本标记语言——用来搭建网页的结构 样式：css——网页的样式 行为：js，是一种语言，称为脚本语言——交互行为 用户对网页的操作 数据交互 二、HTML语法规范 1、语法（英文状态下输入） html标签：是由尖括号包围的关键词，例如<html> 2、以元素样子对标签进行分类 ①双标签：如：<html>开始标签，</html>结束标签 ②单标签：比较少，如<img>，<br>，<
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
HTML——表格
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML5
weixin_52957373的博客
07-20 6325
html超文本标记语言它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。.........
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
Web开发丨基于django+html+css+js的电子商务网站
兔子王
01-10 3万+
本期内容：基于Django+HTML+CSS+JS的电子商务网站。
HTML系列之图像标签 img
老__L的博客
10-24 3万+
本文主要介绍img标签。 img>将一份图像嵌入文档。没有基线（baseline）;根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。
2023跨年烟花3D最炫烟花，html最酷炫动态烟花源码分享，点击即可直接运行
在下马农的碎碎念
12-25 4万+
2023年跨年烟花代码 2023圣诞烟花最炫烟花代码 2023春节烟花代码 2023跨年烟花秀,超好看的跨年烟花秀代码，二十行代码，三分钟就能完成部署。 跨年烟花代码html 2023年跨年烟花代码 跨年烟花代码python 跨年烟花代码c语言 2023跨年烟花代码python 跨年烟花代码c 用c++2010跨年烟花代码 java跨年烟花代码 跨年烟花代码c++ 跨年烟花代码送给朋友 跨年烟花秀送给2023努力的自己
HTML_有哪些字体样式及使用
2301_78311954的博客
12-15 5251
注意：其中不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍)。font属性用于对字体样式进行综合设置，其基本语法格式如下：选择器{字体风格→字体粗细→字体大小→字体类型 }font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
html+css网页设计源码(简洁)
12-25
HTML 和 CSS 是构建网页设计的基础，本资源提供了一套简洁的网页设计源码，适合初学者和需要快速搭建页面的开发者。这套源码充分展示了如何使用 HTML 结构元素和 CSS 样式规则来创建一个清晰、易读且具有基本功能的...
全新转转交易猫自带客服多模板全开源完整定制版源码
08-27
定制版全开源完整无授权 商品发布； 请在后台商品添加成功后， 再点击该商品管理，可重新编辑当前商品的所有信息及配图以及支付等等相关信息 可点击分享或者跳转，将链接地址进行发布分享 请在手机端打开访问 访问商品主要模板文件路径目录 咸鱼; http://你的域名地址/Xianyu_goods/ 代练妈妈;http://你的域名地址/dlmm/ 大麦商品;http://你的域名地址/dm/dzpj.php 大麦售票;http://你的域名地址/dm/dzp.php 交易猫; http://你的域名地址/jym/ QQ卡框工具;http://你的域名地址/kk/ 京东; http://你的域名地址/www.jd.com/index1.php 转转;http:/ 安装教程； 环境； PHP版本5.6，数据库版本MySQL 5.6 第一步源码上传解压 第二步找到config文件夹找到Conn.php修改数据库 第三步导入数据库sql.sql 第四步http://域名/wuyun.php登录后台 默认登录后台账号及密码； 默认账号；admin 默认密码；123456 源码内附详细搭建教程TXT文档
项目模板-硬件详细设计说明书.doc
最新发布
08-27
项目模板-硬件详细设计说明书.doc
深入探索MySQL的存储引擎：数据持久化的奥秘
08-27
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
ESXI后台导出虚机模板工具
08-27
ESXI后台导出虚机模板工具
使用c语言来实现如果cmd中的ping
08-27
c语言实现如果cmd中的ping
HTML5基础知识详解
HTML5基础知识点总结 HTML5是当前web开发的基础语言，作为一名web开发者，掌握HTML5的基础知识是非常必要的。下面是对HTML5基础知识点的总结： **HTML5文档的基本结构** HTML5文档的基本结构包括文档类型声明、根...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值