变更icp备案网站信息,网站建设项目管理论文,中企动力地址,系统开发报价清单明细个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 #x1f451;认识前端和网页#x1f353;1 什么是网页#x1f353;2 … 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 认识前端和网页1 什么是网页2 什么是 HTML 文件3 网页的开发流程4 什么是浏览器5 Web标准6 网页代码最佳方案 网页的基本结构1 文档版本2 标签2.1 单标签2.2 双标签2.3 双标签关系2.3.1 包含关系2.3.2 并列关系 2.4 标签属性 3 html 标签4 head 标签5 body 标签6 网页三要素 认识前端和网页
前端开发是创建Web页面或app等前端界面呈现给用户的过程通过HTMLCSS及javaScript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。虽然现在前端技术栈百花齐放衍生出各种工具、概念、技术在工程化与现代化的路上高歌猛进但本质上还是做网页。
1 什么是网页
网站是指在因特网上根据一定的规则使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”通常是 HTML 格式的文件它要通过浏览器来阅读。
网页是构成网站的基本元素它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以 .htm 或 .html 后缀结尾的文件因此将其俗称为 HTML 文件。
2 什么是 HTML 文件
HTML 指的是超文本标记语言 (Hyper Text Markup Language) 它是用来描述网页的一种语言。
HTML 不是一种编程语言而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。 什么是超文本 HTML 中可以加入图片、声音、动画、多媒体等内容超越了文本限制 。HTML 中还可以从一个文件跳转到另一个文件与世界各地主机的文件连接超级链接文本 。 3 网页的开发流程 #mermaid-svg-FTQhmcgQ8DQ9nnn6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .error-icon{fill:#552222;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .marker.cross{stroke:#333333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .cluster-label text{fill:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .cluster-label span{color:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .label text,#mermaid-svg-FTQhmcgQ8DQ9nnn6 span{fill:#333;color:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node rect,#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node circle,#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node ellipse,#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node polygon,#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node .label{text-align:center;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .node.clickable{cursor:pointer;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .arrowheadPath{fill:#333333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .cluster text{fill:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 .cluster span{color:#333;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-FTQhmcgQ8DQ9nnn6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开发 运行 解析 前端开发 网页代码 浏览器 网页 4 什么是浏览器
浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐Firefox、谷歌Chrome、Safari和Opera等。
平时称为五大浏览器。 了解浏览器市场份额https://gs.statcounter.com/browser-market-share/all/china 什么是浏览器内核 浏览器浏览器是网页的载体是咱们前端工程师的主战场。浏览器常用的有 IE系列Trident内核、火狐Gecko内核、谷歌Webkit内核、SafariWebkit内核、OperaWebkit内核等重点说下Google浏览器Blink内核Blink内核是属于WebKit的分支另外目前微软官方发布公告称IE浏览器于2022年6月16日正式退役此后其功能将由Edgechromium内核也是属于WebKit的分支浏览器接棒。 目前国内一般浏览器都会采用 Webkit/Blink 内核如 360极速、UC、QQ、搜狗等。360兼容模式属于IE内核。 5 Web标准
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C万维网联盟是国际最著名的标准化组织。 #mermaid-svg-fpp7BztWhYY9Owrq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fpp7BztWhYY9Owrq .error-icon{fill:#552222;}#mermaid-svg-fpp7BztWhYY9Owrq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fpp7BztWhYY9Owrq .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fpp7BztWhYY9Owrq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fpp7BztWhYY9Owrq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fpp7BztWhYY9Owrq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fpp7BztWhYY9Owrq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fpp7BztWhYY9Owrq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fpp7BztWhYY9Owrq .marker.cross{stroke:#333333;}#mermaid-svg-fpp7BztWhYY9Owrq svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fpp7BztWhYY9Owrq .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-fpp7BztWhYY9Owrq .cluster-label text{fill:#333;}#mermaid-svg-fpp7BztWhYY9Owrq .cluster-label span{color:#333;}#mermaid-svg-fpp7BztWhYY9Owrq .label text,#mermaid-svg-fpp7BztWhYY9Owrq span{fill:#333;color:#333;}#mermaid-svg-fpp7BztWhYY9Owrq .node rect,#mermaid-svg-fpp7BztWhYY9Owrq .node circle,#mermaid-svg-fpp7BztWhYY9Owrq .node ellipse,#mermaid-svg-fpp7BztWhYY9Owrq .node polygon,#mermaid-svg-fpp7BztWhYY9Owrq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-fpp7BztWhYY9Owrq .node .label{text-align:center;}#mermaid-svg-fpp7BztWhYY9Owrq .node.clickable{cursor:pointer;}#mermaid-svg-fpp7BztWhYY9Owrq .arrowheadPath{fill:#333333;}#mermaid-svg-fpp7BztWhYY9Owrq .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-fpp7BztWhYY9Owrq .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-fpp7BztWhYY9Owrq .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-fpp7BztWhYY9Owrq .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-fpp7BztWhYY9Owrq .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-fpp7BztWhYY9Owrq .cluster text{fill:#333;}#mermaid-svg-fpp7BztWhYY9Owrq .cluster span{color:#333;}#mermaid-svg-fpp7BztWhYY9Owrq div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-fpp7BztWhYY9Owrq :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 制定 不理会标准/吐槽 W3C 组织 统一标准 谷歌浏览器 统一网页效果 苹果浏览器 火狐浏览器 欧鹏浏览器 IE浏览器 那 W3C 组织从哪些方面来进行统一标准的呢 主要包括结构Structure 、表现Presentation和行为Behavior三个方面。 结构结构用于对网页元素进行整理和分类现阶段主要学的是HTML表现表现用于设置网页元素的版式、颜色、大小等外观样式主要指的是CSS行为行为是指网页模型的定义及交互的编写现阶段主要学的是Javascript 那我们在做前端开发需要怎么编写代码最合理呢
6 网页代码最佳方案
Web 标准提出的最佳方案结构、样式、行为相分离。
简单理解
结构写到 HTML 文件中表现写到 CSS 文件中行为写到 JavaScript 文件中 网页的基本结构
每个网页都会有一个基本的结构标签也称为骨架标签页面内容也是在这些基本标签上书写。
编写一个 HTML 文件内容如下HTML 文档的的后缀名必须是 .html 或 .htm
!DOCTYPE html
htmlheadmeta charsetUTF-8meta namekeywords content个人简介meta namedescription content欢迎各位小伙伴title制作我的第一个网页/title
/headbody大家好
/body/html1 文档版本
关于文档版本目前采用最新的 HTML5 规范
!DOCTYPE html2 标签
2.1 单标签
hr / or hr
br / or br
meta / or meta2.2 双标签
html/html
head/head
body/body
div/div2.3 双标签关系
双标签关系可以分为两类包含关系和并列关系。
2.3.1 包含关系
head title/title
/head2.3.2 并列关系
head/head
body/body2.4 标签属性
标签名 属性1属性值1 属性2属性值2 … 内容 /标签名meta 单标签设置网页信息charset 设置网页编码集 UTF-8国际编码支持多种语言包括中文。
meta charsetUTF-8注意上面语法是必须要写的代码否则可能引起乱码的情况。一般情况下统一使用“UTF-8”编码尽量统一写成标准的 “UTF-8”不要写成 “utf8” 或 “UTF8”。
3 html 标签
网页的根所有的网页文档内容都要写在 html 标签内
4 head 标签
用来设置网页基本信息的标签比如网页标题后面学习的css、js可以在该标签中引入
5 body 标签
网页主要内容展示区域以后编写 HTML 代码最多的位置
6 网页三要素
让用户可以通过关键字在搜索引擎中找到我们的网页
meta namekeywords content网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东 /让用户可以直观了解网页内容也是打广告的好地方
meta namedescription content京东JD.COM-专业的综合网上购物商城为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类满足各种购物需求。 /设置网页标题用于浏览器标题栏显示
title京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物/title网页三要素的目的让搜索引擎能够通过关键字收录网页排名更靠前。 认识前端和网页网页的基本结构:http://t.csdnimg.cn/4Xgrj
