浅学HTML（day1）

喔吼723

已于 2023-08-04 19:46:41 修改

阅读量110

点赞数

分类专栏： HTML 文章标签： html 前端

于 2023-05-17 20:02:50 首次发布

本文链接：https://blog.csdn.net/qq_53316751/article/details/130732700

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、环境安装等玩意儿

visual studio code

Chinese.....：软件汉化

Chinese lorem：简体乱数假文 jw+N（随机生成N个字符）

open in browser:浏览器打开文件，鼠标右击

左下齿轮->设置->auto save改afterdalay

开发者工具：F12(FN)

二、懒人的日常

快捷生成网页基本结构： shift+!+enter
快速生成注释（取消）： Ctrl+/
快捷格式（规范）化文档： shift+Alt+F
快捷选中每行相同位置内容： shift+Alt+鼠标左键
快捷选中不同位置内容： Alt+鼠标左键
快捷返回（上个操作）： Ctrl+z
快捷复制上下行： shift+Alt+上下键
快速生成文字：jw+N（有Chinese lorem插件，生成N个中文）

lorem+N(生成N个英文）

<!--申明文档-->
<!DOCTYPE html>
<!--根标签-->
<html lang="en">
<!--头部标签：存储元数据，里面内容基本是给浏览器解析-->
    <head>
        <!--设置字符集 utf-8（万国码）===》解决乱码问题-->
        <meta charset="utf-8">
        <!--标题标签：设置网页标题，在网页标题栏显示-->
        <title>喔吼</title>
        <!--设置网页的图标
        rel:设置link引入的数据类型，href：选择图片的位置（变量）-->
        <link rel="icon" href="1.jpg">
        <!--http-equiv="refresh":设置操作
            content：设置内容（23->变量单位为s，故不必再添加单位）-->
        <meta http-equiv="refresh" content="23,htpps://www.baidu.com">
        <!--name:设置meta数据类型,content:设置数据内容，keyword:设置网页关键字，给搜索引擎收录-->
        <meta name="keyword" content="基本结构，html">
        <!--description:设置网页介绍-->
        <meta name="description" content="html的基本结构，HTML是给页面添加内容的">        
    </head>
    <!--主体标签：页面内容，主要给用户看的-->
    <body>
        <!--jw4==随机生成4个中文字符-->
       太榜服。
       <!--lorem4==随机生成4个英文字符-->
       Lorem ipsum dolor sit.
    </body>
</html>

（嗯，这图是啥呢，没想好，反正就是每行解释下）

三、常用标签（介绍）

<!-- 设置内容水平居中 -->
<center>
<!-- 标题 h1~h6；数字越大，优先级越低，h1最多只能出现一次，常用标题h1~h3
       特点：
          默认样式：数字越大，字体越小，加粗
          每个标签独占一行-->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        ·······
        <h6>六级标题</h6>
<!-- 段落 p 
        特点：
          默认样式：垂直方向有距离
          每个段落独占一行-->
<!-- span 包裹文字，不独占一行 -->
<!-- br:强制转行，br后面的元素另起一行 -->【没代码，太乱】
        <em>em的语义为强调内容</em>
        <strong>strong的语义是强调语气【和i的效果差不多目前来看】</strong>
<!-- 
        i/b都不独占一行
        设置斜体文字：i
        设置加粗字体：b
        -->
        <i>i是设置斜体文字</i>
        <b>b是设置加粗字体</b>
<!-- 删除：del，常见于网上销售打折那个——原价998现在只要88带回家
        默认样式：有删除线，不独占一行-->
        <del>del的语义是指删除</del>
<!-- pre：模版标签，在编译器怎么写的，页面就会什么显示 -->
        <pre>额额额
    Lorem ipsum dolor sit.
        </pre>
    </center>

（比较咳咳那啥，将就着看吧，想看的话。下面是效果图）