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

最近几年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

五. 总结一下

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