一篇文章教你学会基础的HTML

html是学习做网页的基础,漂亮的网页与布局就是由有些html代码组成,大家看完这篇文章就可以简单的了解html了,多写多练

如果你不致力于成为美工的话,那么作为开发人员,可以读懂HTML、必要时能进行简单修改即可。下面跟着我的思路,保证一篇文让你看懂HTML,当然,再看的过程中,最好自己动手试试,这样理解就更深了。Ok,下面开始:(下面的符号均为英文状态下输入)

1、  html基本规则

<html>

<head>

<title>我的网页</title>

………………………..

</head>

<body>

………………….

</body>

</html>

几乎所有的网页都是按照这个格式来的,这是一个网页必须具备的标记,每个标记都放在< >里,以</ >结束,只不过在省略号的地方加了很多乱七八糟的东西,也就是我们看到的内容。

将以上代码复制到一个记事本,然后另存为a.html文件,就成了一个网页,试试看呢

下面,以记事本方式打开,在<body>之间加上“首页”二字,保存,再打开之后看到如图:

接着,在首页 的前后加上标记<a> 变为 <a href=”#”>首页</a>,保存,再看看效果呢?

是不是就是我们平时上网看到的超链接了呢?只是这里点击“首页”没变化,因为我们添加的空连接,趁热打铁,我们照着前面的方法,在建一个页面,保存为b.html,然后将上面的“#”替换为b.html,在打开,点击首页,是不是就跳转到b页面了呢。(当然a和b页面都要在同一目录下)到这里为止,你应该了解到,其实网页上所有的功能都是由不同的类似于<a>这样的标记来实现,你需要做的时记住这些标记的功能而已。

2、  网页结构

如果你上网时注意的话,其实网页都是分块的,如图所示

当然这只是一个大致的结构,你还可以根据需要分成很多块,分块主要是为了修改方面及确定各自的表现样式。

这主要通过<div></div>标记来实现,下面我在 “首页”加上<div>标记试试:

<div>

<a href=”b.html”>首页</a>

</div>

保存,在打开试试,什么效果呢?

是不是还是和修改之前一样呢,下面我们为其加上一些修饰:

<div style=”width:200px;height:100px;border-style:solid;” >

在运行,我们标记的这一块就以蓝色背景表示出来啦!

在加入很多的<div></div>块就可以将网页大卸八块了,呵呵,然后在你每个块里放上你想放的东西即可。

当然,很多个<div>都加上style=””,如果这些style设置都差不多的话,我们每一个设置就太麻烦了,我们一般将style这些放在另外的.css文件(控制网页中各标记的显示样式)中,然后进行需要调用的地方进行调用,下面来试试

新建一个记事本,重命名为c.css然后打开,写入:

#header{width:200px;height:100px;border-style:solid;}

并将其在a.html里删掉

然后再</head>前加入 <link rel="stylesheet" type="text/css" href="c.css" />
也就是将c.css这个文件引入进来。将css放入单独的文件好处是:如果很多地方都引用了这个样式,我们只要修改这一个地方,就全部都变化了,不然我们得手动修改每一处,不利于后期维护。

最后将a.html的<div> 改为<div id=header>

效果是不是和之前一样呢?

差不多,到这里,应该“不会作诗也会吟”了吧,这篇文章主要是为了让大家从总体上对html有个了解,知道大概是怎么回事,还有很多标记都没涉及到,这个就需要你找本网页设计的书来看一看,背一背了。

时间: 2024-07-31 14:26:41

一篇文章教你学会基础的HTML的相关文章

一篇文章教你轻松安装hadoop(第2篇)

如果你看了我的上一篇文章,那此时你对hadoop已经有了一个大概的了解,那接下来这篇文章就教大家怎么安装hadoop环境,只要你用心,仔细的跟着文章中讲到的做,肯定能正确安装.     第三章 安装hadoop环境 由于大家在学习hadoop时候,主要以Hadoop 1.0环境为主学习就可以,所以这主要介绍如何搭建Hadoop 1.0分布式环境. 整个分布式环境运行在带有linux操作系统的虚拟机上,至于虚拟机和linux系统的安装这里暂不做过多介绍. 安装Hadoop分布式环境: 1) 下载H

一篇文章教你读懂Makefile

makefile很重要      什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,makefile还是要懂.这就好像现在有这么多的HTML的编辑器,但如果你想成为一个专业人士,你还是要了解HTML的标识的含义.特别在Unix下的软件编译,你就不能不自己写makefile了,会不会写makefile,从一个侧面说明了一个人是否具备完成大型工程的能力.因为,makefil

干货!一篇文章集合所有Linux基础命令,适合所有菜鸟学习和老手回顾!

1 文件{ ls -rtl # 按时间倒叙列出所有目录和文件 ll -rt touch file # 创建空白文件 rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制) dos2unix # windows文本转linux文本 unix2dos # linux文本转windows文本 enca filename # 查看编码 安装 yum install -y enca md5sum # 查看md5值 ln 源文件 目标文件 # 硬链接 ln -s 源文件 目标文件 # 符号

一篇文章教你如何用 Redis 轻松实现秒杀系统的构思

用 Redis 轻松实现秒杀系统的构思 前言: 秒杀系统的架构设计 秒杀系统,是典型的短时大量突发访问类问题.对这类问题,有三种优化性能的思路: **1. 写入内存而不是写入硬盘. 异步处理而不是同步处理. 分布式处理**用上这三招,不论秒杀时负载多大,都能轻松应对.更好的是,Redis能够满足上述三点.因此,用Redis就能轻松实现秒杀系统. 用我这个方案,无论是电商平台特价秒杀,12306火车票秒杀,都不是事:) 下面介绍一下为什么上述三种性能优化思路能够解决秒杀系统的性能问题: 写入内存而

一篇文章教你如何设计一个百万级的消息推送系统

前言 先简单说下本次的主题,由于我最近做的是物联网相关的开发工作,其中就不免会遇到和设备的交互. 最主要的工作就是要有一个系统来支持设备的接入.向设备推送消息:同时还得满足大量设备接入的需求. 所以本次分享的内容不但可以满足物联网领域同时还支持以下场景: 基于 WEB 的聊天系统(点对点.群聊). WEB 应用中需求服务端推送的场景. 基于 SDK 的消息推送平台. 技术选型 要满足大量的连接数.同时支持双全工通信,并且性能也得有保障. 在 Java 技术栈中进行选型首先自然是排除掉了传统 IO

一篇文章教你轻松使用fastjson

前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y JSON相信大家对他也不陌生了,前后端交互中常常就以JSON来进行数据交换.而有的时候,我们也会将JSON直接保存在数据库中. 可能就有人不太理解,为什么要将JSON保存在关系型数据库中? 我在最开始的时候也有类似的疑惑,问了几个同事,得出的结论都差不多:方便扩展,如果那些字段不需要用到索引,改动比较频繁,你又不想改动表的结构,那就可以在数据库中

一篇文章学会docker

一篇文章学会docker docker安装 docker在线安装 1.更新yum到最新 yum update 2.卸载旧版本 sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-selinux docker-engine-selinux docker-engine 3.安装需要的软件

一篇文章学会页面传值的10种方法(下)

一篇文章学会页面传值的10种方法(下) 6.代理委托实现页面之间的反向传值 这一种方法就是运用协议实现传值,这种方式也是在工程中常用的一种传值方法.首先创建好ViewController和SubViewController,在ViewController中创建好一个展示信息的Label,在SubViewController中创建好一个TextFeild,我们实现在第二个界面点击屏幕时,将TextFeild中的文字传到第一个界面,然后让背景颜色变色. 效果如下: 代理传值.gif 第一步: 首先我

一篇文章学会页面传值的10种方法(上)

一篇文章学会页面传值的10种方法(上) 1.最简单AB面正向传值 效果如下: 最简单的正向传值.gif 首先我们先创建两个视图控制器ViewController.swift和SubViewController.swift 设置第一个界面 首先在第一个界面创建好一个TextFeild,用来写我们要传的文字 import UIKit class ViewController: UIViewController {     let textField = UITextField()     overr