什么是web前端
Web前端是给用户展示的网页页面,即网站的前台部分,可能包含设计、特效、用户交互等。web即全球广域网,也称为万维网,是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
web前端的多种技术:
HTML、CSS、JavaScript、jQuery(write less do more)、BT(bootstrap)
更高端的技术:
AngurlarJS、VUE、React、webpack、nodeJs
什么是html
html: hyper text markup language超文本标签语言,这里的标签也可称为标记或元素。是目前网络运用最广泛的技术之一,也是网页呈现的主要基石。是一个描述性文本,可以描述文字、表格、声音、视频、动画、链接。
html分两部分:
①头部head标签:提供的是浏览器所需要的信息
②主体部分body:提供网页的主要内容
html的常用标签
加粗标签:b/strong , strong 带有语气成分。
斜体:i/em
下划线: underline
删除线:del
换行:br
段落标签:p
格式化输出:pre
行内标签之一,用来修饰被它所包裹的内容:span
块标签之一:div
行内标签:修饰他所包裹的内容,不能直接支持宽高属性。
块标签:它的内容即使不满一行,也会沾满一行,支持宽高属性。
自结束标签:不需要结束标签的标签。如果有html文件头声明斜杠可以省略。
下标签:sub
上标签:sup
分割线:hr
标题标签:hn=h1-h6, h1标签最大,依次减小
按输入的格式输出:pre
语义化标签
优点:
增强代码可读性,提高程序员的维护效率,降低维护成本。
可以为搜索引擎起到引导作用。
多媒体标签
使用image标签显示图片信息
第一个html页面制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>《将进酒》</title>
</head>
<body>
<div style="position:fixed; top:0;" >
<h1 style="display: inline;">将进酒</h1>
<h2 style="display: inline;">君不见黄河之水天上来</h2>
</div>
<p> </p>
<img src="C:\Users\jw\Desktop\libai.png" style="float:left; height: 500px;">
<div style="height: 700px; position:fixed; bottom:0; right:0;">
<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>
<p>呼儿将出换美酒,与尔同销万古愁。</p>
</div>
</body>
</html>
效果展示: