zoukankan      html  css  js  c++  java
  • 前端(一)—— 前端三种语言、核心标签、常见标签、标签分类

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

    一、前端

    前端即网站前台部分,运在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
  • 相关阅读:
    20155313 杨瀚 《网络对抗技术》实验九 Web安全基础
    20155313 杨瀚 《网络对抗技术》实验八 Web基础
    20155313 杨瀚 《网络对抗技术》实验七 网络欺诈防范
    20155313 杨瀚 《网络对抗技术》实验六 信息搜集与漏洞扫描
    20155313 杨瀚 《网络对抗技术》实验五 MSF基础应用
    20155313 杨瀚 《网络对抗技术》实验四 恶意代码分析
    20155313 杨瀚 《网络对抗技术》实验三 免杀原理与实践
    20155313 杨瀚 《网络对抗技术》实验二 后门原理与实践
    20155313 杨瀚 《网络对抗技术》实验一 PC平台逆向破解(5)M
    20155313 2017-2018-1 《信息安全系统设计基础》课程总结
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9675366.html
Copyright © 2011-2022 走看看