web前端研发【连载1】-html和css简介
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">web前端<span style="color: black;">研发</span>通俗的讲<span style="color: black;">便是</span>做网页嘛，在浏览器上看到的所有静态页面以及<span style="color: black;">各样</span>特效都是前端<span style="color: black;">研发</span>出来的，想要入门web前端<span style="color: black;">研发</span>很简单，<span style="color: black;">然则</span>其实web前端<span style="color: black;">研发</span>的水还是很深的，<span style="color: black;">不外</span><span style="color: black;">不碍事</span>，学习都是一个循序渐进的过程，<span style="color: black;">做为</span>前端小白已有一年的<span style="color: black;">研发</span>经验，这次想要进行一个系统的记录，由浅到深，<span style="color: black;">咱们</span><span style="color: black;">一块</span>踏上web前端<span style="color: black;">研发</span>的学习记录之旅吧，有些太<span style="color: black;">基本</span>的概念<span style="color: black;">无</span>做太<span style="color: black;">仔细</span>的整理，<span style="color: black;">重点</span><span style="color: black;">供给</span>一个从<span style="color: black;">没</span>到有的学习路径，望多多交流。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">HTML简介以及基本结构</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">html的全<span style="color: black;">叫作</span>是Hyper Text Markup Language（超文本标记语言），它不是英国人能听懂的英语，<span style="color: black;">亦</span>不是聋哑人能看懂的手语，它是一种能被浏览器所识别的语言， 它通过标记符号来标记要<span style="color: black;">表示</span>的网页中的各个部分，网页文件本身是一种文本文件，<span style="color: black;">经过</span>在文本文件中添加标记符，<span style="color: black;">能够</span>告诉浏览器<span style="color: black;">怎样</span><span style="color: black;">表示</span>其中的内容（如：文字<span style="color: black;">怎样</span>处理，画面<span style="color: black;">怎样</span>安排，<span style="color: black;">照片</span><span style="color: black;">怎样</span><span style="color: black;">表示</span>等）。基本HTML结构<span style="color: black;">包含</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">A. DOCTYPE声明(DOCTYPE是document type文档类型的简写，在web设计中用<span style="color: black;">来讲</span>明你用的HTML是什么版本。)；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">B. title标题(在网页运行之后，浏览器标签上面会<span style="color: black;">表示</span>你所写的网页表头)；</p>C. head(<a style="color: black;">meta</a>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> ,link最<span style="color: black;">平常</span>的用途是链接<span style="color: black;">外边</span>样式表、<span style="color: black;">外边</span>资源 ，base是网页默认打开方式声明标签 ,script标签最<span style="color: black;">平常</span>的用途是链接<span style="color: black;">外边</span>js、<span style="color: black;">外边</span>资源)：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">D. 网页编码声明<span style="color: black;">重点</span>是<span style="color: black;">经过</span>charset 属性规定在<span style="color: black;">外边</span>脚本文件中<span style="color: black;">运用</span>的字符编码。<span style="color: black;">倘若</span><span style="color: black;">外边</span>文件中的字符编码与主文件中的编码方式<span style="color: black;">区别</span>，就要用到 charset 属性。默认的字符编码是 ISO-8859-1；</p>E. 网页主体部分是<span style="color: black;">经过</span>body标签进行包裹，网页的<span style="color: black;">通常</span>布局和命名参考：<a style="color: black;">前端<span style="color: black;">基本</span>知识（一）-布局和命名</a>。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>网页标题</title> <meta name="keywords" content="<span style="color: black;">重要</span>字" /> <meta name="description" content="此网页描述" /> <link href="style/test.css" rel="stylesheet" type="text/css" /> <base target=_blank><!--<span style="color: black;">暗示</span>网页中所有的超链接都在单独页面打开--> </head> <body> 网页正文内容 </body> </html></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">编辑<span style="color: black;">工具</span>的<span style="color: black;">运用</span>和图形图像软件的<span style="color: black;">运用</span></h3>前端<span style="color: black;">研发</span>的编辑工<span style="color: black;">拥有</span><span style="color: black;">非常多</span>。dreamweaver、<a style="color: black;">sublime</a>等都<span style="color: black;">能够</span>进行编码操作，<span style="color: black;">能够</span><span style="color: black;">按照</span>个人的编码习惯进行<span style="color: black;">选取</span>。其中sublime是完全开源的编辑软件，<span style="color: black;">非常多</span>操作都<span style="color: black;">能够</span><span style="color: black;">按照</span>个人的<span style="color: black;">爱好</span>进行设置，<span style="color: black;">亦</span>有<span style="color: black;">非常多</span>快捷键<span style="color: black;">能够</span><span style="color: black;">运用</span>，是个很好的<span style="color: black;">选取</span>。图形图像软件的最<span style="color: black;">重点</span>的<span style="color: black;">便是</span>要会PS切图和取色，当UI将一个设计好的页面给你时候，你要<span style="color: black;">按照</span><span style="color: black;">必须</span>切出对应的图标和取出相应的颜色，能精确的得出某一模块的宽高等等基本操作。图标<span style="color: black;">通常</span><span style="color: black;">保留</span>为png格式，颜色用吸管<span style="color: black;">按照</span><span style="color: black;">就可</span>获取相应的rgb值，获取某一模块的宽高用选区<span style="color: black;">按照</span><span style="color: black;">就可</span>。<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-8be7271f0d6dd787ecfeea9840557f2e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>切片<span style="color: black;">工具</span>
期待更新、坐等、迫不及待等。 楼主的文章深得我心，表示由衷的感谢！
页:
[1]