整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

最详细的html+css笔记(一)


一章 职业规划和前景


  • 职业方向规划定位:
  • web前端开发工程师
  • web网站架构师
  • 自己创业
  • 转岗管理或其他
  • web前端开发的前景展望:
  • 未来IT行业企业需求最多的人才
  • 结合最新的html5抢占移动端的市场
  • 自己创业做老板
  • 随着互联网的普及web开发成为企业的宠儿和核心
  • web职业发展目标:
  • 第一、梳理知识架构
  • 负责内容的HTML
  • 负责外观的css(层叠样式表)
  • 负责行为的js
  • ps切图
  • 第二、分解目标(起步阶段、提升阶段、成型阶段)
  • 起步阶段:
  • 基本知识的掌握
  • 常用工具的掌握
  • 沟通技巧的掌握(围绕客户的需求)
  • 良好的开发习惯(加注释、对齐方式)
  • 提升阶段:
  • 熟悉掌握HTML基本标签和属性
  • 熟练掌握css的基本语法和使用
  • 浏览器兼容和w3c标准的掌握
  • 结合html+css+js开始系统项目的开发
  • 成型阶段:
  • 精通DIV+CCS布局
  • 精通css样式表控制html标签
  • 熟悉运用js制作动态网站的效果
  • 能独立开发完成网站

第二章 html基本结构


  • 认识HTML:
  • html不是一种编程语言,是一种标志语言
  • 标记语言是由一套标识标签组成的
  • html使用标签来描述网页
  • html结构:
<html>
 <head></head>
 <body></body>
</html>
  • 不成对出现的标签
  • <br> <hr> <meta> <img> <input..> <option..> <link>
  • HTML 基本标签的讲解:
  • <html> <head> <body>标签
  • <h1>—-<h6>仅仅用于标题文本,不要为了产生粗体文本使用它们
  • <p>标签 段落标签
  • <strong><b>标签
  • 都会让文字产生加粗效果
  • <strong>用于强调文本,强度更深,表示重要文本—>用于SEO优化
  • <b>只是视觉加粗效果—>单纯为了产生加粗
  • <em> <i>标签
  • em用于强调文本
  • i只是视觉斜体效果
  • <strong>比<em>强调更强
  • 特殊符号:
  • —->空格
  • > —>大于号
  • &lt;—>小于号
  • &quot;—>引号
  • ©–>版权号

第三章 html基本标签


  • HTMl基本标签:
  • span标签
  • 对被用来组合文档中的行内元素
  • 注意:span没有固定的格式表现,当对它应用样式时,才会产生视觉上的变化
  • <pre>标签
  • 文字的格式按源码的排版来显示,我们称之为预处理格式
  • <a>标签—>他有一个必不可少的属性 href
  • target属性:
  • _self(在原来页面打开)
  • _blank(新窗口打开)
  • _top(打开时忽略所有的框架)
  • _parent(在父窗口中打开)
  • 创建锚点和锚链接
  • 锚点也是一种超链接,是页面内进行跳转的超链接
  • 第一步:创建锚点 <a name="锚点名称"></a>
  • 第二步:使用创建好的锚点名称 <a href="#锚点名称">内容</a>
  • marquee标签
  • 可以创建一个内容滚动效果
<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图片标签与路径


  • 图片标签与路径:
  • 常见图片格式 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属性–设置图片与后面文字的位置关系
  • 值–top、bottom、middle、absmiddle、left、right
  • 在静态页面中:
  • /开头表示根目录;
  • ./表示当前目录;(斜画线前面一个点)
  • ../上级目录;(斜画线前面两个点)
  • 直接用文件名不带/也表示同一目录
  • 这些都是相对于当前文件的位置来说的,如果用绝对路径的话就是写全了。

第五章 三种列表的讲解


  • 三种列表的知识讲解:
  • <ul>无序列表
  • 无序列表是一个没有顺序项目的列表,此列表项默认粗体圆点进行标识
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>
  1. 有序列表
  • 有序列表也是一列项目,只是列表项目使用的是数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
<ol>
 <li>内容一</li>
 <li>内容二</li>
 <li>内容三</li>
</ol>
  • 列表符号
  • 无序列表-列表符号:
  • type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符
  • 有序列表-列表符号
  • 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
  • 列表嵌套
  • 无序列表-嵌套
<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的缩写
  • dt是definition 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>标签的掌握
  • 常用type类型:
  • <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" 隐藏
  • 关于表单中的设置默认值:
<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>是文本域标签,可以在其中插入一段文字内容,它有两个常用属性rows和cols
  • 注意:
  • 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 ….
  • 常用可视化标签
  • div
  • 一般用它来布局
  • a 超链接标签
  • href*属性:设置跳转的网页地址
  • target属性:设置跳转的目标
  • 结论:凡事页面可以点击跳转或者表单提交的文字,都用a标签
  • img
  • src*属性用来设置图片的url数据
  • alt提供给搜索引擎搜索的
  • width
  • height
  • 结论 :显示图片
  • ul li
  • 列表
  • 结论:只要将来设计页面中有固定样式的列表,就用ul和li
  • table caption tr td (th)
  • 慢慢已经被淘汰了 被ul li代替
  • 如果是合并竖排的就是合并行(rowspan)
  • 如果是合并横排的就是合并列(colspan)

HTML部分导图总结


  • HTML5标签集合

学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料,一起学习,一起成长!

庆假期很适合学习点新知识。前几天有粉丝在后台问我关于使用 js 开发后端服务的建议,我给推荐了这一个面向小白的走向全栈开发工程师的教程。

关于这个全栈入门教程

这是一个面向零基础的基于 JavaScript 语言的全栈开发教程,教程基于目前流行的前后端分离开发模式,使用 Vue.js + Node.js 并且通过从实际需求的角度来完成基础的业务代码,没有过多功能封装,几乎都是底层的代码,通俗易懂,上手容易。

教程截图

关于作者

这套 JavaScript 全栈教程的作者是廖雪峰,是一位有着超过十年软件开发经验的大神,精通 Java / Python / Ruby / Visual Basic / Objective C 等,对开源框架有很深入的研究,著有《Spring 2.0核心技术与最佳实践》一书,是很多后端开发工程师非常熟知的业内大神。

教程目录

因为针对的是对 javascript 零基础的小白用户,因此这个教程有很大篇幅是 javascript 语言入门。

  • JavaScript简介
  • 快速入门
  • 函数
  • 标准对象
  • 面向对象编程
  • 浏览器
  • jQuery
  • 错误处理
  • underscore
  • Node.js

学习建议和感想

这是我毫无后端开发经验时学习后端开发的入门的教程,这套教程让我学会了如何使用 javascript 来开发后端 api 接口。而且前面的基础语法教程,也看得津津有味,复习了很多不会用、不常用但很巧妙的代码实现。这是我推荐这个教程的最大原因。

教程截图

这个教程除了适合零基础的小白,我认为这更像一个写给后端开发者的、从其他后端语言转 javascript 的教程,如果像我之前学习的那样没有过后端开发经验,就需要注意几个问题:

  • 教程涉及的代码最后自己敲出来实现一遍,看懂并不代表会写
  • 后端开发设计的基础知识很多,建议提前了解数据库、服务器基本知识,学习起来会更顺畅
  • 教程中很多关联的代码片段,拷贝出来配合流程图来理解,会事半功倍

入门靠老师,修行靠自己。总的来说,这只是一套非常基础的入门教程,学完后能够了解前端开发和后端开发,可以实现简单的 demo,可以帮助我们学习 koa / egg.js 这类基于 Node.js 的后端开发框架,但后端开发需要学习的知识很多,数据库设计、查询优化、架构设计等等,成为一个合格的全栈工程师,路还有很远。

教程免费学习说明

这是一个完全免费的 JavaScript 全栈入门教程,就算完全不懂 js 也能快速入门,在线免费学习。如果想学 js 语法,也可以看看之前推荐过的阮一峰写的免费 javascript 系统学习入门教程。

最后祝各位有所收获,迈进全栈开发工程师行列。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

JavaScript 全栈开发入门 - 由廖雪峰提供的面向小白的免费在线教程|那些免费的砖

1272208556@qq.com

1、HTML + CSS + UI

2、Javascript

3、HTML5CORE + AJAX + Jquery

4、Bootstrap,Angular JS + 其他框架

1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO

======================================================

1、Internet

1、什么是Internet

是全球性计算机互联网络,是由若干终端(PC,移动端)以及特殊的传输介质而组成的一个网络结构

PC:Personal Computer

2、提供的服务

信息共享

Telnet : 远程连接

Email : 电子邮件

WWW : 万维网 www.baidu.com

BBS : 电子公告板 ,论坛

FTP : 上传和下载服务

3、实现技术

1、分组交换原理:数据通过数据包进行传递,到达目的地后,对数据包进行重组

2、TCP/IP 协议簇

2、WEB

1、什么是WEB

就是 WWW(World Wide Web)

w3c : www consortium 万维网联盟

2、能干什么

能够将各类的信息和服务进行连接,提供图形用户界面

信息:文字、图片、音频、视频

服务:Telnet, FTP , Mail , HTTP ...

3、万维网就是无数的文档集合(网页文档),文档会驻留在世界(互联网)的任何一个角落

3、WEB的工作原理

WEB是基于Internet的多媒体信息服务系统

1、基于 浏览器 / 服务器 模式

B / S : Browser / Server

在服务器上,主要以网页的形式发布多媒体信息

2、由WEB服务器、浏览器、通信协议组成

3、WEB 相关技术

1、服务器端技术(后台)

PHP,JSP,ASP 。。。 。。。

2、客户端技术(前端技术)

HTML,

CSS,

Javascript

=========================================================

1、HTML 入门

1、什么是HTML

HTML(Hyper Text Markup Language),超级文本标记语言

超文本:

a

标记 : 超文本都是由标记组成的

<a>

语言 : 包含自己独特的语法

HTML最终由浏览器负责解释

HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript

2、HTML版本

超级文本标记语言(第一版)

HTML2.0

HTML3.2

HTML4.0

HTML4.01

XHTML1.0

HTML5

3、标签(标记)

1、标签语法

1、必须使用尖括号扩起来

<a>,<div> ...

<A>,<a>

2、有封闭类型的标签,也有非封闭类型的标签

1、封闭类型

也称作双标记,则必须成对出现

<标记>文本内容</标记>

不同的标记,决定了"文本内容"的不同表现形式

eg:<a></a>,<p></p>,<div></div>

2、非封闭类型

也称作单标记、空标记

<标记>

或者

<标记/>

eg:

<hr>,<br>,<img>

3、元素

标记就是元素,元素也称为标记

4、元素嵌套(标签嵌套)

标签之间相互嵌套,形成复杂的语法结构

<body>

<p>

<a></a>

</p>

</body>

5、属性

属性是出现在开始标记中的内容,作用是修饰元素

<p 属性名="属性值"></p>

<p 属性名='属性值'></p>

<p 属性名=属性值></p>

标准属性:每个元素都会具备的通用属性

id : 定义每个标签的唯一标识

title:提示文本

class:样式相关,类样式

style:样式相关,行内样式

操作1:定义一对p标签,id属性设置为program

<p id="program"></p>

多属性:

<p 属性1="值" 属性2="值"></p>

注意:多属性之间,排名不分先后

2、创建HTML文档

开发工具:任何一个文字编辑软件都可以开发HTML

EditPlus : 超级记事本

运行环境:任何一个浏览器都能运行HTML

Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

超文本文件(HTML文档):

是一个以.html或.htm结尾的文档

3、文档结构

1、文档类型声明

声明使用的html版本和风格

<!doctype html>

2、html页面

1、文档根元素

每个文档有且仅有一对根元素 , html

2、在根元素的内部,包含两对子元素

1、head : 页面的头部内容

定义页面全局信息

包含:

<title></title> : 网页标题

<meta />:声明元数据(编码,关键字,描述)

<style></style>:声明内部样式表

<link />:引入外部样式表

<script></script>:定义或引入脚本文件

2、body : 页面的主体内容

任何一个标签,都可能会出现在body中

3、head元素

1、声明网页标题

<title></title>

2、定义网页文本编码格式

默认:ISO-8859-1,只支持英文以及英文状态下的标点符号

utf-8:支持中英文,标点符号

<meta charset="utf-8" />

3、... ...

4、body元素

属性:

text : 文本的颜色

bgcolor : 背景颜色

练习1:

1、为body添加两个属性,text,bgcolor

2、文本颜色 : 红色(red)

背景颜色 : 银色(silver)

3、在body中随意写上一段文本,观察页面显示效果

5、文本标记

1、特殊的文本

转义字符:

空格:&nbsp;

< : &lt; less than

> : &gt; greater than

版权标识:&copy;

2、文本标记

1、文本样式

<b>...</b> : 加粗文本

<i>...</i> : 斜体文本

<u>...</u> : 下划线

<s>...</s> : 删除线

<sup>...</sup> : 上标

<sub>...</sub> : 下标

2、标题元素

1-6级6个标题

<hn></hn> n:1-6

一级最大

六级最小

3、段落元素

提供了结构化文本的表现方式

语法:<p></p>

注意:

1、每对p标签单独成一个段落

2、段落与其他元素有垂直空白,段落间距

常用属性:

align : 水平对齐方式

取值:left center right

4、换行元素

在代码的任何位置处,实现回车的效果

<br />

5、水平线

又叫分割线

<hr />

属性:

1、size : 水平线的粗细,通常以像素(px)为单位

2、width: 宽度

3、align: 水平线的水平对齐方式

4、color: 颜色

6、分区元素

目的:为元素进行分组,多数用在布局中

块分区元素:<div></div> 层

行内分区元素:<span></span>

注意:

div :主要用在布局上

span:修改其内部内容的样式

7、预格式化

保留源文档中的空格和回车

<pre>

文本内容

</pre>

3、注释

可以写在html源码中,但不被浏览器解释的文本

语法:

<!-- 注释内容 -->

4、行内元素与块级元素

块级元素:默认情况下,块级元素独占一行,元素的前后都会自动换行 div,hn,hr,p

块级元素作用:布局

行内元素:默认情况,多个元素位于同一行,不会换行

span,文本标记... ...

行内元素作用:修改内部内容的样式