Html5学习第一天

来源：互联网发布：淘宝招牌图片尺寸编辑：程序博客网时间：2024/05/01 19:10

前段时间朋友找工作说现在面试官都喜欢有自己博客的 看来得培养这个习惯啊

最近老板喜欢往项目里边嵌一些H5页面 那就边学习边积累吧 呃有不小心踏入的欢迎指正啊

1.常用格式化

2.样式表

3.表格元素

4.列表元素

5.块

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>

0 0