您现在的位置是:首页 > 正文

【自学笔记】web前端 - HTML - DAY01(编辑器+基础标签)

2024-01-30 20:51:25阅读 0

这里是Jane的自学笔记之Web前端系列~ (希望周更ᕦ(・ㅂ・)ᕤ)

如果内容有问题,欢迎大家私信留言、批评指出,谢谢~

主要是记录和分享,嘻嘻(〃‘▽’〃)

编辑器

这里是一些我了解到的编辑器简介和使用感受,后面都跟上了官网链接,需者自取~

HBuilder

我使用的编辑器是HBuilder,感觉不错,适合我这样的新手+懒人( ̄▽ ̄)/
下面是HBuilder的web项目界面,直接建立好了文件夹和模板,方便快捷;
打代码时有联想功能(之后的文章里会具体提及),下拉栏很多选择,适合刚入门的新手尝试,可以一个个参数尝试、调试,毕竟需要在实践中学习嘛;
右侧也有预览界面(未截图);
编辑颜色时的颜色选择也很人性化;
具有快捷键语法设计、无鼠标操作等便捷应用。

在这里插入图片描述

官网下载


记事本Nodepad

可以在记事本上编辑,然后把后缀名改成.html就行。可以用作文本编辑。装逼必备(-ω-;)


Notepad++

Notepad++功能比上面提到的记事本强大,除了可以用来制作一般的纯文字说明文件,主打编写代码;有语法高亮度显示,也有语法折叠功能,支持宏以及模组。

一个程序文件可以右键用Notepad++打开,并且编辑。感觉更适合查看代码呢。

官网下载

Sublime Text

这是一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,支持插件扩展机制。

网上说这个编辑也不错,但是下载之后没尝试过T^T。

官网下载 (可能是我网问题叭,只有10M,我下载了三次,QAQ)

VS Code

一个免费、轻量、跨平台的编辑器,具有海量语言支持、并排编辑、连续不断的智能感应等优势特性,有很多快捷键和插件安装。

(记得我还是小白的时候,还用这个运行python)

官网下载

以上推荐的这三个编辑器建议安装一些插件哦,可以提高效率,插件可以去其他博客里捞一捞。

基础标签

标签简介

用来框定区域,指定这块区域的类别,或者说是格式,一对标签里夹着的是显示内容。

  1. 格式:由尖括号包围的关键词

  2. 通常是成对出现,如 <body> </body>

  3. 标签对中的第一个标签是开始标签,第二个标签是结束标签

  4. 有些标签独立出现,如 <br /> (空标签)

  5. 对大小写不敏感,但是为了美观,还是都小写叭~

基本格式

<html>
	<head>
		<meta charset="utf-8" />
		<title> Jane </title>
	</head>
	
	<body>
		<h1> Hello,visitor! </h1>
		<p> Welcome to Jane's home! </p>
		<img src="img/jane.jpg" />	
	</body>
</html>

标签讲解

  1. 头部元素:<head>

    1. 标题(Title):<title>

      显示在html的标题上。

    2. 元信息(meta-information): https://www.w3school.com.cn/tags/tag_meta.asp

      贴个链接叭,我解释不太清,尽量理解|*´Å`)ノ

  2. 标题(Heading): <h1> - <h6>

    六个等级的标题,h1级别最高,字体也越大越粗。

  3. 段落(Paragraph): <p>

    新起一行,开启一段新段落。

  4. 图像(image):<img src="xxx.jpg" />加载图片是需要时间的,慎用图片。

    1. 插入图片时,需要提前将图片放入对应项目的img文件夹中。
    2. src (sourse) 源属性,值为图像的 URL 地址,URL 指存储图像的位置。
    3. 插入图片时可以自动弹出。(代码助手快捷键:Alt+/

在这里插入图片描述

效果演示

在这里插入图片描述

存在的问题:

  1. 整体界面粗糙:需要进一步学习,掌握更多标签和样式。
  2. 图片太大,需要拖动才能看完整:改变图片样式。

下篇预告

准备学习元素,对这个网页进行优化~

网站文章

  • Android之Activity的4种加载模式

    一个Task可以理解成一个Activtiy栈,可以装载一个或者多个Activity,回退和打开的顺序逻辑和基本的数据结构栈是一致的。下面的这段话非常关键:那就是,一个Application如果有N个Activity,这些Activity分布在M个Task中,那么Application的回退栈会遵循这样的原则,首先从当前Acitivty在的Task回退,直到这个Task中再无记录;那么会寻找下一个T

    2024-01-30 20:51:16
  • 分享一个随手写的简单css效果

    分享一个随手写的简单css效果

    随手制作的简单css效果前言效果图代码HTMLCSS介绍推荐Uigradients中国传统配色网站Colordrop前言 刚刚随手写了一个网页,添加了一点css的效果,虽然没有很惊艳,但个人认为有点意...

    2024-01-30 20:51:07
  • ajax首页首页显示数据库,ajax显示mysql数据库

    ajax首页首页显示数据库,ajax显示mysql数据库

    ajax显示mysql数据库 内容精选换一换GaussDB(for MySQL)支持的数据库版本,如表1所示。GaussDB(for MySQL)支持内核小版本升级,内核小版本的升级涉及性能提升、新功...

    2024-01-30 20:51:00
  • Qt中的进程与线程

    一、进程内容: 如何在Qt应用程序中启动一个进程; 进程间通讯方法; 使用进程的原因: (1)不希望将一个不太相关的功能集成到程序中 (2)或者是因为该功能与当前设计的应用程序联系不大 (3)或者是因为该功能已经可以使用现成的程序很好实现,可以使用进程调用外部的程序来实现该功能。 I、运行一个进程——QProcess类(继承自QIOdevice) 启动一个进程:调用start函数 ...

    2024-01-30 20:50:31
  • C#_实现月度信息的快捷查询

    日期字段的查询,一般需要输入开始日期和结束日期,有的时候,客户嫌麻烦,想输入2017-07这样的快捷输入来实现月度查询。这样的问题,需要程序自动补全开始日期和结束日期的范围,才能有效的获取需要的数据。开始日期:比较容易获得,条件+01字符串就可以了;结束日期:需要将开始日期转换成datatime,然后计算本月的天数,c#有现成的函数,直接用,太幸福了,然后拼出结束日期,ok。看代码

    2024-01-30 20:50:24
  • Spring常用注解

    Spring常用注解

    2019独角兽企业重金招聘Python工程师标准>>> ...

    2024-01-30 20:50:17
  • 【ChatGPT+Python】Landsat卫星图像黑边去云及旋转校正

    【ChatGPT+Python】Landsat卫星图像黑边去云及旋转校正

    Landsat的遥感影像四个角有黑色区域,这是正常的。但是如果你真的想去掉黑色区域的话,你可以使用重分类,把黑色的区域变成白色,这样和背景就一致了,在发布服务的时候设为白色透明就可以了。旋转正了的话,...

    2024-01-30 20:49:47
  • Struts的三种传参方式

    Struts的三种传参方式

    1、通过属性传参数(Attr) UserAction.java package com.bebig.struts2.user.action; import com.opensymphony.xwork2.ActionSupport; public class UserAction extends ActionSupport { private String name;

    2024-01-30 20:49:39
  • 【OpenCV C++&amp;Python】(一)图像读取、显示和保存

    【OpenCV C++&amp;Python】(一)图像读取、显示和保存

    文章目录OpenCV简介Mat图像存储方式显式创建Mat对象输出格式图像读取、显示和保存C++Python OpenCV简介 OpenCV(开源计算机视觉库)是一个开源库,是基于C/C++开发的: O...

    2024-01-30 20:49:33
  • 模型评估指标

    模型评估指标

    模型评估指标一、回归(Regression)算法指标1. Mean Absolute Error 平均绝对误差2. Mean Squared Error 均方误差3. Root Mean Square...

    2024-01-30 20:48:58