前端第一课:初识前端

建立一个网页项目需要建立一个文件夹,在文件夹里将CSS,js,HTML和图片分装在不同文件夹方便管理。

html由大量标签构成,标签有单标签和双标签,一个HTML由头部头部和主体构成,在头部内容一般为网页的基本信息,譬如标题,索引信息等,我们一般展示的部分在主体部分;下面便是基本格式;

<html>
  <head>  </head>  <body>  </body>
</html>

(注:为防止出现中文乱码,一般会选择在头部添加<meta charset="utf-8")>, 所有标签和代码部分必须用英文,否则会出错)

HTML只是网页的内容,要让网页做的好看还需要给网页内容进行排版,这个时候便用到CSS,CSS可以快速方便的给网页进行排版,我们可以把CSS样式直接写在HTML的头部例如;

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>你可以使用 <style> 标签在文档头部定义内部样式表也可以从外部引入CSS文件例如:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部,浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。外部引入要注意绝对路径和相对路径:绝对路径:指文件完整的目录地址相对路径:是指文件相对于当前目录的地址一般使用相对路径,因为使用绝对路径可能会导致如果网页不是在本机上打开文件不会显示,而相对路径不会出现这种情况。



原文地址:https://www.cnblogs.com/Sunboy910/p/11179351.html

时间: 2024-11-10 13:50:28

前端第一课:初识前端的相关文章

前端第一课

+++++++++++++++++++代码区 ++++++++++++++++++++++++++ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <p> 常用标签 <em> em强调 </em&

Web前端第一课:HTML

什么是Html? HTML全称Hyper Text Markup Language,中文翻译为 超文本 标记 语言.简单而言,HTML是用来向浏览器描述网页结构和内容的计算机语言.HTML是面向计算机的,但是算不上编程语言,它没有数据类型,控制结构等这些编程语言才具有的语法.HTML以各式各样的标记告诉浏览器网页的结构.HTML是由人编写的,因此它也是面向人的,网站的其他开发人员通过HTML中的标记,能够更清晰的了解到网站的内容 是如何组织的,方便阅读和修改.此外,HTML也是面向互联网的,例如

前端07 /jQuery初识

目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2.1使用 jQuery 的基本步骤 2.2 jQuery的$符号 2.3jQuery的入口函数 3.js中的DOM对象 和 jQuery对象比较(重点,难点) 3.1 二者之间的区别 3.2 jquery对象和dom对象的关系和转换 4.jQuery查找标签 4.1 jquery选择器 4.2 jquery筛选器 5. 链式表达

初识前端,拒绝迷路

前端是什么? 前端通常也称为web 前端,是指利用HTML,CSS,JavaScript等技术生成开发人员想要生成的网页.网页就是大家在浏览器所看到的,我们电脑里的.html和.jsp等等为后缀的文件也属于网页. 浏览器无论是前端的新手学习者,还是开发人员,浏览器是我们开发和调试中必不可少的工具.常见的浏览器有Chrome(谷歌),IE,Firefox(火狐),Safari等等.由统计图中可以看出,如今使用的较火的是Chrome浏览器和IE浏览器.近几年,Firefox因为不佳的用户体验等原因逐

【Web探索之旅】第二部分第一课:客户端语言

内容简介 1.第二部分第一课:客户端语言 2.第二部分第二课预告:服务器语言 第二部分:Web编程语言和工具 大家好.上一个部分我们学习了Web的一些基本概念: 什么是Web? Internet和Web的区别 Web的历史 第二部分我们会正式进入Web学习的主题了.我们会带大家了解一个我们平时访问的网站(Web site)是如何运作的.首先我们来看看Web开发使用到的编程语言和数据库,一些框架和内容管理系统,还有响应式设计.这一部分会有不少原理,概念比较重要,不过我们会用形象地比喻来阐明. 第二

Magento学习第一课——目录结构介绍

Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zend框架提供了面向对象的代码库并且有很好的团队支持.通过这个框架,Magento主要围绕三个基本点建立: 1. 灵活性:我们相信每一个解决方案都像它的商务支持一样是独一无二的.Magento的代码可以无缝定制的. 2. 可升级性:Magento可方便的实行定制且不丧失升级的能力,因为从社区中获得核心代

Web前端,中国WEB前端的领跑者——零玖玖

Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过10年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主. 简介编辑 2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化.网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用

写给程序员的管理入门课程 -《格鲁夫给经理人的第一课》

写给程序员的管理入门课程 -<格鲁夫给经理人的第一课> 序 格鲁夫给经理人的第一课 <格鲁夫给经理人的第一课> 最早出版于 2007 年,书原名为<High Output Management>.本书的作者格鲁夫是 Intel 的前 CEO,领导了 Intel 从一家濒临倒闭的存储器公司,转型为微处理器公司,并且在个人 PC 开始流行时,成功和微软缔结 Wintel 联盟,主宰了整个 PC 电脑时代. 格鲁夫是一个技术出身的管理者,在本书中,我们甚至看到他多次用编译器来

新手自学java第一课

# 学习JAVA第一课 如何编写博客 细则 字体 heoll 周毅 方法(星号+内容+星号) heloo周毅 方法(2星号+内容+2星号) heloo周毅 方法(3星号+内容+3星号) heloo周毅 方法(2波浪号+内容+2波浪号) 引用 选择java,走向人生巅峰 方法(小于号+空格)如: 周毅将来一定会成功 分割线 方法(3个---即可) 图片 超链接 点击跳转到周毅的博客 列表 A B C (这是有序列表,方法--1.空格) A B C (这是无序列表,方法:.空格) 表格 姓名 性别