第一部分特殊符号与标签

猛女永不落泪

已于 2023-11-26 12:44:56 修改

阅读量142

点赞数 4

分类专栏： Web前端基础笔记文章标签：前端 html

于 2023-11-24 21:39:34 首次发布

本文链接：https://blog.csdn.net/weixin_71027798/article/details/134607317

版权

Web前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.div{“内容”}>>出现div标签包裹内容

0010 不一般的hr

color=====颜色
width=====宽度
align======对齐方式
noshade===取消阴影

例：

<!DOCTYPE html>

<html>

        <head>

                <meta charset="utf-8">

                <title>Document</title>

        </head>

        <body>

                <hr color="green">

                <hr color="yellow">

                <hr color="red">



                <hr color="green" width="300">

                <hr color="green" width="600">

                <hr color="red" width="600" align="left">

                <hr color="red" width="600" align="right">



                <hr noshade/>

        </body>

</html>

0011 特殊符号

0012 div和span标签

快捷操作：

1.div*3>>出现三对div标签

2.div{“内容”}>>出现div标签包裹内容

3.div翻译成中文无意义

div标签，没有具体意义，用来划分页面的区域，独占一行。
span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

0013 列表-有序列表

无序列表：

<ul>

        <li>无序列表</li>

        <li>无序列表</li>

</ul>

有序列表：

<ol type=A" start=4">

        <li>有序列表</li>

        <li>有序列表</li>

</ol>

type类型 start 开始

自定义列表：

<dl>

        <dt>可以是文字也可以图片</dt>

        <dd>相关文字</dd>

</dl>

Ctrl+/ 自动加注释

li里面可以随意放标签，但是ol里面只能放li。
数字是自动生成的。
type：1,a,A,i,I； start：取值只能是一个数字。

0014 列表-无序列表

快捷操作：

ul>li+enter：创建无序列表基本标签

ul>li*3+enter：创建无序列表基本标签，内标签有三个

注：

ul里面只能放li，li里面可以放其他标签
默认的是黑色的实心圆
type：disc,circle,square,none(用的多)

0015 列表-自定义列表

快捷操作：

ctrl+enter：隔过标签回车

dl>dt+dd+enter：创建自定义列表基本标签

0016 图片标签的路径

<!DOCTYPE htm1>

<html lang="en">

<head>

        <meta charset-"UTF-8">

        <title>Document</title>

</head>

<body>

        <!-- 前两者是http协议，后者是file协议 -->

        <img src="code.gif">

        <img src="./code.gif">

        <img src="文件绝对路径">

</body>

</html>

路径分类:绝对路径、相对路径

1、绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的”E:\book\网页布局代码\第2章”目录下，那么“bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。

注意:绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布\代码\第2章\bg.jpg"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\"或“/"字符作为目录的分隔字符。

2、相对路径

相对路径，就是相对于自己的目标文件位置。

1）当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；

2）“./”同级，”../”返回上一级。

0017 图片标签的属性

<!DOCTYPE htm1>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="22.jpg” alt="前后端的区别，请尝试刷新页面”>
    <img src="2.jpg” title="这张图描述了前后端区别”>
</body>
</html>

alt是图片裂开时显示文字。
title 是光标移到图片上显示的文字。
Width和height只设置其一不会使图片失真，等比例缩放。

0018 费曼学习技巧的案例

0019 超链接标签

作用：能够实现不同页面的跳转
<a href=“路径” title=“鼠标悬停上去之后的提示信息” target=“规定在何处打开文档“>内容</a>
Target属性：规定在何处打开文档。

A.target=“_self” 默认值

B.target=“_blank” 新窗口打开

a标签包住img标签可点击图片跳转到指定网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=l.0">
    <title>Document</title>
</head>
<body>
    <a href="http://caniuse.com">百度</a>
    <a href="http://caniuse.com" target="_blank">百度</a>
    <a href="02-test.html">成绩查询</a>
    <a href="http://www.baidu.com" title="百度查询">
        <img src="img/baidu.png” alt="">
    </a>
</body>
</html>