张鹏老师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>`为最小。
HTML基础知识点总结
HTML知识点总结第一章:知识总结1. <b>HTML文档结构</b>(括号里面的是注释)<!DOCTYPE html >*注:<!DOCTYPE> 标签没有结束标签!<html ><head>(头部部分)<meta http-equiv=“Content-Type”content=“text/html”; charset=gb2312 >(可写可不写) <title>显示在浏览器标题栏中的标题</title></head><body>(主体部分)(页面内容)</body></html>标签<body>中的属性有:bgcolor=颜色(背景颜色)background=图片的绝对路径或相对路径(背景图片)2. 标题标签<Hn></Hn> n取1~6(设置文字标题):1) <H1>一级标题</H1>2) <H2>二级标题</H2>3) <H3>三级标题</H3>4) <H4>四级标题</H4>5) <H5>五级标题</H5>6) <H6>六级标题</H6>3.<font></font>标签(设置文字属性)<font size="字体大小" color="字体颜色" face="字体类型">要设置的文字</font>4.特殊符号5.行的控制相关标签段落标签<p></p><p align="left" (左对齐)/ "right" (右对齐)/ "center" (居中)>(段落的对其方式)换行标签<br />6.图片标签<img><img src="图片地址" width="图片宽度" height="图片高度" alt="图片的提示文字"align="top/bottom/middle/left/right" border="图片的边框宽度">(align是用于调整图片相对于周围文本的对其方式)7.文字布局1) 水平线<hr size="厚度" width="宽度" color="颜色">2) 有序列表的语法<ol type=序号类型>(序号类型有:1、a、A、ⅰ、I)<li>填写信息</li>(必须用<li></li>将内容包括起来)<li>填写信息</li><li>填写信息</li>……</ol>3) 无序列表语法<ul type="序号类型">(序号类型有:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形))<li>所写内容<li>(必须用<li></li>将内容包括起来)</ul>4) 预格式文本语法<pre>(具体的文本格式,这个格式在时是不改变的哦!)</pre>8.页面链接语法1) 链接到其他页面<a href=“链接地址”>连接标志</a>2) 链接到本页面首先创建一个锚链接的锚记点:<a href=“#锚记点名称”>主题名称</a>然后在具体要链接到的地方设置name:<a name=“锚记点名称”></a>(锚记点前面要加上#号)3) 电子邮件链接<a href=“mailto:邮件地址”>站长邮箱</a>(注意不能忘了mailto)9.滚动标签的语法<marquee scrolldelay=滚动延迟时间direction=up/down/left/right(滚动方向) onmouseover=“this.stop()”(当鼠标指在上面时停止滚动)onmouseout=“this.start()”(当鼠标离开时继续滚动) >滚动的文字和图像</marquee>第二章知识点总结1.表格的基本框架语法<table border=表格的边框的宽度(一般不超过5)width=表格的宽度height=表格的高度bordercolor=表格边框线的颜色bgcolor=整个表格的背景颜色background=表格的背景图片地址(背景图片) align=表格对齐方式><tr bgcolor=行的背景颜色>(行)<td colspan=跨的列数rowspan=跨的行数bgcolor=本单元格的背景颜色background=本单元格的背景图片地址(背景图片) align=单元格中的内容对齐方式(right/left/center/)></td>(单元格)</tr></table>2.填充、间距属性cellpadding:内容与单元格内边框线的距离(内填充)cellspacing:单元格之间的距离(外间距)第三章知识点总结1.表单的基本结构<form action="URL" name=表单名字method=提交数据的方式(post/get)>具体的内容</form>2.表单中的元素1).<input>元素<input name=“” type=text size=文本框的大小maxlenght=限制输入的最大字符>(单行文本框)<input name=“” type=password size=文本框的大小maxlenght=限制输入的最大字符>(单行文本框——设置密码)<input name=“name” type=radio value=“男” checked(默认选定)>(单选按钮——男)(设置单选按钮的时候名字一定要一样)<input name=“name” type=radio value=“女”>(单选按钮——女)<input name=“” type=submit value=提交>(按钮——提交)<input name=“” type=reset value=重置>(按钮——重置)<input name=“” type=checkbox value=play(必须有)checked>玩游戏(复选框)2).<select></select>下拉列表元素语法:<select name=“”><option value=“”(必须有)>内容</option><option value=“”(必须有)>内容</option><option value=“”(必须有)>内容</option><option value=“”(必须有)>内容</option>……</select>3).<textarea></textarea>多行文本框元素语法:<textar ea name=“” cols=“宽度” rows=“高度”(不要和合并单元格的rowspan和colspan 相混淆)>具体的内容</textarea>3. 框架1).框架的基本结构(注意:此时不能要<body></body>)<framset cols=“25%,*”(分隔成左右两部分) rows=“25%,*”(分隔成上下两部分) border=框架边框的大小bordercolor=框架边框的颜色><frame name=“窗口的名字” src=“此窗口要显示的文件地址” scrolling=yes/no(有无滚动条) noresize(禁止改变框架窗口的大小)></framset>2).框架页面之间的链接第一步:在设计好的框架页面中给每个部分定义一个名字;Eg:<frame name=”窗口的名字”src=“”>第二步:设置导航栏中的超链接的target目标窗口属性;Eg:<a href=“lianjie.html” target=“要显示的窗口的名字”>链接标志</a>第四章知识点总结1.样式类型,分为三种1)标签选择器语法:标签{属性:属性值;}<style type=”text/css”>P{font-size:20px;color:blue}</style>不需要调用,直接创建标签就能使用2)class选择器语法:。
html第三课
—高级网页设计人才培训专家! 高级网页设计人才培训专家! 内嵌式框架:
主讲:张鹏
<iframe src="被嵌套的网页位置及全称" width="宽度" height="高度" frameborder=" frameborder="是否显示边框 [0/1]" scrolling="滚动条的出现方式[yes、no、 auto]"></iframe>
—高级网页设计人才培训专家! 高级网页设计人才培训专家! 表单元素标记
主讲:张鹏
•
多行文本框 <textarea name=“多行文本框名称” cols=“每行中的字 符数” rows=“显示的行数”> 初始内容 </textarea>
—高级网页设计人才培训专家! 高级网页设计人才培训专家! 表单元素标记
—高级网页设计人才培训专家! 高级网页设计人才培训专家!
写框架时不需要写body标记
主讲:张鹏
<frameset rows=“控制行数及行高” cols=“控制列数及列宽” framespacing=“框 架间距” frameborder=“是否显示框架边框 (yes,no/1,0)” border=“边框宽度” bordercolor=“边框颜色”> <frame src=“被包含的文件路径及名称” name=“框架名称” noresize=“是否允许改变 框架尺寸” (true/false) scrolling=“滚动条显示 控制” (yes/no/auto)> </frameset>
—高级网页设计人才培训专家! 高级网页设计人才培训专家! 插入多媒体元素标记
HTML学习笔记汇总
大多数浏览器不介意标签是大写还是小写,或者混合大小写。所以<HTML>、<html> 或<HtMl>在浏览器上的显示效果都一样。但是,正确的写法是采用小写字母来书写标签。 所以,要养成用小写字母书写标签的习惯。
你还可以为 e-mail 地址做链接,方法跟为网页做链接差不多: 例 6: <a href="mailto:nobody@">给 nobody@ 发电子邮件</a>
与指向网页的链接的唯一区别在于:指向 e-mail 地址的链接必须以 mailto:开头,然后紧接 着写 e-mail 地址。当点击这个链接的时候,缺省的 e-mail 程序将新建一封邮件,其中的收 件人地址为链接中指定的 e-mail 地址。注意:这一功能仅当你的计算机安装了 e-mail 程序 后才起作用。
<li>无序列表项 1</li> <li>无序列表项 2</li> </ul>
<ol> <li>无序列表项 1</li> <li>无序列表项 2</li>
</ol> 显示效果如下:
无序列表项 1 无序列表项 2
1. 无序列表项 1 2. 无序列表项 2
元素的属性: 属性应写在元素的首标签上。具体写法是:属性名称(attribute name)后紧跟一个等号(“=”), 后面写上用双引号括起来的属性值(attribute value )。对于 style 属性的值,可以用分号(“;”) 来分隔多个样式指令 <h1 style="background:#ff0000;"> 红色背景 <h1 style="background:#cccccc;"> 灰色背景 白色: #ffffff 黑色: #000000 十六进制代码由“#”打头,后面跟六位数字或字母。
html第一课
Html文档的创建方式:用html语言创建 的文档
手工直接编写(例如记事本)。 通过图形化的HTML开发软件 Dreamweaver。 由Web服务器上的动态网页程序生成。
主讲: 主讲:张鹏 seo100@
html文档结构
1、文档结构 所有的网页文件,通常由四对标记来构成,文档的骨架,它们是: <html> <head> <title> 标题 </title> </head> <body> 正文 </body> </html> <html>……</html>标识网页文件的开始与结束 <head>……</head>标识网页文件的头部信息,如标题、搜索引擎关键字等 <title>……</title>标识网页文件的标题 <body>……</body>标识网页文件的主体部分 主讲: 主讲:张鹏 seo100@
主讲: 主讲:张鹏 seo100@
在HTML文档中使用特殊字符 文档中使用特殊字符
特殊字符 空格 元 ¥ 版权号 注册商标 “ & < > 转义码 示例 <h1>欢 迎
光 临</h1>
¥ <p>价格:¥29.00 © ® " <%=session("a
主讲: 主讲:张鹏
HTML知识点总结
HTML课本知识点统计第一章认识HTML语言1、HTML:超文本标记语言(Hyper Text Markup Language )2、万维网:World Wide Web3、万维网联盟:World Wide Web Consortium4、标记:tags5、标志链接:Hyperlink6、单标记:换行<br />横线<hr />输出<input />路径< img /> 框架<frame />双标记:网页文件的标记<html></html> <head></head> 主题标记<body></body>标题页面标记<title></title>水平<div></div> 标题标记<h1—h6></h1—h6> 表格<table></table> 行<tr></tr> 单元格<td></td> 字体格式<font></font> 粗体<b></b> 斜体<i></i> 下划线<u></u>删除线<s></s>7、注释:<!--注释-->头部注释:<!- -Author:Date:Desc:- ->8、将记事本格式转换为HTML格式的文件:新建一个.txt格式的文件,单击右键,选择重命名,输入名称后,在加上.html,确定,这时会生成一个html文件。
9、浏览html的浏览器:微软Microsoft IE-Internet Explorer谋智Mozilla 火狐firefox欧朋Opera谷歌Chrome苹果Safari10、编写html的工具记事本、Editplus、Dreamweaver(由Macromedia公司开发其中还包括Photoshop.Flash)第二章常用HTML标记和格式1、标题标签<h#></h#>1</h1><h1>标题<h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>标题从大到小依次变小2.段落标签<p></p> 强制换行<br /> 粗体<b></b> 斜体<i></i> 下划线<u></u> 删除线<s></s> 上标<sup></sup> 下标<sub></sub>3.空格: 第三章字体标记1.设置字体格式<font></font>字体大小<font size=“xx”></font> size=“1~7”字体颜色<font color=“xx”></font>白色:white 黑色:black 黄色:yellow 蓝色:blue 紫色:purple 橙色:orange 绿色:green字体属性<font face=“xx”></font>第四章文字布局1.行的控制换行控制:文字<p>文字强制换行:<br />不换行控制:<nobr></nobr>2.文字对齐水平对齐:align属性向左:<align=”left”>向右:<align=“right”>居中:<align=“center”>竖直对齐:valign属性向上:<valign=“top”>居中:<valign=“middle”>向下:<valign=“bottom”>3.列表有序列表:<ol><li>表项</li></ol>无序列表:<ul ><li><表项</li></ul>类型Type=“·disc ■square ○circle”自定义列表:<dl><dt>定义列表</dt><dd>对定义的描述</dd></dl>4.与格式化文本<pre></pre>将其包起来的文字排版、格式,原封不动的呈现出来<xmp></xmp>把文本原封不动的显示出来第五章图像1.插入图像:<img src=“cn.jpg” />2.对图像设置alt属性,当显示图像时,有文字,当不显示文字时,也会出现文字。
(完整)HTML初级知识点总结,最详细总结,文档
HTML超文本标记语言,一种标准预定义,已经定义好的各种标记,只需要我们把对应的标记放到合适的地址一 . HTML 根本语法与根本结构〔重点〕标记的使用1、标记一般成对出现,包含开始标记和结束标记2、标记能够嵌套使用,但是不能够交织使用3、标记不区分大小写属性的使用〔属性控制内容的格式,额外的格式〕1、书写地址在开始标记中2、格式:属性名=“属性值〞,多个属性之间使用空格切割3、不相同的标记属性可能相同也可能不相同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不矛盾时,收效叠加,属性矛盾时,就近原那么html 的根本结构<html>----声明网页<head>----网页的头部信息<title>标题 </title> ----网页的标题</head><body>----网页的主体,网页内容主要显现的局部网页的主要内容</body></html>二 . 文本格式的应用1、标题标记 <hn>,n 的取值 1 -6,1 级标题最大收效:加粗显示,带有自动换行属性: align 控制标题的对齐方式,取值left 〔左对齐,默认值〕| center 〔居中〕| right 〔右对齐〕2、段落标记 <p>收效:把内容分段显现,自动换行属性: align ,控制段落内容的对齐方式,取值 left 〔左对齐,默认值〕 |center 〔居中〕 | right 〔右对齐〕3、换行符 <br /> ,单标记,不需要结束标记,换行但不分段空格符号:  ;表示一个空格逼迫换行符: <br />4、水平线标记 <HR />,单标记收效:水平线 ,默认是一个粗细为2px〔像素〕的线条属性: size 控制水平线的粗细,取值为整数,单位为像素〔px〕width 控制水平线的长度,取值能够是像素单位,也能够是百分数〔相对于阅读器窗口百分比〕noshade设置水平线不带有阴影,该属性不需要取值color设置水平线的颜色,取值能够是英文的颜色值,也能够是十六进制的颜色代码align 控制水平线的对齐方式,取值left(左对齐)|center〔居中,默认值〕|right 〔右对齐〕5、分节标记 <div>收效:把内容设置为一节,前后带有自动换行属性: align 控制 div 中内容的对齐方式,取值 left 〔左对齐,默认值〕 | center〔居中〕 | right 〔右对齐〕6、居中标记符 <center>收效:把center 标记中的内容居中显示7、文本控制标记<font>收效:控制字体的各种显示样式1--7,数字越大字体越大,属性: size 控制字体的大小,取值为绝对值时,取相对值时,参照的是默认字体〔 3 号〕,取值在 -2--+4 之间color 控制字体的颜色face 控制字体的字体,取值能够是多个值,多个值之间使用逗号切割,取值时从左往右依次取值,找到合适的值为止,假设都不支持,使用默认格式显示8、字体的物理样式加粗: <b>斜体: <i>下划线: <u>删除线: <s>上标: <sup>下标: <sub>1、常用逻辑字符<ADDRESS>网页设计者或保护者的信息,平时显示为斜体<CITE>表示文本属于引用,平时显示为斜体<CODE>表示程序代码,平时显示为固定宽度字体<DFN>表示定义了的术语,平时显示为黑体或斜体<EM>重申某些字词,平时显示为斜体<KBD>表用户的键盘输入,平时显示为固定宽度字体<SAMP>表示文本样本,平时显示为固定宽度字体<STRONG>特别重申某些字词,平时显示为粗体<VAR>表示变量,平时显示为斜体2、列表标记1、有序列表, <ol>,需要配合 <li>标记使用一个 <li>标记对应一个选项ol 的属性: type控制列表的符号样式,取值1|A|a|i|I ,默认是 1start控制列表的初步值,取值为任意的整数li 的属性: type控制选项自己的符号样式,取值1|A|a|i|Ivalue控制选项自己的初步值,取值为任意整数,但是更正自己初步值此后,会对同一个列表中本选项此后的同级<li>标记产生影响2、无序列表, <ul>,配合 <li>标记使用一个 <li>标记对应一个选项ul 的属性: type控制所有选项的符号样式,取值 disc〔实心圆,默认值〕 |circle〔空心圆〕 |square 〔方块〕li 的属性: type控制选项自己的符号样式li 标记用在ol 中, type 属性的取值跟ol 的type属性取值走,用在ul 中,跟着ul 的 type 属性取值走3、定义列表,<dl>,完成对定义列表的声明<dt>,术语标记,能够理解为近似于列表选项的标题使用<dd>,描述标记,能够理解为近似于列表的选项使用三 . 在网页中使用图片标记: <img>,单标记,不需要结束标记属性:src引入图片资源的路径绝对路径:资源在效劳器上的地址,该地址是从盘符出发相对路径:资源在效劳器上的相对地址,从网页自己出发返回上一层文件夹width控制显示图片的宽度,取值为像素也许百分数height 控制显示图片的高度,取值为像素也许是百分数只设置宽度或高度时,图片保持等比缩放,同时设置时,同时见效border hspace vspace 控制显示图片的边框,取值为像素,默认不显示边框控制显示图片水平方向上的空白,取值为像素控制显示图片垂直方向上的空白,取值为像素align 控制图片和周围文本的对齐方式垂直方向上:top 文本和图片顶部对齐bottom 文本底部和图片底部对齐middle 文本的底部和图片的中部对齐absmiddle 绝对中间对齐,文本的中部和图片的中部对齐水平方向上: left 图片在左,文本在右right 文本在左,图片在右图片的对齐方式:借助 <div>也许 <p>四 . 在网页中使用超链接4、超链接标记: <a>...</a>,经过链接跳转到新的资源属性: href链接的目标资源的路径链接外面资源时,必然是绝对路径,并且需要在路径前加上【 :// 】这个网络通信协议target 指定超链接的翻开方式,_self 在自己的页面翻开超链接(默认的打开方式 ),_blank重新翻开一个新的阅读器窗口建立锚点〔书签〕内部书签1、设置锚点的名称比方:<a name="锚点名">...</a>2、使用超链接完成跳转比方: <a href="#锚点名 ">...</a>外面书签1、设置锚点的名称比方:<a name="锚点名">...</a>2、使用超链接完成跳转比方: <a href="锚点所在页面的路径#锚点名">...</a>超链接发送电子邮件,格式 <a href="mailto: 邮箱地址 "> 发送邮件 </a>2、链接多媒体五 . 表格的应用表格的结构<table>---声明表格<caption>...</caption> ---表格的标题<tr>----表格的行<td>....</td> ---表格的列....</tr><tr>----表格的行<td>....</td> ---表格的列....</tr>...</table><table>标记,定义表格,所有表格的内容书写在<table> 开始和 </table> 结束标记之间属性: frame 控制表格最外层的四个边框取值:void默认值,不显示边框above 仅显示上边框below 仅显示下边框hsides 显示上下边框vsides 显示左右边框lhs 仅显示左边框rhs 仅显示右边框box、 border 显示四个边框rules 控制表格内局部割线取值:none 默认值,不显示rows 显示行切割线cols 显示列切割线all 显示所有切割线bordercolor 控制边框的颜色border 控制表格的所有边框,取值为像素cellspacing 控制单元格与单元格之间的空白,取值为像素cellpadding 控制单元格内容和单元格边框之间的空白,取值为像素width设置单元格的宽度,取值为像素也许百分数height 设置单元格的高度,取值为像素也许百分数align 控制表格的对齐方式,取值 left( 默认值 )|center|rightbgcolor 设置表格的背景色background 设置表格的背景图当背景色和背景图同时设准时,优先使用背景图<caption>表格的标题,必定书写在<table>之间属性: align控制表格标题的地址,取值top( 标题在表格的顶部)| bottom〔标题在表格的底部〕<tr> 定义表格的行属性: align 控制整行单元格内容的水平对齐方式,取值left 〔默认值,缺省值〕 | center|rightvalign 控制整行单元格内容的垂直对齐方式,取值top|middle〔默认值〕|bottom height 设置行的高度,取值为像素bgcolor 设置行的背景色background 设置行的背景图bordercolor 设置行的边框颜色<td> 列标记<th>列标题标记都能够作为列使用,<th>列标题标记,内容有加粗显示的收效,并且带有自动居中属性: align 控制单元格内容的水平方向对齐方式,取值left|center|right valign控制单元格内容的垂直方向对齐方式,取值top|middle〔默认值〕|bottomheight 设置单元格的高度,取值以像素为单位,当同一行中不相同的单元格设置的高度也不相同时,整行的高度取值按最大值来width 设置单元格的宽度,取值以像素为单位,当同一列中不相同行的单元格设置的宽度不相同时,整列的宽度取值按最大值来bgcolor 设置单元格的背景色bakground 设置单元格的背景图rowspan 合并行colspan 合并列合并行和合并列的取值都是整数,合并几个单元格取值就是几六 . 框架的应用1、框架框架集标记 <frameset>,在原有的html 结构基础上, <frameset>代替了<body>的地址,换句话说,<frameset>和<body>不能够共存,只能出现一个属性:rows 设置横向框架的数量和高度,框架的数量取决于rows 属性的取值个数,每个框架的高度取决于值的大小cols 设置纵向框架的数量和宽度,框架的数量取决于cols 属性的取值个数,每个框架的宽度取决于值的大小rows 和 cols 的取值方式1、像素值2、百分数3、比率取值rows 和 cols 取值,能够有多个值,值与值之间使用逗号切割,并且不能够有空格格, cols 和 rows 属性一般不相同时设定,要想实现页面的纵向和横向切割,能够使用框架的嵌套来实现frameborder 使用在 frameset 中,能够控制框架集下的所有框架边框可否显示框架标记 <frame />,单标记属性: src引入目标资源的路径name给框架起名字,需要配合超链接的target属性来使用,到达链接目标框架的目的frameborder控制框架的边框可否显示,0 表示不显示,1显示默认的3D 边框scrolling控制框架可否参加转动条,取值yes(参加转动条,需要时加入)| no(不参加转动条 )| auto (需要时参加转动条,默认值)noresize 固定框架的边框,该属性不需要取值marginheight 在框架中显示内容时,控制内容和框架上下边框之间的空白,取值以像素为单位,以上边框为准marginwidth在框架中显示内容时,控制内容和框架左右边框之间的空白,取值以像素为单位,以左边框为准<noframes> 当阅读器不支持框架时,显示的代替内容,必定包含一对<body>标记使用七、表单的应用表单1.表单标记<form>,表单不能够嵌套使用,所有表单的内容必定书写在表单的开始标记和结束标记之间表单结构:<form><input type=〞text单行〞文>本格式<input type=〞password〞>密码输入框<input type=〞checkbox复选〞框>格式<input type=〞radio〞name=单〞选sex框格〞>式<input type=〞submit提交〞>的格式<input type=〞reset重置〞>格式<input type=〞button自定〞>义格式<select>下拉菜单格式<option> 汉族 </option><option> 满族 </option><option> 壮族 </option><option> 土家族 </option></select><textarea >cols="50" rows="4"> 请多多见教多行文本</textarea></form>表单域 <input>不相同功能的表单域type 属性的取值不相同属性:type控制表单域的功能取值text 单行文本password checkbox 密码输入框复选框radio 单项选择按钮要实现单项选择,还要在后边加上相同的名字,例:<input type=〞radio〞name=〞.....〞>submit 提交reset 重置button自定义按钮value 属性使用在提交、重置、自定定义按钮中,能够改变按钮的默认值 value 属性使用在单行文本和密码框中,增加默认值maxlength 属性使用在单行文本和密码框中,限制输入的最大字符数,取值为整数checked=“checked〞使用在复选框和单项选择框中,表示该选项默认被选中<select>....</select>,菜单里有多个选项,一般用于选择年.月.日属性 1:<option>...</option>,一对option代表一个下拉选项属性 2:<select>....</select>select代表一个下拉菜单,一对多行文本:<textarea > </textarea > 成对出现属性: cols= 〞 ....〞取值cols为整数,限制每行的最多内容(完满)HTML初级知识点总结,最详细总结,文档Rows=〞 ...〞取rows值为整数,限制多行文本的行数。
html笔记
第一天HTML【教学内容】HTML基本标签◆Html介绍◆文件标签◆排版标签◆块标签◆字体标签◆清单标签◆图形标签◆链接标签◆表格标签HTML表单标签◆Form标签◆Input种类◆Select与option标签◆Textarea标签HTML框架及特殊字符◆框架标签◆其它标签与特殊字符【教学总结】【第一阶段】【学习目标】1.了解html常用标签2.掌握html中的表格标签3.理解综合案例4.掌握超链接标签【内容:html基本标签】Html介绍1.什么是html?Html是用来描述网页的一种语言。
●HTML 指的是超文本标记语言(Hyper Text Markup Language)●HTML 不是一种编程语言,而是一种标记语言 (markup language)●标记语言是一套标记标签 (markup tag)●HTML 使用标记标签来描述网页2.Html的作用?Web浏览器的作用是读取html文档,并以网页的形式显示它们。
浏览器不会显示html标签,而是使用标签来解释页面上的内容.简单说,html就是用于展示信息的。
3.Html书写规范a)Html标签HTML 标记标签通常被称为HTML 标签(HTML tag)。
●HTML 标签是由尖括号包围的关键词,比如<html>●HTML 标签通常是成对出现的,比如<b> 和</b>●标签对中的第一个标签是开始标签,第二个标签是结束标签●绝大多数的标签都具有属性,建议属性值使用引号引起。
例如:<bodytext=”red”>●大多数标签是可以嵌套的b)Html创建Html文件可以直接使用文本编辑器来创建,保存时,后缀名为html或htm整个文件是在<html>与</html>标签之间在<html>标签间有<head>与<body>子标签。
例如:c)空的html标签●没有内容的HTML 元素被称为空元素。
(完整版)HTML复习的知识点
第1章:网页的分类与扩展名、WEB标准(1)网页分类:静态网页、动态(2)扩展名:Html网页: .html, .htmCSS: .cssJavascript: .js(3)web标准结构标准: html表现标准:css层叠样式表行为标准:javaScript第2章:常见的HTML标记、常用的图片格式1、HTML标记<html>< /html>:创建一个HTML文档,也称根标记。
<head>< /head>:设置文档标题和其它在网页中不显示的信息,也成为头部标记。
<title>< /title>:设置文档的标题。
<body>< /body>:用于定义HTML文档所要显示的内容,也称主题标记。
<hr />:用来定义一条水平线。
<h1>< /h1>~<h6>< /h6>:最大的标题到最小的标题。
使用align属性加以下:left:设置标题文字左对齐;center:设置标题文字居中对齐;right:设置标题文字右对齐;<p></p>:创建一个段落。
<p align="">:将段落按左、中、右对齐。
使用align属性加以下:left:设置标题文字左对齐;center:设置标题文字居中对齐;right:设置标题文字右对齐;<br />:换行,插入换行符。
<meta />:定义页面元信息标记。
<font ></font>:规定文本的字体、字体尺寸、字体颜色。
font-family:字体font-weight:字体粗细font-variant:变体font-style:字体风格font:综合设置字体样式fac:设置文字的字体size:设置文字的大小color:设置文字的颜色CSS文本外观属性:letter-spacing字间距word-spacing单词间距line-height行间距text-align:left左对齐,height右对齐,center居中对齐<img src=”url” />src:图像的路径alt:图像不能显示时的替换文本title:鼠标悬停时显示的内容width:设置图像的宽度heighr:设置图像的高度border:设置图像边框的高度vspace:设置图像顶部和底部的空白(垂直边距)hspace:设置图像左侧和右侧的空白(水平边距)用align属性:left:将图像对齐到左边right:将图像对齐到右边top:将图像的顶端和文本的第一行文字对齐,其他文字居于图像下方middle:将图像的水平中线和文本的第一行文字对齐,其他文字居于图像下方bottom:将图像的底部和文本的第一行文字对齐,其他文字居于图像下方<div ></div>区域容器标记<span></span> 行内容器标记<ul type=>定义项目符号disc:●circle:○square:■<li></li>列表项,结合<ul> 无序<ol>有序使用<ul></ul>无序列表<ol></ol>有序列表<link href=”url”rel=stylesheet type=”text/css” />引入CSS样式表文件<a href=”跳转目标”><form>创建一个表单<input type=/>text:单行文本输入框password:密码输入框radio:单选按钮checkbox:复选框button:普通按钮submit:提交按钮reset:重置按钮image:图像形式的提交按钮hidden:隐藏域file:文件域<textarea cols=”每行中的字符数”rows=”显示的行数”></textarea><select><option></option></select>下拉菜单(2)常用的图片格式:JEPG,GIF,PNG第3章:CSS样式规则、引入CSS样式、CSS基础选择器、定义CSS样式,CSS 字体样式属性、CSS文本外观样式属性、复合选择器的定义1.Css样式规则选择器{属性1:属性1值;属性2:属性2值;}例:P{ Color : red ; Border : }或h2{ font-size : 20px ; color : red ; }2、引入css样式方式(1)行内式<标记名style=” 属性1:属性1值; 属性2:属性2值”>内容</标记名>例:<h2 style = “ font-size : 20px ; color : red ; ”></h2>(2)内嵌式例:<style type=”text/css”></style>选择器{属性1:属性1值;属性2:属性2值;}(3)链入式<link href=”cssURL” rel= “stylesheet” type=”text/css”/>3、css基础选择器(1)标记选择器p{ }(2)类选择器.类名(3)id选择器#id(4)通配符选择器*{}4、复合选择器(书本P66)(1)标签指定式选择器p.speacial{ } 书本demo3-8(2)后代选择器p strong{ } 书本demo3-9(3)并集选择器p,div{ } 书本demo3-105、CSS字体属性font-family:字体font-variant:变体font-style:字体风格italic:斜体font-weight:字体粗细font:综合设置字体样式6、外观属性color:text_decoration:文本装饰underline下划线overline上划线line-through删除线text-align:水平对齐方式left左对齐right右对齐center居中对齐text-indent:首行缩进2em:2字符line-height:行间距第4章CSS盒子模型:认识盒子、边框属性内外边距属性、设置背景图像、行内元素及块元素1、认识盒子(书本p79图4-5)基础属性:width:宽height:高padding内边距四个方向值:上,右,下,左;top,right,left,bottom两个值时为上下,左右;一个值时为四边;三个值时为上,左右,下;margin: 外边距border:边框2、边框属性(1)border-style:border-width:border-color:综合:border: border-width边框宽度border-style边框样式border-color边框颜色;border:1px solid red; 四个方向都是相同的设置(2)某个方向设置border-top-style:上边框样式border-top -width:上边框宽度border-top -color:上边框颜色综合:border-top border-top-width borde-top-style border-top-color;border-top:1px solid red; 只是对上边框的设置3、背景属性(书本P95页)background-color:背景颜色background-image:背景图像背景图像平铺:background-repeat::repeat-x只沿水平方向平铺repeat-y只沿垂直方向平铺no-repeat不平铺background-position:水平垂直Left/center/right top/center/bottom20px/-10px 30px;20px center综合:4.行内元素及块元素(1)行元素:P103 <span> <img/> <a/> <input> <select>块元素:P102 <h1> <p> <div> <ul> <li> <form> (2)元素转换display:Inline: 行内元素Block:块元素Inline-block:行内块元素None:隐藏第5章列表与超链接超链接标记<a> 链接的伪类1.超链接标记<a />href:用于链接目标的url地址target: _self在原窗口打开_blank在新窗口打开border=”0”去掉图像边框P1272.链接的伪类a:link{CSS样式规则;}未访问时超链接的状态a:visited{CSS样式规则;}访问后超链接的状态a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态a:acrtive{CSS样式规则;}鼠标单击不动时超链接的状态第6章HTML表单认识表单、创建表单、input控件1、认识表单P138<input/>表单输入控件<textarea></textarea>定义多行文本框<select></select>定义一个下拉列表size指定下拉菜单的可见选项数<option>用selected属性时,当前项就为默认选中项action用于指定接收并处理表单数据的url地址method用于设置表单数据的提交方式,其取值为get和post2、创建表单<form action=”url地址” method=”提交方式” name=”表单名称” > </form> 3.input控制P143表6-2第7章浮动与定位:float属性、clear属性元素的定位属性、利用盒子模型与浮动进行页面布局1.float:left左浮动right右浮动none不浮动2.clear:清除当前元素的浮动对其后元素影响。
HTML相关知识点总结
HTML相关知识点总结⽬录简介HTML⽂档和⽹页的关系呢?HTML的标签样⼦?HTML基本概念标签元素属性注释编码规则HTML常⽤元素标题段落链接跳转页⾯:跳转锚点图⽚列表有序列表⽆序列表定义列表表格块表单及表单元素表单表单属性表单元素多媒体元素audio 标签video 标签线细节⽂档类型头⽂件1. HTML <title> 元素2.HTML <base> 元素3.HTML <link> 元素4.HTML <style> 元素5.HTML <meta> 元素6.HTML <script> 元素案例tableregister学⽣信息表格会员注册表单简介HTML超⽂本标记语⾔(Hyper Text Markup Language),它是互联⽹上应⽤最⼴泛的标记语⾔。
不要把HTML语⾔和C、Java等编程语⾔混淆起来。
简单的说,HTML⽂件就是普通⽂本+HTML标记(也就是HTML标签),⽽不同的HTML标签能显⽰不同的效果。
HTML⽂档和⽹页的关系呢?**⽹页就是HTML⽂档。
HTML⽂档有HTML标签和纯⽂本组成。
**web浏览器的作⽤就是读取HTML⽂档,并以⽹页的形式显⽰它们。
浏览器不是显⽰HTML标签,⽽是使⽤标签来解释页⾯的内容。
HTML的标签样⼦?HTML的标记标签通常被称为HTML标签,它是由⼀对尖括号以及关键词组成,如。
⽽且HTML的标签基本上是成对出现的,如<html></html>。
在这⼀对标签中,第⼀个称为起始标签,第⼆个被称为结束标签。
### HTML的组成:head 部分⽤于定义HTML的⼀些基本信息,或者引⼊外部⽂件。
body 部分整个HTML⽂档的显⽰内容。
HTML基本概念标签⽹页就是HTML⽂档。
HTML⽂档是由标签和内容组成。
常⽤的标签:<html>、<head>、<body>、<div>、<span>、<h1>~<h6>、<p>、<form>、<input>、<a>、<img>、<iframe>、<script>、<style> 等元素HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
HTML知识点总结
HTML 知识点总结⼀.基本知识HTML 指的是超⽂本标记语⾔: HyperText Markup LanguageHTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签>HTML 元素包含了开始标签与结束标签,元素的内容是开始标签与结束标签之间的内容,元素属性是 HTML 元素提供的附加信息。
基本HTML ⽹页结构如下,body标签内的才是我们在浏览器上所视内容<!DOCTYPE html> 声明为 HTML5 ⽂档<html> 元素是 HTML 页⾯的根元素<head> 元素包含了⽂档的元(meta)数据,如 <meta charset="utf-8"> 定义⽹页编码格式为 utf-8。
<title> 元素描述了⽂档的标题,浏览器标签名<body> 元素包含了可见的页⾯内容<h1> 元素定义⼀个⼤标题<p> 元素定义⼀个段落<!-- 内容 -->注释内容⼆.元素属性HTML元素属性⼀般在开始标签中,以键值对表⽰常见属性其它标准属性参考三.头部<head> 元素包含了所有的头部标签元素。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.<title> 元素定义⽂档的标题。
浏览器会以特殊的⽅式来使⽤标题,并且通常把它放置在浏览器窗⼝的标题栏或状态栏上。
同样,当把⽂档加⼊⽤户的链接列表或者收藏夹或书签列表时,标题将成为该⽂档链接的默认名称。
<style> 标签⽤于为 HTML ⽂档定义样式信息。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
</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