Html常用标签

发布于 2022-09-16  7 次阅读


Head

编码

为了正确显示 HTML 页面,Web 浏览器必须了解页面中使用的字符集。

这在 <meta> 标签中指定:

<meta charset="UTF-8">

title

<title> 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

<title> 标签是 <head> 标签中唯一要求包含的东西。
<head>
  <title></title>
</head>

Body

标题

<body> 
    <h1>1级标题</h1>
    <h2>2级标题</h2>
</body>

div和span

<body> 
    <div>块级标签</div>
    <span>行业标签</span>
</body>

超链接

<a href="url"  target="opentype">链接文本</a>

图片

<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img border="0" src="https://链接" alt="Pulpit rock" width="304" height="228">

列表

有序列表:
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
无序列表:
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

表格

表格由 <table> 标签来定义。

每个表格均有若干行,由 <tr> 标签定义

每个表头由 <th> 标签定义。

每行被分割为若干单元格,由 <td> 标签定义。

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

input

  • <input type="button">
  • <input type="checkbox">
  • <input type="password">
  • <input type="radio">
  • <input type="submit">
  • <input type="text">

text & password

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Radio

定义单选按钮。

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

checkbox

定义复选框。

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

select 下拉框

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间:
     <select>
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

多行文本 textarea

<textarea rows="9" cols="70">  
JavaTpoint textarea tag example with rows and columns.
</textarea>