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

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

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

　　下面从简单的开始学起：

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

<html>

<head>

<title>网页的标题</title>

</head>

<body>

……………………

</body>

</html>

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

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

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

<body>与</body>之间放的是网页内容。打开记事本，写上下面的内容：

<html>

<head>

<title>网页的标题</title>

</head>

<body>

我的第一个网页。

</body>

</html>

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

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

那就好好看这篇吧。

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

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

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

空标记:<标记>

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

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

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

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

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

 ,和,和,<title>和</title>

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

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

3、和这个我比较少用，似乎是用来文章分段的。

4、<title>和</title>放在<head>之间的，用来写网页左上方的标题。

　　看看下面的例子（这就是前面说过的非标准写法，一样可以用；当然，提倡标准写法）

测试文字

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

[的效果是使字体加粗]

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

　　再看一个例子：

一段文字~~~

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

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

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

HTML网页制作基础教程，从基础了解html常用标识相关推荐

After Effects CC 2019 Essential Training: The Basics After Effects CC 2019基础教程：基础知识 Lynda课程中文字幕
After Effects CC 2019 Essential Training: The Basics 中文字幕 After Effects CC 2019基础教程:基础知识中文字幕After E ...
Axure RP 9 基础教程元件基础1
Axure RP 9 for Mac是一款非常专业的交互原型设计软件,它能让用户快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档.今天小编给大家带来的是Axure RP 9 基础教程 ...
matlab最基础教程（四）：常用的系统自带函数，符号变量与字符串篇
matlab最基础教程(四):常用的系统自带函数,符号变量与字符串篇前言:matlab字面意思是矩阵实验室,软件重点是数值变量的运算.所以在符号变量和字符串的运算上,功能并不强大,我用的也不是很多, ...
视频教程-快速入门Python基础教程_Python基础知识大全-Python
快速入门Python基础教程_Python基础知识大全十余年计算机技术领域从业经验,在中国电信.盛大游戏等多家五百强企业任职技术开发指导顾问,国内IT技术发展奠基人之一. 杨千锋 ¥99.00 立即 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章:播放器图标-课后习题参考代码 ........ 记得关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
Atmega2560基础教程（2）——Atmega常用官方库及常用语句
Atmega2560基础教程(2)--Atmega常用官方库及常用语句在开始正式开始编写Atmega2560代码之前,我们先来了解一下Atmega系列芯片比较独特的寄存器配置方式,以及会常用到的官方 ...
计算机网页设计教程dw,Dreamweaver 网页制作标准教程.pdf
全国信息化计算机应用技术资格认证指定教材 Dreamweaver 网页制作标准教程全国信息化计算机应用技术资格认证管理中心组编主编李建民副主编朱琦马建云闫翼翔冷欣郑德安编 ...
Adobe Dimension Essential Training: The Basics Adobe Dimension 基础教程：基础知识 Lynda课程中文字幕
Adobe Dimension Essential Training: The Basics 中文字幕 Adobe Dimension 基础教程:基础知识中文字幕Adobe Dimension Es ...
html图片代码DWCS5,dreamweaver cs5网页制作图文教程
网页设计需要使用可视化与源代码编辑相结合布局,对初学者建议使用表格布局,此方法最便于掌握,操作起来速度快. 插入表格:直接点击快速工具中表格命令:按快捷键Ctrl+Alt+T插入:点击插入-表格插 ...

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

HTML网页制作基础教程，从基础了解html常用标识相关推荐

最新文章

热门文章