Vs code-HTML基础学习与运用Week01

最新推荐文章于 2024-09-07 18:35:24 发布

从心_Li

最新推荐文章于 2024-09-07 18:35:24 发布

阅读量318

点赞数 1

文章标签：学习 vscode

本文链接：https://blog.csdn.net/2301_80216014/article/details/134887485

版权

前言：

超文本标记语言，即HTML，是标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

网页的构成？

由日常的生活经验我们可以知道，一个网页大致是由文字、图片、音频、视频和超链接构成的，而前端开发者编写的代码是通过浏览器的渲染引擎转换成网页呈现在我们面前。

注意：不同浏览器的渲染引擎不同，因此呈现的内容可能会有出入，这也就引出了Web标准使展示的效果统一。

基础介绍

如何利用Vs code创建一个网页？

首先，如图，我们可以点击工作区右侧带有“+”符号的文档来创建一个编写网页的代码文件。要注意的是，在命名文件时我们需要在结尾加一个“.html”的后缀，不然就不是一个网页的代码。

然后我们就可以在右侧区域内编写代码。网页的固定结构：

同时，我们可以利用“! + tab”快捷键快速生成该基本结构。其中“!”必须为英文字符，否则该快捷键无效。

在编写程序的过程中，快捷键可以给我们带来很多便利。而对代码进行解读的注释也必不可少，我们使用“Ctrl+/”来快捷生成注释。

HTML标签的结构与属性

标签由<,>,/,英文单词或字母组成。<>括起来的部分为标签名；
常见的标签由两部分组成，我们称之为：双标签。------前半部分为“开始标签”，后半部分为“结束标签”；
少部分标签只有一部分，我们称之为：单标签。自称一体，无法包裹内容。例：<br>；
标签的属性写在“开始标签”内部；
标签上可以同时存在多个属性；
属性之间以空格隔开，同理，标签名与属性之间也必须以空格隔开；
属性是无序的。

案例与实操——购物网站

接下来我们利用基础的HTML标签来搭建一个简易的购物网站。

首先需要思考的是，购物网站的页面要素有哪些，即需求分析。

图标，购物网页名称，索引，搜索，导航，图片，筛选，销量排行......暂时先这几个。

然后在Vs code中编写代码。

得到下图所示的网页：

（利用HTML搭建的网页仍存在很多不足，需要CSS对整个网页的内容进行更多修饰和提升，这我会在后续博客中进行修改。）

利用实例对HTML的标签介绍

（1）网站标题：

1.标题标签： <h1>爱购物</h1>------从h1~h6重要层次依次降低，即字体依次变小，但字体都有加粗；

2.图片标签：<img src="购物.png" alt="图片加载失败" title="欢迎来到爱购物！" >

图片标签属性值
属性名	属性值	说明
src	图片路径	图片在文件夹中的位置
alt	替换文本	图片因其他原因加载失败显示的文本
title	提示文本	当鼠标悬停于图片时加载的文本
width	宽度	设置具体数值
heigth	高度	width和heigth若只设置一个，另一个会根据原来的比例自动缩放

3.路径：

绝对路径：目录下的绝对位置，通常是从盘符开始的路径。

①D:/day01/img/1.jpg（盘符）

②http://img/logo.gif（网页）

相对路径：从当前文件开始出发寻找目标文件

①./：进入下一级目录（可省略）

4.段落标签：<p>文字</p>------用于分段显示

5.换行标签：<br>------强制换行

6.水平线标签：<hr>------生成一条分割不同内容的水平线

7.文字格式化标签：（常用右侧的语义化标签）

#标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易购物网站</title>
</head>
<body>
    <img src="购物.png" alt="图片加载失败" title="欢迎来到爱购物！" width="200">
    <em>假一赔十，保证真货，祝您购物愉快哦，亲~</em><br>
    <hr>
    <h1>爱购物</h1><br><br>

（2）网站内容：

1.链接标签： <a href="https://www.vip.com/?wq=1" target="_blank">唯品会</a>

属性：target_self：覆盖原网页（默认）

target_blank：新窗口跳转

2.有序列表：由<ol><li>文本内容</li></ol>组成。列表每一项前默认显示序号标识。

ol表示有序列表的整体，包裹且只包裹li标签

3.input标签：在网页中显示手机用户信息的表单效果。

我们可以通过type属性来得到自己想要的页面效果。

其中三个按钮功能的实现需要配合Form标签使用。即：<form><><></form> form标签包裹按钮标签。

type属性值	说明
text	文本框，用于输入单行文本（placeholder属性提示用户输入的内容）
password	密码框，用于输入密码（在网页中无法显示内容）
radio	单选框，用于多选一（checked属性，默认选中）
checkbox	多选框，用于多选多（checked属性，默认选中）
file	文件选择，用于在网页中上传文件（multiple属性可以同时上传多个文件）
submit	提交按钮
reset	重置按钮，恢复成默认状态
button	普通按钮，默认无功能，需要配合js来添加功能

4.label标签：用于绑定内容与表单标签的关系

有以下两种方式：

<一>：用label将内容包裹起来，在表单上添加“id属性”并在label的“for属性”中设置对应的id属性值。

<二>：直接用label将内容和表单标签一起包裹起来，并把label中的“for属性”删除即可。

5.语义化标签：

<一>无语义标签：（双标签）

div标签：独占一行

span标签：一行可以显示多个

<二>有语义标签：略

完整编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易购物网站</title>
</head>
<body>
    <img src="购物.png" alt="图片加载失败" title="欢迎来到爱购物！" width="200">
    <em>假一赔十，保证真货，祝您购物愉快哦，亲~</em><br>
    <hr>
    <h1>爱购物</h1><br><br>
    请输入您要查找的商品：<input type="text"><br><br>
    筛选
    <label for="网红款"><input type="checkbox" id="网红款">网红款</label>
    <label><input type="checkbox">辣妹装</label>
    <input type="checkbox">多巴胺
    <input type="checkbox">汉服
    <input type="checkbox">民国风
    <input type="checkbox">日常穿搭
    <br>
    <nav>
    <hr>
        <span>推荐</span>
        <span>收纳盒</span>
        <span>洗脸巾</span>
        <span>冬季羽绒服女士</span>
        <span>蓝牙耳机</span>
        <span>华为平板2023新款</span>
        <span>联想拯救者</span>
        <span>记事本</span>
        <span>999感冒灵颗粒</span>
        <span>连花清瘟</span>
        <span>口罩</span>
        <span>抖音网红穿搭</span>
        <span>装逼神器</span>
        <hr>
    </nav>
    <aside>
        <h3>销量排行</h3>
        <ol>
            <li>学长帅照</li>
            <li>四六级听力耳机</li>
            <li>苹果15Pro</li>
            <li>学生收纳盒</li>
            <li>卫龙辣条</li>
        </ol>
    </aside>
    <p>由此进入各大购物平台官网：</p>
    <a href="https://ai.taobao.com/?pid=mm_306630040_2802000425_114963850038&union_lens=lensId%3APUB%401700045529%4021502ac5_0ff2_18bd29c20ee_0500%4001" target="_blank">淘宝</a>
    <a href="https://ai.taobao.com/?pid=mm_306630040_2802000425_114963850038&union_lens=lensId%3APUB%401700045529%4021502ac5_0ff2_18bd29c20ee_0500%4001" target="_blank">爱淘宝</a>
    <a href="https://www.jd.com/?cu=true&utm_source=www.hiduba.com&utm_medium=tuiguang&utm_campaign=t_1000003625_jinshanmz&utm_term=bfe38934a49242a5b40ab6616ed90d01" target="_blank">京东</a>
    <a href="https://www.vip.com/?wq=1" target="_blank">唯品会</a>......
    <dl>
        <dt>精选内容</dt>
        <dd>电影  </dd>
        <dd>音乐</dd>
    </dl>
    
</body>
</html>