web前端之 HTML标签详细介绍
html标签的分类
点我查看完整的html标签介绍
在html中，标签一般分为块级标签和行内标签
- 块级标签：块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签"p"、"div"、"form"这个块元素比较特殊，它只能用来容纳其他块元素。
例如：div、h1、p form 等
- 行内标签：又称为内联标签，内联元素只能容纳文本或者其他内联元素
例如：a、span、select 等
看下代码和效果图就知道了
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span style="background-color: #aa614f">我是内联标签</span>
<div style="background-color: red">我是块级标签</div>
</body>
</html>
- 效果图
DOCTYPE标签
该标签告诉浏览器使用什么样的规范来解析html文档
<!-- 推荐使用html规范进行解析 -->
<!DOCTYPE html>
点我查看有关Doctype的规范
head标签的子标签
1、meta标签 (metadata information)
meta标签为自闭和标签，该标签提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码（告诉浏览器是什么编码）
<!-- 下面这两种写法是一个意思，使用其中一种就可以了 -->
<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
<meta charset="UTF-8" />
- 刷新和跳转
<!-- 每隔30秒刷新一次页面 -->
<meta http-equiv=“Refresh” Content=“30″>
<!-- 打开页面5秒后跳转到百度的连接上 -->
<meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ />
- 关键词（SEO相关）
<!-- 该关键词取自博客园的首页 -->
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" />
- 描述（SEO相关）
<!-- 该描述取自博客园的首页 -->
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />
- X-UA-Compatible 主要用来解决ie6兼容性的问题
<!-- 如果使用ie6浏览器打开，则使用ie最新的工业版处理html，而不是用原生的ie6的模式来处理html -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
2、title标签
该标签主要显示网页的标题
<!-- 该标题显示在浏览器标签页，显示效果如下图所示 -->
<title>web前端学习</title>
3、link标签
该标签主要用来引入css样式和引入浏览器标签页标题左侧的小图标
- 引入css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- 引入图标icon
< link rel="shortcut icon" href="image/favicon.ico">
4、style标签
该标签主要用来在html文件中写css样式, 更多的样式会在CSS博文中详细介绍
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
5、script标签
该标签主要用来在html文件中写js代码或者引入js文件，有关JS的操作会在JS的博文中详细介绍
- 引入文件
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
- 写js代码
<script type="text/javascript">
var num = 10;
...
</script>
body标签中常用的子标签
1、html特殊符号的表示方式
例如要在html页面上显示一个大于号和小于号
使用 > 来表示大于号
使用 < 来表示小于号
点我查看网页特殊符号HTML代码大全
2、p标签
p标签表示一个段落，默认段落之间是有间隔的，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>这里是第一个段落</p>
<p>这里是第二个段落</p>
</body>
</html>
3、br标签
br标签是一个换行标签
- 没有br标签的代码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>第一个span标签</span>
<span>第二个span标签</span>
</body>
</html>
- 加了br标签的代码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>第一个span标签</span>
<br />
<span>第二个span标签</span>
</body>
</html>
4、a标签
a标签主要用来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时，链接显示为红色并带上下划线
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
使用 href 属性可以指定点击该文字跳转到哪里去
href="url" href可以指定跳转的url
href="#aaa" 表示跳转到当前页面中id为aaa的标签处，并将该标签置顶显示，href可以跳转至指定页面中标签的id值
使用 target 属性，你可以定义被链接的文档在何处显示。
target="_self" 默认不写target就是这个属性,在当前页面打开百度页面
target="_parent" 在当前页面中打开百度的页面,感觉和_self是一样的
target="_top" 这个好像也是跟上面两个是一样的效果
target="_blank" 在新的浏览器页面中打开
-->
<a href="http://www.baidu.com" target="_blank">点我打开百度首页</a>
</body>
</html>
效果图
5、H标签
标题（Heading）是通过<h1>到<h6>标签进行定义的，<h1>定义最大的标题。<h6> 定义最小的标题
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
</body>
</html>
效果图
6、select标签
select标签是一个下拉列表
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--在option属性中加selected="selected" 表示默认选择该option标签-->
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option selected="selected" value="3">广州</option>
</select>
<!--在select标签中加size属性表示默认显示2个option,不表示选中-->
<select size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>
<!--在select标签中加multiple属性表示同时可以选择多个option,可按住ctrl多选,或者按住shift多选-->
<select size="2" multiple="multiple">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>
<!--optgroup表示组的概念,可以实现一个层级效果-->
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
</body>
</html>
效果图
7、input标签系列
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>input系列</h1>
<h2>文本框和密码框</h2>
username: <input type="text" />
<br/>
password: <input type="password" />
<br/>
<h2>单选框redio</h2>
请选择性别:<br/>
<!--通过使用name属性来对类型为radio的input标签进行约束,可以理解为相同name的radio标签是一个组,
可以使用属性checked="checked"设置默认勾选的单选框
radio标签只有一个能够被选中,value属性值用在使用form表单进行数据提交的时候,具体看form标签-->
男 <input type="radio" name="gender" value="man"/>
女 <input type="radio" name="gender" value="woman"/>
保密 <input type="radio" name="gender" value="no" checked="checked"/>
<h2>复选框checkbox</h2>
请选择兴趣爱好:<br/>
<!--通过使用name属性来对类型为checkbox的input标签进行约束,可以理解为相同name的checkbox标签是一个组,
可以使用属性checked="checked"设置默认勾选的复选框
checkbox标签可以同时选中多个,value属性值用在提交form表单的时候,具体看form标签-->
篮球 <input type="checkbox" name="hobbies" value="basketball" />
足球 <input type="checkbox" name="hobbies" value="football" checked="checked"/>
羽毛球 <input type="checkbox" name="hobbies" value="badminton" checked="checked"/>
<br/>
<!--上传文件需要from表单的配合并在form标签中进行特殊的设置，才可以进行上传文件，否则后台只能够获取到文件的名称
enctype="multipart/form-data" 在form标签中设置该属性才能够提交文件，例如： -->
<form action="xxx" method="post" enctype="multipart/form-data">
<h2>上传文件</h2>
<input type="file" />
</form>
<h2>按钮</h2>
<!--可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序-->
<input type="button" value="button"/>
<!--提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。-->
<input type="submit" value="submit"/>
<!--重置按钮。重置按钮会初始化当前input标签所在的form表单中的所有input系列标签的数据-->
<input type="reset" value="reset">
</body>
</html>
效果图如下
8、textarea标签 多行文本输入控件
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>textarea</h2>
<textarea></textarea>
<!--可以使用样式控制该文本框的宽度和高度-->
<textarea style="width:500px;height: 200px;"></textarea>
</body>
</html>
效果图
9、label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--把label标签中的for属性的值跟input标签中的id值绑定到一起了,通过点击label中的文字,就可以选中于该label标签绑定的标签,文本框就是将光标挪动至文本框中-->
<label for="man">男</label>
<input type="radio" name="sex" id="man" />
<br />
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" />
</form>
</body>
</html>
效果图
10、列表标签
列表分为无序列表、有序列表、层级列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--无需列表-->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<!--有序列表-->
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
<!--层级列表-->
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
</body>
</html>
效果图
11、table标签
table标签在html中定义表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>table</h2>
<!--broder指定表格的边框-->
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<br>
<br>
<table border="1">
<thead> <!-- <thead> 标签表示table标签的头部-->
<tr>
<!--合并行,colspan="3" 表示合并3行-->
<th colspan="3">1</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody> <!-- <tbody> 标签表示table标签的身体部分-->
<tr> <!-- <tr>标签表示行 -->
<td>1</td> <!-- <td>标签表示列 -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<!--合并列, rowspan="3" 表示合并3列-->
<td rowspan="3">1</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图
12、fieldset标签
个人感觉就是做出登录框的效果，看代码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- fieldset标签需要配合着legend标签来使用 -->
<fieldset>
<legend>登录</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
</body>
</html>
效果图
13、form标签
form表单主要用来做一些数据的提交,例如向百度提交一个搜索的关键词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
请输入要搜索的关键词: <input type="text" name="wd" />
<input type="submit" value="提交" />
</form>
</body>
</html>
提交前
提交后
14、div标签
div标签主要用来比较方便的进行网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:red; color:white">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
fdafd
</body>
</html>
效果图
web前端之 HTML标签详细介绍的更多相关文章
- web前端自动化测试/爬虫利器puppeteer介绍
web前端自动化测试/爬虫利器puppeteer介绍 Intro Chrome59(linux.macos). Chrome60(windows)之后,Chrome自带headless(无界面)模式很 ...
- Android manifest之manifest标签详细介绍
AndroidManifest详细介绍 本文主要对AndroidManifest.xml文件中各个标签进行说明.索引如下: 概要PART--01 manifest标签PART--02 安全机制和per ...
- web前端该怎么入门?web前端入门教程(非常详细)
初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! ...
- Laravel 模板引擎Blade中标签详细介绍
这篇文章主要介绍了Laravel模板引擎Blade中section的一些标签的区别介绍,需要的朋友可以来看看. Laravel 框架中的Blade模板引擎很好用,但是官方文档介绍的并不详细,我接下来将 ...
- Java Web前端到后台常用框架介绍
一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...
- 移动web前端之meta标签
最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UT ...
- Android manifest文件中的标签详细介绍
官方文档 概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如:--为Java应用程序指定一个独一无二的名字 ...
- WEB前端问题——img标签的onclick事件无法响应问题【转载】
一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...
- web前端----jQuery操作标签
样式操作 样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass() ...
随机推荐
- HDU 4907 Task schedule
对于询问q 假设q不存在直接输出q 否则输出后面第一个不存在的数 从2*10^5到1遍历一边ac #include<bits/stdc++.h> using namespace std; ...
- 软件project（五）——可行性研究
一.目的 用最小的代价高效率的确定问题是否可以解决. 不是去解决这个问题,而是确定问题是否值得去解决.进行可行性研究简化了系统分析和系统设计的过程. 二.任务 (1)进一步分析问题定义. (2)分析员 ...
- [Redux] Extracting Presentational Components -- AddTodo
The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { ...
- 如何判断Linux load的值是否过高
1.先使用top看下CPU占用高的进程,找出进程的进程ID(pid): 查看方法:top 2.根据进程ID(pid)查看是进程的那些线程占用CPU高. 查看方法:top -Hp pid 3.使用pst ...
- [原创]旧事重提：只配置参数实现OAuth2登录
其实这个组件写出来很长时间了,有几个月吧,一直在 MrHuo工作室 上放着,一直说要整理,太忙没时间. 另外,关于OAuth2的一些基础内容还请从网上找找资料,太多了,写的累赘. 废话不多说,先上图 ...
- asp.net mvc 删除栏目、栏目下又有子栏目的处理方式
- 2、 Spark Streaming方式从socket中获取数据进行简单单词统计
Spark 1.5.2 Spark Streaming 学习笔记和编程练习 Overview 概述 Spark Streaming is an extension of the core Spark ...
- windows新的数据类型
1.简单重定义的 如LPCSTR只字符串,只是名字不同 2.句柄类型 H开头的句柄 3.结构体类型 如对话框 4.重新更名一方面为了32位->64位升级时带来的麻烦 typedef unsign ...
- 在shell中运行以不同方式运行脚本
在shell当中,可以有3中方式运行脚本: 1 . ./script_name 或者source ./script_name 2 直接./script_name 3 ./script_name &am ...
- 使用 PHP 读取文本(TXT)文件 并分页显示
<?php //----------------you should save this file as m.php---------------- session_start(); if (e ...