web前端系统学习——HTML（一）

web前端系统学习——HTML（一）

此博客为记录本人学习前端的过程，希望自己能够成为优秀的web前端开发工程师，共勉。
网页的组成主要分为三个部分：HTML（内容填充），CSS（内容修饰），JavaScript（动态交互）

HTML基本格式

</html>
<!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>
    
</body>
</html>

在VScode中可以使用 ! + TAB键 来直接生成上述基本格式

标题和段落标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

标题总共有六级，从h1到h6

表示段落则使用<p></p>，每次新增段落都要加一组<p></p>

图片与超链接

<img src="">表示图片，src后面写图片的路径，可以是相对路径，绝对路径或者网站路径链接。
以下三点为使用相对路径的注意事项：
1.页面和图片在同一个文件夹，不需要定义路径；
2.页面引用子文件里的图片，路径查找使用img1/img2/img3；
3.页面应用外层文件夹里的图片，路径查找使用../../../

<a href=""></a>表示超链接，href后面可以写你要跳转的网页的链接进行页面跳转。
页面跳转有两种方式可以选择，一种是在该页面进行页面跳转，另一种是在新页面跳转出来，使用target参数控制这一点：
1.<a href="" target="_self"></a>是在本页面进行跳转；
2.<a href="" target="_blank"></a>是在新的空白页跳转

<a href=""></a>的第二种用法是设置锚点，进行当前页面内位置的跳转
如下，你需要设置锚点box1，box2，然后在href后面写#box1，#box2进行对应段落位置的跳转

    <a href="#box1">点击跳转至box1锚点的位置</a>
    <a href="#box2">点击跳转至box2锚点的位置</a>
    <p id="box1"></p>
    <p id="box2"></p>

文本修饰

进行文本加粗使用<b></b>或<strong></strong>，后者的特殊之处在于强调，有些语音遇到strong标签会重读，遇到b标签（bold）没有反应
进行文本倾斜使用<i></i>或<em></em>，后者的特殊之处在于强调，例如百度搜索遇到em标签会知道这是你的关键字，遇到i标签(italic)没有反应
进行文本上加删除线使用<s></s>或<del></del>，s标签（strike）
进行文本上加下划线使用<u></u>，u标签（underline）
给文本标注为上角标<sup></sup>，给文本标注为下角标<sub></sub>
实际操作如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        <b><i>圆的面积公式是：</i></b>
        s = Π * r<sup>2</sup>
    </p>
    <p>
        <b>水和二氧化碳发生化学反应的方程式：</b>
        CO<sub>2</sub> + H<sub>2</sub> = H<sub>2</sub>CO<sub>3</sub>
    </p>
    <p>
        中国计算机培训哪家强：
        <a href=""><u>千锋教育H5数我强</u></a>
    </p>
    <p>
        前端计算培训机构有：
        <b><u>千锋教育</u></b>和<i><s>其它</s></i>
    </p>
</body>

列表

列表分三类：有序列表，无序列表，自定义列表。我用下列代码展示：

    <!-- 有序列表 -->
    <h1>肖申克的救赎</h1>
    <ol>
        <li><a href="">导演</a></li>
        <li><a href="">编剧</a></li>
        <li><a href="">主演</a></li>
        <li><a href="">类型</a></li>
    </ol>
    <!-- 无序列表 -->
    <h1>获奖情况</h1>
    <ul type="square">
        <li>第67届奥斯卡金像奖 最佳影片(提名) 妮基·马文</li>
        <li>第52届金球奖 电影类 剧情片最佳男主角(提名) 摩根·弗里曼</li>
        <li>第19届日本电影学院奖 最佳外语片</li>
    </ul>
    <!-- 自定义列表 -->
    <h1>图文混排</h1>
    <dl>
        <dt>
            <img src="https://img1.doubanio.com/view/celebrity/m/public/p230.webp">
        </dt>
        <dd>性别:  男</dd>
        <dd>出生日期： 1959年01月28日</dd>
        <dd>星座： 水瓶座</dd>
        <dd>国籍： 法国</dd>
    </dl>


posted @ 2024-02-14 12:06  『枫桥～夜雨声』  阅读(54)  评论(0)    收藏  举报