第一天初识HTML

橘子爱吃橘子

已于 2022-10-24 23:28:26 修改

阅读量380

点赞数

分类专栏： Web前端开发技术文章标签： html html5

于 2022-10-23 15:11:08 首次发布

本文链接：https://blog.csdn.net/qq_50589028/article/details/127474127

版权

Web前端开发技术专栏收录该内容

9 篇文章 2 订阅

订阅专栏

一、什么是web前端？（C/S、B/S）

利用多种技术创建页面或者APP等前端界面呈现给用户的过程，是给用户展示的网页，前台界面。

多种技术包括以下（还有很多技术没有列举出来）：
○ HTML：超文本链接语言
○ CSS：层叠样式
○ JavaScript
○ jQuery：写尽量少的代码做尽量多的事情
○ BT（bootstrap）

二、HTML介绍

2.1、什么是HTML？

HTML：超文本标签语言，是一系列标签，其中标签也可以称为标记或者元素（网页呈现的主要基础），也是描述性文本，可描述表格、文字、动画等

HTML分两部分：
• 头部:提供浏览器所需要的信息
• 主体部分：提供网页显示的主要内容

2.2 、HTML的优点

1、简单灵活
2、可扩展性
3、平台无关性

三、环境配置和浏览器说明

3.1、环境配置（建议使用sublim Text，操作方便易上手）

运行环境：浏览器的PC端
开发环境：记事本、sublime、vscode等

3.2、HTML语法

在这里插入图片描述

• 标签大多数成对出现，有开始标签和结束标签，自结束标签除外。
• 标签可以有属性，标签也可以没有属性，有属性必有值。布尔型除外
• 开始和结束标签之间的内容部分被称为区域
• 标签不区分大小写

3.3、网页的分类

静态页面：

在不修改源代码的情况下，无论何时何地你去访问网页都会得到相同的结果，通常后缀名为.html

动态交互式页面：

用户通过提交数据给网站，网站根据用户提交的数据进行反馈，文件后缀名为.jsp、.aspx、.asp、.php

四、第一个html页面

4.1、第一个HTML程序

在这里插入图片描述
title:

4.2、常用的标签

• 加粗标签：b/strong
• <b></b>加粗标签元素告诉浏览器把其加b标签的文本以粗体方式显示给浏览者。
• <strong></strong>加粗标签元素告诉浏览器把其加strong标签的文本以加粗方式显示给浏览者。
• 斜体：i/em
• 下划线：u
• 删除线:del
• 换行：br
• 段落标签：p
• 格式化输出标签：pre
• 修饰所包裹的内容：span
• 块标签：div
• 行内标签：修饰它所包裹的内容，不能直接支持宽高属性
• 块标签：它即使不满一行，也会占满一行，支持宽高属性
• 自结束标签：不需要结束标签的标签，如果有html文件头声明斜杠可以省略
• 下标标签：sub
• 下标标签：sup
• 分割线：hr
• 标题标签：hn=h1-h6,h1最大，依次递减

4.3、语义化标签

优点：
增强代码可读性，提高程序员的维护性，降低维护成本可以为搜索引擎起到引导作用
在这里插入图片描述

4.4、多媒体标签和图片属性

图片：<img >
视频：<embed></embed>
在这里插入图片描述

五、课堂标签练习及效果图

5.1、标签练习

<!DOCTYPE html><!--文件头-->
<html>
<head>
	<!-- 
		常见编码格式：
		gbk、utf-8、big5 gb2312 
	-->
	<!-- 
	meta属性分两组：name、content
	name可描述网页，便于搜索引擎查找，其中最重要的是description（描述）、keywords(关键字）
	 -->
	<meta charset="utf-8" >
	<meta name="author" content="哈哈"><!--定义网页作者--->
	<meta name="description" content="用于给web前端演示网页"><!--定义简短描述--->
	<meta name="keywords" content="关键字"><!--定义网页关键字--->
	<meta name="generator" content="编辑器"><!--定义网页编辑器--->

	<meta http-equiv="refresh" content="刷新时间; url=1.html" ><!--定义网页刷新时间--->
	<!--
	title:标题标签 ，显示在浏览器标题栏上
	 -->
	<title>这是一个标题</title>

</head>
<body>
	<h1>以下是加粗演示</h1>
<B>生活是一望无际的大海</B>，<strong>人便是大海上的一叶小舟。</strong>大海没有风平浪静的时候<br/>
<h2>以下是斜体演示</h2>
<i>大海没有风平浪静的时候</i>，<em>所以，
<h3>以下是删除线演示</h3>
	<del>人也总是有快乐也有忧愁。</del></em><br/>
<h4>以下是下划线演示</h4>
<u>当无名的烦恼袭来，失意与彷徨燃烧着每一根神经。</u><br/><br/>
<h5>以下是span演示</h5>
<span style="border: solid 2px red;">但是，朋友，别忘了守住一颗宁静的心，痛苦将不再有。</span >
<h6>以下是p标签演示</h6>
<p><font color="blue">每个人的前面，都有一条通向远方的路，崎岖但充满希望。不是人人都能走到远方，因为总有人因为没倒掉鞋里的沙子而疲惫不堪半途而废。所以，主宰人的感受的并非快乐和痛苦本身，而是心情。</font></p>
<hr width="100%" style="background-color: green;">
<p>当生活的困扰袭来，请丢下负荷，仰头遥望明丽、湛蓝的天空，让温柔的蓝色映入心田。就像儿时玩得疲倦了，找一块青青的软软的草地躺下，任阳光在脸上跳跃，让微风拂过没有褶皱的心。</p>
<以下是上下标演示>
0<sub>2</sub>
10<sup>5</sup>
<pre>
	静夜思
		---李白
	床前明月光
	疑是地上霜
	举头望明月
	低头思故乡
</pre>
<div>
	<div id="top" style="height: 200px; border:solid black 1px;">这是描述顶部区域的块标签</div>
	<div id="content" style="height: 100px;border:solid 1px red;">这是实现内容部分div</div>
	<div id="bottom" style="height: 50px;border:solid 1px green;">这是一个描述底部区域的div</div>
</div></br></br>
	<header id="top" style="height: 200px; border:solid black 1px;">header</header>
	<!--具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题-->
	<section id="content" style="height: 100px;border:solid 1px red;">section</section>
	<!--标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域-->
	<footer id="bottom" style="height: 50px;border:solid 1px green;">footer</footer>
	<!--定义文档页脚--></br>
	<img src="C:/2.jpg" style="width: 500px;height: 500px;"></br>
	<embed src="C:/1.mp4">这是视频播放</embed>
</body>
</html>

5.2、结果展示

在这里插入图片描述

六、本章节练习（第一个html网页）

6.1、题目要求：

在这里插入图片描述

6.2、代码展示：1.html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" >
	<title>第一天html练习</title>
</head>
<link rel="stylesheet" type="text/css" href="2.css">
<body>
<center>
<div class="div1">
<p><b style="font-size: 35px;">将进酒</b>&nbsp;&nbsp;&nbsp;&nbsp;<b style="font-size: 25px;">君不见黄河之水天上来</b></p>
		
	</br>
	<div class="midd">
		<div class="midd_left">
			<img src="C:/1.png">
		</div>
		<div class="midd_right" >
			<pre>
			君不见黄河之水天上来，奔流到海不复回。</br>
			君不见高堂明镜悲白发，朝如青丝暮成雪。</br>
			人生得意须尽欢，莫使金樽空对月。</br>
			天生我材必有用，千金散尽还复来。</br>
			烹羊宰牛且为乐，会须一饮三百杯。</br>
			岑夫子，丹丘生，将进酒，杯莫停。</br>
			与君歌一曲，请君为我倾耳听。</br>
			钟鼓馔玉不足贵，但愿长醉不愿醒。</br>
			古来圣贤皆寂寞，惟有饮者留其名。</br>
			陈王昔时宴平乐，斗酒十千恣欢谑。</br>
			主人何为言少钱，径须沽取对君酌。</br>
			五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</br>	
			君不见黄河之水天上来，奔流到海不复回。</br>
			君不见高堂明镜悲白发，朝如青丝暮成雪。</br>
			人生得意须尽欢，莫使金樽空对月。</br>
			天生我材必有用，千金散尽还复来。</br>
			烹羊宰牛且为乐，会须一饮三百杯。</br>
			岑夫子，丹丘生，将进酒，杯莫停。</br>
			与君歌一曲，请君为我倾耳听。</br>
			钟鼓馔玉不足贵，但愿长醉不愿醒。</br>
		</pre>
		</div>
	</div>
</div>
</center>
</body>
</html>

2.css代码：

*{margin: 0;padding: 0;}
.div1
{
	width: 100%;
	height: 200px;
}
.nav
{
	width: 100%;
	height: 100px;
}
.nav_left
{
	width: 50%;
	height: 100px;
	float: left;
}
.nav_right
{
	width: 50%;
	height: 100px;
}
.midd
{
	width: 250px;
	height: 450px;
}
.midd_left
{
	width:125px;
	float: left;
}
.midd_right
{
	width: 125px;
}

6.3、结果展示：

在这里插入图片描述

橘子爱吃橘子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天初识HTML

利用多种技术创建页面或者APP等前端界面呈现给用户的过程，是给用户展示的网页，前台界面。多种技术包括以下（还有很多技术没有列举出来）：○ HTML：超文本链接语言○ CSS：层叠样式○ jQuery：写尽量少的代码做尽量多的事情超文本标签语言，是一系列标签，其中标签也可以称为标记或者元素（网页呈现的主要基础），也是描述性文本，可描述表格、文字、动画等HTML分两部分：• 头部:提供浏览器所需要的信息• 主体部分：提供网页显示的主要内容。
复制链接

扫一扫