WEB前端第一天

Healer。。

已于 2022-10-25 19:06:50 修改

阅读量1.1k

点赞数

文章标签：前端 javascript jquery 1024程序员节

于 2022-10-25 18:53:39 首次发布

本文链接：https://blog.csdn.net/m0_66993332/article/details/127476374

版权

简单认识一下web前端

web前端就是用多种技术制作，用来给用户展示的网页也被称作网站的前台部门。

HTML：（hyper text markup language）超文本表记语言，不具备编译，只是一个文本表达

CSS：装饰器用来修饰HTML，美化网页，是一堆数据，只有结合HTML才会有相对应的用处

JavaScript：一种编程语言

jQuery：一种代码库

BT（bootstrap）：一种开源的代码库，很好的渲染前台网页

JavaScript框架：AugurlarJS、VUE、React、webpack

第一章 HTML

什么是HTML？

HTML是一种超文本标记语言，标记也可以称作标签或者元素。它也是目前网络上使用最广泛之一的，也是最主要的基石。

它是一个描述性文本，浏览器通过这个描述性文本渲染和呈现网页。

它之所以被称为超文本语言是因为它所拥有的“超级链接”和媒体文件。它能够展示文字、表格、声音、图像、动画等等。

注意：HTML并不是一个编程语言，它是一个描述性的文本！

HTML的特点：简单灵活、可扩展性强、平台无关性（和你所使用的系统是无关的）

第二章运行环境的配置以及浏览器的介绍

运行环境：有浏览器即可

开发环境：建议使用记事本工具

什么是浏览器？

浏览器是渲染和呈现网页的软件。

web前端的地位：

作为一个网站产品，前端页面用户可以直接看到。前端页面可以将文字、图片、视频等内容信息，通过程序语言整合到一个前端页面中，通过用户访问，将网站的产品以及服务展示到用户的面前，从而与用户建立沟通的渠道。

B/S：优点：轻便

HTML的语法结构

语法结构：HTML标签

<标签属性 = "值">内容</标签>

<p align = "center">标签内容</P>

语法格式：

<p align = "center">标签内容</p>
<p align = "center">表示标签开始

表示标签结束
align表示属性名
center表示属性值

标签的定义：

1、标签通常是由开始标签和结束标签构成，自结束标签例外

2、标签可以由属性，属性必有值

3、开始标签和结束标签之间包裹的内容成为区域

4、标签不区分大小写

标签一般会成对出现，但是也存在自结束标签，例如：

自结束标签

以下两种写法都是对的，要不要斜杠都能正常运行。
< img >
< img/ >
< input >
< input/ >

为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

就像<meta> </meta>这就是一个字节数标签。

ctrl+/可以生成注释

网页的分类

静态网页：是指在不修改源码的前提下，不论何时何地去访问都将显示相同的内容

动态网页：通过用用户提交的信息给网站，而反馈出的页面结果

第三章 HTML的编写

div和span是没有语义的，它们是一个盒子，用来装内容

特点：div标签用来布局，但是现在一行只能放一个div

其中div占一整行，而span占一格

 字体加粗

字体加粗

斜体

斜体

下划线

<del></del> 删除线

换行

段落

<html>
  <head>
    <meta charset = "utf-8">
    <title>段落</title>
  </head>
  <body>
    <p align = "center">
      <font color = "#ff0000">第一行</font>
    </p>
    <p align = "left">第二段落</p>
  </body>
</html>

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

ont：标签用来修饰字体 color表示字体的颜色 “#ff0000”是颜色值，表示红色。

注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699。

表示文字下标

表示文字上标

<pre></pre> 表示按照原样输出文本内容

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

语义化标签

语义化标签的优点：

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

2、可以为搜索引擎起到引导作用。

多媒体标签

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

作业：

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