HTML常用标签及表格、表单、列表

最新推荐文章于 2024-05-14 22:39:54 发布

AlexMYH

最新推荐文章于 2024-05-14 22:39:54 发布

阅读量9.2k

点赞数 8

分类专栏：前后端文章标签： html 标签

本文链接：https://blog.csdn.net/AlexMYH/article/details/80330956

版权

前后端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1:HTML常用标签

<a href=" ">这是一个链接</a>  
        //href="#"空链接
<a href=" " target="_blank">新窗口打开</a>
<b>加粗文本</b>
<i>斜体文本</i>
<code>电脑自动输出</code>
<sub>下标</sub> 
<sup>上标</sup>
<base href="//www.w3cschool.cn/images/" target="_blank"> 
      //默认链接
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
      //链接到样式表
<script type="text/javascript" src="js/modernizr.js"></script> 
      //链接到js文件   
<img src="url" alt="some_text" width="304" height="228">
      //插入图片，alt指预备替换文本，最好指定宽高

2:表格

HTML 表格的基本结构：
  <table>…</table>：定义表格
  <th>…</th>：定义表格的标题栏（文字加粗）
  <tr>…</tr>：定义表格的行
  <td>…</td>：定义表格的列

例：
<table border="1">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

显示如下：

A	B
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

3：列表

1）无序列表

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

显示如下：

咖啡
茶
牛奶

2）有序列表

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

显示如下：

咖啡
茶
牛奶

咖啡
茶
牛奶

4：表单

文本字段：
<form action="">
Name : <input type="text" name="name"><br>
Age : <input type="text" name="age">
</form>

密码字段：
<form action="get">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

单选：
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框：
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

下拉列表：
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

文本域：
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

提交按钮：
<input type="submit" value="提交">

表单发送电子邮件：

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
send time:<br>
<select name=time>
<option  value="2015">2015</option></br>
<option value="2016">2016</option></br>
<option  value="2017">2017</option></br>
</select></br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Name:

E-mail:

Comment:

send time:
2015 2016 2017

5：基本格式：

<!DOCTYPE html>
<html>
<head>
 <title>title of the document</title>
 <link rel="stylesheet" href="css/font-awesome.min.css">
 <script type="text/javascript" src="js/modernizr.js"></script>    
 <style>
 ...css描述
 </style>
 <script>
 ...script描述
 </script>
</head>

<body style="background-color:yellow;">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</body>
</html>

6：meta元素

为搜索引擎定义关键词:    
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:    
<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:    
<meta name="author" content="Hege Refsnes">

每30秒钟刷新当前页面:   
<meta http-equiv="refresh" content="30">

AlexMYH

关注

8
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
HTML常用标签及表格、表单、列表

1:HTML常用标签&lt;a href=" "&gt;这是一个链接&lt;/a&gt; //href="#"空链接&lt;a href=" " target="_blank"&gt;新窗口打开&lt;/a&gt;&lt;b&gt;加粗文本&lt;/b&gt;&lt;i&gt;斜体文本
复制链接

扫一扫