• 前端(一)—— 前端三种语言、核心标签、常见标签、标签分类


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

    一、前端

    前端即网站前台部分,运在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.实体:被&;包裹的#开头的十进制数或特殊字母组合   
    &#60;www&gt;

    [ 转义字符 ]:http://tool.oschina.net/commons?type=2

    字符十进制转义字符
    " &#34; &quot;
    & &#38; &amp;
    < &#60; &lt;
    > &#62; &gt;
    不断开空格(non-breaking space) &#160; &nbsp;
    在html代码中每输入一个转义字符&nbsp就表示一个空格,输入十个&nbsp,页面中就显示10个空格位置。
    
    而在html代码中输入空格,不管输入多少个空格,最终在页面中显示的空格位置只有一个。

    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>
    View Code
  • 相关阅读:
    P1073 最优贸易
    window.btoa()方法;使字符编码成base64的形式
    centOs7 忘记root密码
    window.addEventListener()/window.postMessage(”text“, '*')
    $(function(){})理解
    跨域资源共享/option 请求产生原因
    Angular: Can't bind to 'ngModel' since it isn't a known property of 'input'问题解决
    TypeScript
    盒子模型
    理解事件捕获等
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9675366.html
Copyright © 2020-2023  润新知