用半天时间从零开始复习前端之html

目录

前言

科班生的标配:半天听完一门标记型语言

准备工作

webstorm2022

webstrom

第一个html页面

body

h系列标签

行标签和块标签

列表标签

表格标签(另起一篇)

万能的input

1.快速生成多个标签

2.同时选中多个


前言

科班生的标配:半天听完一门标记型语言

首先就是玩编程必备的编译器,这里推荐vscode(微软开发,免费,性能好,插件多);不过这里老师带我们用的是webStorm2022版(收费但网上有破解,针对前端大型开发的一款编译器,专业性强“新手的话建议vscode,有后端语言例如java,python,go等用这个会更舒服”)

准备工作

webstorm2022

云盘:获取激活与安装包(越来越严格了,审核了3次,才通过,貌似不能放百度网盘了,去百度网站获取吧)

webstrom

首先点击左上角的文件(file),并进入设置(setting)

用半天时间从零开始复习前端之html_第1张图片

在搜索栏输入chinse(汉化插件),下载并启动(禁用那里)

用半天时间从零开始复习前端之html_第2张图片

第一个html页面

说是页面,也是文件(毕竟软件就是无数存储着代码的文件组成的)

用半天时间从零开始复习前端之html_第3张图片

用半天时间从零开始复习前端之html_第4张图片

创建好后的样子

用半天时间从零开始复习前端之html_第5张图片

下面逐一解释下每个部分

用半天时间从零开始复习前端之html_第6张图片

在vscode中快速生成第一个html文件

在写代码的区域输入 !+ 回车 快速生成“效果同webstrom创建好后的样子”

body

body是承载我们代码的主要部分,现在在body里输入内容,即可得到效果了!

用半天时间从零开始复习前端之html_第7张图片




    
    蓝妈妈


洛琪希
​

什么?你说你想知道这个酷酷的小表情怎么做到的,虽然我忘记之前那一篇博客写的了(window+.)召唤崽子们

用半天时间从零开始复习前端之html_第8张图片

h系列标签

h1到h6,没错有6个这样的标签(你问为什么不是7个,大概是6个就已经够用了),那如果强行输入呢,我就是想知道有没有第7个葫芦娃(小伙子,你很勇嘛)

用半天时间从零开始复习前端之html_第9张图片

结果如图所示,并没有序列7以上的h标签,不过求知的态度是很好的,遇到多了,你自然会有判断对错的直觉,在这之前保持你的天真或者听取前辈们的意见同样重要(过来,让我看看!)

这六个标签所显示的内容是依次变小的

如果你尝试去看网站的源码,打开f12开发者工具;早期的很多网站在加入大型框架技术(vue,react,aj等)前,包括在用到css技术亦或者是SEO优化时,h标签占了举足轻重的地位

用半天时间从零开始复习前端之html_第10张图片




    
    蓝妈妈


洛琪希

1111

222

333

444

555
666
777 888 999 101010 11111111111a

行标签和块标签

p标签和span标签

下面是10个p和10个span的效果

用半天时间从零开始复习前端之html_第11张图片




    
    蓝妈妈

我是p标签

我是p标签

我是p标签

我是p标签

我是p标签

我是p标签

我是p标签

我是p标签

我是p标签

我是p标签

我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span

其实知道这两个就够用了,不过嘛,将来准备考试和面试的时候仍然有必不可少知识点,放在下面自取

常用的行内标签(inline)和块级标签(block)如下:
行内标签:
-  - 泛用行内容器
-  - 链接
- ,  - 加粗
- ,  - 斜体
-  - 上标
-  - 下标
-  - 图片
块级标签:
- 
- 泛用块级容器 -

- 段落 -

- 标题 -
    ,
      ,
    • - 列表 - , ,
      - 表格 -
      - 表单 -
      ,