HTML5列表、布局和链接

最新推荐文章于 2022-04-13 15:29:40 发布
最新推荐文章于 2022-04-13 15:29:40 发布
阅读量1k 收藏 1
点赞数
分类专栏： 【H5】 文章标签： HTML5 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yang_Sun_shine/article/details/69616058
版权

列表：

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

<!--有序列表
    1：修饰符是数字，它会随着项目的增多，自动增加。
    2：有序列表也是可以嵌套的。-->
<!--补充：
    start:指定列表的开始索引
    reversed：列表索引倒序显示
    type：指定列表索引的类型-->

<h3>购物流程</h3>
<ol reversed start="9" type="I">
    <li>确认购买信息</li>
    <ol>
        <li>确认购买人</li>
        <li>确认购买商家</li>
    </ol>
    <li>付款到贵美</li>
    <li>确认收货</li>
    <li>付款给商家</li>
    <li>双方评价</li>
</ol>
<hr>

<!--无序列表：
    1：修饰符是默认的原点，
    2：可以嵌套，嵌套的修饰符会与外层产生区别，以示区分。-->

<ul value="3">
    <li>数码</li>
    <ul>
        <li>笔记本</li>
        <li>手机</li>
        <li>家电</li>
    </ul>
    <li>美容</li>
    <li>服装</li>
</ul>
<hr>

<!--定义列表:
    1:子标签分两个  dt  dd
    2：dt:列表的标题  没有缩进
    3：dd：列表的描述  有缩进-->
<dl>
    <dt>联想电脑</dt>
    <dd>产品型号：Y470</dd>
    <dd>价格：4999</dd>
    <dd>所在地：北京</dd>
</dl>
<hr>

<!--使用定义列表实现图文混编的布局-->
<dl>
    <dt>
        <img src="../../img/lenovo2.jpg" alt="" width="150px" height="100px">
    </dt>
    <dd>产品型号：Y470，精悍的小Y,娱乐影音本</dd>
    <dd>价格：5999</dd>
    <dd>所在地：北京</dd>
</dl>
<hr>


<!--组合标签：<figure></figure> 用于显示图片及图片标题
    两个子标签：
              <img /> 图片
              <figcaption></figcaption> 图片的标题

    显示效果：图片下面一个标题，同时图片和标题前带缩进。
-->
<!--使用组合标签实现图文混编的布局-->
<figure>
    <img src="../../img/lenovo2.jpg" alt="图片不存在" width="150px" height="100px"/>
    <figcaption>
        产品型号：Y470，精悍的小Y,娱乐影音本
    </figcaption>
</figure>
<hr>

布局： 

<!--分区标签-->
<div>
    <header style="height: 80px">
        <img src="../../img/logo.png" alt="" style="margin-left: 20px;margin-top: 10px">
        <img src="../../img/logo_kouhao.png" alt="" style="margin-left: 20px">
        <img src="../../img/logo_Tel2.png" alt="" align="right" style="margin-top: 20px">
    </header>
    <nav style="height: 40px;background-color: yellow">菜单区域</nav>
    <section style="height: 500px;background-color: blue">详情区域</section>
</div>
<br>
<br>

链接： 

<!--a标签三种功能:
          1：页面跳转
          2：锚点链接
          3：功能链接-->
<!--属性：
    1：href 用来指定超链接要跳转的页面  页面可以本地页面，也可以是非本地页面。
    2：title  用来指定鼠标悬浮时的提示文本
    3：target  用来指定要打开的网页在什么位置显示
                _self   _blank
    4：rel  用来指定要打开的页面和当前页面的关系  添加该属性可以做到搜索引擎优化。
                next   prev  -->
<a href="http://www.baidu.com/" title="百度一下" target="_self"
   rel="next">
   百度一下
</a>

<!--在02.html中添加锚点
<a name="ccy"></a>-->
<!--跳转到外部页面的同时，也可以指定跳转位置
    方法：路径地址+锚点地址（锚点名称）-->
<!--<a href="../01/02.html#ccy">本地页面跳转</a>-->
<br>
<!--跳转到锚点名称为top地方去-->
<a href="#top">返回顶部</a>
<br>
<!--功能性链接：mailto://xxxxxxx 给指定邮箱发送邮件
tencent://message/?uin=xxxxxxx 给指定QQ发送消息-->

<a href="mailto://chency@jerei.com">发邮件</a>
<br>
<a href="tencent://message/?uin=512040302">发消息</a>
<br>
<br>
</body>
</html>

效果图：




Yang_Sun_shine
关注
专栏目录
H5实战(七)：列表布局切换
weiweitb8的博客
09-22 2344
1.目标效果 实现信息列表的平铺布局与列表布局的切换效果。 2.实现思路 1）写出信息列表与切换按钮，切换按钮可使用正方形中间插入span的白条而形成两种不同的按钮。 2）为两种不同布局设置样式，一种是列表形式，另一种为平铺方式，可设定每个li宽度并向左浮动而形成。 3）为没有被选中的按钮添加类，当点击事件发生时，判断若是此类，则切换布局（即将列表部分的类名改变）。 3.代码实现
详解HTML5布局和HTML5标签
01-18
一、新的文档类型声明(DTD) 文档类型声明 HTML 5的DTD声明为:  <!doctype html>  <!DOCTYPE html >等也是正确的，因为HTML语法是不区分大小写的... <nav> 标记定义导航链接   标记定义一个区域  <aside> 标
html列表链接,HTML列表样式链接
weixin_34013327的博客
07-21 284
我有一个菜单，包含一个无序列表，样式看起来像一个网格，网格框在鼠标悬停在上面时会改变颜色。干净利落。我的问题是当我添加一个链接到li里面的文本时，悬停基本上就会中断。 (请参阅下面的小提琴以供参考，以及链接和非链接之间的悬停方式如何不同li)HTML列表样式链接我需要将链接样式设置为与悬停在网格上时的无风格文本相同的样式，而不仅仅是实际的链接并使整个网格框区域可点击。我一直在搞它一段时间，但不能让...
HTML布局和链接
Sung1114的专栏
04-07 783
HTML布局和链接
HTML5，超级链接
weixin_33802505的博客
08-28 153
<a href="http://h123.date">预算控制系统</a><<br><a href="2.html">222222</a> <br><a href="http://www.baidu.com" target="_blank"><img src="0.jpg"></a>&...
html5--6-35 列表和表格
weixin_33816611的博客
12-10 69
html5--6-35 列表和表格 实例       学习要点 掌握列表和表格的样式设置 表格有关的属性： border-collapse 设置是否把表格边框合并为单一的边框.属性值：separate 默认值/collapse边框合并 border-spacing 设置分隔单元格边框的距离。 caption-side 设置表格标题的位置。属性值：top ...
HTML5系列教程-HTML5列表、块和布局
11-28
传统的HTML布局依赖于表格（`<table>`）或CSS的复杂定位，但HTML5引入了新的语义化元素，如`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`和`<footer>`。这些元素提供了更清晰的内容结构，...
html5+css3响应式购物商城商品列表布局特效.zip
最新发布
09-25
在这个“html5+css3响应式购物商城商品列表布局特效”项目中，我们可以深入探讨如何利用这两者来构建适应各种屏幕尺寸的电子商务界面。 HTML5引入了许多新的元素和API，以更好地支持多媒体、数据存储以及网页应用...
HTML5布局之路
07-22
资源名称：HTML5布局之路内容简介：《HTML5布局之路》从开发实战的视角，介绍了网站制作知识和开发流程。首章当中，针对HTML5的基本知识及《HTML5布局之路》所涉及的所有内容进行整体概括。主要内容包括：HTML5入门...
html5响应式网格布局动画打开列表内容特效
11-24
在压缩包“texiao4096_1560681152”中，可能包含了一个示例项目，演示了如何使用HTML5和CSS3实现响应式网格布局以及动态列表内容展开的动画效果。这个项目可能包括HTML文件、CSS样式表和可能的JavaScript脚本，...
H5手机站页面,列表页+内容页
09-13
H5手机站页面,列表页+内容页
HTML5的链接
qq_26310441的博客
08-24 831
alt（图片名事故如错误  或者无法读取  图片显示alt后面的文字） name（页面   本跳转） html> html lang="en"> head> meta charset="UTF-8"> title>title> head> body> a href="https://www.baidu.com" target="_blank">点我a> a href="ht
HTML5网页中的链接
FOR.GET
09-16 7451
1 网页超链接的概念 1.1 什么是网页超链接   指的是从一个网页向一个目标的链接关系，以特殊的编码的文本或者图形的形式来实现链接，点击该链接，会传送到某个位置，或者打开新的网站。网页中的链接，一般以蓝色字体，文字下有下换线，鼠标放在上面会出现小手的情况，单击即可跳转。如果访问过该链接，其文本则会变色(默认为紫色)。 1.2 超链接的URL   URL是Uniform Resource Locator的缩写，由以下四部分组成：协议、主机名、文件夹名和文件名，网页文件以.html或.htm为扩展名。
HTML5列表、块和布局
siwuxie095's blog
07-11 537
-----------------siwuxie095                            HTML5 列表       标签描述有序列表无序列表列表项列表列表项描述         1、无序列表    标签：、    属性：disc、circle、square          2、有序列表    标签：、
列表布局。
冲鸭
07-31 233
模型:在一个固定宽度的盒子内，均匀方式盒子，使他们之间的边距一致 特点:盒子的宽度是一样的，盒子之间的边距时一样的 布局公式: 容器的宽度w，盒子的宽度是iw,边距m,放置盒子的数量n w=n*iw+(n-1)* m 根据这个公式，如果三个变量是已知的，我们可以求第四个变量 注意，布局的时候，每个盒子都要设置右边距，此时容器应该比原有的 宽度多出一个边距来,我们可以通过修改margin（给个负值扩大）来解决(在没有显性设置宽度的时候，我们可以通过margin修改容器的宽度) <!D.
css列表布局
小武的博客
04-13 473
代码如下： 图下是小程序的代码，view代表div <view class="shop-item" wx:for="{{shopList}}" wx:key="id"> <view class="thumb"> <image src="{{item.images[0]}}"></image> </view> <view class="info"> <text class="shop-title">...
01.列表布局
augfun的博客
08-30 248
代码如下： import React, {Component} from 'react'; import{ AppRegistry, StyleSheet, Text, View, Image, Dimensions } from 'react-native'; //导入本地json数据 var BadgeData = require('./BadgeData.json'); //定义全局变量 var Dimension = require('Dimensions'); va
HTML5之链接标签
杨筱斌的博客
10-18 596
<a>标签 常用属性：           [href]： 最重要的属性，它指定链接的目标。没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性        ...
HTML5 链接记录
weixin_30849403的博客
07-21 67
html 5 本地数据库（Web Sql Database）核心方法openDatabase、transaction、executeSql 详解 转载于:https://www.cnblogs.com/larance/p/4665355.html
HTML教程：掌握列表与结构布局
本资源是一份详细的HTML...通过这份教程，学习者可以掌握HTML的基础知识，了解如何构建和布局网页，以及如何利用HTML来控制页面外观、创建链接和嵌入多媒体内容。这对于初学者来说是理解和进入Web开发领域的关键步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值