web_day1

Z.959

已于 2022-10-24 19:06:00 修改

阅读量453

点赞数

分类专栏： web前端

于 2022-10-24 18:56:14 首次发布

本文链接：https://blog.csdn.net/qq_56751692/article/details/127498510

版权

HTML CSS JavaScript 前端框架网页布局

关键词由CSDN通过智能技术生成

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么web前端

Web前端一般由多种开发技术制作，是给用户展示的网页页面，即网站的前台部分。

那这里的所谓的多种开发技术就是我们本次课程要学习的东西，其中包含：

HTML
CSS
JavaScript
jQuery
BT（Bootstrap）

更高端的前端技术：

Angular
AngularJS
VUE
React
webpack
nodejs

2.什么HTML

HTML全称Hyper Text Mark-up Language 翻译过来就是超文本标签语言，标签也可称作标记或者元素。

HTML是目前网络上运用最广泛的前端技术之一，也是网页构成最主要的部分之一。

HTML文本是由HTML标签构成的描述性文本，HTML文本可以表述文字表格声音图形动画链接等。

HTML是WEB编程的基础，HTML之所以被称为超文本标签语言，是文本包含了所谓的“超级链接”和媒体文件。

HTML结构由头部（head）和主体（body）构成

头部描述了浏览器所需的信息
主体包含要说明的具体内容

需要说明的是HTML语言不是一种编程语言而是一种描述性语言，用于描述超文本内容的显示方式。比如，文字以什么颜色大小显示，图片以什么尺寸位置显示。

3.HTML常用的标签

html标签：表示网页的开始，应该把它放在最外层，其他所有的标签出去文件头声明都该放在html标签内。

head标签：表示头部标签，通常放title、meta、style等标签。从这些名字就能看出来，head标签的作用是用来定义页面属性。

meta标签：下载head标签内，meta提供了网页的信息，包括作者、关键字、网页编码、自动刷新等信息。

常用的网页编码有：GB2312 UTF-8 BIG5 GBK

常用标签

strong/b：都是加粗的效果，strong有强调语气的意味

em/i ：加斜文本的标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。

u表示下划线，del的表示删除线。

br标签：表示换行 hr标签表示分割线

p标签：表示段落

sub表示文字下标；sup表示文字的上标

pre标签原样输出文本内容

span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。

行内标签：占据内容部分，对宽高等属性不能直接起作用。

hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="lz"/>
		<meta name="description" content="展示web前端页面"/>
		<meta name="keywords" content="教学|调教"/>
		<title>这是一个标题</title>
		<style>
			/*  */
		</style>
	</head>
	<body>
		<h1>加粗演示</h1>
		<B>世界经不起解构，</B><strong>自我是如此，他人亦如此</strong><br />
		<h2>斜体演示</h2>
		<i>终有一天，我们总会看见自己的平庸，会看见原来就是这样的人生也是一直在熠熠闪光</i><em>我的朋友告诉我</em><br />
		<h2>下划线演示</h2>
		<u>人不是怕死，人是怕疼</u><br />
		<h3>删除演示</h3>
		<del>告诉我</del><br />
		<h4>行内演示</h4>
		<span style="border: 1px solid red;width: 300px;display: inline-block;">span</span><hr />
		<h5>上下标演示</h5>
		O<sub>2</sub>---X<sup>2</sup>
		<h6>p标签</h6>
		<p>人们总是能发现自己想发现的，相信自己愿意相信的
		以前，爱过一个人，后来不在爱</p>
		<p>以前，也觉得是知己，后来不在我的世界
		世界就是这样，把我推向没有人的世界，我却逃不开自己身为人的事实
		我的朋友告诉我，书是你一辈子的朋友，不离不弃</p>
		<pre style="color: red;">
1233
456
789
		</pre>
	</body>
</html>

效果：

div标签是一个标准的块标签，主要用来布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 		<div id="top" style="height: 100px;border: 1px solid red"></div>
		<div id="content" style="height: 300px; border: 1px solid green;"></div>
		<div id="buttom" style="height: 100px;border: 1px solid blue;"></div> -->
		
		<header id="top" style="height: 100px;border: 1px solid red"></header> 
		<article id="content" style="height: 300px; border: 1px solid green;"></article> 
		<footer id="buttom" style="height: 100px;border: 1px solid blue;"></footer> 
		<!-- src:source -->
		<img src="" alt=""/>
	</body>
</html>

效果：

img标签：图片主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使用居多。

<img src="images/rose.jpg"> 
<img src="./images/rose.jpg">
<img src="c://images/rose.jpg">绝对路径查找,只是这台电脑的路径
<img src="http://www.xianoupeng.com/..."> 网络路径

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="top">
			<h1 style="display: inline-block;">将进酒</h1>
			<h2 style="display: inline-block;">君不见黄河之水天上来</h2>
		</div>
		<div id="img" style="width: 29%;float: left;" >
			<img src="pic/李白.png"/></div>
		<div id="con" style="width: 70%;float: right;">
			<p>君不见黄河之水天上来,奔流到海不复回。</p>
			<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
			<p>人生得意须尽欢，莫使金樽空对月。</p>
			<p>天生我材必有用，千金散尽还复来。</p>
			<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
			<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
			<p>与君歌一曲，请君为我倾耳听。</p>
			<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
			<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
			<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
			<p>主人何为言少钱，径须沽取对君酌。</p>
			<p>五花马、千金裘,</p>
			<p>呼儿将出换美酒，与尔同销万古愁。</p></div>
	</body>
</html>

效果：

Z.959

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web_day1

em/i ：加斜文本的标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。HTML是WEB编程的基础，HTML之所以被称为超文本标签语言，是文本包含了所谓的“超级链接”和媒体文件。meta标签：下载head标签内，meta提供了网页的信息，包括作者、关键字、网页编码、自动刷新等信息。html标签：表示网页的开始，应该把它放在最外层，其他所有的标签出去文件头声明都该放在html标签内。div标签是一个标准的块标签，主要用来布局。
复制链接

扫一扫

专栏目录