html页面标签元素总结

2017-01-04 19:21:18来源:作者:人点击

第七城市
html页面标签元素总结 前言
学习python的flask架构对于有丁点C功底的人来说代码问题研究研究还能勉强跟得上脚步,但是html前端就蒙圈了,完全小菜比一枚。故此总结下我目前接触过的标签以及经常需要用的小功能(例如下拉框,单选框等等)。本篇仅从为w3c官网http://www.w3school.com.cn/收藏以供自己日后方便使用。

PART I :常用的html标签

1.1 基础篇

标签 描述
<!DOCTYPE>定义文档类型
<!--XXX-->定义注释
<html>定义html文档
<title>定义文档的标题
<body>定义文档主题
<hr>定义水平线
<br>定义简单的折行
1.2 表单篇

标签 描述
<form>
定义供用户输入的HTML表单
<label>定义input元素的标注
<input> 定义输入的控件
<button>定义按钮
<select>定义选择列表(下拉列表),基本与<option>配合使用
<option>定义选择列表中的选项
<textarea>定义多行的文本输入控件
1.3 表格篇
标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容(脚注)。
1.4 框架篇

标签描述
<frame>定义框架集的窗口或框架
<frameset>定义框架集
<iframe>定义内联框架
1.5 其他标签
图像、音视频类
<img>定义图像
<map>定义图像映射
<audio>定义声音内容
<video>定义视频
链接类
<a>
定义锚<a href='链接地址'>content</a>
<link>定义文档与外部资源的关系
列表类
<ul>定义无序列表
<ol>定义有序列表
<li>定义列表项目
样式/节
<div>定义文档中的节
<span>定义文档中的节
编程类
<script>定义客户端脚本
PART II: 常用的html功能实现

功能1:下拉菜单

实现代码如下:
<div><label>角色:</label><select name='role' id='role'><option value="admin">管理员</option><option value="user">普通用户</option></select></div> <!--role-->


功能截图:





功能2:单选框(主要用于男女性别选择、锁定与否选择等)
核心:记得单选框要设置value的值

实现代码如下:

<td>status<input type='radio' name='status' value='unlock'>unlock<input type='radio' name='status' value='lock'>lock</td>


功能实现截图:





功能三:展示信息颜色控制

主要用于渲染提示信息,用红色使其更加醒目。

实现代码如下

<div style="color:red"><p> 信息展示 </p></div>


功能实现截图




本文出自 “11931192” 博客,谢绝转载!
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台