HTML整理
通过HTML源码及对应网页对HTML知识进行整体,方便查看!
HTML网站:http://www.w3school.com.cn/index.html
<!-- 1、HTML:Hyper Text Markup Language:超文本标记语言。HTML标签对大小写不 敏感,推荐小写。 2、元素:从开始标签到结束标签的所有代码 3、属性:以 name="value" 的形式出现 属性:class 值:classname 描述:规定元素的类名 属性:id 值:id 描述:规定元素的唯一id 属性:style 值:style_definition 描述:规定元素的行内样式 属性:title 值:text 描述:规定元素的额外信息 HTML标准属性:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp 4、计算机输出标签,引用、引用和术语定义: http://www.w3school.com.cn/html/html_formatting.asp 5、样式:外部样式表、内部样式表、内联样式 6、空格:用 表示 7、背景图像:background, 背景颜色:bgcolor, 边框:border, 排列方式:align 替换文本属性:alt 8、大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时,通常会以新行来开始(和结束),如:<h1>, <p>, <ul>, <table> 内联元素在显示时通常不会以新行开始,如<b>, <td>, <a>, <img> 9、<span> 元素是内联元素,可用作文本的容器, 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。 <div> 元素是块级元素,可用于布局, 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。 10、框架及内联框架:frameset:http://www.w3school.com.cn/html/html_frames.asp 11、HTML颜色:http://www.w3school.com.cn/html/html_colors.asp HTML颜色名:http://www.w3school.com.cn/html/html_colornames.asp 12、<address> 标签定义文档或文章的作者/拥有者的联系信息。 <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。 13、<noscript> 标签提供无法使用脚本时的替代内容 14、如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体, 如显示小于号:<或< HTML实体符号参考手册:http://www.w3school.com.cn/tags/html_ref_entities.html 15、尽量不要使用HTML废弃的元素比如<font> XHTML: 1、XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language) XHTML 与 HTML 4.01 几乎是相同的。XHTML 是更严格更纯净的 HTML 版本。 XHTML 与 HTML 4.01 兼容。所有新的浏览器都支持 XHTML。 2、XHTML与HTML最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名、元素、属性必须用小写字母。 XHTML 文档必须拥有根元素。 3、更多的 XHTML 语法规则: 属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素 在 XHTML 文档中必须存在html、head、body元素,而 title 元素必须位于在 head 元素中。 4、重要的兼容性提示:你应该在 "/" 符号前添加一个额外的空格, 以使你的 XHTML 与当今的浏览器相兼容。 5、存在三种XHTML文档类型: STRICT(严格类型) TRANSITIONAL(过渡类型) FRAMESET(框架类型) --> <html><!--html元素定义了整个HTML文档--> <head><!--所有头部元素的容器,里面可以添加标签:title/base/link/,meta/script/style, 其中meta提供关于HTML文档的元数据(关于数据的信息),script用于定义客户端脚本 --> <!--内部样式,设置页面居中 <style type="text/css"> body{margin: 0 auto; width:1000px; text-align:center;} </style>--> <title>文档标题</title> <!--base标签为页面上所有链接规定默认地址或目标(target)--> <base target="_blank" /> </head> <!--body元素定义了HTML文档的主体,body之间是可见页面内容 background为背景图片--> <body background="image/1.jpg"> <h1>HTML整理</h1><!--这里显示标题h1,共分为h1-h6--> <br/><!--这里为换行,空元素直接在开始标签关闭,也可不带/,推荐带上--> <hr/><!--水平线/分隔线,可用于分隔--> <br/> 音频:<audio controls="controls" height="100" width="100" autoplay="autoplay"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio><br/> ==================================链接=====================================<br/> <a href="http://blog.csdn.net/wtfmonking" target="_blank">这里是链接,用a标签标示,<br/> 把target属性设置为_blank,该链接会在新窗口打开,不设置则在当前页面打开</a> <br/><br/> 下面是等效的以图像作为链接,border为边框<br/> <a href="http://blog.csdn.net/wtfmonking" target="_blank"> <img border="2" src="image/3.gif"/></a><br/><br/> <a href="#mao">这里创建指向最下面的锚的链接,可以直接跳到最下面的锚的位置</a> <br/><br/> ==================================图像======================================<br/> <!--插入图像,用img标签表示,alt属性用于图像无法显示时显示文本--> <img src="image/2.jpg" width="102" height="76" alt="图像错误"/><br/><br/> <p><img src ="image/3.gif" align="left">图像浮动在文本左侧</p> <br/> <p>图像下部<img src="image/3.gif" align="bottom">在文本中对齐(默认对齐方式)</p> <p>图像中部<img src ="image/3.gif" align="middle">在文本中对齐</p> <p>图像上部 <img src ="image/3.gif" align="top">在文本中对齐</p> <p><img src ="image/3.gif" align="right">图像浮动在文本右侧</p> ===================================文本======================================<br/> <p>这里显示段落</p><br/> <p>文本格式化标签: <b>粗体</b> <big>大号</big> <small>小号</small> <em>着重</em> <i>斜体</i> <strong>加重语气</strong> <sub>下标</sub> <sup>上标</sup> <ins>插入字</ins> <del>删除字</del> </p> ===================================表格=======================================<br/> <table border="2"> <!--border为表格边框--> <caption>这里是表格的标题</caption> <tr> <!--这里是行--> <th>这里是表头</th> <th>第二个表头</th> </tr> <tr> <td bgcolor="red" align="left">行1,列1</td> <!--bgcolor为背景颜色,align为排列方式--> <td bgcolor="green" align="right">行1, 列2</td> </tr> <tr> <td></td> <!--空单元格--> <td>行2, 列2</td> </tr> </table> ==================================列表========================================<br/> <ul type="disc"> <li>苹果</li> <ul type="circle"> <li>苹果</li> <li>香蕉</li> </ul> <li>香蕉</li> </ul> <ul type="square"> <li>苹果</li> <li>香蕉</li> </ul> <h4>有序列表,默认为数字</h4> <ol> <li>苹果</li> <li>香蕉</li> </ol> <ol type="A"> <li>字母</li> <li>列表</li> </ol> <ol type="a"> <li>小写字母</li> <li>列表</li> </ol> <ol type="I"> <li>罗马字母</li> <li>列表</li> </ol> <ol type="i"> <li>大写罗马</li> <li>列表</li> </ol> <dl> <!--定义列表:--> <dt>定义项目</dt> <dd>此处为定义的描述 ... ...</dd> <dt>HTML</dt> <dd>HTML是超文本标记语言... ...</dd> </dl> ==================================表单========================================<br/> <form name="input" action="xxx.jsp" method="post"><!--action动作属性定义目的文件--> <fieldset> <!--设置表单边框--> <legend>表单边框</legend> 输入域:<input type="text" name="textname"/> </fieldset> 单选按钮:<input type="radio" name="sex" value="male" checked="checked"/>男 <!--checked为默认选择--> <input type="radio" name="sex" value="female" />女<br/> 复选框:<input type="checkbox" name="bike" />自行车 <input type="checkbox" name="car" />汽车<br/> <select name="xxxx"> <optgroup label="选项组1"> <option value="xiala">下拉列表</option> <option value="liebiao">第二个</option> </optgroup> <optgroup label="选项组2"> <option value="moren" selected="selected">默认选择的</option> <option value="liebiao">最后一个</option> </optgroup> </select><br/><br/> 文本域:<br/> <textarea name="content" cols="55" rows="4"></textarea><br/> <button type="button">这是一个按钮</button><br/> <input type="submit" value="确认"/><br/> </form> =============================================================================<br/> <a name="mao">这里命名一个HTML链接的锚,上面的链接可以直接跳到这里!</a> </body> </html>
对应网页:
文件: