前端
什么是前端
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript。
前端开发技术栈
HTML
- 超文本标记语言
- 负责完成页面的结构
- 文件后缀:.html .htm
"超文本"指的是页面内可以包含图片、链接、程序等非文字元素
CSS
- 级联样式表
- 负责页面的风格设计,样式、美观
- 文件后缀:.css
JavaScript
- 浏览器脚本语言,可以编写运行在浏览器上的程序
- 负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM),从后端获取数据(Ajax),渲染页面等
- 文件后缀:.js
前端三剑客
HTML
标记语言
? 标记语言为非变成语言,不具备变成语言具备的程序逻辑,遇到重复操作只能全部手写
组成
html为前端页面的主体,由标签、指令、转义字符(实体)组成
标签
标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合)
<zero>html</zero>
<a1>html</a1>
<a_1>html</a_1>
指令
指令:被<>包裹,以!开头的可以被浏览器解析的标记
<!DOCTYPE html>
<!--html注释-->
转义字符
被&与; 包裹的特殊字母组合或#开头的十进制数
 ; <;
CSS
? CSS为前端页面的样式,由选择器、作用域与样式块组成
选择器
选择器:由标签/类/id单独或组合出现
<style>
/*选择器 zero*/
zero{
color : red;
}
</style>
作用域
{}内部区域
<style>
/*作用域{}*/
zero{
color : red;
}
</style>
样式块
满足css链接语法的各种样式
<style>
/*样式块color:red;*/
zero{
color : red;
}
</style>
JS
实实在在的编程语言,完善的语法,可以完成复杂的程序逻辑
BOM:js操作浏览器
DOM:js操作页面文档
ES:js语法(ECAMScript)
<script type="text/javascript">
// js注释:可以省略; 但不建议
alter("我真帅");
</script>
页面
模板
<!DOCTYPE html>
<html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>页面</title>
</head>
<body>
</body>
</html>
模板解读
DOCTYPE:指定文档类型,规定html标签语法
html:文档根标签,标注着文档(页面)的开始与结束
head:文档头标签,可以引用脚本文件、指定演示表、书写代码逻辑块、提供元信息
body:文档主体标签,包含文档所有文本与超文本内容
title:文档tag标题标签,设置文档tag的标题内容
其他核心模板标签
meta(元标签)
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="name,key,aa,搜索关键词"/>
<meta name="description" content="网站相关内容">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
link(链接标签)
外联样式表
<link rel="stylesheet" type="text/css" href="style.css">
文档tag图标
<link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico">
style(脚本标签)
<script type="text/javascript"></script>
HTML常用标签
无语义标签
<div></div>
<span></span>
常用语义标签
<hn>标题</hn>
<p>段落</p>
<pre>原文本</pre>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!-- br换行 hr分割线 -->
<br>好<br>的<br>
<hr>呵<hr>呵<hr>
文本标签
<!-- i:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 -->
<i>斜体,</i>
<em>以斜体方式强调</em>
<b>加粗</b>
<strong>以加粗的方式强调</strong>
<!-- p:段落标签具有具体区域,成段出现,段落之间存在段落间距 -->
<p>段落标签</p>
<p>段落标签</p>
<p> 123 4242 4232</p>
<!-- 原样文本标签:会保留所有字符,原样显示 -->
<pre>大萨达 请问 1232 4 4 </pre>
<!-- 样式具有下划线 -->
<ins>插入的文本</ins>
<!-- 样式具有中划线 -->
<del>删除的文本</del><br>
<!-- 应用 -->
¥ 998 <del>1999</del><br>
<!-- 上角标和下角标 -->
<!-- 10的平方 -->
<span>10<sup>2</sup></span><br>
<!-- 水分子 -->
<span>H<sub>2</sub>O</span><br>
<!-- 右标:小号字体 -->
<span>你很帅<small>真的是帅</small></span><br>
<!-- 拼音 -->
<ruby>
牛逼<rt>niǔ bī</rt>
</ruby>
其他标签
<section></section> 块
<small></small> 小号字体
标签分类
单双标签
<!-- 1.单双标签 -->
<!-- 标签都需要闭合 -->
<!-- 单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合)==》 但标签一般具有特殊功能,但标签主功能 -->
<!-- 双标签:闭合操作有对应的结束标签完成,也可以省略(强烈不建议)==》双标签一般具有文本(普通文本与超文本),双标签主内容 -->
<br>
<div>123<!-- </div> -->
<div>456</div>
<!-- </div> -->
行块标签
<!-- 2.行块标签 -->
<!-- 行:内联,不具备自身宽高,通常同行显示 -->
<!-- 块:块级,具备自身宽高,通常换行显示 -->
<!-- 自定义标签均属于内联标签 -->
<!-- span{我是span$}*2+div{我是div$}*2 -->
<span>我是span1</span>
<a href=#> hello </a>
<div>我是div1</div>
<p> p标签</p>
组合标签
<!-- 3.组合标签 -->
<!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果 -->
<ruby>
你真棒<rt > <h2>J</h2> <h2>8</h2> </rt>
</ruby>
原文地址:https://www.cnblogs.com/layerluo/p/9676717.html
时间: 2024-11-05 22:02:31