-
前端基础之网页结构
2020-10-17 07:43:22网页结构 根据W3C标准，一个网页主要由三部分组成：结构、表现、还有行为。 结构： HTML用于描述页面的结构 表现： CSS用于响应用户操作 行为： Javascript用于响应用户操作展开全文
-
Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现
2020-12-15 17:12:02Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现（简单3d建模网页端物联网） 介绍博客地址 https://blog.csdn.net/Koweico/article/details/111195285 -
P1-前端基础-网页的基本结构
2021-01-14 20:25:02P1-前端基础-网页的基本结构 1.概述 这篇文章开始介绍前端入们内容，先从网页基本结构开始。 2.网页基本结构 <!doctype html> <html> <head> <!-- 可以通过meta标签来设置网页的字符集，...展开全文P1-前端基础-网页的基本结构
1.概述
这篇文章开始介绍前端入们内容，先从网页基本结构开始。
2.网页基本结构
2.1网页基本结构上
<!-- 文档声明，声明当前网页的版本 --> <!doctype html> <!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 --> <html> <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 --> <head> <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 --> <meta charset="utf-8"> <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 --> <title>网页的标题</title> </head> <!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 --> <body> <!-- h1网页的一级标题 --> <h1>网页的大标题</h1> </body> </html>2.2网页基本结构下
<!doctype html> <html> <head> <!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 --> <meta charset="utf-8"> <title>网页的基本结构</title> </head> <body> <!-- 迭代 网页的版本 HTML4 XHTML2.0 HTML5 ... 文档声明（doctype） - 文档声明用来告诉浏览器当前网页的版本 - html5的文档声明 <!doctype html> <!Doctype HTML> 进制： 十进制（日常使用） - 特点：满10进1 - 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20 - 单位数字：10个 （0-9） 二进制（计算机底层的进制） - 特点：满2进1 - 计数：0 1 10 11 100 101 110 111 - 单位数字：2个 （0-1） - 扩展： - 所有数据在计算机底层都会以二进制的形式保存 - 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0 这一个小格子在内存中被称为1位（bit） 8bit = 1byte(字节) 1024byte = 1kb(千字节) 1024kb = 1mb(兆字节) 1024mb = 1gb(吉字节) 1024gb = 1tb(特字节) 1024tp = 1pb 八进制(很少用) - 特点：满8进1 - 计数： 0 1 2 3 4 5 6 7 10 11 12 ... 17 20 - 单位数字：8个 （0-7） 十六进制(一般显示一个二进制数字时，都会转换为十六进制) - 特点：满16进1 - 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 .. - 单位数字：16个（0-f） 字符编码 李立超 -> 110000110110 （编码） 110000110110 -> 李立超 （解码） - 所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。 所以一段文字在存储到内存中时，都需要转换为二进制编码 当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读 - 编码 - 将字符转换为二进制码的过程称为编码 - 解码 - 将二进制码转换为字符的过程称为解码 - 字符集（charset） - 编码和解码所采用的规则称为字符集 - 乱码问题： - 如果编码和解码所采用的字符集不同就会出现乱码问题 - 常见的字符集： ASCII ISO88591 GB2312 GBK UTF-8，在开发时我们使用的字符集都是UTF-8 --> <body> </html>
-
好程序员web前端教程分享如何给网页划分结构
2019-11-14 19:23:04好程序员web前端教程分享如何给网页划分结构，学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？ 对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当...展开全文好程序员web前端教程分享如何给网页划分结构，学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？
对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：
一、自上而下原则
因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。
二、从左至右原则
在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。
三、一像素原则
这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。
在说完上述三个原则过后有些人就会一味地追求遵循这些原则，比如在划分结构的时候一定要分为上下部分，但是比如下面我截取这个网页的一部分，图片和文字其实是属于一个整体，文字是对图片的说明，所以就不应该分为上下，而应该水平方向划分，每一个图文作为一部分内容，水平分为四部分：
我们说一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非所有网页都是这样，有些网页没有banner但是初学者容易将header下面那一部分硬划分为banner，有些网页除了这几部分还会有比如icon等区域由喜欢将他们划分到main中去。
说到main区，这个结构划分就多种多样了。有些网页是有一个从左到右通栏的背景色甚至背景图片，这样我们结构的划分也应该有外层一个通栏的盒子，将背景色或者背景图给他，里面再嵌套一个inner盒，给可视区域的固定宽度并居中。如果没有通栏的背景那么这个时候是不需要给通栏的盒子，直接main区给固定宽度居中就好了。
那么在结构划分的时候有些盒子区域之间的空隙怎么去划分这也是初学者最容易犯难的问题。其实严格意义来讲这些空白在结构划分的时候并不会造成影响，因为空白区域在都可以用代码来实现。不过一些文字区域你不能贴着文字的上下来划分，因为文字都是自带行高的。
另外，有些地方可能会有一部分小图片或者一部分内容覆盖在外面大盒子上，这部分在划分结构的时候可以不用管，因为后期在代码实现的时候我们可以利用定位技术实现。
-
HTML基本的结构（网页前端开发基础1）
2020-01-22 13:12:19可以将网页的标题定义在之中。用来标识网页的名称。 4.body标记：它是主体标记。页面中的所有内容都可以定义在其中。 下边是具体实例：（文件类型是HTML文件） < ! DOCTYPE html > < html lang = "en" > < ...展开全文HTML文件有四个主要的标记组成，这四个标记有<html><head><title><body>1.html标记：它是是HTML的文件开头，所有的HTML文件都是以开头，结尾。HTML页面的所有标记都放在和标记之中，标记没有实质性的功能。但是HTML文件不可或缺的部分。
2.head标记：它是HTML文件的头标记，作用是放置HTML文件信息。例如定义CSS（样式控制器）的代码段可以放置在头标记中。
3.title标记：它是标题标题标记。可以将网页的标题定义在之中。用来标识网页的名称。
4.body标记：它是主体标记。页面中的所有内容都可以定义在其中。下边是具体实例：（文件类型是HTML文件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础综合实例</title> <style> p{ font-size: 15px; } #m{ color :blue; } #f{ color:red; } .button{ background-color: #ee11dd; color: red; } </style> </head> <body onloaad ="alert('页面加载成功！')"> <div style="text-align: center;"> <form actoin =" #" onsubmit="alert('姓名：'+name.value+'\r\t 电话：'+tel.value+'\r\t xingbie:'+sex.value)"> <p>姓名</p> <input type="text" name="name"> <br><br> <input tyep="text" name="tel"> <br><br> <input type="radio" name="sex" value="男"> <span id="m">男</span> <input type="radio" name="sex" value="女"> <span id="f">女</span> <br><br> </form> </div>> </body> </html>
-
WEB前端之网页设计①----最新最全详解/网页基础结构
2018-09-09 11:28:16WEB前端之网页设计—-最全详解/网页基础结构① 一、网页的基础结构 &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&... -
网页前端基础知识
2020-07-30 16:57:281．网站包含多个网页 网页可以包含图片 链接 视频 文件名.html ... 超文本可以加入图片声音多媒体。...HTML属于网页结构方面，css属于页面表现，JavaScript属于页面动态。微博标准提出的最佳体验方案： -
深圳Web前端学习：如何给网页划分合适的结构
2019-11-14 16:01:55学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？ 对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个... -
Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现（简单3d建模网页端物联网）
2020-12-15 17:07:07本文代码基于一个智慧楼宇项目： 前提：(Unity应该使用尽量最新的版本，2020年的应该就行，2019年的未知...本文着重介绍Unity导出的WebGL、网页前端、服务端之间的交互，硬件由于实际情况不同，仅示范一般情况。 一、 -
网页前端笔记移植
2018-05-08 11:54:04HTML:用来编写网页结构。CSS:美化网页（样式）。JavaScript：实现网页与用户之间互动的桥梁，让网页具有丰富的生命力。 HTML:超文本标记语言，专门用来描述文本语义的！ 基本结构如下： <!DOCTYPE html> &... -
前端系列之HTML（网页整体结构）
2018-01-18 14:21:00CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言 dd > dl > <!--javaScript--> < dl > < dt > 什么是JavaScript dt > <!--设定定义列表的项目--> < dd > < img ... -
Hxp的前端学习 - HTML - 网页的结构
2020-10-18 20:35:52网页的结构 原文链接：https://blog.csdn.net/hwc3737/article/details/109016713 html文件结构目录： <!DOCTYPE ... -
【融职培训】Web前端学习 第2章 网页重构8 网页结构
2020-06-15 11:17:00在学习网页布局之前，我们需要先了解树状结构的基本概念。 在生活中，家谱就是一个最常见的树状结构，一个人可以有多个儿子，但是儿子只能有一个父亲，随着整个家庭一代代繁衍，整个家谱树也越来越根深叶茂。我们先... -
App项目开发展示网页前端模板e4n.zip
2018-08-28 09:03:41App项目开发展示网页前端模板e4n.zip漂亮的前端后台静态代码，适合选用二次开发，bootstrap结构，自适应手机电脑，非常棒的代码。 -
微信网页版前端源码分析（一）源码结构和公众号处理逻辑
2017-01-07 23:47:00一、微信网页版前端结构 微信网页版为angular应用。 angular应用启动代码 angular.bootstrap(document, ["webwxApp"]) angular应用主要Module angular.module("Services") angular.module("Controllers") angular.... -
【网页基础】前端网页入门之了解网站的基本结构（一）
2019-01-04 20:44:30今天决心开始学习python爬虫，但是在正式学习爬虫之前，有必要先了解一下要爬的网页的基本情况~由此也就开始更文章之旅，当作一种记录，同时如果...本文目的：①了解前端页面的基本构成 ②简单制作一个网页 Par...
