化身孤岛的鲸o
化身孤岛的鲸o

Day_1 Web前端开发环境配置与HTML基础

项目1 Web前端开发环境配置

下载并安装常用的Web前端开发工具：
（1）EditPlus软件
（2）HBuilder软件
（3）Subline Text软件
可以自行下载使用。
我这里使用的是HBuilder软件，界面如下：
Day_1 Web前端开发环境配置与HTML基础_第1张图片

项目2 新生简易主页设计

知识点：
（1）html标记

<html> ... html>

HTML文档结构由头部head和主体body构成，head与body两个标记均为成对标记，由首标记和尾标记组成。
（2）头部head标记

head标记中通常包含标题title，样式style，元信息meta，脚本script，链接link等标记，可根据网页设计需要添加相关标记或设置标记属性。
期间的内容不会在浏览器中显示。
（3）主体body标记

	<body>
		<h1>1号标题字h1>
		<p>段落<br>段落p>
		<hr width="200px">
		<blockquote>段落缩进blockquote>
		<div id="" class="">...div>
		<form method="post" action="">
		...
		form>
	body>

body标记是网页信息的主要载体，通常可以包含段落p、标题字h1~h6、换行br、表单form、脚本script、无序列表ul、水平分割线hr、表格table等标记。
（4）标题title标记

<title>网页的标题title>

（5）段落p标记

<p align="center">这是一个段落p>

（6）水平分割线hr标记

<hr size="3" color="red" width="80%" align="center">

水平分割线可以设置线的宽度、颜色、线粗细、对齐方式等属性。
（7）样式style标记

<style type="text/css">
    p{font-size:28px;color:blue;  /*设置字体大小、颜色*/}
style>

定义和用法
style 标签用于为 HTML 文档定义样式信息。

在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。

style 元素位于 head 部分中。

实训过程：



	<head>
		<meta charset="utf-8">
		<title>新生简易主页设计title>