Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML5 初识
Blogger Information
Blog 9
fans 0
comment 0
visits 6130
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML5 初识
空心菜博客
Original
475 people have browsed it

一、HTML 文档标签

文档声明为 HTML 标识网页是遵循 html5 语法规范

  1. <!DOCTYPE html>

html 网页中根标签，一个页面中有且只有一个根标签，网页中的所有内容都写在根标签的内部

  1.  <html lang="en"></html>

网页的头部，head 标签中的内容

  1.     <head> </head>

使用 meta 来设置页面的字符集

  1.     <meta charset="UTF-8" />

网页的标题

  1.     <title>我是标题</title>

网页的主体，网页中所有的可见内容，都写在 body 中

  1.     <body></body>

二、html 常用标签

1.标题标签 h1~h6 共六级标题 h1 最大 h6 最小

  1. <h1>取一杯天上水</h1>
  2. <h2>取二杯天上水</h2>
  3. <h3>取三杯天上水</h3>
  4. <h4>取四杯天上水</h4>
  5. <h5>取五杯天上水</h5>
  6. <h6>取六杯天上水</h6>

2.段落标签p，块级元素，独占一行

  1.     <p>取一杯天上水</p>
  2.     <p>取二杯天上水</p>
  3.     <p>
  4.       窗前明月光<br />
  5.       疑是地上霜
  6.     </p>

3.链接标签a 跳转到指定的链接

  1. <a href="https://www.php.cn/">php中文网</a>

4.无序列表ul,li 定义无序列表

  1.  <ul>
  2.       <li>item</li>
  3.       <li>item</li>
  4.       <li>item</li>
  5.       <li>item</li>
  6.     </ul>

5.图像标签img

  1.     <img src="nb.png" alt="" title="" width="200px" height="200px" />

6.有序列表ol,li 定义有序列表

  1.    <ol>
  2.       <li>item</li>
  3.       <li>item</li>
  4.       <li>item</li>
  5.       <li>item</li>
  6.     </ol>

7.自定义列表dl,dt,dd

  1. <dl>
  2.       <dt>诗人</dt>
  3.       <dd>李白</dd>
  4.     </dl>
  5.     <dl>
  6.       <dt>诗人</dt>
  7.       <dd>杜甫</dd>
  8.     </dl>
  9.     <dl>
  10.       <dt>诗人</dt>
  11.       <dd>苏轼</dd>
  12.       <dd>苏洵</dd>
  13.     </dl>

8.表格table,th,tr,td

  1. <table border="1" width="500px" height="200px">
  2.       <tr style="background: cornflowerblue">
  3.         <th>a</th>
  4.         <th>a</th>
  5.         <th>a</th>
  6.         <th>a</th>
  7.       </tr>
  8.       <tr>
  9.         <td colspan="3">横线水平合并3个a</td>
  10.         <!-- <td>a</td>
  11.         <td>a</td> -->
  12.         <td rowspan="3">向下垂直合并三个a</td>
  13.       </tr>
  14.       <tr>
  15.         <td>a</td>
  16.         <td>a</td>
  17.         <td>a</td>
  18.         <!-- <td>a</td> -->
  19.       </tr>
  20.       <tr>
  21.         <td>a</td>
  22.         <td>a</td>
  23.         <td>a</td>
  24.         <!-- <td>a</td> -->
  25.       </tr>
  26.     </table>

9.表单form

1.文本域text

  1.  <form action="url" method="post" name="formName">
  2.       账号： <input type="text" />
  3.     </form>

2.密码password

  1. <form action="url" method="post" name="formName">
  2.       密码： <input type="password" />
  3.     </form>

3.单选框radio

  1.  <form action="url" method="post" name="formName">
  2.       男<input type="radio" name="sex" value="boy" />
  3.       女<input type="radio" name="sex" value="gril"/>
  4.     </form>

4.多选框checkbox

  1.    <form action="">
  2.       读书 <input type="checkbox" />
  3.       写字 <input type="checkbox" /> 
  4.       玩耍<input  type="checkbox"/>
  5.     </form>

5.提交按钮button

  1. <form action="">
  2.       <input type="button" name="an" value="按钮" />
  3.     </form>

6.重置按钮reset

  1.  <form action="">
  2.       <input type="reset" name="ch" value="重置" />
  3.     </form>

10.下拉框select > option

  1.    <select name="" id="">
  2.       <option value="si">四川</option>
  3.       <option value="chong">重庆</option>
  4.       <option value="yun">云南</option>
  5.       <option value="gui" selected>贵州</option>
  6.     </select>

11.内联iframe

  1.  <iframe src="http://www.runoob.com" frameborder="0"></iframe>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post