【web前端作业】

最新推荐文章于 2023-03-23 22:43:24 发布

航沐忆

最新推荐文章于 2023-03-23 22:43:24 发布

阅读量482

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_56724164/article/details/127523013

版权

web前端第一次作业

第一项：课堂总结

什么是Web前端：

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

什么是HTML：

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

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

HTML文本是由HTML标签构成的描述性文本，HTML文本可以表述文字表格声音图形动画链接等。
HTML是WEB编程的基础，HTML之所以被称为超文本标签语言，是文本包含了所谓的“超级链接”和媒体文件。
HTML结构由头部（head）和主体（body）构成
- 头部描述了浏览器所需的信息
- 主体包含要说明的具体内容

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

HTML标签

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

<html></html>

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

<head></head>

主体标签，网页上所有要显示的内容都放在这个标签内。

<body></body>

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

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

<meta>

strong/b 标签

这俩标签显示效果一样，都是加粗的效果，strong有强调语气的意味，但对我们程序员来说显示效果一致的话，选简单的。主要使用b标签表加粗。

<strong>粗体</strong>
<b>粗体</b>

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

<em>斜体</em>
<i>斜体</i>

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

<u>下划线</u>
<del>删除线</del>

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

<br>
<hr>

p标签：表示段落

两个相邻的p标签之间会空一行，align是p段落的一个属性，right center left对align的值分别代表右对齐中心对齐和左对齐。p标签与br标签有一些相似都能换行，但是br换行时行与行之间不空行。

<p></p>

sub、sup、pre、span标签

sub表示文字下标；sup表示文字的上标；pre标签原样输出文本内容；span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<span style="border: 1px solid red;width: 300px;display: inline-block;">
			一切的一切都是那么和谐美丽，相互映衬。</span>
		0<sub>2</sub>
		10<sup>5</sup>
		<pre>
	静夜思 --李白
	床前明月光
	疑是地上霜
	举头望明月
	低头思故乡
		</pre>
	</body>
</html>

运行结果：

在这里插入图片描述

hn、div标签

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

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

块标签：占据整行空间，对宽高等属性生效。

  <body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>  
    <div></div>
  </body>

语义化标签

优点：

增强代码可读性，提高程序员的维护效率，降低维护成本。

可以为搜索引擎起到引导作用。
多媒体标签

img标签

img标签用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址

<img src="">

第二项：使用HTML标签制作页面

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