筱筱学前端Day2

最新推荐文章于 2024-07-24 10:40:52 发布

慕筱筱

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量479

点赞数 3

分类专栏：前端入门学习文章标签：前端 html 开发语言

本文链接：https://blog.csdn.net/weixin_62772655/article/details/122810135

版权

前端入门学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

干货1——特殊符号介绍

特殊符号	解释
尖角号	<左尖角号 >右尖角号
空格	该空格占据宽度受字体影响明显而强烈 &emsp;（建议用这个）占据的宽度正好是1个中文宽度，且基本上不受字体影响
版权	©©
商标	™™ ®®

补充：&#128512（可换成3，4等数）可以出现奇奇怪怪可可爱爱的小表情喔

干货2——div标签和span标签

div标签：没有具体含义，用来划分页面区域，独占一行。（后续页面分块的浮动需用CSS制作）

span标签：没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

应用span标签实例如下（只需看body部分即可）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>体育<span style="color:gray;">sports</span></h3>
</body>
</html>

网页结果如下：

干货3——列表

1.无序列表

<ul>

<li>无序列表</li>

<li>无序列表</li>

</ul>

注：1.ul里面只能放li，li里可以放其他标签

2.默认是黑色实心圆

3.<ul type="...">，...可以是disc（黑色实心圆），circle（空心圆），square（黑色正方形），none（文案前什么都没有，用的最多）

无序列表举例如下（只需看body部分即可）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>富强民主文明和谐</li>
        <li>自由平等公正法制</li>
        <li>爱国敬业诚信友善</li>
    </ul>
</body>
</html>

网页结果如下：

2.有序列表

<ol>

<li>有序列表</li>

<li>有序列表</li>

</ol>

注：1.ol里面只能放li，li里可以放其他标签

2.数字，字母之类的都是自动生成的，无需敲入

3.<ol type="..." start="...">

type:1, a, A, i, I（只有这五种！！！）

start:取值只能是一个数字

有序列表举例如下（只需看body部分即可）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="A" start="3">
        <li>把冰箱打开</li>
        <li>放入食物</li>
        <li>把冰箱关闭</li>
    </ol>
</body>
</html>

网页结果如下：

3.自定义列表

<dl>

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

<dd>相关文字</dd>

</dl>

自定义列表举例如下（只看body部分即可）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
</body>
</html>

注：建议有多个图片和文字时从dl开始复制而非~~在dl里复制多个dt和dd~~

网页结果如下：

注：我是文字前边有一段边距，学了CSS之后可去掉边距

干货4——一些快捷键介绍

1.加注释：选中文案后ctrl + /

2.将上一行内容复制到下一行：Alt + shift + ↓

3.快速输入eg:dl>dt{...}+dd{...}*3

4.在网页中放大/缩小界面：ctrl + "+"/"-"

干货5——图片标签的路径

1.同级目录：

<img src="...">（src是source源头的缩写）

...写法1：32.jpg（相对路径）

...写法2：./32.jpg（相对路径）

...写法3：D:\前端\Code\007（绝对路径，少用）

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

绝对路径：是指文件在硬盘上真正存在的路径。

写法3的来源如下：

同级目录中三种写法实例如下（只看body部分即可）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="32.jpg">
    <img src="./32.jpg">
    <img src="D:\前端\Code\007">
</body>
</html>

网页结果如下：

注：第三张图片在服务器环境下是找不到的，不建议用第三种写法

2.不同级目录

当页面与图片所在的文件夹是兄弟关系时（指007balabala与imgxx）：

上图中“007图片标签的路径举例.html”与“32.jpg”属于同级目录，与imgxx文件夹中的“31.jpg”属于不同级目录。

下图是实例1（只显示body部分）：

<body>
    <img src="32.jpg">
    <img src="./32.jpg">
    <img src="D:\前端\Code\007">

    <img src="imgxx/31.jpg">
</body>

页面结果如下（注意第三张图片是裂开的太小了不容易发现）：

当页面所在文件夹与图片所在文件夹是兄弟关系（指html与imgxx）：

实例如下：

<body>
    <img src="../32.jpg">
    
    <img src="../imgxx/31.jpg">
</body>

网页结果如下：

../../以此类推，上一级的上一级，多级返回。

干货6——图片标签的属性

<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败）的提示信息" width="200px" height="200px"/>

注：px可以不写

示例如下：

<body>
    <img src="22.jpg" alt="出现错误，请尝试刷新页面" title="这张图展现了对赚大钱的期待">
    <!-- 上边是为了展示alt的作用故意敲错的 -->
    <img src="32.jpg" title="这张图展现了对赚大钱的期待">

    <img src="32.jpg" width="200" height="200">

    <img src="32.jpg" width="200px">
    <!-- px可写可不写 -->
    <img src="32.jpg" height="200">
</body>

网页结果如下：

注：若只改变图片的宽/高，图片会自动按原图比例进行缩放防止失真等现象。

若将鼠标悬停到前两张图片以及第一张未能显示的图片的提示文字上，都会出现title中所给的文案

干货7——超链接标签

注：超链接能够实现不同页面的跳转

<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>

target属性：规定在何处打开文档

A.target="_self"默认值

B.target="_blank"新窗口打开

举例1如下：

<body>
    <a href="https://www.baidu.com/">百度</a>
</body>

网页结果如下：

注：1.这个有下划线的百度点进去是在当前页面跳转为百度主页（若要在新窗口打开用target="_blank"）

2.点击过这个有下划线的百度后再返回它会变成紫色（后续变成蓝色要用CSS制作）

综合举例2如下：

<body>
    <a href="002HTML百度百科练习.html" target="_blank">HTML5百度百科</a>
    <a href="https://www.baidu.com/" title="百度查询" target="_blank">
        <img src="015.jfif">
    </a>
</body>

页面结果如下：

注：打开的页面都是新窗口打开

以上干货综合起来的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1><a href="https://www.baidu.com/" title="百度搜索" alt="错误！请尝试重新刷新页面" target="_blank">百度</a><span style="color: aqua;">（英文名：Baidu, Inc. 百度集團股份有限公司）</span></h1>
    <p>
        是一家主要经营搜索引擎服务的互联网公司，于2000年1月1日由<strong>李彦宏、徐勇</strong>两人在<strong>北京中关村</strong>创立。<br/>
        “百度”源自中国南宋词人<strong>辛弃疾</strong>的词：<strong>众里寻他千百度</strong>，描述了词人对理想的执着追求。公司业务范围<br/>
        覆盖了搜索、人工智能、云计算、大数据等方面，是中国互联网公司三巨头之一。<br/>
    </p>

    <p>2005年8月5日，在美国纳斯达克成功上市，并成为首家进入纳斯达克成分股的中国公司。</p>

    <p>2022年1月19日，《2021年胡润中国500强》发布，百度&copy;位列第26名。</p>
    <img src="015.jfif" title="这是百度图标" alt="加载错误！请重试">
    <h2>概况</h2>
    <ol type="a" start="27">
        <li>企业简介</li>
        <li>发展历史</li>
        <li>企业业务</li>
        <li>管理团队</li>
        <li>企业文化</li>
        <li>企业业绩</li>
    </ol>
</body>
</html>

网页结果如下：