web开发：web前端初识
本文目录：
一、前端三剑客
html：完成页面架构的搭建
css：完成页面样式布局
js:完成页面功能
二、编辑器
插件：
插件管理器 ctrl+~ 安装 package control
使用:
安装: ctrl+shift+p =>package: install ** => 搜索插件名
卸载: ctrl+shift+p =>package: remove ** => 选取插件名
退出: esc
安装: 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 刘xx <杨虎虎> <<<Zero> </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>
