HTML 与CSS 踏入网页设计之门基本架构<html> <head> <title> 页面标题</title> <style type="text/css"> /*层样式列表*/ </style> <script type="text/javascript"> /* JS 脚本*/ </script> <link type="text/css" rel="stylesheet" href="CSS 文件路径" /> </head> <body> 网页内容<!-- 注释标记--> </body> </html> 常见标签 1--文本<p> 一个新的段落</p> <h1> 一级标题</h1> <h2> 二级标题</h2> <em> 斜体强调</em> <strong> 粗体显示</strong> <a href=" 目标地址路径"> 要超链接的内容(文本或图像) </a> <img src=" 图像的地址路径" /> <!-- 父目录用 "../" 来表示,目录表示中只用"/" 不用"\" 文件名和文件夹名中都不能出现空格 --> <!-- 在构建网站的早期就组织好文件的存放 --> <!-- 站内文件用相对路径,站外文件用 URL --> <q> 句子引用</q> <blockquote> 段落引用</blockquote> <br/> <!-- 换行--> <hr/> <!-- 水平线--> 元素中属性的统一写法:属性名,等号,双引号括起来的属性值 HTML 的特殊符号<a> 元素的详细用法<a title=" 简短说明" > 一个小链接测试</a> <a id="top" > 这是文档的最顶端</a> <a href="#top"> 回到顶部</a> <a href=" 另一个页面#top"> 跳到另一个页面的顶部</a> <a href=" 新页面" target="_blank"> 从新窗口打开一个页面</a> <a> 元素的几个状态 a:link{ color: green;} /*未被点击过的*/ a:visited{ color: red;} /*已被点击过的*/ a:hover{ color:blue; } /*鼠标划过*/ <img> 元素的详细用法<p><img src="image/ " /></p> <!-- 可支持图像格式 jpg gif png--> <p><img alt=" 替代文本" src="" /></p> width="30" height="20" <!-- 设定图像宽和高(像素),为保持比例也可只设定其中一个--> 网页的规范与优化(基于 ) 1、明确所使用的网页标准,在首行加入如下代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1- "> 2、明确所使用的编码格式,在<head> 标签中的第一行加入如下代码<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 3、<html> 标签改为如下<html xmlns="9/xhtml"> 网页的规范与优化(基于 ) 完工后到 http://validator./ 去检查你的 XHTML 文件,看是否有语法问题。 CSS 样式--面向者 1、面向标签 body{ font-family: sans-serif; color: gray; }2、面向 class .green{ color: green; } /*含有 class="green" 属性的标签们都将被赋予以上属性*/ 3、面向 id #mylogo{ background-color: white;} /* id ="mylogo" 属性的标签只有一个,它将被赋予以上属性*/ 所有子代#fircont a{} 直接子代#fircont>a{} 孙代#ifrcont p a{} CSS 样式--基本文本 1 背景颜色 background-color: #d2b48c; /*米黄色*/ 字体 font-family: Arial,sans-serif; 斜体 font-style: italic; 下划线 text-decoration:underline; 文本颜色 color: gray; /* #222; */ 字体大小 font-size:40px; /* large;150%;; */ 粗细 font-weigh
HTML与CSS 来自淘豆网m.daumloan.com转载请标明出处.
