您的位置:首页 > Web前端 > CSS

【从入门到放弃】WEB前端之HTML+CSS基础01

yanwydxf 2017-07-03 17:17 211 查看
最近几年WEB 前端很是火热,各种框架更是层出不穷,这个博文是一个系列,从0开始,一步一步进阶,从初级静态页面布局,到JS/Jquery动态交互、最后迈向各种框架node bootstrap vue angularjs 当然...还包括未来有可能出现的新框架,战线会拉的很长,只要你每天拿出一点时间,毕竟养成一个习惯总得花费时间在上面... 

不多说,看第一天的内容 begin

-----------------------------------------------------手动的分割线--------------------------------------------------------------------

一. 你要先明白几个名词和一些常问的问题,如下

     1. 什么是html ?  HyperText Markup Language 超文本标记语言 咳好官网的解释,so 就是不止是文本,还有图片、视频、音频啥的 我们的页面就是通过标签组成的,一个一个堆积起来

     2. html的发展历程?世上本无路,走的人多了便有了路。 html也是一样,在最开始1993年发布第一个草稿版本后,快速的迭代,目前人人口上所说的html5 其实是html的第五次重大改革。

     3. 网页由哪几部分组成?HTML CSS Javascript(JS)  html 表示结构 css 表示样式 Javascript表示交互 

     4. 我该使用什么工具开发?拿什么都可以写,因为网页是由浏览器去进行解释,你开心的话拿记事本写都OK  (目前常用的有sublime/webstrom)

     5. 标签太多,样式好复杂,记不住怎么破? 拿出当初学英语的架势,HTML也是一门语言,入门都很难,多做练习,多总结,一个礼拜的时间就OK 了

二. 工欲善其事必先利其器之webstrom篇

     注意:此处只列出webstrom一些常用的操作,一些快捷键我们不考虑、不采纳,以后再说

     1. 如何创建项目:文件->新建项目->修改项目名称和路径

     2. 如何新建文件:点击项目名称->选择新建的文件类型(html/css/js)项目结构一般为:html 文件夹、css文件夹、images文件夹、js文件夹

         注意文件命名规则:文件命名规则:用英文,不用中文名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;必须以英文字母开头。

         


     3. 如何运行文件:html页面内点击右键->open in browser->选择一个你安装了的浏览器(身为一名前端开发人士,我们建议你选择Chrome/Firefox)

       

三. 网页是由许多标签组成的,那么现在赶紧来认识下

     1. 首先标签分为双标签 <a></a> 和 单标签 <img /> 两者的区别从外观上一步了然

     2. 标题标签 <h1></h1> - <h6></h6> 一般标题党用的就是它,h1最大 h6最小

     3. 段落标签 <p>啦啦啦</p> 

     4.   空格 代表一个英文字符,正常的打开方式一个是两个英文字符,但是你使用的时候 会和你当前的字体、字号相关,如果使用结果不对,请微调

     5. 换行 <br/> 终于出现了第一个单标签,它是强制换行,会重启一行继续后面的内容

     6. 加粗 <b></b> 把重点的文本加粗显示 <strong></strong> 和b标签一样,两者都是加粗,strong更具语义化,后面在开发中如果表示强调的话建议采用strong

     7. 倾斜 <i></i> 和 <em></em> 都可以实现倾斜效果,<em>比i更具语义化

     8. 水平线 <hr/ > 一般小说里华丽的分割线就是指它

     9. 图片标签 <img src="图片路径" />  注意:路径的话都是采用相对路径 ../表示返回上一级目录, / 表示返回根目录 

    10. 超链接标签 <a href=""></a> 可以链接到百度,也可以链接到本地,如果都不满意还可以链接到本页面 用#表示

    11. 无序列表 <ul> <li></li></ul> 新闻栏目最受欢迎的标签没有之一

    12. 有序列表 <ol><li></li></ol> 和无序列表的区别就是前面的项目符号长的不太一样

    13. 自定义列表 <dl><dt></dt><dd></dd></dl> 一般用来表示名词解释类

    14. 表格标签 <table> <tr> <td></td></tr></table> tr 代表行 td 代表单元格  

          注意: 想要有多少行就打多少个tr ,多少列就打多少个 td 表格合并:合并行 rowspan  合并列 colspan 

    15. 表单标签 <form id="myform" action="a.php" method="get"></form> 创建一个表单请使用form标签,action属性表示表单将要提交到哪,method是请求的方式get、post,默认是get,推荐post 

    16. 接下来将有一批表单标签走来,but , 学习完这些标签后,基础的标签将会告一段落了

    16. 文本框,使用表单的标配,接收用户的输入,单行文本框 <input type="text" />

    17. 密码框,保证你密码的安全,<input type="password" />

    18. 单选按钮,性别呀都是用它,但是此处有个坑就是要加一个相同的name 分为一组 <input type="radio" name="sex" />男 <input type="radio" name="sex" />女

    19. 多选框,当你的选择不止一个的时候可以使用 <input type="checkbox" />  <input type="checkbox" />  <input type="checkbox" />

    20. 多行输入框,<textarea></textarea> 输入多了会出现滚动条

    21. 下拉菜单 <select><option>北京</option></select> option可以有多个

    22. 文件上传 <input type="file" /> 

    23. 隐藏域 <input type="hidden"  value="你看的到么" /> 显然它的value不是给你看到的,是跟着表单一起提交的

    24. 按钮系列之普通按钮,一般用的时候只有和JS才是绝妙搭配 <input type="button" value="登录" />

    25. 按钮系列之提交按钮,自带提交表单功能 <input type="submit"  value="提交“ />

    26. 按钮系列之重置按钮,和提交按钮差不多,都是自带特效,它自带的特效是清空,也叫重置 <input type="reset" value="重置" />

    27. 表单分组显示,<fieldset><legend></legend></fieldset>

    16. 号外!! 最后一个知识点就是注释  html 当中的注释是 <!-- -->  css中的注释是 /**/  js 中的注释 是 //  /**/   请编写有意义的注释,为了日后你可以更加直观的认识代码

四. 上面的标签都认识完了,下面来认识下HTML5新增的标签吧

     1. 结构元素 <section></section> 内容区块,网页布局的时候按照大的模块划分可以使用section

     2. 结构元素 <article></article> 独立的一块内容,文章啊评论啊什么的

     3. 结构元素<aside></aside> 配合article ,aside内容可以做文章的侧边栏

     4. 结构元素<header></header> 头部

     5. 结构元素<footer></footer>底部

     6. 结构元素<nav></nav>导航

     以上都是HTML5新增的一些结构标签,其实意思就是为了更好的帮助我们布局,之前用div的内容,现在都可以换成语义化的新增标签了,其实你可以尝试一下,你在html中随便写一个不存在的标签它也并不会报错,在CSS里面还可以找到这个标签,比如<banner></bannner> 并么有问题,html5的语义化标签就是这么来的,他们从程序员布局常用的部分去提取出来,为了更好的方便我们去布局,所以不用纠结在div和新增的结构标签该选择谁,结构标签就是帮你代替掉div的,显然只是部分,并不是完全代替

     7. 视频 <video></video> html5的video视频标签可以让我们播放视频变的更加简单

     8. 音频<audio></audio>

     9. 画布<canvas></canvas>标签本身没有任何行为,需要通过js进行绘制

    html5针对表单新增了许多Input类型,这些新类型,为我们常用的一些表单输入做了很好的验证,妈妈再也不用担心你的表单数据验证了

  10. 邮箱<input type="email" /> 在提交表单时会验证email格式

  11. url<input type="url" />

 12. number<input type="number" /> 只能输入数字

 13. Date日期选择 <input type="date" /> 日期类型还可以细化type为 month/week/time/dateime/datetime
9a35
-local

 14. 搜索域 <input type="search" /> 外观和text差不多

 15.tel <input type="tel" /> 但是目前还没有浏览器支持

 16.拾色器<input type="color" /> 可以去选择颜色,但好像并没什么用,其实配合js就有用了,比如你可以用js取到color的value就能把选择好的色值拿到

17.拖拽条<input type="range"/>当然只写标签肯定没用,用配合js可以做个进度管理了

     html5还发布了针对表单的常用属性,把你之前拿JS写的东西,一个属性就解决了

    表单提交 formaction / formmethod 文本框的 获取焦点 autofocus 验证必填 required 提示文字 placeholder

五. 总结一下

      第一天主要掌握概念和基础标签及语法,记得不太深刻没有关系,毕竟来日方长,我们的页面就是由一堆标签堆起来的,我们平常常去的淘宝、京东都是如此,以后你可以写出来,前提先认清楚每个标签才能够做到灵活运用组装

   
标签:  web 前端