拍卖网站模板,服装设计找图网站,数据库怎么建立wordpress,免费推广做产品的网站文章目录 前言：导学1 Web开发相关概念2 Web标准（网页标准）3 软件架构（CS/BS）（1）C/S: Client/Server 客户端 / 服务器端（2）B/S: Browser/Server 浏览器 / 服务器端VSCode配置前段开发环境一、HTML概念1 概念2 HTML快速入门（1）语法快速入门（2）VSCode一个 ！（快捷键… 文章目录 前言：导学1 Web开发相关概念2 Web标准（网页标准）3 软件架构（CS/BS）（1）C/S: Client/Server 客户端 / 服务器端（2）B/S: Browser/Server 浏览器 / 服务器端 VSCode配置前段开发环境一、HTML概念1 概念2 HTML快速入门（1）语法快速入门（2）VSCode一个 ！（快捷键）快速生成html框架和对html框架做一个简单的解释（3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些 二、HTML标签1 文件标签：构成html最基本的标签（1） html /html :根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。（2） head /head :头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源（3） title /title ：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题）（4） body /body ：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。 2 文本标签：和文字有关的标签（1） h1 /h1: (h1-h6) 文本里面一级到六级标题（2） p /p ：段落标签，段落标签就是让段落间间距变大仅此而已（3） br 或者 br/ ：换行（4） hr 或者 hr/ ：水平线标签，产生一条水平线（5） b /b ：字体加粗（6） i /i ：斜体（7） font /font ：对字体进行一些样式设置（8） center /center：文本居中标签，可以前提font使用（9）补充：属性定义color：颜色属性 font color = "red"举头望明月，低头思故乡。 /font font color = "rgb(34,56,10)"举头望明月，低头思故乡。 /font font color = "#2D1475"举头望明月，低头思故乡。 /font width：宽度属性（单位是像素点） hr color = "red", width="300" hr color = "red", width="50%" 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口 size: 大小属性、高度（如果是字体就是字体大小） font size = "5"举头望明月，低头思故乡。 /font （10）html中常见特殊字符的占位符文本标签小案例练习 3 图片标签 img src="1.png" alt="加载失败"4 列表标签（1）有序列表 ol li /li ... /ol （2）无序列表 ： ul li /li ... /ul 5 超链接标签： a href="目标URL"链接文本 /a6 表格标签（1）基本语法（2）综合案例：使用表格来完成界面布局（后面有时间会将这部分补上，待定。。。） 7 表单标签：（控件）用于采集用户输入信息（1） form /form ：表单容器（所有的搜集信息的控件都必须被其包裹，不然控件就是一个空架子）（2）标签控件： label /label （3）输入控件（4）下拉菜单控件（5）多行文本输入控件（6）按钮控件（7）分组和标题（8）结合CSS的一个完整演示（9）练习：使用表格和表单布局一个注册界面（待定。。。。） 8 特殊标签（1） div /div ：块标签（块级元素）（2） span /span ：行内标签（行级元素）（3）语义化标签（html5新特性）---- header /header ：定义页面的头部区域，通常包含网站标题、导航栏等---- nav /nav ：定义导航栏，通常包含链接到其他页面或部分的菜单---- footer /footer ：定义页面的底部区域，通常包含版权信息、联系方式等 三、CSS：页面美化和布局1 CSS与HTML结合快速入门（三种结合调用方式）（1）内联样式（当前标签中生效）（2）内部样式（当前html中生效）（3）外部样式（所有引入了css的样式表的html中生效） 2 CSS基本语法（1）基本选择器---- id选择器---- 元素选择器（标签名称选择器）：根据标签名称来控制对应的CSS---- 类选择器：选择具有相同class属性值的元素 （2）扩展选择器（选择器的高级使用）---- 选择所有元素---- 并集选择器---- 子选择器---- 后代选择器---- 属性选择器---- 伪类选择器：选择具有某些状态的元素 3 CSS属性（1）字体、文本（2）背景（3）边框轮廓（4）尺寸 4 盒子模型（传统的div进行页面布局） 前言：导学
1 Web开发相关概念
Web: 全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。前后端分离开发模式（Web网站工作流程）： 混合开发模式（不建议）：前后端不分离 2 Web标准（网页标准）
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C(WorldWide Web Consortium，万维网联盟)负责制定。三个组成部分: HTML: 负责网页的结构(页面元素和内容)。CSS: 负责网页的表现(页面元素的外观、位置等页面样式，如:颜色、大小等)，布局等。JavaScript: 负责网页的行为(交互效果)。 3 软件架构（CS/BS）
（1）C/S: Client/Server 客户端 / 服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序 如:QQ，迅雷…
优点: 用户体验好缺点: 开发、安装，部署，维护 麻烦（2）B/S: Browser/Server 浏览器 / 服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点: 开发、安装，部署，维护 简单缺点: 如果应用过大，用户的体验可能会受到影响 对硬件要求过高资源分类: 1 静态资源: 使用静态网页开发技术发布的资源。 所有用户访问，得到的结果是一样的。如:文本，图片，音频、视频，HTML,CSS,JavaScript如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源 2 动态资源 : 使用动态网页及时发布的资源。 所有用户访问，得到的结果可能不一样。如: jsp / servlet, php, asp…技术都是处理动态资源的 如果用户请求的是动态资源，那么服务器会先将动态资源转换成静态资源，再将转换成的静态资源发送给浏览器展示举个例子说明，对于CSDN的个人主页，每个人的个人信息都不一样，要展示的当然都不一样。这些信息都是从数据库中根据每个用户不同而获取展示的。动态资源就是用来描述这种情形，说人话就是业务层根据用户不同发送的数据不同，和静态资源没区别。 VSCode配置前段开发环境
VSCode在前端开发中使用最多，用这个来编辑html和css等前端的技术比较好用，还有很多前段技术都使用vscode快速可以配置很方便。
安装VSCode：这个直接装就行，基本没有什么注意事项安装插件： Chinese (Simplified) Language Pack：适用于 VS Code 的中文（简体）语言包 HTML CSS Support：在编写样式表的时候，自动补全功能大大缩减了编写时间 JavaScript (ES6) code snippets：支持ES6语法提示 Mithril Emmet：一个能大幅度提高前端开发效率的一个工具，用于补全代码 Path Intellisense：路径提示插件 Vue 3 Snippets：在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。 VueHelper：vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码 Auto Close Tag：自动闭合HTML/XML标签 Auto Rename Tag：自动完成另一侧标签的同步修改 Beautify：格式化 html ,js,css Bracket Pair Colorizer：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 open in browser：vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari Vetur：Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。 File Utils：File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录 IntelliJ IDEA Keybindings：安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。 Code Spell Checker 拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中 一、HTML概念
html官方手册：还是要学会查询官方手册 现在HTML已经发展到HTML5了，所以我们直接就按照HTML5来学习了
1 概念
概念: 是最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本 人话就是：超级文本语言，能够放文字、图片、音频等各种数据的一种语言（理解成一种文本表示的形式即可）标记语言: 由标签构成的语言。标签名称 如 html，xml等标记语言不是编程语言 2 HTML快速入门
（1）语法快速入门
语法: （1）html文档后缀名 .html 或者 .htm（2）标签分为 围堵标签: 有开始标签和结束标签。如html/html自闭和标签: 开始标签和结束标签在一起。 如**br/ 换行符标签**和 img src=“1.png”/ 图片标签 另外，这种自闭和标签，最后面/可以省略 br 、 img src=“1.png” 就可以了 （3）标签可以嵌套 需要正确嵌套，不能你中有我，我中有你 错误: ab/a/b 正确: ab/b/a（4）在开始标签中可以定义属性，属性是由键值对构成 font color = ‘red’Hello World/font 这个里面的color = 'red’就是属性 值需要用引号(单双都可)引起来（5）html的标签不区分大小写，但是建议使用小写。 html !-- 声明文档类型 --head !-- 头部标签，用于存放元数据 --titleHTML快速入门/title !-- 设置网页标题 --/headbody !-- 主体标签，用于存放网页内容 --h1Hello World/h1 !-- h1标题标签 --font color = 'red'Hello World/fontbr/ !-- 字体标签，设置字体颜色 -- !-- br标签用于换行 --font color = 'green'Hello World/fontbr/img src="1.png"/ !-- 图片标签，用于插入图片 --/body
/html（2）VSCode一个 ！（快捷键）快速生成html框架和对html框架做一个简单的解释
!DOCTYPE html !-- 声明文档类型 --
html lang="en" !-- 这个里面lang属性声明这个html是那个国家的，这里en表示英国，其实随便写，不写也行 --
headmeta charset="UTF-8" !-- 设置字符编码 --meta name="viewport" content="width=device-width, initial-scale=1.0" !-- 设置视口,设置浏览器的兼容性 --titleHTML快速入门/title
/head
bodyh1Hello World/h1 font color = 'red'Hello World/fontbr/font color = 'green'Hello World/fontbr/img src="1.png"//body
/html（3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些
二、HTML标签
官方文档：快速查询标签
1 文件标签：构成html最基本的标签
（1） html /html :根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。
（2） head /head :头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源
比如这样在这里指定html的编码，后面学了CSS还可以再这里引入一些其他外部资源，类似python中的导包操作。
（3） title /title ：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题） （4） body /body ：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。
2 文本标签：和文字有关的标签
（1） h1 /h1: (h1-h6) 文本里面一级到六级标题
!-- 标题标签 h1~h6演示 --
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h6演示：
（2） p /p ：段落标签，段落标签就是让段落间间距变大仅此而已
!-- p/p 段落标签演示：段落标签就是让段落间间距变大仅此而已 --
那年冬天，祖母死了，父亲的差使⑴也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧⑵回家。到徐州见着父亲，看见满院狼藉⑶的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”br
回家变卖典质⑷，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹⑸，一半为了丧事，一半为了父亲赋闲⑹。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。brbrbrp那年冬天，祖母死了，父亲的差使⑴也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧⑵回家。到徐州见着父亲，看见满院狼藉⑶的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”/p
p回家变卖典质⑷，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹⑸，一半为了丧事，一半为了父亲赋闲⑹。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。/p演示：
（3） br 或者 br/ ：换行 br 或者 br/ : html语法并没有那么严格，所以这种自闭和标签，最后面/可以省略 br
（4） hr 或者 hr/ ：水平线标签，产生一条水平线
【注】： hr 还存在一些属性可以控制样式，例如color等。这里我们了解一下，学习了CSS后这些样式都是要用CSS控制的 因为html5中已经废弃了这些属性，后面大家都统一使用CSS来控制即可。
属性: color: 颜色width: 宽度size: 高度，大小（如果是字体就是字体大小）align: 对其方式（html5已经废弃，所以有点浏览器不能出现效果，还是默认居中） center: 居中left: 左对齐right: 右对齐 对齐方式默认是居中对齐的 !-- hr 水平线标签演示 --
hr
hr color="red" !-- 设置水平线颜色 --!-- width : 宽度属性演示 --
hr color = "green", width="300" !-- 设置水平线宽度为300像素点 --
hr color = "green", width="50%" !-- 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口% --演示：
（5） b /b ：字体加粗
!-- b/b 加粗标签演示 --
床前明月光，疑是地上霜。br
b床前明月光，疑是地上霜。/b演示：
（6） i /i ：斜体
!-- i/i 斜体标签演示 --
举头望明月，低头思故乡。br
i举头望明月，低头思故乡。/i演示：
（7） font /font ：对字体进行一些样式设置
属性: color: 字体颜色size: 字体大小face: 字体（“楷体”，“宋体”等等） !-- font演示 --
font color = "red"举头望明月，低头思故乡。/fontbr
font color = "rgb(34,56,10)"举头望明月，低头思故乡。/fontbr
font color = "#2D1475"举头望明月，低头思故乡。/fontbrbr!-- size : 字体大小属性演示 --
font size = "5"举头望明月，低头思故乡。/fontbr
font size = "10"举头望明月，低头思故乡。/fontbr
font size = "15"举头望明月，低头思故乡。/fontbr演示：
（8） center /center：文本居中标签，可以前提font使用
!-- 文本居中标签 --
center举头望明月，低头思故乡。/center
centerfont color = "red"举头望明月，低头思故乡。/font
/center演示：
（9）补充：属性定义
属性的值我们都习惯" "引号包裹成字符串
color：颜色属性 font color = “red”举头望明月，低头思故乡。 /font font color = “rgb(34,56,10)”举头望明月，低头思故乡。 /font font color = “#2D1475”举头望明月，低头思故乡。 /font
主要有三种写法： 英文单词: red, green, blue font color = “red”举头望明月，低头思故乡。 /fontrgb(值1，值2，值3): 值的范围:0~255 ,另外部分浏览器不支持这种 font color = “rgb(34,56,10)”举头望明月，低头思故乡。 /font#值1值2值3: 值的范围:00~FF之间。 font color = “#2D1475”举头望明月，低头思故乡。 /font 【注】：rgb或者16进制的颜色不知道是什么：直接在线取色器就可以了
width：宽度属性（单位是像素点） hr color = “red”, width=“300” hr color = “red”, width=“50%” 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口
数值: width=‘20’, 数值的单位，默认是 px(像素) hr color = “red”, width=“300”数值%:占比相对于父元素的比例 hr color = “red”, width="50%" 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口演示：
size: 大小属性、高度（如果是字体就是字体大小） font size = “5”举头望明月，低头思故乡。 /font
!-- size : 字体大小属性演示 --
font size = "5"举头望明月，低头思故乡。/fontbr
font size = "10"举头望明月，低头思故乡。/fontbr
font size = "15"举头望明月，低头思故乡。/fontbr演示：
（10）html中常见特殊字符的占位符
有很多特殊字符都可以上官网去查看，这里只介绍几个比较常见的：
显示结果描述实体名称空格nbsp;小于号lt;大于号gt;≤小于等号le;≥大于等号ge;×乘号times;÷除号divide;【注】：一般情况下如果不会发生与语法冲突的情况，不必一定要实体名称也可以（空格就必须要使用实体名称，键盘回车是不行的）
文本标签小案例练习
需求：对下面的截图用html排版出来 !DOCTYPE html
html lang="en"
headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"title黑马程序员简介/title
/head
bodyh1公司简介/h1
hr color="#ffd700"p
font color = "#FF0000"“中关村黑马程序品训练营"/font是由bi传智播客/i/b联合中关村 软件园、CSDN，
并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业,解决当 前软件开发技术飞速发
展，而企业招不到优秀人才的困扰。
/pp
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练 基地，并被评为中关村软件园重点扶持人才企业。
/pp
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业，而没有环境和机遇改 变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在 90%以上的企业招聘流程更为严
格。任何一名学员想成功入学“黑马程序员”,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自 学能力测试,还包括性格测试、压力测试、品德测试等等测试。
毫不夸张地说，黑马程序员训练营所有学员 都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
/pp
中关村黑马程序品训练营不仅着重培养学品的基础理论知识，更注重培养项目实施管理能力，并切关注技术革新,不断引入先进的技术,研发更新技术课程，确保学员进入企业后不仅能独
立从事开发 工作，更能给企业带来新的技术体系和理念。
/pp
一直以来，黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬 技术创新，倡导分享、开放和协作,努力打造高质量的IT人才服务平台。
/p
hr color="#ffd700"font color = "gray
