网页制作的文本标记(完整版)_第1页
网页制作的文本标记(完整版)_第2页
网页制作的文本标记(完整版)_第3页
网页制作的文本标记(完整版)_第4页
网页制作的文本标记(完整版)_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

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

文档简介

HTML标记的分类:1)头部标记：title,meta,link,style2)文本标记：font,b,i,u,strong,3)段落标记：p,hn,pre,marquee,br,hr4)列表标记：ul,ol,li,dl,dt,dd5)超链接标记：a,map,area6)图像及媒体元素标记：img,embed,object7)表格标记：table,tr,td,th,tbody8)表单标记：form,input,textarea,select,option,fieldset,legend9)框架标记：frameset,frame,iframe10)容器标记：div,span11)单标记：<br/>(强制换行)，<hr/>(水平线)，<img/>，<input/>，<meta/>，<link/>12)成组标记：table，form，ul,ol,dl,frameset，fieldset行内元素和块级元素：行内元素：a，img，font(文字属性)，b，i，u，span，input块级元素：p,div,hn,pre,hr,ul,ol,li,form公共属性：align（水平对齐方式），valign(垂直对齐方式)，border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name特有属性：<ahref（链接的目标），target（窗口打开方式）><inputtype（元素的类型），size（含义依据type而不同）>在HTML语言规范的基础上，XHTML对标记还有下面一些额外的要求：1）标记名和属性名、属性值必须小写；2）属性值必须用双引号引起；3）所有标记包括单标记都必须封闭；4）不允许省略属性值。<html><head><title></title></head><body><imgsrc="图片路径"alt="光标移到图片的所显示的内容"width=""/><p>（上下）一个段落的文字内容</p><span>左右顺序排列的文字</span><pre>保持文本内容的原形</pre><nobr>强制不换行</nobr><hrsize="2"(水平线的厚度)width="5"(水平线的宽度)noshade="noshade"(是否要阴影)color="#FF0000"(颜色)align="center"(水平对齐方式)/><b>粗体文字</b><i>斜体文字</i><u>加下划线</u><em>加粗，倾斜</em><sup>内容</sup>(上标)<sub>...</sub>(下标)<fontface="黑体"size="+6"color="#00000FF">文字内容</font>(编辑文字的属性)<ul><li><ahref="">首页</a></li>（超链接）<li>...</li><li>...</li></ul>(无序列表)ol,li(有序列表)<body><h2>一个定义列表：</h2><dl><dt>计算机</dt>（标题）<dd>用来计算的仪器......</dd>（文段内容）<dt>显示器</dt><dd>以视觉方式显示信息的装置......</dd></dl>table表格：<tablewidth="400"border="1"cellspacing(单元格间距即单元格和单元格的距离)="0"cellpadding(单元格边距即单元格和单元格内容的距离)="0"><th>...</th>(表头)<caption>…</caption>(表格标题)<tr>(行)<td>...</td>(列ttr)</tr></table表格table标签的属性：1、width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。2、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。3、border属性：表格边线粗细4、bordercolor属性：指定表格或某一个单元格的边框颜色。5、bordercolorlight属性：亮边框的颜色6、bordercolordark属性：暗边框的颜色c7、bgcolor属性：指定表格或某一个单元格的背景颜色。<styletype="text/css">p{属性：属性值；}</style></head><body><p>我的样式表</p><p>第二段落</p><div>第三段落</div></body>（2）类选择符(在整体上实现不一致的效果)<head><styletype="text/css">.div1{属性：属性值；}.div2{属性：属性值；}.left{属性：属性值； }.right{属性：属性值； }</style></head><body><divclass="div1">我的样式表</div><pclass="div1">第二段文字</P><divclass="div2">第三段文字</div><pclass="left">文字居左显示</p><pclass="right">文字居右显示</p></body>（3）id选择符（具有最高优先级）<styletype="text/css">#footer{属性：属性值}</style></head><body><divid="footer">联系我们:<ahref="mailto:demo@">demo@</a></div></body>（4）伪类：a:link超链接的初始状态a:visited已经访问后的链接状态a:hover鼠标滑过链接时的状态a:active点击状态时<styletype="text/css">a:hover{color:#ff00ff;text-decoration:none;}</style></head><body><ahref="/"target="_blank">百度</a></body>（5）子选择类:语法格式：选择符1选择符2选择符1和2直接使用空格分隔，其含义是第一个选择符中的第二个选择符。注意：选择符1必须和选择符2有嵌套关系，否则无法正常使用<styletype="text/css">divp{width:500px;height:150px;background:#009900;}</style></head><body><div><p>包含在div里面的p元素</p></div><div>独立的div元素</div><p>独立的p元素</p>(6)选择符分组（群选择符）语法格式：选择符1，选择符2，…..每个选择符之间用“,”分隔<styletype="text/css">div,p,h1{width:500px;height:150px;background:#009900;color:white;}</style></head><body><div>div元素</div><p>p元素</p><h1>h1元素</h1>div的嵌套<divid=“top”>网页头部</div><divid=“main”><divid=“left”>网页左边</div><divid=“right”>网页右边</div></div><divid=“bottom”>网页底部</div>边界（margin）属性补白（padding）属性<html><head><title>CSS设置填充属性</title><style>div{width:400px;height:300px;background:red;padding:50px20px30px40px;}</style></head><body><div>我的样式表</div></body></html>边框样式border分为上、右、下、左四个子属性和一个border-style综合属性。顶部边框样式border-top-styleBorder-top-style：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;None：没有边框Hidden：隐藏边框Dotted：点线边框Dashed：虚线边框Solid：实线边框Double：双线边框Groove：3D凹槽边框Ridge：菱形边框Inset：3d凹边Outset：3d凸边边框的综合属性border:border-width||border-style||border-color<html><head><title>CSS设置边框属性</title><style>.dashed{border-top-style:dashed;}</style></head><body><divclass="dashed">我的样式表</div></body></html>浮动定位：float//none、right、left浮动元素使得div块可以左右并排清除浮动属性：clear//none、right、left、both相对定位：position：relative(相对于其原来位置不同方向的偏移)属性值：top(从上向下位移)、left(从左向右)、right、bottom<styletype="text/css">div{position:relative;top:50px;left:50px;}<style><body><div>11111</div></body>绝对定位：position：absolute(以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父级元素都没有设置定位属性，则以浏览器窗口为定位基准)属性值：top、left、right、bottom制作三角形<styletype="text/css">#nav{font-size:14px;}#nava{display:block;/*将行内元素a设置为块级元素，从而具有块级元素的特点*/color:#ff0000;background-color:#99ccff; text-align:center; text-decoration:none; padding:6px16px; margin:02px; border:1pxsolid#3399ff; float:left;/*将每个块设置为左浮动*/ position:relative;/*让b元素以a元素为定位基准*/ }#nava:hover{ color:#ffffff; background-color:#993300; }#nava:hoverb{border:8pxsolid#ffffff; border-top-color:red;/*以上两条形成红色下三角形*/overflow:hidden; height:0px; width:0px;position:absolute; top:30px; left:35px;/*以上3条相对于a元素边框的右下边*/ }</style></head><body><divid="nav"><ahref="#"><b></b>中心简介</a><ahref="#"><b></b>政策法规</a><ahref="#"><b></b>常用下载</a><ahref="#"><b></b>为您服务</a><ahref="#"><b></b>技术支持</a></div></body>规</a><ahref="#"><b></b>常用下载</a><ahref="#"><b></b>为您服务</a></div></body>背景图片：background其属性：background-colorbackground-imagebackground-

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论