山西农业大学20240919

Jia_dongyao

已于 2024-09-20 16:09:45 修改

阅读量774

点赞数 9

分类专栏：山西农业大学文章标签： java 开发语言

于 2024-09-19 14:32:02 首次发布

本文链接：https://blog.csdn.net/2401_86991268/article/details/142350780

版权

山西农业大学专栏收录该内容

22 篇文章 2 订阅

订阅专栏

03-HTML

一. 图片标签 - img

1. img标签

img标签, 指插入图片地址, 描述图片内容
图片: 单标签

属性:
src=“url” 图片资源路径,图片格式:jpg,png,gif,webp…
alt=“图片加载失败时显示的文本” – 对图片的描述
图片的大小:
图片可以设置宽高,设置宽高时如果不符合图片的原始比例,图片会
变形, 称为图片失真
解决: 只设置一个宽高,另一个会自动计算

2. url属性

url: 统一资源定位器 - 路径

绝对路径 - 完整路径

网络资源, 资源保存在第三方服务器上(节省本地内存空间)-- 网络资源不稳定
本地资源, 绝对不允许使用绝对路径, 使用相对路劲

相对路径 ---- 参照物: 当前的html页面

同目录 : 图片资与参照页面在同一目录下, 直接写名字
父目录 : 图片资源与参照页面所在的目录是同一目录下, 先返回 ../
子目录 : 图片所在的目录与参照页面在同一目录下, 先进入

<!--    同目录: 直接写名字-->
    <img src="wk.jpg" alt="" width="400">
    <img src="./wk.jpg" alt="" width="400">
<!--    子目录: 先进入-->
    <img src="img/wk.jpg" alt="" width="400">
<!--    父目录: 先返回-->
    <img src="../wk.jpg" alt="" width="400">

3. alt属性

<img src="wkkk.jpg" alt="啊哦!! 图片加载失败啦...">

4. width和height属性

设置图片的宽度和高度, 设置宽高时如果不符合图片的原始比例,图片会
变形, 称为图片失真
解决: 只设置一个宽或高,另一个会自动计算

<img src="../wk.jpg" alt="" width="400">

5. img特点

引入图片时,从左向右排列,一行放不下时会换行 — 行内元素
图片又可以设置宽高 — 块级元素
— 综合以上内容, 得出 img标签是一个 行内块元素

二. 超链接 - a

a标签, 是内联元素, 双标签, 双标签内需要写跳转的文字
a标签是专门用于做页面跳转的标签, 有默认的跳转功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--属性:
        href="路径"
            相对路径: 本地资源
            绝对路径: 网络资源 http://www.baidu.com
        target="新窗口打开方式"
            _self: 自身标签页打开, 默认值
            _blank: 在新的标签页中打开
-->
<!--绝对路径-->
    <a href="http://www.baidu.com" target="_blank">百度</a>

<!--相对路劲-->
    <a href="./08图片.html">08图片</a>

<!--练习:
    新建3个页面, index.html; list.html;detail.html
    新建文件夹 news; index在根目录下, list和detail在new目录下
    每个页面插入一张图片,图片保存在img中,在页面之间可以来回跳转
 -->

</body>
</html>

三. 列表

列表应用非常广泛, 分为三种: 有序列表, 无序列表, 自定义列表; 有序和无序用的最多

1. 无序列表

<ul>   --- 无序列表
	<li>列表项</li>  --- 列表项
	<li>列表项</li>
	<li> ... </li>
</ul>
<!--
	1. 无序列表默认有黑色小圆点做标识符
	2. 列表中的内容是写在li标签中的
	3. li标签是独占一行, 块级元素
	4. li有默认的内外边距  --- CSS中去除
-->

1.1 type属性

type=“circle” 空心小圆点
type=“square” 实心小方块
type=“disc” 实心小圆点(默认值)
type=“none” 去除列表标识符

2. 有序列表

<ol>   --- 有序列表
	<li>列表项</li>  --- 列表项
	<li>列表项</li>
	<li> ... </li>
</ol>
<!--列表标识符默认是数字进行排序-->

2.1 属性

type=“A” 设置列表项标识符的类型默认:1, a/A, i/I
start = “999” 设置计数的开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <h2>无序列表-西游记</h2>

    <ul type="none">
        <li>唐僧</li>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙僧</li>
        <li>三打白骨精</li>
    </ul>

    <h2>有序列表-热点新闻</h2>
    <ol type="1" start="999">
        <li>台风“普拉桑”登陆点又变了</li>
        <li>三只羊全面复播</li>
        <li>金融反诈防骗网络课堂</li>
        <li>象棋协会:王天一、王跃飞终身禁赛</li>
    </ol>
</body>
</html>

3. 自定义列表

<h2>自定义列表</h2>
    <!--自定义列表-->
<!--    <dl>-->
<!--        <dt>标题:标题中只能存放文字</dt>-->
<!--        <dd>列表项</dd>-->
<!--        <dd>列表项</dd>-->
<!--        <dd>列表项</dd>-->
<!--    </dl>-->
    <dl>
        <dt>四大名著</dt>
        <dd>西游记</dd>
        <dd>红楼梦</dd>
        <dd>水浒传</dd>
        <dd>三国演义</dd>
    </dl>

4. 列表的嵌套

a标签: 行内元素
li标签: 块级元素
行内元素和块级元素嵌套规则: 行内元素不能嵌套块级元素

列表嵌套规则:
所有被嵌套的内容, 必须放在li标签中
li必须是ul或ol的直接子元素
ul>li>ul>li
ul>li>ol>li
有序列表和无序列表可以相互嵌套,没有规定谁先谁后
ul>div>li ----- 错误

<h2>列表嵌套</h2>
    <ul>
        <li>
            <h3>四大名著</h3>
            <ol>
                <li>西游记</li>
                <li>红楼梦</li>
                <li>水浒传</li>
                <li>三国演义</li>
            </ol>
        </li>
        <li>
            <h3>电视剧</h3>
            <ul>
                <li>藏海花</li>
                <li>凡人歌</li>
                <li>唐朝诡事录</li>
                <li>雪迷宫</li>
            </ul>
        </li>
    </ul>