筱筱学前端Day2-CFANZ编程社区

干货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.无序列表

无序列表举例如下（只需看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.有序列表

有序列表举例如下（只需看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.自定义列表

自定义列表举例如下（只看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.同级目录：

写法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——图片标签的属性

示例如下：

<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——超链接标签

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

举例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>

网页结果如下：

本博客是筱筱根据b站视频总结而成。

学习前端的第二天，加油٩(๑òωó๑)۶