Web入门:常用标签(2)

简介: Web入门:常用标签(2)

在开始之前,先分享给大家一个好用的工具,大家应该也跟我有过一样的烦劳,就是每次都要从文件夹中点击网页才能够进入网页,这是否不太方便,能不能直接再编译器中打开呢?

我们只需要使用open in browser 这个工具就可以实现,老样子,点击那个很多方形的图案,在搜索框中搜索并安装即可。browser(浏览器)

这个时候你点会之前编辑文件时的界面,对着空白处点击右键就会出现如图选项

你会发现多出来的这两个选项第一个在默认浏览器中打开,下面那个则是在其他浏览器中打开,点击它们就可以实现直接打开网站。

好用的工具分享完了,接下来让我们进入正题

常用标签

(1)双标签

双标签可以理解为一对形影不离的好兄弟,在使用它们的时候一定是一对一对来。

1.<html>,</html>这是个双标签,因此,在使用的时候要把这两个都带上,这个标签限定了文档的开始点和结束点。


2.<head>,</head>,在这里面书写你创建的浏览器的属性,标题等信息,是读者不能够直观看到的。


3.<body>,</body>,在这里面书写的内容是用户能够直观看到的内容,定义了文档的主体,如图片,文本之类的信息。


4.<title>,</title>一定要放置在<head>和</head>中,它能够改变你网站的名字,如下图所示

1967459bcfea4f5385c838531761d42f.png

5.<h1>,</h1>(1~6)一共有六级标题,一级标题最大<h1>...<h1>,六级标题最小<h6>...</h6>

如图:

6.<p>,</p>,段落标签,可在其中书写内容

(2)单标签

有了双标签的铺垫,单标签就不难理解了,它是孤独的,往往是单个单个出现的


1.<meta>,这个标签的含义是说明使用的语言风格 ,这怎么理解呢?世界上有许多种语言,web编程中也有许多种语言风格,这个说明就是为了能够让你写的代码快速的与别人的脑电波匹配上。一般我们用的都是utf-8这种语言风格。


因此我们可以在<head>和</head>中写下<meta charset="utf-8">,声明我们的语言风格。


2.<br>,在<p>和</p>中书写文本的时候我们有时会想着换行,这个标签就可以实现换行。3.<hr>,加一条横线在内容中

 

好了,到这里,我们今天的分享就结束了,感谢各位友友的阅读,祝各位友友前程似锦O(∩_∩)O

相关文章
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
514 91
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
933 7
Spring Boot 入门:简化 Java Web 开发的强大工具
|
前端开发
【前端web入门第四天】01 复合选择器与伪类选择器
本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。
309 32
【前端web入门第四天】01 复合选择器与伪类选择器
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
368 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
340 28
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
362 16
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
446 11
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
378 10
|
前端开发