首页 > 其他分享 >html5的学习

html5的学习

时间：2024-03-06 23:15:11浏览次数：27  
标签：java python 标签 学习 html5 跑得快 100

HTML5

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段标签-->
<p>跑得快</p>
<!--换行标签-->
跑得快<br>
<!--水平线标签-->
跑得快<hr>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体 ： <strong>i love you</strong>
斜体 ； <em>i love you</em>
<!--特殊符号-->
<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--空格-->
&nbsp;
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src：图片地址
相对地址，绝对地址
../  上一级目录
alt替代找不到路径的图片

-->
<img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
<a href="链接标签.html#down">跳转</a>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
</ul>
<!--自定义列表
dl:标签(名字)
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</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
列 td
-->
<table border="1px">
    <tr>
<!--colspm 跨列-->
        <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-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

表格练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩表</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦将</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

连接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--标记-->
<a name="top">顶部</a>

<!--a链接学习
href：必须填，表示要跳转到那个页面
target:表示窗口在哪打开
_blank表示在新标签中打开
_self在自己的网页打开
-->
<a href="https://www.baidu.com"target="_blank">点击我跳转到百度</a>
<p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p>
<p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p><p>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resour/image/1709706565089.jpg" alt="帅哥头像"title="悬停文字"width="300"height="800">
</a>
</p>
<!--锚链接
需要一个标记

-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接：mailto：
qq链接 qq推广
-->
<a href="mailto:[email protected]">点击联系我</a>
</body>
</html>

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<seaction>
    <h2>网页主体</h2>
</seaction>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

内连框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0"width="300px"height="300px"></iframe>
<!--<iframe src="//player.bilibili.com/player.html?aid=1801266777&bvid=BV1ut421t73Z&cid=1459874653&p=1" 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="图像标签.html"method="post">
<!--文本输入框:input type = "text"-->
<!--    input type = "text"
name="username"value="周子龙好帅"
maxlength="8"最长能写几个
size="30"-->
<p>名字:<input type = "text" name="username"value="周子龙好帅"maxlength="8"size="30"></p>
<!--密码框:input type = "passward"-->
<p>密码: <input type="password" name="pwd"></p>
    <p>性别：
        <input type="radio"value="boy"name="sex"/>男
        <input type="radio"value="girl"name="sex"/>女
    </p>
    <input  type="submit">
    <input type="reset">
</form>
</body>
</html>

标签：java,python,标签,学习,html5,跑得快,100
From： https://www.cnblogs.com/zzl990110/p/18057849

相关文章

  • 2024.3.6学习笔记
    1.InfoNCEloss(源自知乎https://zhuanlan.zhihu.com/p/506544456)1.引入把对比学习看成是一个字典查询的任务，即训练一个编码器从而去做字典查询的任务。假设已经有一个编码好的queryq以及一系列编码好的样本k0,k1,k2...，把k0,k1,k2...可以看作是字典里的key。假设只有一......
  • ICLR 2024｜图像匹配新突破！GIM：首个从互联网视频中学习通用图像匹配器的框架
    前言 为了解决基于深度学习方法泛化性的问题，来自厦门大学、Intel、大疆的研究者们提出了GIM:LearningGeneralizableImageMatcherfromInternetVideos。GIM是第一个可以让匹配模型从互联网视频中学习到强泛化能力的训练框架。本文转载自机器之心仅用于学术分享，若侵权请......
  • 模拟退火学习笔记
    模拟退火，优雅的暴力我认为有必要摘抄一下提单上的简介ZX写的前言：本片适用于模拟退火入门-进阶模拟退火（SA）是一种随机化算法。当一个问题的方案数量极大（甚至是无穷的）而且不是一个单峰函数时，我们常使用模拟退火求解。一般的，很多题都可以用模拟退火水过，在OI界称之[优雅的暴......
  • 学习笔记
    coreUSER：存放工程文件、主函数文件main.c,以及其他包括system_stm32f10x.c等CORE：用来存放核心文件和启动文件OBJ：是用来存放编译过程文件以及hex文件STM32F10x_FWLib：用来存放ST官方提供的库函数源码文件SYSTEM：此文件夹里面的代码由ALIENTEK提供，是STM32F10x系列的底......
  • 学习进度条
     2024-03-05   所花时间（包括上课）2h   代码量（行）300   博客量（篇）1   了解到的知识点课上学习及java编程练习内容   ......
  • Android开发学习之路01
    今日跟着一个人进行了Androidstudio上创建数据库和数据表的联系，这应该是老师留的作业中，进行数据库的连接。原文链接：https://blog.csdn.net/fjh_xx/article/details/131404230一.前言二.SQLite数据库介绍1.什么是SQLite数据库2.特点3.SQLite操作API4.SQLite数据类型三.S......
  • Java学习总结 Day2
    Java学习总结Day2构造器publicclassperson{//一个类默认会有一个方法（构造器）Stringname;intage;//实例化初始值/*1.使用new必须有构造器，本质是调用构造器*2.初始化值*3.快捷键alt+insert*/publicperson(){}//有......
  • 前端学习-vue视频学习007-标签的ref属性
    尚硅谷视频教程给标签增加ref属性，可以通过属性值取到标签内容<template><divclass="person"><h1>this</h1><h2ref="title">that</h2><button@click="showLog">changeTemp</button>......
  • Vue学习笔记36--VueComponent构造函数
    VueComponent构造函数<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>VueComponent&......
  • 线性代数——平面向量 学习笔记
    线性代数——平面向量学习笔记首发于洛谷。定义及用语说明无特殊说明，下文的向量均指自由向量且是平面向量。向量，英文名为vector，目前没有准确而统一的中文翻译。在物理学科，一般翻译成「矢量」，且与「标量」一词相对。在数学学科，一般直接翻译成「向量」。对于向量的乘法：......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99