前段时间朋友找工作说现在面试官都喜欢有自己博客的 看来得培养这个习惯啊
最近老板喜欢往项目里边嵌一些H5页面 那就边学习边积累吧 呃有不小心踏入的欢迎指正啊2.样式表 3.表格元素 4.列表元素
1.常用格式化
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="utf-8">
<title>格式</title>
<script src="../js/app.js"></script>
<style type="text/css"></style>
</head>
<body bgcolor="#008b8b">
<p >Hello Word</p>
<h1>Hello word</h1>
<h2>Hello word</h2>
<h3>Hello word</h3>
<h4>Hello word</h4>
<h5>Hello word</h5>
<h6>Hello word</h6>
<b>粗体</b> <br/>
<big>大字体</big><br/>
<em>着重字体</em> <br/>
<i>斜体</i> <br/>
<small>小字体</small> <br/>
<strong>强调字体</strong><br/>
Hello Word<sup>上标</sup> <br/>
Hello Word<sub>下标</sub> <br/>
<ins>插入字体</ins> <br/>
<del>删除字体</del> <br/>
<h2 class="h2class" id="h2id">h2标题</h2>
<p>hell</p>
word<br/>
hello
</body>
</html>
2.样式表
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="utf-8">
<title>样式表</title>
<!--外部样式表 需要引用外部文件-->
<link rel="stylesheet" type="text/css" href="../css/css.css">
<style type="text/css">
p{
color: cadetblue;
}
</style>
</head>
<body>
<h1>外部样式引用 </h1>
<p>内部样式表</p> <pre name="code" style="line-height: 16px;"> <!--内部样式表 <pre name="code" style="line-height: 16px;"> <!--内部样式表 <span style="font-family: Arial,Helvetica,sans-serif;">标签或元素里边设置style属性 具有最高优先级</span>-->
<a style="color: green" href="http://www.jikexueyuan.com/course/136.html">内联样式表</a></body></html>
3.表格元素
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="utf-8">
<title>表格</title>
</head>
<body>
边框 表头 标题
<table border="2">
<caption>表格头</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<br/><br/><br/>
<p>水果列表表格</p>
<table border="2">
<tr>
<td>表格1</td>
<td>表格1</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
</ul>
</td>
<td>我想吃了</td>
</tr>
</table>
<br/> <br/> <br/>
单元格边距(大小)
<table border="2" cellpadding="10">
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<br/> <br/> <br/>
单元格间距
<table border="2" cellspacing="20">
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<br/> <br/> <br/>
单元格背景颜色 图片
<table border="2" bgcolor="#bc8f8f" background="html.png">
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<br/> <br/> <br/>
单元格内容排列
<table border="2" bgcolor="#bc8f8f" background="html.png">
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<br/> <br/> <br/>
跨行和跨列单元格
<table border="2" bgcolor="#bc8f8f" background="html.png">
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
4.列表元素
</pre><pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="utf-8">
<title>列表</title>
</head>
<body>
<br/><br/><br/>
无序列表 type属性默认值disc 还有 circle square
<ul type="square">
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>switf</li>
</ul>
<br/><br/><br/>
有序列表 type属性用什么表示项默认是数字 还有A a I i start属性从第几项开始默认1/a
<ol type="a" start="3">
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>switf</li>
</ol>
<br/><br/><br/>
无序嵌套列表
<ul type="square">
<li>水果</li>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
</ul>
<li>IT</li>
<ul>
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>switf</li>
</ul>
</ul>
<br/><br/><br/>
自定义列表
<dl type="square">
<dt>ios</dt>
<dd>我会</dd>
<dt>android</dt>
<dd>我不会</dd>
<dt>html5</dt>
<dd>我正在学</dd>
<dt>switf</dt>
</dl>
</body>
</html>
5.块
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>块</title> <link rel="stylesheet" type="text/css" href="../css/css.css"> <style type="text/css"> span{ color: aquamarine; } </style> <style type="text/css"> #spanid{ color: blue; } </style> </head> <body> <!--块 以新行开始--> <p></p> <h1></h1> <ul></ul> <!--内联元素 通常不会以新行开始--> <b></b> <a></a> <img> <!--div元素(块元素) 组合元素的容器 配合样式使用--> <div id="divid"> <p>qqqqq</p> <a>1111111</a> <b>33333</b> <h1>444444</h1> </div> <!--span元素(块元素) 文本的容器--> <div id="spanid"> <p>这是一<span>这span内的字</span> 个文本</p> </div> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
