longlongrain

导航

web前端骨架与工具

web前端的使用工具为:Visual Studio Code

 

骨架:在工具中输入英文状态下的 !即可出现骨架,无需自己手写

 

首先先在Visual Studio Code中创造一个HTML的文件,然后输入英文状态下的 “ !”

 

代码如下:

 


 

<!-- 如何写注释:一般程序默认 ctrl+/ (/此符号不是数字盘上的是在英文盘上的)
也可以 shift+ctrl+p 调出命令指令 再搜索 注释 然后自己更改快捷键 其他快捷键也可以这样修改 -->

<!DOCTYPE html>
<!-- <!DOCTYPE html> 表示的是html5标准网页声明 -->

<html lang="en">    
<!-- lang 表示你所写的内容是什么语言 en是英语 zh-CN是中文 JS-JP-->

<head>
    <!-- head表示头 写标题 -->

    <meta charset="UTF-8">
    <!--  charset是<meta>标签的一个属性,用来指定字符类型;utf-8是指使用字符编码类型 -->
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--  这句话其实是指定浏览器按某种方式渲染 -->
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
    viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
    content属性值 :
    width:可视区域的宽度,值可为数字或关键词device-width
    height同理width
    intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
    maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
    user-scalable:是否可对页面进行缩放,no 禁止缩放
    -->
 
 
    <title>第一个网站</title>
    <!-- title 中写的是网页标题 -->

</head>
<body>
    <!-- body 表示身体 写主要内容 -->

    <!-- h1-h6 为一级到六级标题 都自带加粗 字体逐级变小 独占一行 -->
    <h1>第一个网站</h1>
    <!-- <h2>第一个网站</h2>
    <h3>第一个网站</h3>
    <h4>第一个网站</h4>
    <h5>第一个网站</h5>
    <h6>第一个网站</h6> -->

    <p>段落内容</p>
    <p>段落内容</p>
    <!-- <p></p> 表示的是段落 也就是语文的内容分段 两个<p></p>之间存在间隙 -->

    <hr>
    <!-- <hr> 表示的水平分割线 -->
   
    <b>加粗</b>
    <!-- <b></b> 表示的是加粗 -->
    <u>下划线</u>
    <!-- <u></u> 表示的是下划线 -->
    <i>倾斜</i>
    <!-- <i></i> 表示的是倾斜 -->
    <s>删除线</s>
    <!-- <s></s> 表示的是 删除线 -->

    <strong>加粗</strong>
    <!-- <strong></strong> 表示的是加粗 -->
    <ins>下划线</ins>
    <!-- <ins></ins> 表示的是下划线 -->
    <em>倾斜</em>
    <!-- <em></em> 表示的是倾斜 -->
    <del>删除线</del>
    <!-- <del></del> 表示的是 删除线 -->

    <!-- 两者在内容呈现效果上没有区别 主要区别是语义上 下者表示更加的重要 可以这么说就是写给看代码的人看的 -->
    <!-- 例如:本来原价999 现在卖666 然后999要有删除线 应该使用下者 表示更加的重要 让看代码的人一眼就看见 -->
 
</body>
</html>

<!-- 标识有两种 -->
<!-- 第一种 例如:<strong></strong> 意思是加粗 主要运用于需要圈出内容范围的-->
<!-- 第二种 例如:<br> 意思是换行 无需圈出内容范围 直接使用 -->
 

 
橙色是代码,绿色是注释
基本解释已经写在代码的注释上了

posted on 2022-07-31 15:18  雨丶久  阅读(59)  评论(0)    收藏  举报