html常用元素

最新推荐文章于 2025-01-15 17:53:41 发布

原创最新推荐文章于 2025-01-15 17:53:41 发布 · 342 阅读

2 ·

CC 4.0 BY-SA版权

前端基本学习专栏收录该内容

3 篇文章

订阅专栏

由于我使用的是mac，所以以下全程介绍的内容是基于mac系统上，使用的工具是sublime text3 for mac。

1.文本输入框、密码输入框

eg:

<input type="text" name="username"><br>
<input type="password" name="password"><br>

<br>标签为换行标签，效果如下：

注意：当type为password时，并未真正加密，只是显示效果，在编写代码时，为保证数据的安全，防止爬虫获取数据，还需对密码进行加密

2.选择框

eg：

<input type="checkbox" name="aa" value="1">篮球
<input type="checkbox" name="aa" value="2">足球
<input type="checkbox" name="aa" value="3">排球

显示效果如图：

value就是存入数据库的值，而name其实就是跟数据库中字段相对应的

3.单选/复选框

eg：

<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">未知

显示效果如图：

4.按钮

<input type="button" name="bb" value="百度一下，你就知道">

效果：

5.文件上传

<input type="file" name="file" value="选择">

效果如下：

6.下拉框

<select>
    <option value="0"></option>
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
</select>

页面显示如下：

7.超链接

 <a href="http://wwww.baidu.com">跳转到百度首页去</a>

页面显示如下：

8.表格

 <table border="1">
        	<tr>
        		<td>11</td>
        		<td>22</td>
        		<td>33</td>
        	</tr><tr>
        		<td>11</td>
        		<td>22</td>
        		<td>33</td>
        	</tr><tr>
        		<td>11</td>
        		<td>22</td>
        		<td>33</td>
        	</tr>
        </table>

页面显示如下：

9.图片

 <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2832677122,3463918518&fm=173&app=25&f=JPEG?w=218&h=146&s=76A2A5E50E730E925F2034B303008010">

其中src为图片的地址

10.列表

（1）有序列表：ol（order list）

<ol>
       <li>sfjakfangf</li>
       <li>sflaglaafa</li>
       <li>afalflafl</li>
</ol>

（2）无序列表（unorder list）

 <ul>
        <li>dfjakjfoakf</li>
        <li>ajfoakfoakf</li>   
        <li>dmfjlaokfla</li>
</ul>

页面如下：

11.文本域

textarea定义一个多行的文本输入控件，也称为：文本域或文字域

<textarea rows="10" cols="40"></textarea>

如下：

12.H标签

<h1>1号字体最大</h1>
<h2>字体大小随着“h”后面的数字变大，而变小</h2>
<h3>当然这个大小并非不可调试</h3>
<h4>可以通过css的样式进行再次调整</h4>
<h5>具体的css介绍可以参考css介绍</h5>
<h6>在原始标签中6号为最小号</h6>

13.iframe

用来在页面中框体嵌套，也即是在一个页面框体中显示其他页面的内容

例如

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <iframe src="http://www.baidu.com" width="200" height="200"></iframe>
</body>
</html>

如图：