2018-11-12 H5基础学习笔记（3）

最新推荐文章于 2024-03-18 10:41:26 发布
最新推荐文章于 2024-03-18 10:41:26 发布
阅读量112 收藏
点赞数
分类专栏： 学习笔记 文章标签： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38047461/article/details/84000189
版权

本次学习主要了解的H5的样式以及链接跳转，具体笔记见代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <!--用css进行外部样式表-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!--内部样式表的方法-->
    <style type="text/css">
        p{
            color:aqua;
        }
    </style>

</head>
<body>
    <h1>标题h1</h1>

    <p>使用内部样式表</p>

    <!--内联样式表-->
    <a href="http://www.baidu.com" style="color:chocolate ">使用内联样式表</a>
    <a href="http://www.baidu.com"><img src="image/b36ab77eca80653805fda6c695dda144ac34824c.jpg" width="100px" height="200px" alt="imagelogo"></a>
<!--使用图片来指定链接,设置图片的大小,用alt属性指定图片无法正常显示时候的文本-->
    <br/>
    <a name="jump">Let's jump</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#jump">跳转到jump</a>
<!--name属性进行页面内的跳转-->
</body>
</html>

以及H5中表格的相关操作，具体笔记见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--border定义边框-->
    <!--bgcolor定义表格背景颜色-->
    <table border="10" bgcolor="#7fffd4">
        <!--caption属性定义表格名称-->
        <caption>表格名称</caption>

        <!--定义表格的行-->
        <tr>
            <!--表头用th定义，有着重效果-->
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <!--空单元格-->
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>
                <!--表格内的标签-->
                <ul>
                    <li>列表1</li>
                    <li>列表2</li>
                    <li>列表3</li>
                </ul>
            </td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
    <br/>

    <!--cellpadding属性定义表格单元格大小-->
    <!--background属性定义背景图片-->
    <table border="10" cellpadding="10" background="image/b36ab77eca80653805fda6c695dda144ac34824c.jpg">
        <!--caption属性定义表格名称-->
        <caption>表格名称</caption>
        <!--border定义边框-->
        <!--定义表格的行-->
        <tr>
            <!--表头用th定义，有着重效果-->
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <!--空单元格-->
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>
                <!--表格内的标签-->
                <ul>
                    <li>列表1</li>
                    <li>列表2</li>
                    <li>列表3</li>
                </ul>
            </td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>

    <br/>
    <!--cellsacing定义单元格之间的距离-->
    <table border="10" cellspacing="10">
        <!--caption属性定义表格名称-->
        <caption>表格名称</caption>
        <!--border定义边框-->
        <!--定义表格的行-->
        <tr>
            <!--表头用th定义，有着重效果-->
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <!--定义表格的单元-->
            <td>单元格1</td>
            <!--空单元格-->
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>
                <!--表格内的标签-->
                <ul>
                    <li>列表1</li>
                    <li>列表2</li>
                    <li>列表3</li>
                </ul>
            </td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>

网页效果如图：

咸鱼比较咸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5----学习笔记 day01
Rainzs的博客
06-08 195
H5_day01 html 概述：超文本标记语言，用于构建网页的基础。 html的框架 <!DOCTYPE html> <html> <head> <meta charset="utf"/> <title>我的第一个网页</title> </head> <body> 主体内容 标签写的地方 </body> </h
h5学习笔记 flex space-between 实现左右对齐布局
cfhgcvb的博客
02-19 567
h5学习笔记 flex space-between 实现左右对齐布局
2018-11-09 H5基础学习笔记
qq_38047461的博客
11-10 393
第一次学习大概跟着课程了解了一些基础的H5的特性以及整体的基本知识。具体代码和笔记如下： &lt;!--用于声明确切的html版本--&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Titl
uniapp+uview 学习笔记（二）—— H5开发
summer_gf的博客
03-18 2442
本文主要介绍使用uniapp框架和uview组件库进行H5开发，仅供学习参考。
H5大前端（Web前端）学习笔记（一）-HTML部分
weixin_71370424的博客
12-27 905
HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾。HTML是一种标记语言，标记语言是一套标记标签。
uni-app学习笔记
前端学习分享
02-11 1242
uni-app学习笔记
前端基础学习笔记
sober30的博客
07-27 4021
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
Uniapp零基础开发学习笔记(10) -地图组件的使用
qq_43662503的博客
10-27 1163
地图组件的使用，原教程学习同时避坑
学习笔记-uni-app
weixin0605的博客
05-27 725
环境准备 安装HBuilderX 安装插件 内置浏览器 内置终端 app真机运行 prettier scss/sass编译 项目搭建 div h1标签都是web标签，无法自动转化未小程序，app 必须使用官方兼容性标签 view text 标签 view text navigator 页面跳转 url button button <button type="default" @click="goDetail">详情页</button> methods: {
Uniapp零基础开发学习笔记(7) -表单组件的练习使用
qq_43662503的博客
10-24 1160
所有表单控件的综合练习
h5前端学习笔记
03-21
综合以上信息，这份“h5前端学习笔记”涵盖了HTML5的基础到高级特性，CSS样式设计，JavaScript编程，以及一些实际应用场景的案例，对于想要系统学习和提升前端技能的开发者来说，是非常宝贵的资源。
H5-CSS3-Kapcb:HTML学习
05-26
# 1、H5-CSS3-KapcbH5-CSS3基础入门学习# 2、前言记录自己关于H5和CSS3的学习笔记还有Demo，笔记均在Demo注释部分，后续会整理成MarkDown格式的文件发布在博客上。如果觉得对您有帮助，您的Start就是对我最大的认同...
前端基础学习笔记,pdf
10-12
【前端基础学习笔记】 前端开发是构建网页或应用程序用户界面的关键部分，主要包括HTML、CSS和JavaScript这三大核心技术。这篇学习笔记涵盖了JavaScript的基础知识，以及与前端开发相关的其他重要概念。 ...
Python-利用TensorFlow2和Keras的深度学习课程笔记
08-11
在本课程笔记中，我们将深入探讨如何利用TensorFlow 2和Keras进行深度学习实践。TensorFlow是一个强大的开源库，由Google Brain团队开发，用于数值计算和机器学习，特别是深度学习。Keras则是一个高级神经网络API，...
【SCI顶级】金豺算法GJO-CNN-LSTM-Multihead-Attention温度预测【含源码 5741期】.zip
最新发布
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
2023睿抗机器人开发者大赛.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
【JCR一区级】飞蛾扑火算法MFO-CNN-LSTM-Attention故障诊断分类预测【含源码 5668期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
SCI一区】蚁狮算法ALO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5651.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
H5TQ2G43CFR-xxC DDR3 SDRAM规格详解
"DDR3 H5TQ2G4是海力士(Hynix Semiconductor)推出的一款2Gb DDR3 SDRAM内存芯片，适用于需要高内存密度和带宽的主内存应用。该芯片遵循DDR3同步动态随机存取存储器的标准，提供双倍数据速率（Double Data Rate）的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值