组工网站建设方案手机怎么搭建属于自己的网站

当前位置： 首页 > news >正文

组工网站建设方案,手机怎么搭建属于自己的网站,怎么制作网页视频教学,wordpress 内网ip文章目录一、对HTML的感性认知前置知识什么是web前端#xff0c;什么是web后端前端技术栈、后端技术栈开发与运行的区别浏览器的功能是什么简介写一个简单可运行的的html代码前端开发方式二、VSCode的简单使用三、常用的HTML标签最最基本的HTML结构HTML代码特点注释标签标题标… 文章目录一、对HTML的感性认知前置知识什么是web前端什么是web后端前端技术栈、后端技术栈开发与运行的区别浏览器的功能是什么简介写一个简单可运行的的html代码前端开发方式二、VSCode的简单使用三、常用的HTML标签最最基本的HTML结构HTML代码特点注释标签标题标签段落标签换行标签格式标签图片标签超链接标签表格标签列表标签表单标签form标签input标签select下拉菜单textarea多行编辑框无语义标签一、对HTML的感性认知 前置知识 什么是web前端什么是web后端 Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 Web后端后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。 前端技术栈、后端技术栈 前端技术栈 主要使用三个编程语言HTMLCSSJS(即JavaScript) HTMLCSS不是通常意义上的编程语言他俩不能表示逻辑只是表示一些属性不能描述干了什么。 HTML描述了网页的骨架。【骨】 CSS描述了网页的样式形容词【皮】 JS描述了网页的行为如何和用户交互【魂】 后端技术栈 上古时期CGI技术PHP、Java崛起LAMP体系Linux、Apache(http服务器)、MySQL、PHP (java的JSP)、微软的ASP模板引擎技术、Spring崛起SSH【python\ruby跟进】前后端分离SSMSpring全家桶、GO崛起 完成前后端的开发只有语言是不够的还需要搭配一些框架~~ 开发与运行的区别 开发是在程序员电脑完成的写代码的过程。 运行是在用户的电脑上完成具体的程序跑起来的过程。 那就意味着开发和运行时相互独立的以后工作中上基本都是一次开发N次运行。 浏览器的功能是什么 解析运行网页给HTML、CSS、JS代码提供稳定的运行环境。 一般用户电脑都没装jvm但是都会装浏览器。∴前端代码不愁运行环境 简介 HTML即Hyper Text MarkupLanguage是一种超文本标记语言。顾名思义这种语言可以表示很多形式的信息不仅限于文本。 它包括一系列标签通过这些标签可以将网络上的文档格式统一使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本HTML命令可以说明文字图形、动画、声音、表格、链接等。 超文本 是一种组织信息的方式它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中也可能是其他文件或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接为人们查找检索信息提供方便。 写一个简单可运行的的html代码 浏览器执行html代码最终浏览器以汇编的形式在cpu上边运行。 这里的浏览器就像jvm一样java代码是在jvm上执行的jvm最终还是在CPU上以汇编的形式执行的。 前端开发方式 1.使用笔记本但是效率太低内部比较简陋 2.当前主流的JB系列收费或者VSCode轻量级开发工具 这里我们使用免费的vscode由于下载安装比较简单就不再演示。但是注意一个点要学会找正版的官方的看主域名即可 二、VSCode的简单使用 部分代码的自动生成方法 英文感叹号tab键/enter键之后我们再向body里边填充即可。 更简单的方法直接标签名tab。 这个叫做emmet快捷键、一般主流的开发工具都有。 这里我们解析一下这些代码的含义 三、常用的HTML标签 上边的html代码虽然可以运行但是并不是特别规范。下边我们介绍它如何规范。 同时可以发现浏览器对html的语法检查不严格。这里体现了浏览器的鲁棒性。 最最基本的HTML结构 html标签是html文件最顶层标签。相当于一个树根节点。 head标签存放了这个页面的一些属性。eg.文件的大小、修改时间…… body标签存放了这个页面包含哪些内容。eg.文件里具体的内容hello world HTML代码特点 html代码是通过标签来组织的。 标签形如用尖括号组织成对出现的东西就是标签tag/元素(element).【这里的斜杠是正斜杠】 一个标签通常是成对出现的但是也存在单个出现的例如meta标签 标签是可以嵌套的。一个标签的内容可以是一个或者多个标签。他们可以构成树形结构 可以在开始标签中给标签赋予属性attribute。属性相当于是键值对可以有一个或者多个。 拓展阅读xml和html的区别 注释标签 !–注释– 快捷键ctrl/。 【如果发现按了没反应可以尝试更改键绑定重新设置成ctrl/】 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head body!–这是一条注释–hello world /body /html注释在运行界面不会显示但是右键查看网页源码是可以看到的。所以不要乱写不然等着被炒鱿鱼吧… java文件编译成.class文件不带注释。浏览器的程序都是浏览器从服务器获取的代码在用户浏览器上跑容易泄露敏感信息 标题标签 h1hello/h1 h2hello/h2 h3hello/h3 h4hello/h4 h5hello/h5 h6hello/h6全部手写|h1tab/enter ctrlenter可以直接跳到下一行开始 注意 在html中标签是否换行和代码的编写无关而是跟标签本身有关。 有的标签独占一行有的不独占 在html源码中换行会被忽略多个空格会被忽略或者视为一个。 段落标签 p/p lorementer/tab可以自动生成测试文本 之后再多复制几份 换行标签 /br!–规范写法– br!–可以但是不建议–格式标签 strongstrong 加粗/strong bb 加粗/bem倾斜/em i倾斜/idel删除线/del s删除线/sins下划线/ins u下划线/u这四种格式每个都有两种方式 加粗:strong 标签 和 b 标签倾斜:em 标签 和 i 标签删除线del 标签 和 s 标签下划线ins 标签 和 u 标签图片标签 img 标签必须带有 src(source) 属性. 表示图片的路径 .这个路径可以是本地的绝对路径、也可以是相对路径、还可以是网络路径。 img srcMountTai.jpg此时要把泰山.jpg 这个图片文件放到和 html 中的同级目录中 绝对路径 相对路径 这里去复习相对路径的写法 网络路径 注意这里是右键复制图片地址 img的其他属性 alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字. title: 提示文本. 鼠标放到图片上, 就会有提示. width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡. 其中px是像素是前端开发中最常用的单位当然也有别的单位相关词分辨率、小灯泡、横向、纵向、小灯泡的个数 border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
超链接标签 链接就是快捷方式。超链接内容跳转超出当前网站 href: 必须具备, 表示点击后会跳转到哪个页面.【Hypertext Reference超文本引用】 target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开. a hrefhttp://www.baidu.com百度/atarget的效果 当然这里的herf的值也可以是ip地址但是很少这么干。 表格标签 table 标签: 表示整个表格tr: 表示表格的一行td: 表示一个单元格th: 表示表头单元格. 会居中加粗thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)tbody: 表格得到主体区域 表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.这些属性都要放到 table 标签中. border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框. width / height: 设置尺寸. align 是表格相对于周围元素的对齐方式. align“center” (不是内部元素的对齐方式) cellpadding: 内容距离边框的距离, 默认 1 像素 cellspacing: 单元格之间的距离. 默认为 2 像素 列表标签 主要使用来布局的. 整齐好看. 无序列表[重要] ul li , .有序列表[用的不多] ol li 其中ul是unordered listorder list,li就是List 在浏览器中按下f12/右键-检查元素就可以打开浏览器的“开发者工具”借助这个工具就可以看到这个页面是怎么实现的。 表单标签 主要是从用户端获得输入。 分成两个部分: 表单域: 包含表单元素的区域. 重点是 form 标签.表单控件: 输入框, 提交按钮等. 重点是 input 标签 form标签 使用form进行前后端交互。把页面上用户进行的操作/输入提交到服务器上边之后结合http协议更容易理解故此处不展开。 input标签 有很多形态能够表现成各种用户用来输入的组件/控件。例如 单行文本框, 按钮, 单选框, 复选框. type(必须有), 取值种类很多, text单行文本框password专门用来输入密码的单行文本框 radio单选按钮对于单选框需要加个nam属性name属性相同的单选框值之间是互斥的、checkbox复选框checked(为选项提供默认值)、button按钮形状可以加个value属性文字,这之后需要js进行搭配对应的交互行为, submit外表和button差不多,但会触发form和服务器交互。file(文件选择框弹出一个框框)name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.value: input 中的默认值checked: 默认被选中. (用于单选按钮和多选按钮)maxlength: 设定最大长度. input typetext –!– 1.文本框 –input typepassword!– 2.密码框 –input typetext!– 3.单选框 –input typeradio namesex男!– 4.复选框 –input typeradio namesex checkedchecked女!– 5.普通按钮 –input typecheckbox 吃饭 input typecheckbox 睡觉 input typecheckbox!– 6.提交按钮 –input typebutton value我是个按钮!– 7.文件选择框 –input typefileselect下拉菜单 selectoption北京/optionoption上海/optionoption 深圳/optionoption广州/optionoption杭州/option/selecttextarea多行编辑框 这些标签也成为空间构成一个图形化界面的基本要素。 无语义标签 无语义标签其实就是万能钥匙可用在各种场景。这里主要是div和span,其中div 是 division 的缩写, 含义是分割span 标签, 含义是跨度。区别div默认独占一行span默认不独占 一行。 其实相较于上边的这两个用的会更多些。