前端(一)—— 前端三种语言、

前端三种语言、核心标签、常见标签、标签分类

一、前端

前端即网站前台部分,运在PC端,移动端等浏览器上展现给客户浏览的的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript。

二、HTML、CSS、JavaScript

1、HTML

(1)html是超文本标记语言

(2)不是编程语言,不具备编程语言的具备的程序逻辑,负责完成页面的结构

(3)文件后缀是 .html 或 .htm

html组成:标签、指令、实体

1.标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯数字或者字母与数字的组合)
<zero>qqqqqq</zero>
<!-- html注释 -->
2.指令:被<>包裹,以!开头的可以被浏览器解析的标记
<!doctype html>
3.实体:被&;包裹的#开头的十进制数或特殊字母组合
<www&gt;

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内容不保留空白字符(制表符)
  • 提倡小写
<!-- 文档类型; 标签语法为html5 -->
<!doctype html>
<!-- html:文档根标签 -->
<html>
<!-- html只有一儿一女:head,body,所以可以省略缩减 -->
<!-- html语法中没有明确规定缩减规则,但从美观可读性出发,开发者要严格遵循缩减 -->
    <head>
    <!-- 包含内容:样式表,脚本,元信息,内嵌代码块 -->
        <meta charset=‘utf-8‘ />
        <title>简单模板</title>
    </head>
    <body>
    <!-- 包含内容:几乎一切内容 -->
  </body>
</html

四、核心模板标签

1、元标签(meta)

<!-- 字符编码 -->
<meta charset="utf-8" />

<!-- SEO -->
<meta name="keywords" content="新浪,门户,资讯" />
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯" />

<!-- 移动适配 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

2、链接标签(link)

<!-- tag图片 -->
<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><div>

<!-- span 最常用的纯文本标签 -->
<span></span>

2、常用语义标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文

<!-- 换行 -->
<br>haode<br>

<!-- 加入分割线 -->
<hr>1<hr>2<hr>

3、文本标签

<!-- i 很常用的标签,一般不作文斜体文本使用,作文字体图片使用 -->
<i>斜体</i>
<em>以斜体方式强调</em>   

<b>加粗</b>
<strong>以加粗方式强调</strong>

<!-- p 段落标签具有具体区域,成段出现,段落之前崔仔段落间距 -->
<p>段落标签</p>
<p>段落标签</p>

<!-- pre 原样文本标签,保留所有字符,原样输出 -->
<pre>123   456                7</pre>

<!-- ins样式具有下划线 -->
<ins>插入的文本</ins>

<!-- del样式具有中划线 -->
<del>删除的文本</del>

<!-- sup上标,下面效果10的平方 -->
<span>10<sup>2</sup></span>

<!-- sub是下标,下面效果水分子 -->
<span>H<sub>2</sub>O</span>

<!-- small小号字体,下面效果右边小号字体 -->
<span>你好<small>好</small></span>

<!-- ruby与rt组合,拼音 -->
<ruby>
    牛皮<rt>niupi</rt>
</ruby>

<!-- 块 --><section></section>

六、标签分类

1、单标签 / 双标签

单标签:单标签在本身标签标识结束,主要应用场景为功能性标签,结束标志可省略
双标签:双标签有成对的结束标识,主要应用场景为内容性标签,结束标志可省略(不建议)

<!-- 单标签 -->
<meta charset="UTF-8" />
<meta charset="UTF-8">

<!-- 双标签 -->
<div>div1</div>

2、行标签 / 块标签

行标签:内联标签,内联标签本身不具备宽度,通常同行显示
块标签:块级标签,块标签拥有本身宽度,通常独自占据一行

<!-- 行标签 -->
<span>span1</span>
<span>span2</span>

<!-- 块标签 -->
<div>div1</div>
<div>div2</div>

3、单一 / 组合标签

单一标签:单独出现,表示具体的功能或展示具体的内容
组合标签:配合使用,才能产生相应的内容与效果

<!-- 组合标签必须组合出现,协同下才能显示产生相应的内容和效果 -->
<ruby>
    号<<rt>hao</rt>
</ruby>

<!doctype html>
<!-- html:文档根标签 -->
<html>
<!-- html只有一儿一女:head,body,所以可以省略缩减 -->
<!-- html语法中没有明确规定缩减规则,但从美观可读性出发,开发者要严格遵循缩减 -->
<head>
    <!-- 包含内容:样式表,脚本,元信息,内嵌代码块 -->

    <!-- 字符编码 -->
    <meta charset="utf-8" />
    <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> -->

    <!-- SEO -->
    <meta name="keywords" content="新浪,资讯" />
    <meta name="description" content="新浪微博是……" />

    <!-- 移动适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <!-- tag图片 -->
    <!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    <title>第一个页面</title>
</head>
<body>
    <!-- 包含内容:几乎一切内容 -->
</body>
</html>

原文地址:https://www.cnblogs.com/linagcheng/p/9675366.html

时间: 2024-10-29 09:37:08

前端(一)—— 前端三种语言、的相关文章

前端上传图片的三种方法

前端上传图片的三种方法 Django框架下,在前端上传文件,保存在数据库,并在前端不刷新页面显示上传图片. 利用XMLHttpRequest 对象和FormData对象上传文件 Ajax上传文件 基于form表单和iframe自己实现ajax请求 1.首先创建数据库表 class Img(models.Model): path = models.CharField(max_length=128) 更新数据库 >python manage.py makemigrations >python ma

一个功能,两个平台,三种语言 -(iOS,Swift,Android)App代码实现对比篇

-调研 话说移动互联网正值风起云涌期间,各路编程高手都是摩拳擦掌,何况企业公司都开始接受现实,走移动办公,信息云端,大数据处理的步伐,在这本该三足鼎立的时刻,微软显得有点步履蹒跚,导致移动端最值得进军的平台被iOS 和 Android 几乎瓜分,这不符合历史轨迹啊,希望 WP 能厚积薄发,重回当年PC时代的辉煌. -前序 这里就不再指点江山,直奔主题吧,来看看做同样一个功能,在iOS平台和Android平台都是具体如何实现的,代码是如何写的,这里有个分支就是iOS平台开发又分为Objective

前端数据流文件下载三种方式

1.直接使用get请求方式进行下载: window.open(`${url}?${qs.stringify(param)}`, '_blank'); 2.使用form 表单post请求进行下载: const postDownloadFile = (action, param) => { const form = document.createElement('form'); form.action = action; form.method = 'post'; form.target = 'bl

Python Java Javascript三种语言的不同之字符串

Python 中以单引号或者双引号括起来的文本 Java 中只能是通过双引号括起来 Javascript 则与Python相同可以通过单引号或者双引号括起来 Python 中跨越多行的文本可以通过"""XX""" Java 则不支持这种跨越多行的文本 JavaScript 可以·XXX·来表示 ,注:'·'是通过制表符的上面的键,即1的左边的键 还是觉得Java没有跨越多行的文本的功能还是有一点不方便

ASP、JSP、PHP 三种技术比较

ASP.JSP.PHP 三种技术比较 目前,最常用的三种动态网页语言有ASP(Active Server Pages),JSP(JavaServer Pages),PHP (Hypertext Preprocessor). 简 介 : ASP全名Active Server Pages,是一个WEB服务器端的开发环境,利用它可以产生和执行动态的.互动的.高性能的WEB服务应用程序.ASP采用脚本语言VBScript(Java script)作为自己的开发语言. PHP是一种跨平台的服务器端的嵌入式

python&amp;powershell&amp;shell三种方式实现微信报警

运维中大家会碰到异常需要告警时,目前流行方式是微信告警,根据运维精简化需要(不安装不必要应用,一般应用服务器默认安装的脚本语言执行,省去过多安装过程),做了以下三种语言脚本供大家参考:实现功能:给微信发短信,三个参数,第一个参数为群发(值为1)还是单独发送(值为2):第二个参数为用户ID,如群发,值为组id号,如网上交易组id为2,,如单独发送,值为账号,如道然id为daoran,无大小写区分.1.python大家最熟悉的语言,跨平台,但需要安装包.#!/usr/bin/python -- co

ORACLE SQL前端补0的三种方式。

前端补0的三种方式. select lpad(sal,8,'0') from emp;select to_char(sal,'00000000') from emp;select substr('00000000'||sal,-8) from emp;

[前端]创建新元素的三种方法

第一种:通过text/HTML var txt1="<h1>Text.</h1>"; 第二种:通过jQuery var txt2=$("<h2></h2>").text("Text."); 第三种:通过JavaScript/DOM var txt3=document.createElement("h3");txt3.innerHTML="Text.";

前端动画效果实现的三种方式

第一种,js中setTimeout和setintervel,把动画元素设置position:absalute,然后操作left.top来移动.此种方法内存消耗大,显示效果差,不推荐. 第二种,CSS3中的animation动画,添加动画@keyframs name {0% {'left','0px'} 50% {'left','100px'}}.此种方法可以实现的效果多,旋转移动,可以实现精细化动画,推荐使用. 第三种,CSS3中的transition过渡,设置过渡时间,通过js添加CSS属性t