html头部的标签有哪些？

作为一个前端，经常写html文档，但是却很少去在意头部的标签有哪些，也很少在意每个标签的作用，下面我们来详细了解下。

头部的标签，也就是写在<head><head/>里。通常会有6个标签：　

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>

<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">

body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head> 
<body> 文档内容...... </body> 
</html>

一、<title>元素。

1.title 标签定义了文档的标题，在HTML文档中是必须的。它会展示在浏览器的工具栏上。

2.如果要展示一个图标，可以再加一个<link>标签，<link>标签的 rel属性为“icon”,后面的

href跟上图片的地址。

<link rel="icon" href="图片url">

二、<base>元素。

base标签描述了基本的链接地址，该标签作为HTML文档中所有的链接的默认链接

　<head>
　　<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> 
  </head> 　　
  <body> 　
   　<img src="banner7.jpg"/>
  </body>

上面的img标签的src链接的地址就是base里的地址加上img里的地址。

三、<link>元素。

link标签定义了文档与外部资源之间的关系，它通常用于链接到样式表。

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

四、<style>元素。

style标签定义了HTML文档的样式，这个我们经常会使用到，都不会陌生。

五、<meta>元素。

meta标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。它常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

// 编码格式定义
<meta charset="utf-8"> 
// 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 为网页定义描述内容:
<meta name="description" content="头部标签 & 使用">
// 定义网页作者:
<meta name="author" content="Runoob">
// 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

// 视图层的参数定义
<meta
name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
 //    content属性值 :
  //    width:可视区域的宽度，值可为数字或关键词device-width
  //    height:同width
  //    intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
  //   maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
  //   maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
  //   user-scalable:是否可对页面进行缩放，no 禁止缩放

六、<script>元素。

script标签用于加载脚本文件，比如说javascript,可以直接书写js,也能用于链接外部的js文件。

<script>
    document.write("Hello World!")
</script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

. HTML 初识

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义：

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

标题标签       	<hx></hx>     
段落标签     		<p></p>
水平线标签			<hr />
 换行标签       <br/>
 无语义标签    <div></div>   和 <span></span>             注:这两个标签在后期经常使用

文本格式化标签

<b></b>和<strong></strong>		 文字加粗
<i></i>和<em></em>	               	斜体
<s></s>和<del></del>	            	加删除线
<u></u>和<ins></ins>		            加下划线

图片标签

<img src="图像URL" />	src  图像路径	图像标签	<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

属性:

alt 文本,图像不显示时显示文字<img src="" alt="">

title 文本,鼠标悬停时显示内容<img src="cz.jpg" title="文本" />

width 图像宽度<img src="cz.jpg" width="300" height="300" />

height 图像高度<img src="cz.jpg" width="300" height="300" />

border 设置图像边框宽度<img src="cz.jpg" border="3" />

链接标签

<a href="#" target="目标窗口的弹出方式">文本或图像</a>

属性：

href (链接地址)必须写	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能			1. 外部链接需要添加 http:// www.baidu.com 2. 内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a > 3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。 4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
target (默认当前窗口打开,可新建窗口打开)	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

锚点标签

id=""

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

使用相应的id名标注跳转目标的位置。 (找目标)

base标签

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

预格式化标签

标签可定义预格式化的文本。

所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。

表格标签

<table> 定义表格标签 <tr> 定义表格行 <td></td> 表格数据 </tr> </table>	border	设置表格边框(默认border="0"无边框)	<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
	cellspacing	设置单元格与单元格之间的空白间距 (默认2像素)
	cellpadding	设置单元格内容与单元格边框之间的空白间距 (默认1像素)
	width	设置表格的宽度
	height	设置表格的高度
	align	设置表格在网页中的水平对齐方式 (三个属性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。	<caption>个人信息表</caption>
	rowspan="合并单元格的个数"	跨行合并	合并的顺序我们按照先上后下先左后右的顺序
	colspan="合并单元格的个数"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格标题标签
	<tr></tr><td></td>	标签，他就像一个容器，可以容纳所有的元素	<tr><td></td></tr>
	<th><td>	一般表头单元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！	以上标签都是放到table标签中。	更好的给表格划分结构
	<tbody> 用于定义表格的主体。放数据本体。	以上标签都是放到table标签中。
	<tfoot>放表格的脚注之类。	以上标签都是放到table标签中。

列表标签

列表(ul里面只能包含li ,li里面可以包含标签)	<ul><li></li></ul>	无序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本与ul 一致。但是实际中比无序列表用的少很多。	里面只能包含li 有顺序，使用情况较少
	<dl> <dt>名词1</dt> <dd>名词1解释1</dd> </dl>	自定义列表		里面有2个兄弟， dt 和 dd

input控件

<input type="属性值" value="你好">	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文本域
name	由用户自定义	控件的名称	用户名:<input type="text" name=“username” />
value	由用户自定义	input控件中的默认问本值	用户名:<input type="text" name="username" value="请输入用户名">
size	正整数	input控件在页面中的显示宽度
checked 默认被选中	checked	定义选择控件默认被选中的项	<input type="radio" name="sex" value="女" />女
maxlength	正整数	控件允许输入的最多字符数

<label> </label>

<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>	第一种用法就是用label直接包括input表单。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面
<label for="sex">男</label> <input type="radio" name="sex" id="sex">	第二种用法 for 属性规定 label 与哪个表单元素绑定。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

文本域

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

select下拉列表

在option 中定义selected =" selected "时，当前项即为默认选中项。

form表单域

<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>	action 属性值:url地址	用于指定接收并处理表单数据的服务器程序的url地址。
	method 属性值:get/post	用于设置表单数据的提交方式，其取值为get或post。
	name 属性值:名称	用于指定表单的名称，以区分同一个页面中的多个表单。

以上标签基本包含了前端开发所需常用标签.来自本人,黑马程序员.传智播客学习笔记.

以下是个人笔记整理,需要请关注私信我.

希望本人笔记能对各位有所帮助.

前端不难,难的在于东西多和杂.每天努力学习一点点,不放弃.

、常用html标签

4.1 常用的 html 标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签：-->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
   <img src="images/pic.jpg" alt="图片">
   <a href="http://www.baidu.com">百度网</a>
</div>

提示:

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签2.2 单标签是一个标签组成，没有标签内容，比如: img标签

4.2 小结

学习 html 语言就是学习标签的用法，常用的标签有20多个。
编写 html 标签建议使用小写
根据书写形式，html 标签分为双标签和单标签
单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

五、资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

5.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

5.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

5.3 小结

相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
相对路径是从当前操作的 html 文档所在目录算起的路径
绝对路径是从根目录算起的路径

六、列表标签

6.1 列表标签的种类

无序列表标签(ul标签)
有序列表标签(ol标签)

6.2 无序列表

<!-- ul标签定义无序列表 -->
<ul>
   <!-- li标签定义列表项目 -->
   <li>列表标题一</li>
   <li>列表标题二</li>
   <li>列表标题三</li>
</ul>

6.3 有序列表

<!-- ol标签定义有序列表 -->
<ol>
   <!-- li标签定义列表项目 -->
   <li><a href="#">列表标题一</a></li>
   <li><a href="#">列表标题二</a></li>
   <li><a href="#">列表标题三</a></li>
</ol>

6.4 小结

列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)
列表项目对顺序有要求的时候使用ol标签
列表项目对顺序无要求的时候使用ul标签

七、表格标签

7.1 表格的结构

表格是由行和列组成，好比一个excel文件

7.2 表格标签

<table>标签：表示一个表格
     <tr>标签：表示表格中的一行
         <td>标签：表示表格中的列
         <th>标签：表示表格中的表头

示例代码:

<table>
   <tr>
       <th>姓名</th>
       <th>年龄</th>
   </tr>
   <tr>
       <td>张三</td>
       <td>18</td>
   </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

在线咨询

上一篇：一个基本的HTML5模板「建议收藏」
下一篇：使用Jinja2模板引擎生成html报告

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html头部的标签有哪些？

. HTML 初识

、常用html标签

4.1 常用的 html 标签

4.2 小结

五、资源路径

5.1 相对路径

5.2 绝对路径

5.3 小结

六、列表标签

6.1 列表标签的种类

6.2 无序列表

6.3 有序列表

6.4 小结

七、表格标签

7.1 表格的结构

7.2 表格标签

您的项目需求