首页 > 代码库 > HTML、XHTML、css速记

HTML、XHTML、css速记

2024-07-30 07:40:41   222人阅读

一、HTML

以下内容记录常用的html元素，可另存为html文件以查看效果：

<!doctype html>

<html lang="zh-cn">

 <head>

 <!--meta属性提供页面元信息，不显示-->

 <meta charset="UTF-8">

 <meta name="Generator" content="EditPlus"/>

 <meta name="Author" content="zjc"/>

 <meta name="Keywords"content="HTML,XHTML,css"/>

 <meta name="Description" content="常用元素速记表"/>

 <title>HTML Demo</title>

 </head>

 <body>

        <h1>h1—h6定义标题</h1>

        <p>p标记定义段落，浏览器显示时会自动换行</p>

        <br/>(换行)

        <hr/>(分割线)

        <pre>原始样式输出，比如保留空   格

                换行

                       及缩进</pre>

        <strong>加强显示，类似粗体文字</strong>

        <i>斜体文字</i>

        <b>粗体文字</b>

 

        <a href=http://www.mamicode.com/"http://www.126.com/">文字链接

        <a href=http://www.mamicode.com/"http://www.126.com/" target="_blank">图片链接

        <a name="书签">定义页面的书签（位置）</a>

        <a href=http://www.mamicode.com/"#书签">跳转到那个书签（位置）

 

        <ul>

                <li>无序号列表-条目1</li>

                <li>无序号列表-条目2</li>

        </ul>

 

        <ol type="A">

                <li>有序号列表-条目A</li>

                <li>有序号列表-条目B</li>

        </ol>

 

        <dl>

                <dt>自定义列表项目1</dt>

                       <dd>条目1-1</dd>

                       <dd>条目1-2</dd>

                <dt>自定义列表项目2</dt>

                       <dd>条目2-1</dd>

                       <dd>条目2-2</dd>

        </dl>

 

        <table border="1">

                <tr>

                  <th colspan="2">表格标题行</th>

                </tr>

                <tr>

                  <td>一行第1列</td>

                  <td>一行第2列</td>

                </tr>

                <tr>

                  <td>二行第1列</td>

                  <td>二行第2列</td>

                </tr>

        </table>

 

        <div class="main" style=color:#ff0000"><p>div是区块/小节 定义，浏览器显示时会自动换行。section、div、header、footer等标签通常用于页面布局。class、id可以为外部样式表预设标识</p></div>

        <p>段内<span id="important" style="color:#00ff00">布局元素</span>，可使用css单独对此部分文字进行修饰</p>

 

        <form action="this.jsp" method="post/get">

                <input type="text" name="lastname" value=http://www.mamicode.com/"zjc"size="20" maxlength="50">

                <input type="password"><br/>

                <input type="checkbox" checked="checked">Married<br/>

                <input type="radio" name="sex" value=http://www.mamicode.com/"Male"checked="checked">Male

                <input type="radio" name="sex"value=http://www.mamicode.com/"Female">Female

                <input type="hidden">

                <select>

                       <option>程序员

                       <option selected>工程师

                       <option>销售

                </select>

                <br/>

                <textarea name="Comment" rows="2"cols="20"></textarea><br/>

                <input type="submit" value=http://www.mamicode.com/"提交表单">

                <input type="reset" value=http://www.mamicode.com/"清除所有">

        </form>

 </body>

</html>

 

以下是html框架（frame）示例——由于frame实际上是多个文件的组合，所以在执行脚本、页面刷新等操作时往往出现意外结果，现在用的不多。大部分网站采用div区块布局达到类似的“排版”效果。

<!doctype html>

<html lang="en">

 <head>

 <title>Frame Demo</title>

 </head>

 <frameset rows="20%,80%">

        <frame src=http://www.mamicode.com/"/frame/title.html" noresize="noresize">

        <frameset cols="25%,75%">

                <frame src=http://www.mamicode.com/"/frame/menu.html">

                <frame src=http://www.mamicode.com/"/frame/content.html">

        </frameset>

 </frameset>

 <!--使用框架，就不能带body节点了，带了也显示不了。

 <body>

        iframe是内联框架，相当于在某个区域嵌入另外一个html页面，是写在body内的，但不是所有浏览器都支持。

         <iframe src=http://www.mamicode.com/"/test.html"width="200" height="200" frameborder="0"></iframe>

 </body>

 -->

</html>

二、XHTML

XHTML 指的是可扩展超文本标记语言；XHTML 与 HTML 4.01 几乎是相同；XHTML 是更严格更纯净的HTML 版本；XHTML 是以 XML 应用的方式定义的 HTML；XHTML 是 W3C 推荐标准。

根据以上定义，可以看出xhtml和普通html区别仅在于格式更规范。

例如：

必需拥有根元素（<html>）

元素必须正确嵌套

元素必须始终关闭

元素、属性必须小写

属性值必须用引号、不能简写

三、css

css（层叠样式表）用于在分离的文件中对html内容进行外观修饰。提供了丰富的功能以满足多种视觉效果。css最基本格式为：选择器{属性:值;属性:值;......}

如：h1 {color:red;font-size:10px}

div.main,span#important{color:green}

body table {font-size:10px}

总结：html/xhtml、css、javascript是很自然的mvc架构，html是内容；css是展示；javascript是控制，这也是目前网站所用的主流技术组合，很多前端技术框架也是基于三者来完成的。

HTML、XHTML、css速记


联系
我们