一、前端三剑客

二、编辑器

三、第一个页面

四、基本标签

五、标签分类

一、前端三剑客

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. Spring Aop（十三）——ProxyFactoryBean创建代理对象

    转发地址:https://www.iteye.com/blog/elim-2398673 ProxyFactoryBean创建代理对象 ProxyFactoryBean实现了Spring的Factor ...

  2. Flutter 的url_launcher简介

    url_launcher是用于在移动平台中启动URL的Flutter插件,适用于IOS和Android平台.他可以打开网页,发送邮件,还可以拨打电话. github地址:https://github. ...

  3. laravel 自带消息notification通知

    原文地址:https://blog.csdn.net/zhangxh1013/article/details/53130490

  4. 《精通并发与Netty》学习笔记（07 - 基于Thrift实现Java与Python的RPC调用）

    上节我们介绍了基于Thrift实现java与java的RPC调用,本节我们基于Thrift实现Java与Python的RPC调用 首先,修改data.thirft文件,将命名空间由java改为py n ...

  5. 324rfwrtg5gft8oywtfbserkufgs

    324rfwrtg5gft8oywtfbserkufgs (tester.inf.nano)

  6. Centos7 yum源配置及关闭防火墙

    清理源 #yum clean all更新源缓存 #yum makecache更新源 #yum update 设置主机名: #hostnamectl set-hostname 查看防火墙状态 #syst ...

  7. 最新 完美世界java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.完美世界等10家互联网公司的校招Offer,因为某些自身原因最终选择了完美世界.6.7月主要是做系统复习.项目复盘.Leet ...

  8. when i import skimage,it occurred --"cannot import name '_validate_lengths'"

    how to sovle this prolem? 1)with the administrator user to run cmd 2)imput and run : pip install --u ...

  9. [转帖]sys.dm_exec_connections (Transact-SQL)

    sys.dm_exec_connections (Transact-SQL) https://docs.microsoft.com/en-us/sql/relational-databases/sys ...

  10. c++：论如何成功把自己搞懵【二叉树特辑①】（不定期更新）

    并不正经的前言 以前我这个小白看OI的书,老觉得有些东西很高端(看不懂的自然就很高端[滑稽]):什么栈啊,位运算啊,二叉树啊.有些东西我学了之后也很迷糊(真的不是因为傻?),做题的时候总是可以把自己搞 ...