前端（一）—— 前端三种语言、
2021-06-23 02:03
id="Label3" contentScore="1834">
标签：取数 分类 宽度 tag sheet 脚本语言 图片 ble content
前端三种语言、核心标签、常见标签、标签分类
一、前端
前端即网站前台部分，运在PC端，移动端等浏览器上展现给客户浏览的的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。
二、HTML、CSS、JavaScript
1、HTML
（1）html是超文本标记语言
（2）不是编程语言，不具备编程语言的具备的程序逻辑，负责完成页面的结构
（3）文件后缀是 .html 或 .htm
html组成：标签、指令、实体
1.标签：由包裹，以字母开头可以结合合法字符可以被浏览器解析的标记(纯数字或者字母与数字的组合)
zero>qqqqqqzero>
2.指令：被包裹，以!开头的可以被浏览器解析的标记
doctype html>
3.实体：被&;包裹的#开头的十进制数或特殊字母组合
<www>
2、CSS
（1）css是级联样式表
（2）不是编程语言，不具备编程语言的具备的程序逻辑，负责页面的风格设计，样式美观
（3）文件后缀是 .css
css由选择器、作用域、样式块组成 选择器：由标签、类、id单独或组合出现 作用域：一组大括号包含的区域 样式块：满足css连接语法的众多样式 style> /*zero 选择器，{} 作用域 ，color 样式块*/ zero{ color: red; /*css中最后一条样式的 ; 可以省略*/ background-color: blue } style>
3、JavaScript
（1）JS是浏览器脚本语言，可以编写运行在浏览器上的程序
（2）负责页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM)，从后端获取数据 (Ajax)，渲染页面等
（3）文件后缀是 .js
JS组成：BOM、DOM、Ajax、渲染页面等
BOM:js操作浏览器
DOM:就是操作页面文档
ES:js语法(ECAMScript)
script type="text/javascript">
// js注释 可以省略;(尽量写)
alert(‘ggggggg‘);
script>
三、页面的基础模板
1、h5语法特点
- 不区分大小写
- 有很多系统标签,一般都具有语义
- 可以随意定义自定义标签
- h5内容不保留空白字符(制表符)
- 提倡小写
doctype html>
html>
head>
meta charset=‘utf-8‘ />
title>简单模板title>
head>
body>
body>
html
四、核心模板标签
1、元标签（meta）
meta charset="utf-8" />
meta name="keywords" content="新浪,门户,资讯" />
meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯" />
meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
2、链接标签（link）
link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
link rel="stylesheet" type="text/css" href="style.css" />
3、样式标签（style）
style>style>
4、脚本标签（script）
script type="text/javascript">script>
五、常用标签
1、无语义标签
div>div>
span>span>
2、常用语义标签
h1>一级标题h1>
h2>二级标题h2>
h6>六级标题h6>
正文
br>haodebr>
hr>1hr>2hr>
3、文本标签
i>斜体i>
em>以斜体方式强调em>
b>加粗b>
strong>以加粗方式强调strong>
p>段落标签p>
p>段落标签p>
pre>123 456 7pre>
ins>插入的文本ins>
del>删除的文本del>
span>10sup>2sup>span>
span>Hsub>2sub>Ospan>
span>你好small>好small>span>
ruby>
牛皮rt>niupirt>
ruby>
section>section>
六、标签分类
1、单标签 / 双标签
单标签：单标签在本身标签标识结束，主要应用场景为功能性标签,结束标志可省略
双标签：双标签有成对的结束标识，主要应用场景为内容性标签,结束标志可省略（不建议）
meta charset="UTF-8" />
meta charset="UTF-8">
div>div1div>
2、行标签 / 块标签
行标签：内联标签，内联标签本身不具备宽度，通常同行显示
块标签：块级标签，块标签拥有本身宽度，通常独自占据一行
span>span1span>
span>span2span>
div>div1div>
div>div2div>
3、单一 / 组合标签
单一标签：单独出现，表示具体的功能或展示具体的内容
组合标签：配合使用，才能产生相应的内容与效果
ruby>
号
doctype html>
html>
head>
meta charset="utf-8" />
meta name="keywords" content="新浪,资讯" />
meta name="description" content="新浪微博是……" />
meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
title>第一个页面title>
head>
body>
body>
html>
前端（一）—— 前端三种语言、
标签：取数 分类 宽度 tag sheet 脚本语言 图片 ble content
原文地址：https://www.cnblogs.com/linagcheng/p/9675366.html