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

最新推荐文章于 2024-01-13 11:33:01 发布

化身孤岛的鲸o

最新推荐文章于 2024-01-13 11:33:01 发布

阅读量1.2k

点赞数

分类专栏： Web前端文章标签： web html

本文链接： https://blog.csdn.net/weixin_44123362/article/details/103843228

版权

Web前端专栏收录该内容

7 篇文章 3 订阅

订阅专栏

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

下载并安装常用的Web前端开发工具：
（1） EditPlus软件
（2） HBuilder软件
（3） Subline Text软件
可以自行下载使用。
我这里使用的是HBuilder软件，界面如下：

项目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 部分中。

实训过程：

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<title>新生简易主页设计</title>
		<style type = "text/css">
			p{
				font-size: 24px;    /*定义字体大小*/
				color:blue;         /*定义字体颜色*/
				text-indent: 2em;   /*定义首行缩进2个字符*/
			}
		</style>
	</head>
	<body>
		<h2 align = "center">欢迎访问我的简易主页</h2>
		<hr color = "red">
		<p align="center">我，生于1999年5月，河南人，录取专业：中南大学计算机科学与技术，我非常高兴。<br>
		所在班级：****，学号：******&nbsp;&nbsp;姓名：风之舞<br>
		</p>
	</body>
</html>

项目3 meta标记、body标记属性使用

（1）元信息meta标记
用来描述一个HTML网页文档的属性
定义和用法
meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
meta标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
提示和注释：
注释：meta标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。

（2）主体body标记

<body bgcolor="" text="" link="" alink="" vlink="">...</body> 
/*bgcolor是前景色*/

注：颜色设置方法有RGB函数（整数、百分比）、十六进制表示法（6位、3位）、颜色英文名称
（3）标题字h2标记

<h2 align="center">...</h2>

（4）超链接a标记

<a href="http://www.firefox.com.cn/">火狐官方中文网站</a>

$\color{#FF0000}标签定义超链接，用于从一张页面链接到另一张页面。$
$\color{#FF0000}元素最重要的属性是 href 属性，它指示链接的目标$
（5）水平分割线hr标记

<hr size="" width="" align="" color="">

（6）脚本script标记

<script type="text/javascript">
    alert("Web前端开发工程师就业前景好、薪酬高！");
</script>

在script标记中使用警告消息框alert来输出消息
定义和用法
script标签用于定义客户端脚本，比如 JavaScript。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

化身孤岛的鲸o

关注关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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

项目2 新生简易主页设计

项目3 meta标记、body标记属性使用

热门文章

分类专栏

最新评论

大家在看

最新文章

目录