一、前端三剑客

二、编辑器

三、第一个页面

四、基本标签

五、标签分类

一、前端三剑客

html：完成页面架构的搭建

css：完成页面样式布局

js:完成页面功能

二、编辑器

插件：

插件管理器 ctrl+~ 安装 package control
使用:
安装: ctrl+shift+p =>package: install ** => 搜索插件名
卸载: ctrl+shift+p =>package: remove ** => 选取插件名
退出: esc

三、第一个页面

<!-- 注释 -->

<!-- 标签: 由<>包裹,由字母开头,可以结合合法字符,能被浏览器解析的标记 -->

<!-- 为什么使用标签: 标签具有作用域(名称空间,控制范围), 可以赋予功能 -->

<!-- 一个页面文件就是一个html,有且只有一个html根标签,只有一儿一女(head | body) -->

<!-- 规定文档类型: html代表改文件采用的是h5语法标准 -->

<!-- 文档类型与注释属于 指令 -->

<!doctype html>

<html style="color: red">

    <head>

        <!-- 页面文件头 | 样式表 | 脚本 | 页面表述... | (后勤) -->

        <!-- 设置文件编码格式 -->

        <meta charset="utf-8" />

        <!-- 网页标签的标题 -->

        <title>first page</title>

    </head>

    <body style="color: orange">

        <!-- 页面显示内容都属于body标签 -->

        <!-- 也可以出现样式 | 脚本 -->

        egon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;刘xx <杨虎虎> <<<Zero&gt;

    </body>

</html>

四、基本标签

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>基本标签</title>

    </head>

    <body>

        <!-- 无意义标签 -->

        <!-- div: 最常用的标签,没有之一 (搭建页面架构) -->

        <div></div>

        <!-- span: 文本最常用标签 (构建文本架构:可以直接包裹文本,与可以包裹其他文本类(内联类型的)标签) -->

        <span></span>

        <!-- 标题标签: h1~h6 -->

        <!-- 一般一个页面会出现一次,作为该页面的总标题出现 -->

        <h1>一级标题</h1>

        <!-- h2{二级标题}+h6{六级标签} -->

        <h2>二级标题</h2>

        普通文本

        <h6>六级标签</h6>

        <!-- 段落标签: p -->

        <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>

        <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>

        <!-- 原生标签 -->

        <pre>

            呵   <  asd> \ & ;   呵

        </pre>

        <!-- 分割线 -->

        <hr />

        <!-- 换行 -->

        <br />

        <br />

        <br />

        <hr />

        <!-- 文本类标签 -->

        <!-- 斜体 -->

        <i>斜体</i>

        <!-- 斜体强调 -->

        <em>斜体强调</em>

        <!-- 加粗 -->

        <b>加粗</b>

        <!-- 加粗强调 -->

        <strong>加粗强调</strong>

        <!-- 由ruby和rt两个标签配合使用 -->

        <ruby>

            拼音<rt>pinyin</rt>

        </ruby>

        <!-- span作为文本架构,.删除样式的文本再由具体的文本类标签del嵌套 -->

        <span>$1000<del>$2300</del></span>

        <span>文本<sup>上角标</sup></span>

        <!-- 链接标签 -->

        <!-- href: 标签的全局属性, 超链接, 规定协议 -->

        <!-- 不规定:做路径的拼接 -->

        <a href="https://www.baidu.com" target="_blank">前往百度</a>

        <!-- 图片标签 -->

        <!-- src:数据源, 可以加载网络 | 本地 | 动态 图片 -->

        <!-- alt:资源加载失败的文本提示 -->

        <!-- title:鼠标悬浮产生的文本提示(任意标签都具有该全局属性) -->

        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=276178245,1939662142&fm=11&gp=0.jpg" alt="柯基" title="小柯基">

        <!-- 表格 -->

        <!-- table>(tr>th*2)+(tr>td*2) -->

        <table>

            <tr>

                <th>标题</th>

                <th>标题</th>

            </tr>

            <tr>

                <td>单元格</td>

                <td>单元格</td>

            </tr>

        </table>

        <!-- 表单 -->

        <form>

            <input type="text">

            <input type="password">

        </form>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

    </body>

</html>

五、标签分类

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>标签的分类</title>

</head>

<body>

    <!-- 系统标签 | 自定义标签: 系统没有的满足标签语法的所有标签 -->

    <zero title="XXX" style="color: red">zero</zero>

    <!-- 行块标签(display) -->

    <!-- 块: 换行显示 -->

    <p>测试1</p>

    <p>测试2</p>

    <!-- 行:同行显示 -->

    <span>测试3</span>

    <span>测试4</span>

    <!-- 单结构 | 组合结构 -->

    <div>单结构</div>

    <!-- 被form包裹的input内容可以提交给后台,单独使用的input内容只能在前台(js)使用 -->

    <form action="">

        <input type="text">

    </form>

    <input type="text">

    <!-- 单双标签 -->

    <!-- 双: 首尾分离 -->

    <!-- 主内容:可以包含文本,也可以包含子标签 (具有作用域) -->

    <div></div>

    <span></span>

    <!-- 单: 首尾连体 -->

    <!-- 主功能: 不需要子内容,标签就可以代表所有的功能语义 -->

    <hr />

    <br />

    <!-- input的内容 -->

    <input type="text" value="abc" placeholder="请输入">

</body>

</html>

web开发：web前端初识的更多相关文章

  1. Golang Web开发时前端出现谜之空白换行的坑

    在使用Golang做Web开发时,有时候渲染出来的模板在前台显示时会出现一些奇怪的空白换行,具体特征就是查看css样式表并没有相关定义的空白部分. 分析: 查看出现问题页面的网页源代码,复制空白换行部 ...

  2. Web开发中 前端路由 实现的几种方式和适用场景

    http://blog.csdn.net/xllily_11/article/details/51820909

  3. web开发中 前端模板->JavaScript->Controller->JavaScript相应 的交互方式

    首先画张图了解当下流行的phpweb 数据交互套路: 1,模板与JavaScript的交互 给HTML标签赋予onlick事件,点击后触发js方法,jQuery收集页面信息,分析信息. 2,js与co ...

  4. [Python web开发] Web框架开发基础 (一)

    Python WEB框架 WSGI,WEB Server Gateway Interface,可以看做是一种底层协议,它规定了服务器程序和应用程序各自实现上面接口.Python的实现称为wsgiref ...

  5. springboot的Web开发-Web相关配置

    一:Spring Boot提供自动配置 通过查看WebMvcAutoConfiguration及WebMvcProperties的源码,可以发现Spring Boot为我们提供了如下的自动配置. 1, ...

  6. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  7. WEB开发之路——基础部分

    WEB开发之路 受BBC的<BBC: Brain Story>和<BBC: The Brain - A Secret History>的影响,我一直有志于探究人类大脑,2015 ...

  8. java web开发必备知识

    从各种招聘网站的要求上筛选出了一些java开发的一些基本的要求,对照自身看看有哪些缺陷. java基础 既然是java web开发,java SE肯定要学好了. 多线程,IO,集合等,对队列,缓存,消 ...

  9. 腾讯Web工程师的前端书单

    2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍. JavaScript 入门 <JavaScript权威指 ...

  10. web开发微信文章目录

    Web开发微信文章目录 2015-12-13 Web开发 本文是Web开发微信的文章目录.通过目录查看文章编号,回复文章编号就能查看文章全文. 回复编号查看全文,搜索分类名可以获得该分类下的文章.   ...

随机推荐

  1. 【leetcode】506. Relative Ranks

    problem 506. Relative Ranks solution1:使用优先队列: 掌握priority_queue 和 pair的使用: class Solution { public: v ...

  2. 利用Anaconda搭建TensorFlow环境并在Jupyter Notebook使用

    打开Anaconda Prompt 创建一个tensorflow 虚拟环境:conda create -n tensorflow python=3.6 激活tensorflow虚拟环境activate ...

  3. springboot-定时任务-多线程

    1.配置异步线程池 import java.util.concurrent.Executor; import org.springframework.context.annotation.Bean; ...

  4. Flutter 路由 页面间跳转和传参 返回

    Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...

  5. 用于Python文件转换.exe文件的pyinstaller工具安装

    安装方法: 注:python环境一定要配置好. 1.第一步:下载 官方网站:http://www.pyinstaller.org/downloads.html 此处下载版本为稳定版. 2.第二步:下载 ...

  6. Shell中特殊字符的含义

    $0 这个程式的执行名字 $n 这个程式的第n个参数值,n=1..9 $* 这个程式的所有参数,此选项参数可超过9个. $# 这个程式的参数个数 $$ 这个程式的PID(脚本运行的当前进程ID号) $ ...

  7. FMZ发明者量化平台回测机制说明

    原文连接:https://www.fmz.com/digest-topic/4009 大部分策略在实盘之前都需要回测进行验证,FMZ支持部分品种数字货币现货.期货和永续合约,以及商品期货所有品种.但发 ...

  8. MemCache可视化客户端管理及监控工具TreeNMS

    参考地址:https://www.cnblogs.com/li150dan/p/9529054.html

  9. 编写一个自定义事件类，包含on/off/emit/once方法

    function Event() { this._events = {}; } Event.prototype.on = function(type, fn) { if (!this._events[ ...

  10. [转帖] 飞腾FT2000+ CPU的进展(2019.6)

    中国长城:拟进一步收购飞腾股权,强化信息基础设施国产化平台地位 2019-06-26 09:28 http://www.sohu.com/a/323065095_100016383 今年年中的事情 浪 ...