一、前端三剑客

二、编辑器

三、第一个页面

四、基本标签

五、标签分类

一、前端三剑客

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. lexicalized Parsing

    $q$(S $\rightarrow$ NP VP) * $q$(NP $\rightarrow$ NNP) * $q$(VP $\rightarrow$ VB NP) * $q$(NP $\righ ...

  2. FTP与SFTP的区别

    简介 wikipedia - FTP --- FTP File Transfer wikipedia - SFTP --- SSH File Transfer 对比 缩写 名称 协议与端口 安全策略 ...

  3. 什么是sigmoid激活函数？

    上面我们讲了引入激活函数的意义,激活函数有多种,下面我们拿一种激活函数sigmoid来做示例,其他的类似.sigmoid函数表达式如下: ​ 它的函数曲线图是: ​ 看到上面的函数曲线图,可以看出是一 ...

  4. Java学习笔记-Lambda表达式

    Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用简洁的代码来创建只有一个抽象方法的接口(这种接口被称为函数是接口)的实例 意义 自从Java 8开始,Java支持Lambda表达 ...

  5. fatal error C1189: #error : Building MFC application with /MD[d] (CRT dll version) requires MFC sha

    调试程序时出现以下问题:d:\program files (x86)\microsoft visual studio 10.0\vc\atlmfc\include\afx.h(24): fatal e ...

  6. Holy Grail【spfa求最短路】

    题目链接:https://www.jisuanke.com/contest/3004?view=challenges 题目大意: 1.一个无向图,给出六个顶点,添六条边,但是添边是有限制的.每次添边的 ...

  7. DS博客作业--07查找

    目录 DS博客作业--07查找 1.本周学习总结(0--2分) 1.思维导图 2.谈谈你对查找运算的认识及学习体会. 2.PTA实验作业(6分) 2.1.题目1:6-1 二叉搜索树的操作集 (30 分 ...

  8. [转帖]Mysql binlog 介绍

    binlog介绍   1.什么是binlog binlog是一个二进制格式的文件,用于记录用户对数据库更新的SQL语句信息,例如更改数据库表和更改内容的SQL语句都会记录到binlog里,但是对库表等 ...

  9. SQL SERVER 字符串函数 PATINDEX()

    定义: PATINDEX()返回模式在指定表达式中第一次出现的起始位置:如果在所有有效的文本和字符数据类型中都找不到该模式,则返回零. 语法: PATINDEX ( '%pattern%' , exp ...

  10. redis主从复制初识

    一.作用 slave会通过被复制同步master上面的数据,形成数据副本 当master节点宕机时,slave可以升级为master节点承担写操作. 允许有一主多从,slave可以承担读操作,提高读性 ...