前端学习路线

第一部分 HTML


第一章 职业规划和前景


  • 职业方向规划定位:

    • web前端开发工程师

    • web网站架构师

    • 自己创业

    • 转岗管理或其他

  • web前端开发的前景展望:

    • 未来IT行业企业需求最多的人才

    • 结合最新的html5抢占移动端的市场

    • 自己创业做老板

    • 随着互联网的普及web开发成为企业的宠儿和核心

  • web职业发展目标:

    • 起步阶段:

    • 提升阶段:

    • 成型阶段:

    • 基本知识的掌握

    • 常用工具的掌握

    • 沟通技巧的掌握(围绕客户的需求)

    • 良好的开发习惯(加注释、对齐方式)

    • 熟悉掌握HTML基本标签和属性

    • 熟练掌握css的基本语法和使用

    • 浏览器兼容和w3c标准的掌握

    • 结合html+css+js开始系统项目的开发

    • 精通DIV+CCS布局

    • 精通css样式表控制html标签

    • 熟悉运用js制作动态网站的效果

    • 能独立开发完成网站

    • 负责内容的HTML

    • 负责外观的css(层叠样式表)

    • 负责行为的js

    • ps切图

    • 第一、梳理知识架构

    • 第二、分解目标(起步阶段、提升阶段、成型阶段)


第二章 html基本结构


  • 认识HTML:

    • html不是一种编程语言,是一种标志语言

    • 标记语言是由一套标识标签组成的

    • html使用标签来描述网页

  • html结构:

<html>
    <head></head>
    <body></body></html>
  • 不成对出现的标签
    <br> <hr> <meta> <img> <input..> <option..> <link>

  • HTML 基本标签的讲解:

  •  

    • <strong>用于强调文本,强度更深,表示重要文本--->用于SEO优化

    • <b>只是视觉加粗效果--->单纯为了产生加粗

    • <html> <head> <body>标签

    • <h1>----<h6> 仅仅用于标题文本,不要为了产生粗体文本使用它们

    • <p>标签 段落标签

    • <strong><b>标签

    • 都会让文字产生加粗效果

    • <em> <i>标签

      • em用于强调文本

      • i只是视觉斜体效果

      • <strong><em>强调更强

    • 特殊符号:

      • &nbsp; ---->空格

      • &gt; --->大于号

      • &lt;--->小于号

      • &quot;--->引号

      • &copy;-->版权号


第三章 html基本标签


  • HTMl基本标签:

    • 可以创建一个内容滚动效果

    • 锚点也是一种超链接,是页面内进行跳转的超链接

    • 第一步:创建锚点 <a name="锚点名称"></a>

    • 第二步:使用创建好的锚点名称 <a href="#锚点名称">内容</a>

    • target属性:

    • _self(在原来页面打开)

    • _blank(新窗口打开)

    • _top(打开时忽略所有的框架)

    • _parent(在父窗口中打开)

    • 文字的格式按源码的排版来显示,我们称之为预处理格式

    • 对被用来组合文档中的行内元素

    • 注意:span没有固定的格式表现,当对它应用样式时,才会产生视觉上的变化

    • span标签

    • <pre>标签

    • <a>标签--->他有一个必不可少的属性 href

    • 创建锚点和锚链接

    • marquee标签

<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>
  • direction 表示滚动方向,取值有(left,right,up,down,默认left)

  • loop 表示滚动循环的次数,默认为无限循环

οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滚动速度)
  • 表示当鼠标移上区域的时候停止滚动,鼠标移开继续滚动


第四章 img图片标签与路径


  • 图片标签与路径:

    • 常见图片格式 jpg png gif

    • Gif (只支持全透明)

    • Jpeg /jpg

    • Png 半/全透明都支持

  • 图片标签写法 :

    • <img src="" alt="" width="" height="" />

  • 图片四要素:

    • src="" 图片路径

    • alt="" 图片含义

    • width="" 图片宽度 和图片大小保持一致

    • height="" 图片高度 和图片大小保持一致

    • title=""

  • 路径知识:

    • 相对路径:(Relative Path) 相对于该文件的路径;

    • 绝对路径:(Absolute Path) 从磁盘出发的路径;

    • 相对路径、绝对路径:

    • <img src="" …… align="" /> align属性--设置图片与后面文字的位置关系
      值--topbottommiddleabsmiddleleftright

  • 在静态页面中:

  •  

    • /开头表示根目录;

    • ./表示当前目录;(斜画线前面一个点)

    • ../上级目录;(斜画线前面两个点)

    • 直接用文件名不带/也表示同一目录

    • 这些都是相对于当前文件的位置来说的,如果用绝对路径的话就是写全了。


第五章 三种列表的讲解


  • 三种列表的知识讲解:

    • 无序列表是一个没有顺序项目的列表,此列表项默认粗体圆点进行标识

    • <ul>无序列表

<ul>
   <li></li>
   <li></li>
   <li></li></ul>
  • <ol>有序列表

    • 有序列表也是一列项目,只是列表项目使用的是数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
   <li>内容一</li>
   <li>内容二</li>
   <li>内容三</li></ol>
  • 列表符号

    • type="A" A B C D

    • type="a" a b c d

    • type="1" 1 2 3 4 默认值type="I" I II III type="i" i ii iii

    • type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符

    • 无序列表-列表符号:

    • 有序列表-列表符号

    • 列表嵌套

    • 无序列表-嵌套

<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> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>  
     <dt>pc网页制作</dt>  
     <dd>学习DIV+CSS JS JQ 项目实战</dd>  
     <dt>手机网页制作</dt>  
     <dd>手机网页制作实战</dd></dl>
  • dd是对dt的解释

    • < dl>< /dl>用来创建一个普通的列表,

    • < dt>< /dt>用来创建列表中的上层项目,

    • < dd>< /dd>用来创建列表中最下层项目,

    • < dt>< /dt>< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

<dl>
    <dt>中国城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>广州 </dd>
    <dt>美国城市</dt>
    <dd>华盛顿 </dd>
    <dd>芝加哥 </dd>
    <dd>纽约 </dd></dl>
  • dl是definition list的缩写

  • dtdefinition title的缩写

  • dd是definition description的缩写

  • list-style属性具有三个属性分量:

  • list-style-position :设置列表项图标的位置,位于文本内或者文本外

  • list-style-type: 设置列表项图标的类型

  • list-style-image :使用图像设置列表项图标


第六章 表单元素(上)


  • 表单标签:

    • <form>表单是一个包含表单元素的区域,包括起来的都是表单的内容

    • <form>表单标签

<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="" name="" value="" />

    • type="text" 单行文本输入框

    • type="password" 密码(maxlength=""

    • type="radio" 单项选择(checked="checked"

    • type="checkbox" 多项选择

    • type="button" 按钮

    • type="submit" 提交 type="image" 图片提交

    • type="file" 上传文件

    • type="reset" 重置

    • type="hidden" 隐藏

    • 常用type类型:

  • 关于表单中的设置默认值:

<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>标签的使用

    • label 元素不会向用户呈现任何特殊效果。

    • 不过,它为鼠标用户改进了可用性。

    • 如果您在 label 元素内点击文本,就会触发此控件。

    • 就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    • <label></label>

    • <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    • 例子:(重要---注册表单--用户体验--必做)

<p>单向选择</p><label for="male">男:</label><input type="radio" name="sex" id="male"/><label for="nv">女:</label><input type="radio" name="sex"checked="check"/>

第七章 表单和表格(下)


  • 表单和表格标签:

    • <textarea>文本域标签

    • <textarea>标签:

    • <textarea></textarea>是文本域标签,可以在其中插入一段文字内容,它有两个常用属性rowscols

  • 注意:

    • rows表示这个文本域有多少行

    • cols表示这个文本域有多少列

  • 除了这两个属性它还有readonly(只读,文本域的内容无法改变,相当于协议)和title(鼠标放上提示)

  • <select>标签的掌握

    • 注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性

<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>标签的使用

    • <tr>可以定义表格中的一行,一个<tr></tr>表示一行。

    • <tr>行标签:

<table border="1"><tr>
 <td>姓名</td>
 <td>性别</td></tr><tr>
 <td>姓名</td>
 <td>性别</td></tr></table>
  • <td>单元格标签:

    • <td>可以定义表格中的一个单元格,<td></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 ....

  • 常用可视化标签

    • 慢慢已经被淘汰了 被ul li代替

    • 如果是合并竖排的就是合并行(rowspan

    • 如果是合并横排的就是合并列(colspan

    • 列表

    • 结论:只要将来设计页面中有固定样式的列表,就用ul和li

    • src*属性用来设置图片的url数据

    • alt提供给搜索引擎搜索的

    • width

    • height

    • 结论 :显示图片

    • href*属性:设置跳转的网页地址

    • target属性:设置跳转的目标

    • 结论:凡事页面可以点击跳转或者表单提交的文字,都用a标签

    • 一般用它来布局

    • div

    • a 超链接标签

    • img

    • ul li

    • table caption tr td (th)


HTML部分导图总结


  • HTML5标签集合

转载于:https://www.cnblogs.com/fengyongxian/p/6442012.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

p1164【立方体求和】

题目&#xff1a; SubRaY有一天得到一块西瓜,是长方体形的....SubRaY发现这块西瓜长m厘米,宽n厘米,高h厘米.他发现如果把这块西瓜平均地分成m*n*h块1立方厘米的小正方体,那么每一小块都会有一个营养值(可能为负,因为西瓜是有可能坏掉的,但是绝对值不超过200).现在SubRaY决定从这…

html生成自定义表格,自定义js的表格插件

场景&#xff1a;指定元素&#xff0c;生成自定义表格。目的&#xff1a;了解js的插件开发。html代码&#xff1a;自定义表格插件var test new MyTable({elid:"mytable",//定义哪个div要生成表单thead:{//指定列名name:"姓名",age:"年龄",addr:…

使用JBehave,Gradle和Jenkins的行为驱动开发(BDD)

行为驱动开发 &#xff08;BDD&#xff09;是一个协作过程 &#xff0c;产品负责人&#xff0c;开发人员和测试人员可以合作交付可为企业带来价值的软件。 BDD是 测试驱动开发 &#xff08;TDD&#xff09; 的合理下一步 。 行为驱动的发展 本质上&#xff0c;BDD是一种交付…

手型显示html,css各种手型集合(css禁止手型)

html>css各种手型集合(css禁止手型).auto { cursor: auto; }.deafult { cursor: default; }.none { cursor: none; }.context-menu { cursor: context-menu; }.help { cursor: help; }.pointer { cursor: pointer; }.p…

Maven Fluido Skin和Javadoc类图

我使用Maven网站已有一段时间了&#xff0c;对此我感到非常满意。 我不想在Maven 3之后更新我的项目&#xff0c;但是没关系&#xff0c;Maven 3带来了许多新奇的东西。 但是&#xff0c;有两件事使我感到烦恼&#xff1a;缺乏美观和现代的外观&#xff0c;以及浏览复杂代码的J…

ZooKeeper安装,部署

实验环境 192.168.1.10  Zookeeper1:2181, Zookeeper2:2182 192.168.1.11  ZooKeeper3:2181 依赖环境 JDK1.7 安装&#xff0c;配置 1、下载解压 # 192.168.1.10cd /data/server tar -zxv -f zookeeper-3.4.6.tar.gz ln -s zookeeper-3.4.6 zookeeper1ln -s zookeeper-3.4.…

咸宁省2021年模拟高考成绩查询怎么查,2021咸宁市地区高考成绩排名查询,咸宁市高考各高中成绩喜报榜单...

距离2018年高考还有不到一个月的时间了&#xff0c;很多人在准备最后冲刺的同时&#xff0c;也在关心高考成绩。2018各地区高考成绩排名查询,高考各高中成绩喜报榜单尚未公布&#xff0c;下面是往年各地区高考成绩排名查询,高考各高中成绩喜报榜单&#xff0c;想要了解同学可以…

保证主题,JMS规范和ActiveMQ的消息传递

最近&#xff0c;一个客户要求我仔细研究ActiveMQ的“持久”消息的实现&#xff0c;它如何应用于主题以及在存在非持久订阅者的故障转移方案中会发生什么。 我已经了解到&#xff0c;JMS语义规定&#xff0c;即使面对消息代理提供者失败&#xff0c;也只能保证主题的持久订户以…

java中的除法及求余运算特殊性。

1.如果除法运算符的两个操作数都是整数类型&#xff0c;则计算结果也是整数&#xff0c;就是将自然除法的结果截断取整&#xff0c;例如19/4的结果是4&#xff0c;而不是5。并且除数不能0&#xff0c;否则将引起除0异常 2.如果运算符的两个操作数有1个是浮点数&#xff0c;或两…

林海峰老师python课件密码

egon4573转载于:https://www.cnblogs.com/fengjunhua/p/7395591.html

国际旅游管理专业跨专业考计算机,旅游管理考研我想跨专业考旅游管理专业的研究 – 手机爱问...

2005-12-11我是学旅游管理的大一学生,听人说这专业就这位兄弟提出的苦恼在大学生中很典型呀!其实你说的不尽然!旅游管理专业,是个很有前景的专业呀!怎么会没有前途呀?你对自己的人生也太悲观了吧?就是你说,学校不太好,这可能对自身在大学四年的发展有所限制,但这主要还是看自…

Java注释:探究和解释

Java 5 SE的许多出色功能之一是Annotations构造的引入。 注释是一些标签&#xff0c;我们可以将其插入程序源代码中&#xff0c;以使用某种工具对其进行处理并使其变得有意义。 注释处理工具通常使用&#xff08;Java 5 SE的&#xff09;Reflection API在Java代码或字节码级别的…

C# 类

一 string 类型 变量.Length - 字符串长度&#xff0c;返回int类型 string s "abcdefg"; int a s . Length; Console.WriteLine(a); // 输出结果为&#xff1a;7&#xff08;此字符串有7个字符&#xff09; // Length返回有多少个字符&am…

node+mongodb+win7

一、安装mongodb&#xff0c;参照教程&#xff0c;注意要先启动mongod.exe&#xff0c;再启动mongd.exe。 转载于:https://www.cnblogs.com/iloveyou-sky/p/7396997.html

cdrom是多媒体微型计算机,全国计算机二级题库第三章

同时按下CTRLALTDEL组合键的作用是(使用任务管理器关闭不响应的应用程序下列说法正确的是(在微型机性能指标中&#xff0c;CPU的主频越离&#xff0c;其运算速度越快)微型计算机键盘上的Tab键是(交替换档键)微型计算机键盘上的Enter键是(回车键)微型计算机的运行速度的单位是mi…

Spring MVC控制器JUnit测试

JUnit测试Spring MVC控制器并非易事 。 但是最近&#xff0c;一个新项目 &#xff08;即将在Spring推出&#xff09;提供了新工具来简化此工作。 这篇文章说明了如何通过JUnit测试来测试一个简单的控制器。 该代码是JUnit Testing Spring Service和DAO&#xff08;带有内存数据…

java基础03变量和基本数据类型

package cn.bdqn.test;/*** * author 小豆腐* * 变量&#xff1a;会变化的量&#xff1f;&#xff1f;* 一个数据在内存中存储空间的表示&#xff01;在运行期间可以动态改变&#xff01;* * 关键字:在java中已经被使用或者定义的单词&#xff01;不能作为变量名&#xff01…

5.set集合

list_1 [1,2,3,4,5]list_2 [1,3,5,7,9]#列表转成set集合set_1 set(list_1)set_2 set(list_2)#交集print(set_1.intersection(set_2))print(set_1 & set_2)#判断没有交集print(set(["a","b"]).isdisjoint(set_1))#并集print(set_1.union(set_2))pri…

JavaFX中基于表达式的PathTransitions

在JavaFX中&#xff0c;您可以使用PathTransition对象为路径上的节点设置动画。 PathTransitions使用Shape对象描述它们需要沿其动画的路径。 JavaFX提供了各种类型的形状&#xff08;例如&#xff0c;多边形&#xff0c;圆形&#xff0c;多边形&#xff0c;路径&#xff09;。…

html 显示视频列表,dvd光碟制作节目轨菜单布局,不要视频缩略图,只显示文件列表...

“如何在刻录视频光盘时自定义制作菜单&#xff1f;实现的效果就是当光盘插入DVD影碟机播放时&#xff0c;首先会出现一个所有视频文件列表的菜单(节目轨菜单)&#xff0c;就相似于音乐CD曲目表一样&#xff0c;不需要有视频缩略图&#xff0c;可通过遥控器选择性播放列表中某一…