您的位置：首页 > Web前端 > HTML

HTML常用标签

2015-10-02 18:08 525 查看

打开w3school,很多人会被里面的各种标签所迷惑，然而很多标签在实际工作中使用的频率是很低的，需要的时候可以再查。为了不让初学者迷茫，今天我就来谈谈HTML平时常用的标签。

1.文件标记<html>，<head>,<body>,<title>

<html>让浏览器知道这是HTML文件；
<head>提供文件整体信息，如字体编码、样式链接、js链接（可放其他位置）
<title>定义文件标题，显示于浏览器顶端，放于<head>内
<body>网页主体，放网页显示的内容

2.常用块级元素<div>,<p>,<ul>,<ol>,<li>,<table>,<h1>~<h6>,<form>
块元素又名块级元素(block
element)，（display：block；）和其对应的是内联元素(inline
element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
特点：

1、总是在新行上开始；

2、高度，行高以及外边距和内边距都可控制；

3、宽度缺省是它的容器的100%，除非设定一个宽度。

4、它可以容纳内联元素和其他块元素

<div>,分区标签。
可以说这是如今网页前端用的最多的标签之一，为了模块化的管理前端代码，在工作中我们经常将某一区域用div包住，并用id或class选择器来区分每个区域。
比如我们在写网页头部时会用<div class="header"></div>来区分区域;写导航时，会用<div class="nav"></div>;写页脚时，会用<div class="footer"><div>;于是最后HTML5增加了一些标签，使代码可读性更强，如<header>,<nav>,<footer>,<article>...，但本质上是与div一样的块级标签，并没有什么特殊视觉效果。
<p>，段落标签
<p>主要用来放大段的文字，虽然<div>也可以用来放文字，但这样写是非常不美观的而且不规范的，不符合<div>这个标签的定义。所以你有大段文字需要放，就用<p>标签
<ul>,<ol>,<li>，列表标签
<ul>,<ol>前者是无序标签，后者是有序标签，其实区别不大，因为我们实际工作中都会把<li>的list-style设置成none。<ul>,<ol>需要配合<li>来进行使用。
一般用来做导航栏、分页栏、推荐文章栏、头像栏，那种有很多相同元素的区域。想水平显示的话可以用float或display：inline-block；来控制。
<table>,表格标签
很长一段时间，table会被用来布局，但弊端比较大。如今，table大多被用来显示表格信息，如excel表内的信息，需配合<th>,<td>,<tr>等进行使用。
<h1>~<h6>标题标签
用来放标题，浏览器默认会加粗和放大里面的字体。用<h1>~<h6>放标题也是规范编程的一步。
<form>,表单标签
表单和表格是不一样的，表格是excel表，而表单是登录框那样的，可以像服务器上传信息。一般里面会包含各种<input>标签，checkbox，textarea，而最后用一个<input type="submit">来完成提交
3.常用内联元素<a>,,<textarea>,<span>,<i>，<label>，<em>，<select>,<option>,
内联元素的属性为display:inline；
特点：

1、和其他元素都在一行上；

2、高度、行高和顶以及底边距都不可改变；

3、宽度就是它的文字或图片的宽度，不可改变。

<a>链接标签

4.常用内联块级元素<input>，<img>，<button>

特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航