一、前端三剑客

二、编辑器

三、第一个页面

四、基本标签

五、标签分类

一、前端三剑客

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. 什么是ECS？

  2. Shell中特殊字符的含义

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

  3. 对ysoserial工具及java反序列化的一个阶段性理解【未完成】

    经过一段时间的琢磨与反思,以及重读了大量之前看不懂的反序列化文章,目前为止算是对java反序列化这块有了一个阶段性的小理解. 目前为止,发送的所有java反序列化的漏洞中.主要需要两个触发条件: 1. ...

  4. 第35课.函数对象分析（"()"重载）

    1.编写一个函数 a.函数可以获得斐波那契数列 b.每调一次返回一个值 c.函数可以根据需要重复使用 2.函数数对象 a.使用具体的类对象取代函数 b.改类的对象具备函数调用的行为 c.构造函数指具体 ...

  5. 洛谷P3381 最小费用最大流模板

    https://www.luogu.org/problem/P3381 题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用 ...

  6. 飞腾PC机器与奔腾G645的PC机器以及E5-2630V4虚拟机内存性能简单对比

    1. 对比工具 sysbench 2. 对比命令 sysbench --test=memory --memory-total-size=12G --num-threads= run 3 安装方式 #u ...

  7. Oracle数据库应用系统结构

    在安装.部署oracle数据库软件时,需要根据不同应用结构(即硬件平台.操作系统平台)采用不同的方法(基本安装.高级安装),下面介绍几种常见的应用结构. 1.应用系统的数据接口 客户端应用程序或应用服 ...

  8. 获取 request 中用POST方式"Content-type"是"application/x-www-form-urlencoded;charset=utf-8"发送的 json 数据

    request中发送json数据用post方式发送Content-type用application/json;charset=utf-8方式发送的话,直接用springMVC的@RequestBody ...

  9. （二十五）JDBC多表查询

    java易错点 一对多 VS 多对一 VS 多对多 级联 多表增删改 多对多表设计语句(学生老师) java易错点 数组初始化的时候,可以用 {} 赋值,初始化以后,只能用 new Object[] ...

  10. 西安区域赛　Ｄ.Miku and Generals 二分图＋背包

    Miku and Generals Describe "Miku is matchless in the world!" As everyone knows, Nakano Mik ...