HTML学习日记_第1页
HTML学习日记_第2页
HTML学习日记_第3页
HTML学习日记_第4页
HTML学习日记_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、属性定义：1. HTML对齐 <h1 align=”center”>2. 字体颜色 <body bgcolor=”yellow”>3. 表格 <table border=”1”>更多参考属性手册查找<1>到<6>，字体逐步减小，大于6跟6一样4. 水平线 <hr /> 例子：<p>This is a paragraph</p><hr /> 5.注释，不会被显示出来<!This is a comment >6. 换行 <br>7. 同行间隔 如果不插入其他定义只能空

2、一格应该避免使用的标签和属性：标签描述<center>定义居中的内容。<font> 和 <basefont>定义 HTML 字体。<s> 和 <strike>定义删除线文本<u>定义下划线文本属性描述align定义文本的对齐方式bgcolor定义背景颜色color定义文本颜色代替标签和属性：8.定义颜色：Bgcolor=” 替换为 style=blackround-color:yellow”style="background-color:yellow”style样式：9.定义字体： style=”font-fam

3、ily:?”<h1 style="font-family:verdana">A heading</h1>10.定义对齐方式： style=”text-align:center”<h1 style="text-align:center">This is a heading</h1>11. 文本格式化 各种字体<html><body><b>This text is bold</b> 粗体<strong>This text is strong</s

4、trong> 加粗（加重语气）<big>This text is big</big> 大一号<em>This text is emphasized</em> 强调字体（以斜体展示）<i>This text is italic</i> 斜体字<small>This text is small</small> 小一号This text contains <sub>subscript</sub> 下标文本This text contains<sup>supersc

5、ript</sup> 上标文本还有<ins>插入字 <del>删除字</body></html>12. 预格式文本 在预文本上可以直接空格和换行 13. 计算机输出标签：常用于显示计算机/编程代码Pre：预文本，可以像Word一样输入，换行和间隔时不用添加其他代码<code>定义计算机代码。<kbd>定义键盘码。<samp>定义计算机代码样本。<tt>定义打字机代码。<var>定义变量。<pre>定义预格式文本。<listing>不赞成使用。使用 &l

6、t;pre> 代替。<plaintext>不赞成使用。使用 <pre> 代替。<xmp>不赞成使用。使用 <pre> 代替。14. 地址：<adress></adress>定义之间的文字都是斜体表示，但是可以跟Word一样编辑，但是换行要加<br>15. 缩写和首字母缩写 abbr/acronym title=”<abbr title="etcetera">etc.</abbr> <acronym title="World Wide Web&qu

7、ot;>WWW</acronym> 鼠标放到etc上会显示完整16. 文字方向<bdo dir="rtl"> 下一行文字向右，左为lef例子：<bdo dir="rtl">Here is some Hebrew text</bdo>17. 块引用 长引用<blockquote></blockquote>，一般不需要分段的用短引用<q></q>，用法跟<p></p>一样。使用 blockquote 元素的话，浏览器会插入换行和外边距

8、，而 q 元素不会有任何特殊的呈现18. 删除字效果和插入字效果 删除效果：del>二十</del> 下横线效果：<ins>十二</ins> 案例：<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> 19. 引用、印证<cite></cite> ，但是主流浏览器均不支持 cite 属性 例子：cite=""定义项目 <dfn>定义项目</dfn>标签

9、描述<abbr>定义缩写。<acronym>定义首字母缩写。<address>定义地址。<bdo>定义文字方向。<blockquote>定义长的引用，会进行缩进处理，自动把间隔去掉<q>定义短的引用语，引用的字体会有双引号<cite>定义引用、引证，以斜体表示，定义标题（引申带图片或者连接）<dfn>定义一个定义项目，跟abbr相同但是更深入，可以包含abbr20. 图片引用 img src=<img src="img_the_scream.jpg" width="

10、;220" height="277" alt="The Scream">21. 从左向左进行书写 <bdo dir="rtl">例子：<bdo dir ="rtl">This</bdo> sihT22. 独立的样式表，用<head></head>1.  外部样式表 link例子;<link rel="stylesheet" type="text/css" href="myst

11、yle.css">2. 内部样式 style<style type="text/css"> . </style>3. 内敛样式 直接在内部引用<p style="color: red; margin-left: 20px">更多标签标签描述<style>定义样式定义。<link>定义资源引用。<div>定义文档中的节或区域（块级）。<span>定义文档中的行内的小块或区域。<font>规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。

12、<basefont>定义基准字体。不赞成使用。请使用样式。<center>对文本进行水平居中。不赞成使用。请使用样式。23. 超链接 把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手 有两种： href 创建指向另一个文档的链接 name 创建文档内的书签 而如果在定义的网址后面加上target属性，可以定义被连接的文本在何处显示，例如target="_blank"，则会在新窗口中打开<a href=" target="_blank">Visit W3School!</a>Name案例然后

13、创建指向该文本的的连接<a name="tips">文本</a>首先要先对跳转的文本进行命名同一页面内：<a href="#tips">文本</a>其他页面内：<a href="命名尾部添加#命名，可以直接转到指向位置，不然无法跳转24.HTML图像1.插入图像 URL为图片的引用地址，例如<img src="url" />2.Alt：替换文本属性，当图片无法显示时展示，Big Boat是显示的信息<img src="boat.gif"

14、; alt="Big Boat">3.图片对齐方式：align=Bottom，middle，top，默认的是bottom例子：<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>4.图片尺寸：例子：<img src="/i/eg_mouse.jpg" width="50" height="50">5.设置图片链接：<a href="/example

15、/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>图像标签标签描述<img>定义图像。<map>定义图像地图。<area>定义图像地图中的可点击区域。6.Area应用<area shape="circle" coords="129,161,10">25.表格1.表格由 <table> 标签来定义。每个表格均有若干行（由 <

16、tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell

17、2</td></tr></table>显示边框：border="1"，不显示就是02.表头加粗：表格的表头使用 <th> 标签进行定义，粗体居中空单元显示：<td>&nbsp;</td>3.列表：<ul></ul>,点用<li><ul><li>苹果</li><li>香蕉</li></ul>· 苹果· 香蕉4.单元格边距:(Cell padding)周边的间距案例：<

18、;table border="1" cellpadding="10">5.增加单元格间距：cellspacing=”XXX” 距离右边界的距离,距离是毫米单位<table border="1" cellspacing="10">6. 单元格添加背景：<table border="1" background="/i/eg_bg_07.gif">7. 表格内容排列align= ，后面带属性靠左： <th align="left&quo

19、t;>靠右： <td align="right">消费项目.一月二月衣服$241.10$50.20框架属性：frame=例子：<table frame="box"> MonthSavingsJanuary$10026. 列表一无序 <ul><li>Coffee</li><li>Milk</li></ul>二有序<ol><li>Coffee</li><li>Milk</li></ol>

20、1. Coffee2. Milk三自定义列表：<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>CoffeeBlack hot drinkMilkWhite cold drink四列表标签标签描述<ol>定义有序列表。<ul>定义无序列表。<li>定义列表项。<dl>定义定义列表。<dt>定义定义

21、项目。<dd>定义定义的描述。<dir>已废弃。使用 <ul> 代替它。<menu>已废弃。使用 <ul> 代替它。块元素HTML 内联元素 <div> 和 <span>div应用：可定义文档中的分区或节，把文档分割为独立的、不同的部分。案例：<body> <h1>NEWS WEBSITE</h1> <p>some text. some text. some text.</p> . <div class="news">

22、<h2>News headline 1</h2> <p>some text. some text. some text.</p> . </div> <div class="news"> <h2>News headline 2</h2> <p>some text. some text. some text.</p> . </div> .</body><span> ：标签被用来组合文档中的行内元素。案例：<p>&

23、lt;span>some text.</span>some other text.</p>Header：页眉背景颜色：blackground-color文本颜色:text-color行高：line-height，行高是指文本行基线之间的距离Float：属性定义元素在哪个方向浮动，left等等Nav：定义导航案例：#nav line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; line-height:30px background

24、-color:#qqqq height:300 width:100float:left <section>：标签定义文档中的节（section、区段）案例：section width:350px; float:left; padding:10px;Footer：定义页脚footer background-color:black; color:white; clear:both; text-align:center; padding:5px; Id:作链接锚，引用27. HTML 响应式 Web 设计：以可变尺寸传递网页<!DOCTYPE html> 指示 we

25、b 浏览器关于页面使用哪个 HTML 版本进行编写lang 属性规定元素内容的语言:<p lang="fr"> 规定<p>内使用法文Margin：设置外边距属性，margin: 5pxborder: 1px solid black：将该border的样式定义为宽度是一个像素,颜色为黑色,且显示为实线<meta> :可提供有关页面的元信息iframe ：用于在网页内显示网页案例：<iframe src="demo_iframe.htm" width="200" height="200"></iframe>frameset cols：框架，窗口显示多个页面排版案例：<frameset cols="25%,75%">Bgcolor：背景颜色（三种表示方式）案例：<body bgcolor="#000

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论