WEB前端第一天

简介: WEB前端第一天

简单认识一下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>

语法格式:

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

</p>表示标签结束

align表示属性名

center表示属性值

标签的定义:

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

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

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

4、标签不区分大小写

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

自结束标签

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

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

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

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

ctrl+/可以生成注释

网页的分类

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

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


第三章 HTML的编写

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

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

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

<b></b>                     字体加粗


<strong></strong>     字体加粗


<em></em>                斜体


<i></i>                        斜体


<u></u>                      下划线


<del></del>                删除线


<br>                           换行


<p>                            段落

<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。


<sub></sub>        表示文字下标


<sup></sup>        表示文字上标


<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>

优化之后:

相关文章
|
3天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
16 0
|
3天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
22 0
|
2天前
|
前端开发 搜索推荐 JavaScript
Web前端网站(二)- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配,文字渐变的动态效果,图片360度旋转展示特效等等等;每一次的按钮点击都是满满的惊艳 ~ ~ ~
19 4
Web前端网站(二)- 主页
|
2天前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
19 1
Web前端网站(一) - 登录页面及账号密码验证
|
20小时前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
5天前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
10 3
|
6天前
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
17 1
|
3天前
|
编解码 前端开发 JavaScript
WEB前端响应式布局之BootStarp使用
WEB前端响应式布局之BootStarp使用
14 0
|
3天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
12 0
|
6天前
|
前端开发 JavaScript 安全
Web前端开发中的三大主流框架
Web前端开发中的三大主流框架