张鹏老师html笔记整理

合集下载

HTML知识点汇总

HTML知识点汇总第一章HTML基础知识1、HTML简介HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。

它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。

2、HTML的标记组成HTML用于描述功能的符号称为“标记”。

标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。

如<body></body>、<p></p>等1)单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫单标记。

XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。

常见的单标记如<br />、<hr />等。

2)双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线，语法形如：<标记>内容</标记>。

例如：<p>段落</p>3)XHTML要求所有标记均为小写，且所有标记属性必须添加双引号4)标记对不能交叉3、HTML基本结构<html><head><title>网页标题</title></head><body></body></html>1)<title>标记对不能放在<body>标记对中，同理，其它表示内容的标记也不能放在<head>标记对中2)<html></html>表示HTML语言，在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。

html和CSS笔记

HTML语言剖析Html简介-目录全写： HyperText Mark-up Language译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。

由文字（字母，数字、标点符号）及标签组合而成。

任何文字编辑器都可以，这里推荐用：Dreamweaver。

1. Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；►纯文本文件，可以使用各种文本编辑器编写； (Dreamweaver是首选)►文件扩展名： .htm 或 .html；►html文件必须在Web浏览器上运行；（运行环境）►具有跨平台性。

2.HTML语法结构：►HTML文件是由一系列的元素和标签（tag）组成的；►元素：网页中的内容；►标签：用于规定元素的属性和它在文件中的位置；►格式：<元素名称属性="值"...>元素资料</元素名称>,<元素名称属性="值"...> ►不区分大小写。

3.HTML文件结构：►起始标记：<html> </html> 表示HTML网页的起始；►文件头部：<head> </head> 设置初始化文档信息和文档管理标注；►文件主体：<body> </body> 设置格式化的浏览器显示的文档（内容）；►注释部分： 可以放在任何位置；►<! >※例:<html><head><title>Html简介</title><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head><body bgcolor="#FFFFFF" text="#000000"></body></html>⏹标签写法：►任何标签皆由"<>"所包含，如 <b>►标签名与小于号之间不能留有空白字符。

HTML学习笔记

HTML整理笔记By:小A（我在这里虽然是把HTML标签做个简单的介绍，我想我写的很详细，即使不会，没接触过HTML的人也能够看的懂，也能够学会，还有...第一次写没有大纲，见谅！最后送给大家一句话：多抽出一分钟时间来学习,让你的生命更加精彩!）1.什么是HTML？HTML (Hyper Text Markup language)超文本标记语言，用于创建网页文档。

使用HTML标记（标签）和元素创建扩展名html 、htm2.HTML常用标记（标签）标记类型名称或意义作用备注文件标记<HTML>●文件宣告让浏览器知道这是HTML 文件<HEAD>●开头提供文件整体信息<TITLE>●标题定义文件标题，将显示于浏览器顶端<BODY>●主体设计文件格式及内容所在排版标记○说明标记为文件加上说明，但不被显示<P>○段落标记为字、图、表格等之间留下一空白行<BR>○换行标记令字、图、表格显示于下一行<HR>○水平线插入一水平线反对<CENTER>●居中令字、图、表格等显示于中间<PRE>●预设格式令文件按原代码的排列方式显示<DIV>●定位标记设定字、图、表格等的摆放位置<NOBR>●不换行令文字不因太长而换行<WBR>●建议换行预设换行部位字体标记<STRONG>●加重语气产生字体加粗Bold 的效果<B>●粗体标记产生字体加粗的效果<EM>●强调标记字体出现斜体效果<I>●斜体标记字体出现斜体效果<TT>●等宽字体Courier字体，字母宽度相同<U>●加下划线加下划线反对<H1>●一级标题标记将字体变大，级数越高越小<H2>●二级标题标记将字体变大<H3>●三级标题标记将字体变大<H4>●四级标题标记将字体变大<H5>●五级标题标记将字体变大<H6>●六级标题标记将字体变大反对<FONT>●字体标记设定字体、大小、颜色反对<BASEFONT>○基准字体标记设定所有字体、大小、颜色<BIG>●字体加大令字体稍微变大<SMALL>●字体缩小令字体稍微缩小<STRIKE>●加删除线为文字加删除线反对<CODE>●程式码字体稍微加宽如<TT><KBD>●键盘字字体稍微加宽，单一空白<SAMP>●范例字體稍為加寬如<TT><VAR>●变量斜体效果<CITE>●斜体标记斜体效果<BLOCKQUOTE>●向右缩排文字向右缩排<DFN>●述语定义斜体效果<ADDRESS>●地址标记斜体效果<SUB>●下标字文字下标<SUP>●上标字文字上标清单标记<OL>●顺序清单清单项目将以数字、字母顺序排列<UL>●无序清单清单项目将以实心圆点作为符号排列<LI>○清单项目清单中的项目，一个标记一行反對<MENU>●选项清单可用type参数指定项目符号。

传智播客张鹏带你一周hold住html+css

传智播客张鹏带你一周hold住html+css相信大家应该都听过说：java，，php，网站前端，网页设计等这些技术，但是可能你不知道，这些技术都需要掌握两个基础的技术—html+css。

我将带领大家一起，在一周的时间内，轻松搞定这两个技术。

下面是我们这一周课程的详细内容。

html第一天：核心技术课程、认识什么是HTML、标记的语法、常用的HTML标记的应用、网页基本骨架标记、meta元标记、列表标记等。

html第二天：核心技术课程、表格的应用、超链接标记、综合案例通过表格与超链接仿hao123网页html第三天：核心技术课程、表单的使用、多媒体元素、框架与嵌入框架应用、从html 迈向xhtmlcss第一天：核心技术课程、什么是Web标准，Web标准的构成、表现和结构分离、CSS 语法、CSS常用属性、CSS控制文字与链接css第二天：核心技术课程、CSS选择符的详细使用、CSS常用属性、CSS控制边框、背景等、CSS盒子模型，块状元素与内联元素css第三天：核心技术课程、浮动布局、定位布局、常见的DIV+CSS布局方式、项目实战-免费公开课页面制作课程目录：传智播客张鹏带你一周hold住html+css 第1讲html标记语法基础传智播客张鹏带你一周hold住html+css 第2讲html文档基本结构传智播客张鹏带你一周hold住html+css 第3讲html编辑器及body详解传智播客张鹏带你一周hold住html+css 第4讲html标记语义应用上集传智播客张鹏带你一周hold住html+css 第5讲html标记语义应用下集传智播客张鹏带你一周hold住html+css 第6讲html列表与图片应用传智播客张鹏带你一周hold住html+css 第7讲html阶段实战新闻页面传智播客张鹏带你一周hold住html+css 第8讲html表格应用基础传智播客张鹏带你一周hold住html+css 第9讲html表格高级应用-仿hao123效果上集传智播客张鹏带你一周hold住html+css 第10讲html表格高级应用-仿hao123效果下集传智播客张鹏带你一周hold住html+css 第11讲html超链接应用传智播客张鹏带你一周hold住html+css 第12讲html表单应用基础传智播客张鹏带你一周hold住html+css 第13讲html表单详解传智播客张鹏带你一周hold住html+css 第14讲html多媒体应用传智播客张鹏带你一周hold住html+css 第15讲html框架技术传智播客张鹏带你一周hold住html+css 第16讲css理解表现与结构相分离传智播客张鹏带你一周hold住html+css 第17讲css语法传智播客张鹏带你一周hold住html+css 第18讲css应用的方式传智播客张鹏带你一周hold住html+css 第19讲css语法及优先权传智播客张鹏带你一周hold住html+css 第20讲css控制文字及链接传智播客张鹏带你一周hold住html+css 第21讲css选择符详解传智播客张鹏带你一周hold住html+css 第22讲css盒子模型详解传智播客张鹏带你一周hold住html+css 第23讲css列表-边框详解传智播客张鹏带你一周hold住html+css 第24讲css案例-新浪新闻页面传智播客张鹏带你一周hold住html+css 第25讲css块与内联元素传智播客张鹏带你一周hold住html+css 第26讲css控制背景与css精灵传智播客张鹏带你一周hold住html+css 第27讲浮动布局传智播客张鹏带你一周hold住html+css 第28讲清除浮动传智播客张鹏带你一周hold住html+css 第29讲绝对定位传智播客张鹏带你一周hold住html+css 第30讲清除浮动技巧传智播客张鹏带你一周hold住html+css 第31讲css项目实战-专题网页制作。

HTML5笔记

HTML笔记一、HTML常用元素与属性1.HTML保留的常用元素1.1基本元素：HTML注释<html>：HTML5文档根元素<head>：HTML5文档页面头部分，可省略<title>：HTML5文档页面标题<body>：HTML5文档页面主体部分<style>：引入样式定义，参考CSS章节介绍<h1>到<h6>：标题一到标题六<p>：定义段落<br>：换行，该标签可指定id、class、style等核心属性<hr>：定义水平线<div>：定义文档中的节，能包含<p>、<span>等大量内容，所以会被大量使用<span>：与<div>相似，但节不会换行注：<body>、<p>、<hr>、<div>、<span>该标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.2文本格式化元素<b>：粗体文本<i>：斜体文本<em>：强调文本，效果与斜体类似<strong>：粗体文本，与<b>相似<small>：小号字体文本<sup>：上标文本<sub>：下标文本<bdo>：文本显示方向，可指定dir属性，属性值只能是ltr，rtl注：以上标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.3语义相关元素<abbr>：用于表示一个缩写，可指定title属性：表示缩写的全称<address>：用于表示一个地址，以斜体字显示<blockquote>：用于定义一段长的引用文本，浏览器会以缩进的方式显示这段文本，可指定cite属性：指定该引用文本所引用的网址URL<q>：用于定义一段短的引用文本<cite>：用于表示作品的标题，以斜体字显示<code>：表示一段计算机代码<dfn>：用于定义一个专业术语，以斜体字显示<del>：定义文档中被删除文本，以中画线显示文本<ins>：定义文档中插入的文本，以下画线显示文本<pre>：表示该元素所包含的文本已经进行了“预格式化”，也就是所包含的空格、回车和其他格式都会被保留下来，但浏览器会处理大部分HTML元素<samp>：用于定义示范文本内容<kbd>：用于定义键盘文本<var>：用于表示一个变量，以斜体字显示1.4超链接和锚点<a…/>：定义超链接，可指定属性href：超链接所关联的另一资源，target：指定哪个框架来装载这个内容，属性值有_self、_blank、_top、_parent，media：指定目标URL所引用的媒体类型，默认all1.5列表相关元素<ul>：定义无序列表，该元素只能包含<li…/>子元素<ol>：定义有序列表，该元素只能包含<li…/>子元素<li>：定义列表项目，该元素可包含与<div>类似的内容<dl>：用于定义列表，该元素只能包含<dt…/>、<dd…/>子元素<dt>：定义标题列表项<dd>：定义普通列表项，该元素可包含与<div>类似的内容1.6 图像相关元素<img …/>：定义图像，可指定属性src ：图片路径，alt ：指定一段文本作为图片的提示信息，usemap ：让图片使用图片映射，属性值为#mapname<map>：定义图片映射，可包含多个<area …/>，不同区域链接不同URL<area>：定义图片映射内部区域，可指定属性shape ：区域形状，属性值有rect 、circle 、ploy ，coords ：多个坐标确定区域位置，href ：区域所链接资源，target ：指定哪个框架来装载这个内容，media ：指定目标URL 所引用的媒体类型1.7 表格相关元素<table>：定义表格 <caption>：表格标题<tr>：表格行，只包含<td>、<th><td>：单元格，属性colspan ：跨多少列，rowspan ：跨多少行 <th>：表格页眉单元格，与<td>用法一样 <tbody>：表格主体，只包含<tr>元素 <thead>：表格头，与<tbody>相似 <tfoot>：表格脚，与<tbody>相似2. HTML5新增通用属性2.1 contentEditable 属性可把<table>、<div>等元素变成可编辑状态，如果一个HTML 元素的父元素是可编辑的，那么默认也是可编辑的，除非显示指定contentEditable=“false ”2.2 designMode属性当designMode=’on ’时，页面上所有可支持designMode 属性的元素都变成可编辑状态2.3 hidden 属性为所有元素都提供一个hidden 属性，一旦元素的hidden 属性设为true ，则隐藏该元素，且浏览器不保留所占用的空间。

html学习计划

html学习计划
我听了整整一个国庆假期的张鹏老师课程后,今天晚上我急于想高仿一个网站的主页.从下午到晚上六个小时左右的实践证明我是错的,眼高手低,看着简单,但是一写代码,脑子里一片空白.所以我决定做一个学习计划,要从html最基础开始,每一个常用知识点都不能遗漏,蜗牛式的爬行,一直爬到div+css终级,并在此记录我的学习历程.
第一天学习内容：
HTML 基础教程
HTML 教程
HTML 简介
HTML 基础
HTML 元素
HTML 属性
HTML 标题
HTML 段落
HTML 格式化
第二天学习内容：
HTML 编辑器
HTML 样式
HTML 链接
HTML 图像
HTML 表格
HTML 列表
HTML 块
HTML 布局
HTML 表单
HTML 框架
HTML 内联框架HTML 背景
HTML 颜色
HTML 颜色名
HTML 速查手册
第四天学习内容：HTML 高级教程
HTML 文档类型HTML 头部
HTML 脚本
HTML 实体
HTML URL
HTML URL 编码HTML Web 服务器
第五天学习内容：HTML 媒体
HTML 媒体
HTML 对象
HTML 音频
HTML 视频
HTML XHTML XHTML 简介XHTML 元素XHTML 属性。

html学习笔记整理

html学习笔记整理一、html的基本语法与结构1、开始标记和结束标记，<html>…</html>。

例：<font size=”1” color=”red”>网页内容</font>2、html的编辑环境（1）网页编辑软件（2）记事本3、html的基本结构例：<html><head><title>网页标题</title><bgsound src=背景音乐文件名loop=重复次数></head><body bgcolor=背景色backround=背景图片文件名>、、、、、、</body></html>二、html文本格式的应用1、文本的段落格式（1）标题标记符<hn>…</hn>，(n=1~6的整数，表示标题大小，1级标题最大) 属性：align：表示对齐方式；left：居左对齐（默认对齐方式）；right：表示居右对齐；center：表示居中。

格式：<hn align=对齐方式>标题文字</hn>（2）分段标记符<p>…</p>，结束标记可省略。

属性：align：对齐方式格式：<p align=对齐方式>内容</p>注：<hn></hn>是自动换行的，具有<p>…</p>的功能（3）换行标记符…<br>，在文档中强制断行，但不分段，无结束标记。

格式：内容<br>（4）水平线标记符<hr>，在网页中添加粗为2像素的水平线，无结束标记。

属性：size：表示水平线的粗细程度，取值为整数，默认值为2px。

width：水平线的长度，取值像素或百分比。

noshade：默认水平线为带阴影的3d线，该属性设置不带阴影。

html知识点总结详细

html知识点总结详细HTML是超文本标记语言（HyperText Markup Language）的简称，是用于创建网页的标准标记语言。

它由一系列的标签（tag）组成，这些标签可以用来描述网页的结构和内容。

HTML标签通过尖括号包围，并且通常是成对出现的，其中包括起始标签和结束标签。

起始标签用来定义元素的开始，并且告诉浏览器如何显示内容，而结束标签用来定义元素的结束。

HTML的发展可以追溯到1991年，由蒂姆•伯纳斯•李（Tim Berners-Lee）创建，目的是发展一种标记语言来连接科学研究人员之间的文档，使他们能够共享和检索信息。

随着互联网的普及，HTML逐渐成为创建网页的标准语言。

在本文中，我将简要介绍HTML的各种知识点，包括基本语法、常用标签、表单、图像、链接、音频和视频等方面。

一、基本语法HTML文档以`<html>`标签开头，以`</html>`标签结束，表示整个HTML文档的开始和结束。

```html<!DOCTYPE html><html><head><title>页面标题</title></head><body><h1>这是一个标题</h1><p>这是一个段落</p></body></html>```在上面的例子中，`<!DOCTYPE html>`声明是用来告诉浏览器文档类型的。

`<html>`标签表示HTML文档的根元素，`<head>`标签用来包含页面的元信息，比如标题、样式表等，而`<body>`标签则包含页面的主要内容。

二、常用标签1. 标题标签（`<h1>`~`<h6>`）：用来定义标题，分为六级，`<h1>`为最大，`<h6>`为最小。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<br>薄便携,搭配SonicMaster美声大师,海量存储,2秒开机,2周待机,快速响应Win8无延迟.
</font>
<br>
<font color="green" size="2"> 2013-07 </font>
<font color="grey" size="2">-推广</font>
<font color="blue" size="4">
<u>2013全新索尼
<strong>
<font color="red">笔记本电脑
</font>
</strong>旗舰索尼VAIO Pro新登场!
</font>
</u>
<br>
<font size="2">索尼
<font color="red">笔记本电脑</font>VAIO Pro-轻,薄,彰显品质.新一代超极本(TM)创新源自英特尔科技.全新索尼
设置图片高
border
数字
设置图片边框
align
left
图片靠左，文字靠右
right
图片靠右，文字靠左
top
文字垂直居上靠
middle
文字垂直居中
bottom
文字垂直居下（默认）
vspace
像素
定义图像顶部和底部的空白（垂直边距）
hspace
像素
定义图像左侧和右侧的空白（水平边距）
张鹏老师
第7讲是通过新闻网站实例来复习之前的内容
<br>将想象力发挥至极致,操作更便捷,创想从此拥有更多可能!
</font>
<br>
<font color="green" size="2"> 2013-07
<font color="gray" size="2">-推广</font>
</font>
</p>
<p>
4课堂操作：
4.1.1无序列表
4.1.2无序列表嵌套
4.2有序列表
4.3定义列表（参照当当网）
5网页支持的图片
1GIF 256种颜色，支持透明，动画
2JPEG（高度压缩）1670万种颜色，不支持透明，不支持动画
3PNG（网络可移植格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种
6插入图片标记
(2)直列化格式
<colgroup>...</colgroup>用于统一控制某一列的格式，取代重复的工作
（例如：用于某一列标红，或者某一列居中）
</p>
</body>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
（3）段落标记
Html标记之间嵌套使用，一层套一层，若出现交叉嵌套会出现问题
段落标记格式：
<p align=”对齐方式”></p>
属性名称属性值说明
Lesson2
一、Html的文档结构
<html>
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
二、meta标签，标记用于定义文件信息
Meta标签用于定义文件信息，放置于<head></head>
设置关键字<meta name=”keywords” content=”value” />
<img src=”图片路径”/>
7路径：
①绝对路径：提供目标文档的完整主机名称、路径信息及文档全称
②相对路径：从当前文档开始的路径
③使用:
（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；
（2）如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称
（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为../目标文档全称
Lesson8~Lessson10是通过hao123实例来讲解表格
一、表格基本结构
<table>
<tr>
<td></td>
</tr>
</table>
<table>...</table>-----定义表格
<tr>...</tr>----定义表行
<td>...</td>---定义表列（单元格）
<th>...</th>----文字标题栏（加粗）会默认自动居中
属性名称属性值说明
Size像素查手册
百分比
Width像素
百分比
Noshade=“noshade”实体线
三、特殊标记
定义一个块引用：使用文本缩进
格式：<blockquote>…</blockquote>（自动向右缩进一些位置）
属性名称属性值说明
①Citeurl被引用的地址
例如：<blockquote cite=””></blockquote>
2项目符号类型参数及显示
参数值（必须小写）
描述
disc
●（默认）
circle
○
square
■
3）有序列表
①语法：
<ol start=”列表起点”type=”项目符号类型”>
<li>内容1</li>
<li>内容2</li>
</ol>
2项目符号类型参数及显示说明
参数值
说明
1
表示以1,2,3,4来表示
a
../返回上两级文件夹
（4）根相对路径：从站点根目录开始的路径，以“/”开始（PHP使用）
8图片属性
属性名称
属性值
说明
src
URL
图片的路径
alt
文本
规定图片的替代文本[图片无法显示时]
title
文本
鼠标悬停时显示的内容
width
像素/百分比
设置图片宽
height
像素/百分比
Lesson4~Lesson5
一、html标记语义应用
Html文件名最好使用英文
字体修饰：
（1）<font>标记
语法：<font color=”文本颜色”size=”字号”face=”字体”>文本</font>
注意：网页的文本字体一般通过CSS修饰
（2）字符格式
功能
标记
加粗
<b>文本</b>
加强语气（加粗）
1无序列表<ul>…</ul>
2有序列表<ol>…</ol>
3定义列表<dl>…</dl>
*****注意***
可以直接输入标记，查看标记默认状态
2）无序列表
①语法：
<ul type=”项目符号类型”>
<li type=”项目符号类型”>内容</li>
<li>内容</li>
</ul>
其中：<li>…</li>表示一个项目
A
表示A,B,C,D来表示
i
i，ii，iii
I
I,II,III
4)定义列表
①语法：
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>.表示一个项目下更详细的内容的解释
<br>VAIO Pro采用坚固碳纤维机身,8.5小时持久续航.详情请登陆索尼商城!
</font>
<br>
<font color="green" size="2"> 2013-07