你的位置:首页 > 网页设计

[网页设计]html基础学习


HTML(hyper text markup language):超文本标记语言

标记学习

1.标题标记:有六种标题<h1>-<h6>

<body>
  <h1>标题一</h1>  <h2>标题二</h2>  <h3>标题三</h3>  <h4>标题四</h4>  <h5>标题五</h5>  <h6>标题六</h6>
</body>

2.列表:(无序列表;有序列表;定义列表)<ul>、<ol>、<dl>

 1 <body> 2   <ul> 3     <li>无序列表1</li> 4     <li>无序列表2</li> 5     <li>无序列表3</li> 6   </ul> 7   <ol> 8     <li>有序列表1</li> 9     <li>有序列表2</li>10     <li>有序列表3</li>11   </ol> 12   <dl>13     <dt>HTML</dt>14     <dd>超文本标记语言</dd>15   </dl>16 </body>       

3.段落<p>

1 <body>2   <p>小说就由许多段落构成</p>3 </body>

4.预格式文本(按照源文件格式在浏览器中显示)<pre>

1 <body>2   <pre>3    今天的日期是:4                2016年8月13日5   </pre>6 </body>

5.分区块文本<div>

1 <body>2   <div><p>把一段文字用一个区域来显示</p></div>3 </body>

6.跨越字符<span>

1 <body>2 <!--"web"就用红色字体显示,其他的字体就保持原来的样子-->3   <p>学习<span color="red">web</span>前端</p>4 </body>

7.超链接<a>

1 <body>2   <a href="http://www.cnblogs.com">点击我就进入博客首页</a>3 </body>

8.图形<img>

1 <body>2 <!--"src"选择路径-->3   <img src="bologs.jpg" alt="博客图片"></img>4 </body>

9.表格<table>

 1 <!--表示一个3*3的表格> 2 <body> 3 <table> 4  <tr> 5    <td>1</td> 6    <td>2</td> 7    <td>3</td> 8   </tr> 9   <tr>10    <td>4</td>11    <td>5</td>12    <td>6</td>13   </tr>14   <tr>15    <td>7</td>16    <td>8</td>17    <td>9</td>18   </tr>19</table>20 </body>    

表单学习

1 <form>2   <label for="name">姓名</label>3   <input type="text" placeholder="输入用户名" id="name">  </input>4 <br/>5   <label for="key">密码</label>6   <input type="password" id="key" maxlength="10"></input>7 <form>