web开发笔记--项目搭建

最新推荐文章于 2024-08-27 16:35:39 发布

HarryBorrsion

最新推荐文章于 2024-08-27 16:35:39 发布

阅读量162

点赞数

分类专栏： Web开发联系文章标签： html css html5

本文链接：https://blog.csdn.net/qq_43646572/article/details/106432740

版权

Web开发联系专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、开发环境

Atom
Chrome

二、项目说明

基于Web的图片浏览应用,通过构建ottergam,学会使用HTML，CSS以及JaveScript进行浏览器编程的基础知识，手动构建UI（User Interface）,学习浏览器加载和渲染内容的方式。

三、建立项目路径

ottergarm
....script
....stylesheets

四、搭建Ottergram

在stylesheets下创建文件style.css
在项目根目录下创建文件index.html
编写index骨架

<!DOCTYPE html>   /* 定义文档类型*/
<html>
	<head>
		<meta charset="utf-8">
		<title>ottergarm</title>	
		<link rel="stysheets" href="styles/style.css">
		/*通过link标签给HTML文档附加外部样式表，他有两个属性
		      rel（relationship）属性值为stylesheet表明链接的文档是样式表
		      href属性值表明样式表所在的路径*/
	</head>
	<body>
		<header>
			<h1>ottergarm</h1>
		</header>
	</body>
</html>

添加内容
在body中添加

一个 无序列表 标签为<ul>
五个 列表项 标签为<li>
每个列表项中包含一个<span>标签，此标签没有任何特殊含义，只是一个容器。

内容添加完毕后index.html为：

<body>
		<header>
			<h1>ottergarm</h1>
			<ul>
				<li>
					<span>Barry</span>
				</li>
				<li>
					<span>Robin</span>
				</li>
				<li>
					<span>Maurice</span>
				</li>
				<li>
					<span>Lesley</span>
				</li>
				<li>
					<span>Barbara</span>
				</li>
			</ul>
		</header>
	</body>