一、列表标签

  1. <!-- 快捷键 1、<meta charset="UTF-8"/>  用m6可直接写出
  2.            2、复制当前1行到下一行 ctrl+shift+R   
  3.  
  4. -->
  5.  
  6. <html>
  7.     <head>
  8.         <title> 02 body标签(列表标签)的学习</title>
  9.         <meta charset="UTF-8"/>
  10.     </head>
  11.     <!--
  12.         列表标签：
  13.         1、有序列表
  14.          ol
  15.             li：一个li标签代表一行数据 ,自动对数据进行编号,默认从1开始小到到大编号.可以通过type自定义
  16.         2、无序列表
  17.           u1
  18.             li：该标签中书写的列表内容,一个li标签代表一行数据 默认数据前有个黑点.(黑点可以去除用CSS)
  19.         3、自定义列表
  20.           dl
  21.             dt:数据的标题。前边没有空格
  22.              dd:数据的内容。前边有个制表符
  23.  
  24.     -->
  25.     <body>
  26.         <h3>列表标签的学习</h3>
  27.         <hr />
  28.         <h3>业余爱好：</h3>
  29.         <!--有序列表,3行数据之间有先后次序,默认从1开始变化.也可以设置让其从I、A、a等开始编号-->
  30.         <ol>
  31.             <li>玩游戏</li>
  32.             <li>拍篮球</li>
  33.             <li>看电影</li>
  34.         </ol>
  35.  
  36.         <ol type="A">
  37.             <li>玩游戏</li>
  38.             <li>拍篮球</li>
  39.             <li>看电影</li>
  40.         </ol>
  41.  
  42.         <hr />
  43.         <h3>中国知名城市：</h3>
  44.         <!--无序列表,3行数据之间没有先后次序-->
  45.         <ul>
  46.             <li>北京</li>
  47.             <li>上海</li>
  48.             <li>南京</li>
  49.         </ul>
  50.         <hr />
  51.         <!--自定义列表-->
  52.          <dl>
  53.              <dt>IT课程：</dt>
  54.              <dd>Java</dd>
  55.              <dd>Python</dd>
  56.              <dd>大数据</dd>
  57.          </dl>
  58.  
  59.     </body>
  60. </html>

二、图片标签

  1. <html>
  2.     <head>
  3.         <title> 03 body图片标签学习</title>
  4.         <meta charset="UTF-8"/>
  5.     </head>
  6.     <!--
  7.         图片标签: 图片是不会自动换行的,他是行内元素
  8.         img
  9.          src:图片的路径(绝对路径：从根盘符出发;  相对路径：从jpg文件(所在目录)出发查找另一个文件的路径,如果在
  10.                   一个文件夹下,可以加载,如果没有加载失败) 一般本地资源(图片在自己电脑上)使用相对路径
  11.           width:宽度  单独设置宽度或高度浏览器会在保证图片不失真的情况下自动缩小或放大 单位：px或 %
  12.           height：高度
  13.           title：当鼠标放上去可以看到图片的说明
  14.           alt:当图片加载不成功是，会显示提示文字
  15.  
  16.    -->
  17.     <body>
  18.         <!--使用本地资源-->
  19.         <img src="../img/1.jpg" width="200px"/>
  20.         <img src="../img/2.jpg" width="200px"/>
  21.         <img src="../img/4.gif" width="200px" title="这是一个狗子在吹风扇"/>
  22.         <img src="../img/5.gif" width="200px" alt="这是一个哈士奇"/>
  23.         <hr />
  24.         <!--使用网络资源-->
  25.         <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2725440693,2929091497&fm=27&gp=0.jpg"
  26.             width="400"/>
  27.  
  28.     </body>
  29. </html>

[19/05/14-星期二] HTML_body标签(列表标签和图片标签)的更多相关文章

  1. [19/05/15-星期三] HTML_body标签(超链接标签和锚点)

    一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...

  2. [19/05/13-星期一] HTML_head标签 和 body标签_文本标签

    一.概念 概念:超文本标记语言 作用:需要将Java在后台根据用户的请求处理结果在浏览器显示给用户.数据已经过来了,但是显示可能比较凌乱,所以html应用而生,就像写作文要加标点看着舒服. 在浏览器中 ...

  3. Android自定义标签列表控件LabelsView解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 无论是在移动端的App,还是在前端的网页,我们经常会看到下面这种标签的列表效果:   标签从左到右摆放,一行显示不下时自动换行.这样的效果用And ...

  4. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  5. git tag 查看标签列表、切换标签

    1.查看标签列表 git tag 2.切换标签(需要指定分支 test 为分支.v0.17.7 为标签版本) git checkout -b test v0.17.7

  6. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  7. HTML列表（组标签）+div（布局标签）与span

    一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 ...

  8. HTML标签列表总览

    超文本标记语言(简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分.HTML标签的大小写无 ...

  9. DEDECMS5.5/5.6/5.7列表页调用TAG标签（热门标签）的两种方法

    DEDECMS5.5/5.6/5.7列表页调用TAG标签的两种方法: 一.DedeCMSv5.6及其以前版本: dedecms默认在列表是无法调用tag标签的,经过各位版主们的帮助,现给大家提供出2种 ...

随机推荐

  1. 生成对抗网络 Generative Adversarial Networks

    转自:https://zhuanlan.zhihu.com/p/26499443 生成对抗网络GAN是由蒙特利尔大学Ian Goodfellow教授和他的学生在2014年提出的机器学习架构. 要全面理 ...

  2. oozie与hue整合 执行WC案例报错: 连接10020端口被拒绝

    Call From hdp-05/192.168.230.15 to hdp-01:10020 failed on connection exception: java.net.ConnectExce ...

  3. 注册和登录（关于Cookie）

    前记 我将描述一下登陆和注册之间发生了什么,将场景分为客户端和服务端,服务器是Node.JS,客户端是由JS写的 注册 1.注册请求 这是由客户端发送一个POST请求给服务端,其中包含了用户名和密码 ...

  4. 数据库JDBC

    数据库概述 什么是数据库?数据库就是存储数据的仓库,本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库进行增删改查操作. 数据库对应一个应用系统,在系统中有很多的功能,每 ...

  5. js 文件下载 兼容ie

    前置条件:后台接口返回二进制流文件 一.设置前端请求的的 responseType: 'blob' 二.接收请求数据并调用下载 var content = res.data // 接口返回的二进制流v ...

  6. visual studio 2017激活

    VS2017专业版和企业版激活密钥   Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB- ...

  7. mysql PRIMARY KEY约束 语法

    mysql PRIMARY KEY约束 语法 作用:PRIMARY KEY 约束唯一标识数据库表中的每条记录. 环形直线电机 说明:主键必须包含唯一的值.主键列不能包含 NULL 值.每个表都应该有一 ...

  8. #1127-JSP表单处理

    JSP 表单处理 我们在浏览网页的时候,经常需要向服务器提交信息,并让后台程序处理.浏览器中使用 GET 和 POST 方法向服务器提交数据. GET 方法GET方法将请求的编码信息添加在网址后面,网 ...

  9. APIO2019解题报告

    「APIO 2019」奇怪装置 题目描述 有无限个二元组,每个二元组为\(((t+\left\lfloor\frac{t}{B} \right\rfloor)\%A,t \% B)\),给出一些区间, ...

  10. CF643E Bear and Destroying Subtrees

    题解 我们可以先写出\(dp\)式来. 设\(dp[u][i]\)表示以\(u\)为根的子树深度不超过\(i-1\)的概率 \(dp[u][i]=\prod (dp[v][i-1]+1)*\frac{ ...