前端学习路线

zoukankan html css js c++ java

前端学习路线
第一部分 HTML

第一章职业规划和前景
- 职业方向规划定位：
- web前端开发的前景展望：
- web职业发展目标：
第二章 html基本结构
- 认识HTML：
- html结构：
```
<html>
    <head></head>
    <body></body></html>
```
- 不成对出现的标签
  <br> <hr> <meta> <img> <input..> <option..> <link>
- HTML 基本标签的讲解：
第三章 html基本标签
- HTMl基本标签：
```
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
```
- direction 表示滚动方向，取值有（left,right,up,down,默认left）
- loop 表示滚动循环的次数，默认为无限循环
```
onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滚动速度)
```
- 表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动
第四章 img图片标签与路径
- 图片标签与路径：
- 图片标签写法：
- 图片四要素：
- 路径知识：
- 在静态页面中：
第五章三种列表的讲解
- 三种列表的知识讲解：
```
<ul>
   <li></li>
   <li></li>
   <li></li></ul>
```
- <ol>有序列表
```
<ol>
   <li>内容一</li>
   <li>内容二</li>
   <li>内容三</li></ol>
```
- 列表符号
```
<ul>
 <li>柚子  <ul>
   <li>沙田柚</li>
   <li>蜜柚</li>
  </ul>
 </li>
 <li>荔枝</li>
 <li>苹果</li></ul>
```
- 有序列表-嵌套
```
<ol>
 <li>茶  <ul>
   <li>红茶</li>
   <li>绿茶</li>
  </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>
```
- 定义列表
```
<dl>  
     <dt>pc网页制作</dt>  
     <dd>学习DIV+CSS JS JQ 项目实战</dd>  
     <dt>手机网页制作</dt>  
     <dd>手机网页制作实战</dd></dl>
```
- dd是对dt的解释
```
<dl>
    <dt>中国城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>广州 </dd>
    <dt>美国城市</dt>
    <dd>华盛顿 </dd>
    <dd>芝加哥 </dd>
    <dd>纽约 </dd></dl>
```
- dl是definition list的缩写
- dt是definition title的缩写
- dd是definition description的缩写
- list-style属性具有三个属性分量：
- list-style-position ：设置列表项图标的位置，位于文本内或者文本外
- list-style-type：设置列表项图标的类型
- list-style-image ：使用图像设置列表项图标
第六章表单元素(上)
- 表单标签:
```
<form>
 <input type="text"/></form>
```
- HTML标签 - Action和确认按钮：
```
<form action="html.do" method="get">    
        username:  <input type="text" name="user" />   
        <input type="submit" value="提  交" /></form>
```
- HTML标签 - 隐藏域隐藏标签：
- 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器
```
<form>        
     <input type="hidden" name="hid" value="value"></form>
```
- <input>标签的掌握
- 关于表单中的设置默认值：
```
<input type="text" name="" value="今天心情不错" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">
```
```
<select name="" >
 <option  value=""></option>
 <option  value="" selected="selected"></option><select>
```
- textarea没有默认值
- <label>标签的使用
```
<p>单向选择</p><label for="male">男：</label><input type="radio" name="sex" id="male"/><label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
```
第七章表单和表格(下)
- 表单和表格标签：
- 注意：
- 除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）
- <select>标签的掌握
```
<form>      
    <select name=""  id="">
         <option value="1">1月</option>  
          <option value="2">2月</option>      </select></form>
```
- 常用到的属性：disabled=“disabled” name="sel" size="2"
- <table>表格标签
- <table>表格标签：<table>是表格标签，可以用它定义一个表格。
```
<table border="1">
    <tr>
    <td>姓名</td>
    <td>性别</td>
    </tr></table>
```
- 注意：<table>的border属性不能少
- <tr> <td>标签的使用
```
<table border="1"><tr>
 <td>姓名</td>
 <td>性别</td></tr><tr>
 <td>姓名</td>
 <td>性别</td></tr></table>
```
- <td>单元格标签:
```
<table border="1"><tr><td >姓名</td><td>性别</td><td>爱好</td></tr></table>
```
- border-collapse 属性设置是否将表格边框折叠为单一边框：
- border-collapse:collapse;
- colspan左右合并
- rowspan上下合并
第一部分总结：
- 非可视化标签：head meta style scrpit...
- 可视化标签：img div span a ul li...
- 只有可视化标签，才能用css改变它
- 单标签：meta link base img input br hr
- 双标签：html head body div a p span ..ul li ol dl ....
- 常用可视化标签
HTML部分导图总结
- HTML5标签集合
查看全文

相关阅读:
javascript重点笔记
 我的CSS架构
 排行榜妙用——CSS计数器
 回归基础从新认识——HTML+CSS
前端开发工具（安装及常用技巧）——sublime text 3
手机访问php环境移动端静态页面
 H5前端面试题及答案（2）
H5前端面试题及答案（1）
python笔记--学会使用Fiddler
python进程/线程/协成

原文地址：https://www.cnblogs.com/fengyongxian/p/6442012.html

前端学习路线

第一部分 HTML

第一章 职业规划和前景

第二章 html基本结构

第三章 html基本标签

第四章 img图片标签与路径

第五章 三种列表的讲解

第六章 表单元素(上)

第七章 表单和表格(下)

第一章职业规划和前景

第五章三种列表的讲解

第六章表单元素(上)

第七章表单和表格(下)