iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >HTML入门零基础教程(四)
  • 830
分享到

HTML入门零基础教程(四)

html前端cssjavascriptvscode 2023-08-31 06:08:59 830人浏览 八月长安
摘要

嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波。 希望未来可以一起学习交流。 通过前三篇的学习,相信你们对HTML有了一些基础的了解,那么我们就来先做一个小练习,巩固一下之前所学习的知识。 目

嗨,大家好,我是异星球的小怪同志

一个想法有点乱七八糟的小怪

如果觉得对你有帮助,请支持一波。

希望未来可以一起学习交流。

通过前三篇的学习,相信你们对HTML有了一些基础的了解,那么我们就来先做一个小练习,巩固一下之前所学习的知识。

目录

一、诗歌小练习 

二、文本格式化标签 

三、 div和span标签


一、诗歌小练习 

 由上图的小练习我们可以看到,红色框和黄色框都是标题标签,而每个标题下面的段落是用了段落标签 ,那么我们用代码来演示一下。

代码实现:

                诗歌    

诗歌

《面朝大海,春暖花开》

从明天起,

  

做一个幸福的人

  

喂马,劈柴,周游世界

  

从明天起,

关心粮食和蔬菜

 

我有一所房子,

 

面朝大海,春暖花开

 

从明天起,和每一个亲人通信

 

告诉他们我的幸福

 

那幸福的闪电告诉我的

 

我将告诉每一个人

 

给每一条河每一座山取一个温暖的名字

 

陌生人,我也为你祝福

 

愿你有一个灿烂的前程

 

愿你有情人终成眷属

 

愿你在尘世获的幸福

 

我也愿面朝大海,春暖花开

《远和近》

你,

一会看我,

一会看云。

我觉得,

你看我时很远,

你看云时很近。

 

二、文本格式化标签 

在网页中,有时需要为文字设置 粗体 斜体 下划线等 效果,这时就需要用到 html 中的文本格式化标签,使 文字以特殊的方式显示。 标签语义: 突出重要性, 比普通文字更重要。
语义标签说明
加粗

更推荐使用标签加粗 语义更强烈
倾斜更推荐使用标签加粗 语义更强烈
删除线更推荐使用标签加粗 语义更强烈
下划线

更推荐使用标签加粗 语义更强

我们用代码演示一下:

                文本格式化标签    

我是加粗的文字

我是加粗的文字

我是倾斜的文字

我是倾斜的文字

我是删除的文字

我是删除的文字

我是下划线的文字

我是下划线的文字

三、 div和span标签

没有语义的,它们就是一个盒子,用来装内容的。
这是头部
今日天气
div 是 division 的缩写,表示分割、分区span 意为跨度、跨距 特点: 1.
标签用来布局,但是一行只能放一个
大盒子 2. 标签用来布局一行上可以多个 小盒子 我们可以用代码来演示一下
标签:
                div标签和span标签    
我是一个div标签,我一个人单独占一行
11.6
我是一个div标签,我一个人单独占一行
11.6

我们可以看到,div的确是一个大盒子,单独占一行。 

我们再用代码演示一下标签:

                div标签和span标签    
我是一个div标签,我一个人单独占一行
我是一个div标签,我一个人单独占一行
QQ 微信 CSDN

 通过对比,我们可以很清楚的知道上述所得出的结论:

 

标签用来布局,但是一行只能放一个
大盒子

  标签用来布局一行上可以多个 小盒子 好了,今天就到这里,下次再更~

 

来源地址:https://blog.csdn.net/weixin_65445097/article/details/127721090

--结束END--

本文标题: HTML入门零基础教程(四)

本文链接: https://www.lsjlt.com/news/384426.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML入门零基础教程(四)
    嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波。 希望未来可以一起学习交流。 通过前三篇的学习,相信你们对HTML有了一些基础的了解,那么我们就来先做一个小练习,巩固一下之前所学习的知识。 目...
    99+
    2023-08-31
    html 前端 css javascript vscode
  • SQL 零基础入门教程
    目录一、了解 SQL二、检索数据三、排序检索数据四、过滤数据五、高级数据过滤六、用通配符进行过滤七、创建计算字段八、使用函数处理数据九、汇总数据十、分组数据十一、使用子查询十二、联结表十三、创建高级联结十四、组合查询十五、插入数据十六、更...
    99+
    2014-09-15
    SQL 零基础入门教程
  • Swaggo零基础入门教程
    目录配置流程注意区分下载swaggo初始化快速上手gin-swagger简单测试详细配置配置流程 注意区分 go-swagger != swaggo 二者功能差不多,都是生成接口文档...
    99+
    2023-01-28
    Swaggo入门 Golang Swaggo入门
  • 【JavaWeb】HTML零基础入门
    ✨哈喽,进来的小伙伴们,你们好耶!✨ 🛰️🛰️系列专栏:【JavaWeb】 ✈️✈️本篇内容:HTML基础语法详解,附带综合案例。 🚀🚀代码托管平台github:Ja...
    99+
    2023-10-18
    html java 前端
  • Spring零基础入门IOC
    目录1.HelloSpring2.IOC创建对象方式2.1.通过无参构造方法来创建2.2.通过有参构造方法来创建1.HelloSpring 导入Jar包 <dependen...
    99+
    2022-11-13
    Spring IOC容器 Spring IOC
  • 前端基础入门四(JavaScript基础)
    目标:掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础,后续会讲解JavaScript高级。重点内容变量的声明及使用数据类型类型转换运算符JavaScript介绍JavaScript是什么JavaScript是一种运...
    99+
    2023-06-03
  • python入门基础教程
    Python是一门简单易学、功能强大的编程语言,适合初学者入门。下面是一个简要的Python入门基础教程,帮助您快速上手Python编程。1. 安装Python:首先,您需要在计算机上安装Python解释器。您可以从Python官方网站(h...
    99+
    2023-10-25
    python 入门 基础教程
  • mongodb 基础入门教程
    算是学习下来精炼的笔记,希望对大家有帮助。如果有问题欢迎大家指正。 0.概述 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下,添加更多的节点,可以保证服务器性能。 MongoDB 旨在为W...
    99+
    2015-07-29
    mongodb 基础入门教程
  • Netty网络编程零基础入门
    目录OSI七层网络模型Socket技术TCP协议Java语言创建socket应用http协议OSI七层网络模型 应用层:Http协议、文件服务器、邮件服务器 表示层:数据转换解决不同...
    99+
    2022-11-13
    Netty网络编程 Netty编程
  • 阿里云服务器教程零基础入门指南
    阿里云服务器是阿里巴巴推出的一种云计算产品,为用户提供灵活、高效、安全的云计算服务。本文将为您提供一份零基础入门的阿里云服务器教程,让您轻松上手。 一、了解阿里云服务器阿里云服务器是阿里云提供的云计算产品,可以帮助您快速搭建和运行网站、应用...
    99+
    2023-11-15
    阿里 入门 服务器
  • Java零基础入门数组
    目录认识数组数组的初始化默认初始化静态初始化动态初始化数组有关的问题数组的遍历求最值问题查询子元素Arrays工具类二维数组二维数组初始方式二维数组的遍历认识数组 数组的定义 数组是...
    99+
    2022-11-13
  • Vueexpress鉴权零基础入门
    目录token图示一点通express鉴权下载加密/解密包加密基本使用(生成token)传递Token查看token验证token讲在前面的话:一个成熟的全栈工程师开发的前后端项目鉴...
    99+
    2023-02-15
    Vue express鉴权 Vue express
  • HTML基础入门
      一、浏览器   浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件   1,浏览器种类   主流浏览器:Chrome,Firefox,Safari,Opera  ...
    99+
    2023-01-30
    入门 基础 HTML
  • 零基础入门HTML的知识点有哪些
    这篇文章主要介绍“零基础入门HTML的知识点有哪些”,在日常操作中,相信很多人在零基础入门HTML的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”零基础入门HTM...
    99+
    2022-10-19
  • Java SQL注入案例教程及html基础入门
    目录一,SQL注入–1,需求–2,测试–3,总结二,练习PreparedStatement–1,需求–2,测试–3,制作工具类三,HTML–1,概述–2,入门案例–3,使用工具–4,...
    99+
    2022-11-12
  • SQL 教程-入门基础篇
    文章目录 SQL 简介SQL 语法SQL SELECT 语句SQL SELECT DISTINCT 语句SQL WHERE 子句SQL AND & OR 运算符SQL ORDER BY...
    99+
    2023-08-31
    sql 数据库 mybatis mysql
  • Python pygame入门基础教程
    本篇文章给大家带来了关于Python的相关知识,大家都知道pygame是跨平台Python模块,专为电子游戏设计,包含图像、声音,下面介绍了关于Python pygame新手入门基础教程的相关资料,希望对大家有帮助。【相关推荐:Python...
    99+
    2022-08-08
    python
  • EF Core基础入门教程
    EF Core 是一个ORM(对象关系映射),它使 .NET 开发人员可以使用 .NET对象操作数据库,避免了像ADO.NET访问数据库的代码,开发者只需要编写对象即可。 EF Co...
    99+
    2022-11-13
  • 万字【Python基础】保姆式教学,零基础快速入门Python
    前言 又是爆肝干文的日子,继上次说要出一期Python新手入门教程系列文章后,就在不停地整理和码字,终于是把【基础入门】这一块给写出来了。 高级编程的【正则表达式】和【面向对象编程】内容我在之前已经...
    99+
    2023-09-02
    python 爬虫 函数闭包 元组 列表
  • C语言零基础入门(1)
    目录1. C语言简介1.1 C语言发展史1.2 C语言的特点1.3算法及其表示1.4常用算法介绍总结1. C语言简介 1.1 C语言发展史 C语言是一种广泛使用的面向过程的计算机程序...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作