热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

HTML网页制作基础教程,从基础了解html常用标识

网页制作基础教程:认识HTML在今天,做网页的工具到处都是,只要动几下鼠标,一个精彩的网页就出来了,HTML是否要学呢&#x

网页制作基础教程:认识HTML

  在今天,做网页的工具到处都是,只要动几下鼠标,一个精彩的网页就出来了,HTML是否要学呢?答案是肯定的,因为工具就是工具,它们生成的代码是机械的,不够简洁,使网页打开的速度减慢。而且更新、管理起来极不方便。还有很多新的功能,工具是生成不了的。必需对代码进行编辑。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

  下面从简单的开始学起:

    你打开网页的源文件,可以看到html文件的格式是这样的:

……………………

其中省略号部份是网页的内容,其实每个标记都是一一对应的,有一个就必有一个,有一个就会有一个

每个网页文件都是以开始和以结束的。

之间的内容是网页的标题。会显示在浏览器的标题栏上。

之间放的是网页内容。打开记事本,写上下面的内容:

我的第一个网页。

保存为以.htm或.html为后缀的文件就成为一个简单的网页啦。是不是很简单呢?

 

  比如说有个网页特效,但你不知怎么添加。

   那就好好看这篇吧。

  html标记,称“超文本标记语言 ”,是网页的源代码。

  分为两种,“围堵标记”和“空标记”

  围堵标记:由<标记>和组成

  空标记:<标记>

  打个比方,你要像我上面那样让字的颜色有所改变。那么修饰哪几个字呢?是需要一个修饰的开头和结束吧?看下面这个代码:红色的字,这样的话,在页面显示的就是“红色的字”,因为我有个结束符号“”

  再来说说空标记。比如换行标记
(我们写一段字时,你要换一行,就用这个标记)。实际上换行就换了,是没有开始和结束的困扰的(这样说你总该理解了吧?!)

  好了,顺着思路,看上面,我写了一个:红色的字。那么font就是一个标记,用来修饰字的。color指的就是它的颜色(red是红色,你不会不知道吧?)。这里,提醒初学者必须注意,你要让计算机知道你要修饰的是哪几个字(如果你没有结束,那么后面所有的字将是红的)。

  我们编辑的html是按照你写的顺序来编译出来的,就是说你写的顺序就是在电脑上显示的顺序(知道相关代码该怎么加了吧?).

 

 

这里介绍一些基本的标记,其实你想不记也可以;因为你自己写源代码时用得太多了,肯定会自动记住的。


,,

,

  1、
这是一个换行符。我们的网页上总要写字吧?该怎么换行?就这玩意。提醒一下初学者,再回想一下围堵标记和空标记的区别,不清楚的就回头看看文章,再不清楚上留言本去,我跟你玩……巨汗……

  2、这是用来修饰文字的,比如大小,字的颜色,字的背景颜色。

  3、

这个我比较少用,似乎是用来文章分段的。

  4、放在之间的,用来写网页左上方的标题。

  看看下面的例子(这就是前面说过的非标准写法,一样可以用;当然,提倡标准写法)

测试文字

 新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

  [的效果是使字体加粗]

  size是文字大大小,从1-7的大家自己试。

  再看一个例子:

  

一段文字~~~

  效果不好表示,是使标记中的文字居中的,大家自己试吧。

  align还可以等于left和right,居左和右。

  提示:其实还有很多其他的标记都有align=center这个属性。


推荐阅读
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 本文介绍了使用CentOS7.0 U盘刻录工具进行安装的详细步骤,包括使用USBWriter工具刻录ISO文件到USB驱动器、格式化USB磁盘、设置启动顺序等。通过本文的指导,用户可以轻松地使用U盘安装CentOS7.0操作系统。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • C语言注释工具及快捷键,删除C语言注释工具的实现思路
    本文介绍了C语言中注释的两种方式以及注释的作用,提供了删除C语言注释的工具实现思路,并分享了C语言中注释的快捷键操作方法。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
author-avatar
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有