Html--笔记01:使用软件vscode,简介Html5--基础骨架以及标题、段落、图片标签的使用

一.使用VSC--全称:Visual Studio Code

vscode用来写html文件,打开文件夹与创建文件夹:①选择文件夹 ②拖拽文件

生成浏览器的html文件的快捷方式:!+enter

运行代码到网页的方法:

普通方法:找到书写代码的文件夹,点击使用浏览器打开

在vscode快速使用:需要添加插件:Open In Bower,然后右击选择:Open In Default Brower(默认浏览器) ,Open In Other Brower(选择其他浏览器)----推荐使用,更快捷方便。

vscode快捷键:

|---------------|-------------|
| shift+alt+F | 代码格式化 |
| alt+↑/↓ | 将选则的代码向上或向下 |
| shift+alt+↑/↓ | 快速复制一行向上或向下 |
| ctrl+s | 保存▲ |
| ctrl+F | 快速查找 |
| ctrl+H | 快速替换 |

二.HTML简介和基础骨架

Html5:是一种超文本标记语言,用来描述网页的一种语言。

标记语言<----标记标签<----双标签:<html></html> ,单标签:<img>

HTML5的DOCTYPE声明:

<!DOCTYPE html> 位于H5声明文档的最上面,处于标签之前,是网页的必备组成,避免浏览器的怪异模式

HTML5的基础骨架:

<html>标签:定义HTML文档,浏览器看到后就是个html文档了,所有其他元素就包裹在它里面,html标签限定了文档的开始点和结束点。

<head>标签:用于定义文档的头部,在头部描述了文档的各种属性和信息,包括文档的标题,在web的位置。

<body>标签:元素定义的文档的主体,body元素:包含文档的所有内容(比如文件,超链接,图像,表格和列表),会直接在页面显示,也是直接看到的内容。

以上就是Html5的基础骨架

拓展基础标签:

title 标签:

可以定义文档的标签,显示在浏览器的标题或状态栏上

<title>标签是<head>标签中唯一必须要求包含的东西,就是在<head>中必须有<title>。

<title>的增加有利于SEO优化----SEO搜索引擎优化的英文缩写,通过对网站内容调整,满足搜索引擎的排名需求

mate标签:

meta标签用来描述网页文档属性,关键词等,更多的都是字符编码: charset="UTF-8",也是在<head>标签里的

三.标题标签:

标题(Heading)通过:<h1>--<h6>标签进行定义

<h1>定义最大 的标题 ,<h6>定义最小的标题。

这里的align是指内容的位置属性,默认居左,可以选择left | center |right

生成h1到h6快捷键: h$*6

注意:要正确的使用标题标签,HTML的标题标签只用于标题,不仅仅只是为了生成粗体或者头号字体而使用,正确使用有利于SEO,h1--h6是先后顺序的且重要程度也是由重到轻。

四.标签--段落,换行,水平线

段落:通过<p>标签定义,

换行:希望将一个段落进行换行,就**在分割处加一个<br>或者<br />**都可以

效果如下:

水平线: <hr />单行标签:在HTML页面会创建水平线具体属性有:

color---颜色,width--长度,size--大小,alig--对齐方式**(默认居中)**,也可取值left | right。

具体实例在上图。

五.标签--图片

插入图片, <img>标签定义HTML页面中的图像:

<img src="" alt"" title="" width="" height="" >

<img>是单标签,不需要进行闭合操作

src--(图片地址与名字)路径

alt--图像替换文本,若图像加载失败,就会显示文本信息

width--宽度

heigth--高度

title--鼠标放在图片会有提示

感谢各位大佬的观看!求免费的点赞收藏关注喔!!!

相关推荐
致***锌几秒前
期权标准化合约是什么?
笔记
Wilber的技术分享1 小时前
【机器学习实战笔记 14】集成学习:XGBoost算法(一) 原理简介与快速应用
人工智能·笔记·算法·随机森林·机器学习·集成学习·xgboost
V我五十买鸡腿2 小时前
顺序栈和链式栈
c语言·数据结构·笔记·算法
麟城Lincoln3 小时前
【RHCSA-Linux考试题目笔记(自用)】servera的题目
linux·笔记·考试·rhcsa
丰锋ff4 小时前
计网学习笔记第2章 物理层(灰灰题库)
笔记·学习
阿絮~6 小时前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟11 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟13 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠13 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj13 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机