1：HTML纯干货学习后的达到的效果
（1）：会使用HTML的基本结构，创建网页
（2）：会使用文本字体相关标签，实现文字修饰和布局
（3）：会使用图像、超链接相关标签，实现图文并茂的页面
（4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰
（5）：会使用表单及表单元素标签，实现表单页面的制作
（6）：理解post和get两种提交方式的区别
2：HTML的基本结构
2.1：标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内，<head>标签定义的内容在网页中不可见
2.2：<TITLE>： 定义网页标题
2.3：<meta>标签
<HEAD>
<META name="author" content="zpark">
<!--定义网页的作者-->
<META name="keywords"content="云计算,分布式处理,大数据,...">
<!--定义网页的关键字-->
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--避免出现乱码-->
<META http-equiv="refresh" content="1">
<!--定义网页每隔1秒自动刷新-->
<META http-equiv="refresh" content="2;url=http://www.taobao.com">
<!--定义网页2秒后自动刷新到"淘宝"-->
</HEAD>
2.4：文本、图像和链接。它包括在 <BODY>…</BODY> 标签内
<BODY bgcolor="#FFCCFF“ background="back_image.GIF" text="#FF0000">
hello world!!!
</BODY>
2.5：<HTML>…</HTML>标签标记 HTML 文档的开始和结束
2.6：标题标签(H1 到 H6 标签用于指定不同级别的标题)
<h1><h2><h3><h4><h5><h6>字体大小依次递减
2.7：字体字号<font>标签
<font size="1-7" color="" face="">
<!--字体大小可取1-7，字体颜色，字体类型-->
</font>
2.8：特殊符号
空格：&nbsp;
引号("")：&quot;
小于(<)：&lt;
大于(>)：&gt;
版权符：&copy;
2.9：段落和换行
段落标签：<p aligin="right/center/left"></p>
<!--align可以调正文字的位置，左中右-->
换行标签：<br/>
2.10：水平线和列表和预格式文本
水平线：<hr size="5" color="red" width="300">标签
设置水平线的厚度值，颜色和宽度
列表标签：
有序列表：
<ol type="1">
<li></li>
...
</ol>
无序列表：
<ul type="circle">
<li></li>
...
</ul>
预格式段落：<pre>标签
2.11：图像标签
<img src="data:images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >
<!--图像的位置，宽度，高度，为图形添加的提示性文字（鼠标移动到图形上）-->
<img ... align="middle">
<!--图像与文本的对齐方式，图像与文本居中对齐,还可以取top, bottom 值-->
2.12：超链接<a>标签：
<a href="register/register.html">[免费注册]</a>
<!--链接的地址，和链接的内容（可单击）-->
设置超链接的显示位置：
target：目标窗口属性四个特殊的窗口
<a href=url target=“_blank”> 显示在新窗口
<a href=url target=“_self”> 显示在本窗口
<a href=url target=“_parent”> 显示在父窗口
<a href=url target=“_top”> 显示在整个浏览器窗口
注意重点：
超链接-锚记属性：
链接到本页面
锚记标签用于使用户“跳”到文档的某个部分
步骤1：创建锚记
<a name=“marker”>主题名称</a>
步骤2：在超链接的 href中使用该锚记
<a href="#marker">xxx</a>
2.13：表格的基本结构
在 HTML 文档中，广泛使用表格来存放网页上的文本和图像
语法如下：
<table border="1'>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!--border用来设置表格边框尺寸大小，tr定义行，td定义列，table定义表格-->
跨多行的表格 ：
rowspan =“n” 属性表示跨多少行？
<td rowspan="3">学生成绩表</td>
跨多列的表格：
colspan=“n” 属性表示跨多少列？
<td colspan="3">学生成绩表</td>
2.14：表格的美化修饰（表格的宽度，高度，背景色，背景图片，文字的对齐方式）
设置表格的尺寸和边框：
width用来设置表格的宽度
height用来设置表格的高度
border用来设置表格边框尺寸大小
bordercolor用来设置表格边框颜色
设置背景：
background属性用来设置表格的背景图片
bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色
值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。
设置对其方式：
align属性用来设置表格、行、列的对齐方式
填充属性、间距属性：
border(边框的厚度)
cellpadding(单元格填充)用来设置表格内填充距离
cellspacing(单元格间距)用来设置表格内框宽度
2.15：表单
表单的典型应用：
注册用户
收集信息
反馈信息
为网站提供搜索工具
表单中包含的表单元素：
单行文本输入框(TEXT)
<INPUT type=“text ” value="张三" size="20">
type="text";文本输入框
value="";输入元素的默认值
size="";文本框的宽度
密码框(PASSWORD)
<INPUT type=“password ” value=“ 123456 ” size=“22”>
type="password";密码框
value="";初始密码
size="";密码区的宽度
单选按钮(RADIO)
<INPUT type="radio" value="男" checked="checked">
type="radio";单选按钮
value="";初始值
checked="checked";默认选中
复选框(CHECKBOX)
<INPUT type=“checkbox” name="cb2" value="talk">
type="checkbox";复选框
name="":复选框名
value="";复选框值
checked="checked";设置此复选框默认被选中
重置按钮(RESET)
<INPUT type="reset" name="Reset" value="重填">
type="button/reset/submit";按钮类型可为button、submit,reset
name="":按钮名称
value="";按钮上面的文字
多行文本框(TEXTAREA)
<TEXTAREA name="textarea" cols="40" rows="6">
文本框中的内容
</TEXTAREA>
name="textarea" ;文本框的名字
cols="40";文本框的列数
rows="6";文本框的行数
下拉列表(SELECT)
<select name=“名称” >
<option value=“选项的值” selected>
…
</option>
<option value=“选项的值”>
…
</option>
……
</select>
说明： selected默认被选中的可选项。
案例说明
<INPUT name="byear" value="yyyy" size=4 maxlength=4 >年
maxlength=4;设置此输入框最多只能输入四个符号
提交按钮(SUBMIT)
表单的基本结构：
<FORM action=“http://www.sohu.com” method=“post”>
……
</FORM>
ACTION = “URL”；指定提交后，由服务器上那个处理程序处理
METHOD =“post或get”；指定向服务器提交的方法:一般为post或get方法,
post方法比较安全
表单元素的统一格式：
<FORM name="form3" method="post" action="">
<INPUT type="xxx" name="xxx" value="xxx" size="21“ maxlength="4"
checked="checked">
……
</FORM>
type="";指定元素的类型，可为TEXT、RADIO、SUBMIT等
name="";控件的名称
value="";控件的初始值
size="";控件的初始宽度
maxlength="":控件中输入的最多字符个数
checked="":控件是否被选中
2.16：框架
（1）：框架集页面(FrameSet.htm)
（2）：广告栏顶部框架(top.htm)
（3）：框架的边框
（4）：导航栏左侧框架(left.htm)
（5）：详细内容页面右侧框架(main.htm)页面中此部分是变化的
框架的基本结构：
<FRAMESET rows="25%,50%,*" border="5">
<FRAME name=“top" src="the_first.html">
<FRAME name="middle" src="the_second.html">
<FRAME name=“bottom" src="the_third.html">
</FRAMESET>
rows=""; 将窗口进行上下分割，各部分的高度用逗号分开
cols: 将窗口进行左右分割，各部分的宽度用逗号分开,可选。
在浏览器中创建左中右结构的窗口： <frameset cols="150,*"...>
border="5"；窗口边框的宽度
使用框架：
创建多个复杂的窗口实现步骤如下：
1、创建1个HTML页面“top.html”
2、创建1个HTML页面“left.html”
3、创建1个HTML页面“right.html”
4、创建框架集HTML页面“Frame_Sets.html”
<FRAMESET rows="20%,*" frameborder="0">
<FRAME src="top.html" name="topframe“ scrolling="no"
noresize="noresize">
<FRAMESET cols="20%,*">
<FRAME src="left.html" noresize="noresize“ scrolling="no"
name="leftframe“ >
<FRAME src="right.html" name="rightframe">
</FRAMESET>
</FRAMESET>
frameborder="0"；设置无框架边框
scrolling="no" ；不显示滚动条
name="rightframe"；框架名称，便于超链接target属性所引用
设置超链接的显示位置：
框架指定名称
<frame src=“url” name=“框架名”>
target 给超链接指定显示位置
<a href="url" target=“框架名”>
<P>
<a href="right.html" target="rightframe">
<IMG src="data:images/reg.jpg" width="158" height="31" border="0" />
</a>
</p>
<P>
<a href="buy.html" target="rightframe">
<IMG src="data:images/buy.jpg" width="160" height="32" border="0" />
</a>
</p>
target="rightframe"；target属性指定了要链接的文件会出现在名称
为“rightframe”的框架窗口里
3：CSS纯干货学习后的达到的效果(CSS层叠样式表)
（1）：会创建统一外观的字体
（2）：文本会创建无下划线的超连接样式
（3）：会创建个性化的表格
（4）：会创建个性化的表单
（5）： 会使用DIV实现页面布局
（6）：CSS样式表
HTML标签的外观样式比较单一
颜色只有黑白
字体类型和大小无变化
CSS（Cascade Style Sheets）级联/层叠样式表
作用：
HTML页面的美化（相当于华丽的衣服）
实现内容与样式的分离，方便团队开发
4：CSS语法学习
4.1：样式表的基本语法
样式表的基本结构：
<STYLE type="text/css">
P{color:red; font-size:30px; font-family:隶书;}
……
</STYLE>
<style type="text/css">文档样式表开始，类型为CSS样式
</style>声明文档样式表结束
p{....}样式规则;
样式规则：
P {color:red; font-size:30px; font-family:隶书;}
p:选择器
属性名称：color:red; font-size:30px; font-family:隶书;
注意：在最后一个属性后面加上一个分号 (;) 是一个好习惯
4.2：样式的分类
根据样式代码的位置，分为三类：
行内样式：
使用场景：如果希望某段文字和其他段落的文字显示风格不一样，
那么使用用“行内样式”。
使用语法：行内样式使用元素标签的 STYLE 属性定义。
<html标签 ... style="样式规则">xxx</html标签>
<p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-
size:24px">
...
</p>
内嵌样式：
行内样式表局限于某1个标签，如果希望本网页内的所以同类标签都采用统一样式，
这时应采用内嵌样式。
P { font-size:20px; color:blue; text-align:center }
选择器名称，样式规则，样式表；
根据选择器的不同，内嵌样式又分为：
HTML 选择器：
P { font-size:20px; color:blue; text-align:center }
CLASS 类选择器：
.myinput {border: 1px solid;border-color:#D4BFFF;
color:#2A00FF}
类选择器的定义格式为：
.类名{ …样式规则;}
应用类选择器：class＝"类名(不含 . )"；
ID 选择器：
#fire { color:red; font-size: 24px; }
ID选择器的定义格式为：
＃ID名{ …样式规则;}
应用ID选择器：id＝"ID名(不含#)"；
CLASS和ID选择器的区别：
1、在CSS中定义样式表时，ID选择器以"#"开头；CLASS选择器以"." 开
头；
2、在HTML中使用样式表时，使用ID选择器需要id属性；使用CLASS选择
器需要class属性；
3、HTML标签中的id属性，通常用于唯一的标识页面中的一个页面元素，
不允许重复；class允许重复。
4、优先使用CLASS选择器；ID选择器不推荐。
内嵌样式-特殊的选择器：
A:hover 特殊的伪类选择：
其中A代表超链接
hover：代表鼠标悬停
active：当前活动的超链接
visited：访问过的超链接
link：未访问过的超链接
外部样式：
使用场景：同一网站内的多个网页，样式风格统一。
第一步：创建样式表文件newstyle.css
第二步：把样式文件和网页关联
<HEAD>
<LINK rel="stylesheet" type="text/css" href="样式表文件.css">
</HEAD>
第三步：浏览查看各网页
样式文件：newstyle.css P{…..}；
4.3：样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：
有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
某些样式不同的页面，除了使用外部样式文件，还需定义内嵌样式
某个网页内，部分内容”与众不同“，采用行内样式
对于某个HTML标签：
1）如果有多种样式，如果规定的样式没有冲突，则叠加；
2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还
没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。
4.4：常用样式属性-文本字体：
color: red / blue / #ff7300; 颜色
font-family: ”隶书”; 字体类型
font-size:20px; 字体大小(单位，px,em,ex)
text-align: center / left / right; 文本对齐
font-weight: bold / normal; 字体粗细
text-decoration: underline/none; 文本修饰
4.5：常用样式属性-边框
border-width: 1px; 边框粗细
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style:solid/dashed/dotted; 边框线类型
border-top-style、
border-bottom-style、
border-left-style、
border-right-style
border-color: #ff7300; 边框颜色
border-top-color、
border-bottom-color、
border-left-color、
border-right-color
border: 1px solid #ff7300 缩写
4.6：常用样式属性-背景
背景颜色
background-image:url(“xxx.gif”); 背景图片
background-repeat: repeat/no-repeat/repeat-x/repeat-y; 背景是否重复
background-position:center/left/right/top/bottom 背景图片定位
4.7：<SPAN> 标签
<SPAN>是行级层标签，不可以包含图片、标题、段落等，只能包含文字内容，对其中
的内容可单独做样式控制。
4.8：<DIV> 层标签
<DIV>是块级层标签，可以包含图片、标题、段落、文字等
DIV的样式属性：
position:absolute; 绝对定位
left:149px; x坐标
top:110px; y坐标
z-index:1; z坐标(位于哪一层)
width:357px; 宽
height:87px; 高
display: none/block/inline; 显示方式
DIV布局：
float属性：定义元素在哪个方向浮动
left-左侧浮动，从左往右排列显示
right-右侧浮动，从右往左排列显示
none-默认，显示在文档中定义的位置
盒模型：
每个元素都被看作一个矩形框（盒子），由内容、padding（填充/内边距）、
border（边框）和margin（空白边/外边距）组成。

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3的更多相关文章

  1. Docker_入门？只要这篇就够了！（纯干货适合0基础小白）

    与sgy一起开启你的Docker之路 关键词: Docker; mac; Docker中使用gdb无法进入断点,无法调试; 更新1: 看起来之前那一版博文中参考资料部分引用的外站链接太多,被系统自动屏 ...

  2. 记录我这一年的技术之路(nodejs纯干货)

    2015年12月28日23:19:54 更新koa应用.学习型网站和开发者工具等 coding伊始 开始认认真真的学习技术还是2015.10.21日开始的,记得很清楚,那天,是我在龙湖正式学习的第一天 ...

  3. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  4. mongoDB 学习笔记纯干货（mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等）

    最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...

  5. （纯干货）最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  6. 【转】纯干货：PS高手完全自学宝典(原创文章)

    文章版权:Tommy子言  原创 一. 一切从基础开始 强大的PS虽然功能众多,但归纳起来主要有三大功能: 修图——主要包括纯图片的修饰.合成.3D合成等等: 画图——主要是指用PS来绘画.广告插画, ...

  7. IT技术学习指导之Linux系统入门的4个阶段（纯干货带图）

    IT技术学习指导之Linux系统入门的4个阶段(纯干货带图) 全世界60%的人都在使用Linux.几乎没有人没有受到Linux系统的"恩惠",我们享受的大量服务(包括网页服务.聊天 ...

  8. Java程序员的日常——经验贴（纯干货）

    工作当中遇到的事情比较杂,因此涉及的知识点也很多.这里暂且记录一下,今天遇到的知识点,纯干货~ 关于文件的解压和压缩 如果你的系统不支持tar -z命令 如果是古老的Unix系统,可能并不认识tar ...

  9. 360手机助手内部资料曝光，63张PPT纯干货

    360手机助手内部资料曝光,63张PPT纯干货 日前,国内最大的安卓应用商店360手机助手发布了<2016年手机软件行业趋势绿皮书>,这份绿皮书对2015年以来移动互联网的趋势做了总结,展 ...

随机推荐

  1. 对div作用域的理解

    若想要div的height起作用,则要保证它上面的层的height也是有用的,如上图

  2. ajax头像上传

    html代码: <input id="fileinput" type="file" /><br /> <br /> < ...

  3. （学习网址）Python 自动化测试

    1.Python自动化测试地址 http://www.wtoutiao.com/author/python-selenium.html 2.unittest参考网址: 1)python自动化测试报告H ...

  4. 什么是侧翼区(flanking region)和侧翼区单核苷酸多态性(Flanking SNPs)

    侧翼区(flanking region) 根据维基定义:The 5' flanking region is a region of DNA that is adjacent to the 5' end ...

  5. python datatime

    一.datetime 1.date date.today() 2.time 3.datetime datetime.now() datetime.strftime(fmt) 转换为字符串 dateti ...

  6. 高并发访问mysql时的问题(一):库存超减

    如果在对某行记录的更新时不采取任何防范措施,在多线程访问时,就容易出现库存为负数的错误. 以下用php.mysql,apache ab工具举例说明: mysql表结构 CREATE TABLE `yx ...

  7. Android之ImageView 旋转

    方案一: (1)获取ImageView对应的图片,并将其转成Bitmap; (2)创建Matrix对象; (3)调用matrix.setRotate(     );设置旋转度数 (4)重新创建bitm ...

  8. who is the middle

    Description FJ is surveying his herd to find the most average cow. He wants to know how much milk th ...

  9. 《UML大战需求分析》阅读笔记3

    流程分析利器--活动图 活动图属于行为建模的一种.用来分析的不是系统中的某个属性,而是系统或是其中某个部分的活动.结构建模表达的是静态内容,行为建模表达的是动态内容. 在介绍活动图之前,先介绍一下行为 ...

  10. UIView的剖析(转)

    转自:http://blog.csdn.net/mengtnt/article/details/6716289 前面说过UIViewController,但是UIView也是在MVC中非常重要的一层  ...