一、前端三剑客

二、编辑器

三、第一个页面

四、基本标签

五、标签分类

一、前端三剑客

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. 遍历日期的Linux Shell脚本

    #! /bin/bash date=$1 eddt=$2 while [ $date -le $eddt ]; do echo $date date=$(date -d "${date}+1 ...

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

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

  3. SQLAlchemy如何筛选值为None的列？那么django呢

    示例 from sqlalchemy import create_engine, MetaData, and_, or_, TIMESTAMP Plugin.query.filter(and_(Plu ...

  4. WordPress自定义循环

    我们在学WordPress的时候,最常用到的就是循环了.写模板的时候,多数的时间都是和循环打交道的.如果你不能很详细的了解WordPress的循环,是很难写出模板来的. 而WordPress自定义循环 ...

  5. 关于macOS上常用操作命令（持续更新）

    1.mac上显示/隐藏Finder中的隐藏文件: 显示隐藏文件:在终端中输代码“defaults write com.apple.finder AppleShowAllFiles -boolean t ...

  6. Java学习笔记-抽象类与接口

    抽象类用于在类中不用具体实现,而在子类中去实现的类 抽象类 抽象类概述 抽象定义:抽象就是从多个事物中将共性的,本质的内容抽取出来 抽象类:Java中可以定义没有方法体的方法,该方法的具体实现由子类完 ...

  7. [Arc102B]All Your Paths are Different Lengths_构造_二进制拆分

    All Your Paths are Different Lengths 题目链接:https://atcoder.jp/contests/arc102/tasks/arc102_b 题解: 构造题有 ...

  8. [转]mac升级Nodejs和Npm到最新版

    第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安装 n 工具,这个工具是专门用来管理node ...

  9. Netty源码剖析-发送数据

    参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! 开始之前先介绍下Netty写数据的三种方式: ①:write:写到一 ...

  10. C++目录

    C++ lambda表达式 C++中如何设计一个类只能在堆或者栈上创建对象,面试题 C++之STL总结精华笔记 指针强制类型转换的理解 关于指针类型和指针类型转换的理解 C++继承种类 C++ 单例模 ...