1.组织标签常用列表
<p>
定义一个段落。
<hr>
代表章节、文章或其他长内容中段落之间的分隔符。
<ol>
定义一个有序列表。
<ul>
定义一个无序列表。(内部标签必须是li)
<li>
定义列表中的一个列表项。(父元素必须是ul)
<dl>
定义一个定义列表(内部标签必须是dt)。
<dt>
代表一个由下一个<dd>
定义的术语。(父元素必须是dl)
<dd>
代表出现在它之前术语的定义。
<div>
代表一个通用的容器,没有特殊含义。
2.文字形式标签常用列表
<em>
代表强调文字。
<strong>
代表特别重要文字。
<kbd>
代表用户输入,一般从键盘输出,但也可以代表其他输入,如语音输入。
<span>
代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。
<br>
代表换行。
3.嵌入内容常用标签列表
<img>
代表一张图片。
<iframe>
代表一个内联的框架。
<video>
代表一段视频及其视频文件和字幕,并提供了播放视频的用户界面。
<audio>
代表一段声音,或音频流。
<canvas>
代表位图区域,可以通过脚本在它上面实时呈现图形,如图表、游戏绘图等。
4.表格常用标签列表
<table>
定义多维数据。(可以加css样式设置边框)
<caption>
代表表格的标题。
<colgroup>
代表表格中一组单列或多列。
<col>
代表表格中的列。
<tbody>
代表表格中一块具体数据(表格主体)。
<thead>
代表表格中一块列标签(表头)。
<tfoot>
代表表格中一块列摘要(表尾)。
<tr>
代表表格中的行。(内部嵌套<td>
和<th>
标签)
<td>
代表表格中的单元格。
<th>
代表表格中的头部单元格。
5表单常用标签列表
<form>
代表一个表单,由控件组成。
<label>
代表表单控件的标题。
<input>
代表允许用户编辑数据的数据区(文本框、单选框、复选框等)。
<button>
代表按钮。
<select>
代表下拉框。
<textarea>
代表多行文本框。
6.常用的块级元素
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
7常用的行内元素
<a>,<strong>,<em>,<span>
8关于html标签的详解
1.label可以把form表单包进去,点击文字可以选中输入框或者复选框。
2.label是需要配合form使用的。如
<form action="users" method="post" >
<label for="xxx"></label>
<input type="text" name="xxx" id="xxx">
</form>
input里面的id必须跟lable里面的for名称是一样的。
3button标签如果没有写type属性的话,他会自动升级为提交按钮,也就是submit按钮,如果input type属性是button,他也就是一个普通的按钮,但是如果input type 属性是submit ,那么他也是一个提交按钮。
4.checkbox是多选框,radio是单选框。两个单选框如果需要关联的话,需要使用相同的name属性,只有这样两个单选框只有一个才能被选中。
5.在提交checkbox表单的时候 ,也就是使用get请求时,查询参数里面会显示你提交的各项信息,必须要使用value属性。
6.select下拉列表:
<select name="group" multiple>
<option value="1"></option>
<option value="2"></option>
<option value="3" disabled></option>
<option value="4" selected></option>
</select>
如果给select里面的option标签加上disabled默认这个下拉是禁选的,加上selected这个下拉列表里默认的就是当前的选项。如果在select属性里面添加multiple属性,当前下拉列表是可以进入多选状态的。
7.table属性
table标签里面包含<thead></thead>、<tbody></tbody>、<tfoot></tfoot>。这三个属性里面分别包含了<tr></tr>,然后<tr></tr>属性里面可以写<th></th>跟<td></td>,需要注意的是<th></th>是表头,<td></td>是内容,两者在这里有着区别。
table里面包含一个名叫<colgroup></colgroup>的标签,在这个标签里面有<col></col>标签。col标签可以控制每一列的宽度,还可以给每一个col添加bgcolor属性,这个属性可以咯每一个单元格加上颜色的样式,但是并不建议这么做,因为给这些单元格加上css属性可以做到更好的控制,了解一下就行。还有给table标签加上border属性的时候,会默认给里面的所有子标签加上一个边框,但是使用css属性border-collapses:collapse;可以使table里面的所有边框都会合并成一个边框。
8.当a标签配合iframe标签配合使用时:
<iframe name=xxx src="#" frameboder="0"></iframe>
<a target = xxx href="百度一下,你就知道"></a>
<a traget = xxx href="www.xiedaimala.com"></a>
上一段的代码意思是我的a标签要在name为xxx的窗口里面打开。iframe标签默认有一个border,所以需要设置frameborder=0。
9.a标签target属性有四种,分别是-blank,-self,parent,还有top。
<a target = _blank href="百度一下,你就知道"></a>
<a traget = _self href="www.xiedaimala.com"></a>
<a target = _parent href="百度一下,你就知道"></a>
<a traget = _top href="www.xiedaimala.com"></a>
blank:新开一个窗口。
self:在自身的窗口打开一个页面。
parent:再上一层窗口打开页面,这个需要配合iframe标签使用。
top:在顶级窗口使用,这个需要配合iframe标签使用。
a标签同时也提供下载,不过需要加上download属性,加上这个属性是告诉浏览器这个按钮是提供下载的,而非展示。是否下载取决于响应里面的content-type属性。也就是
content-type : application/octet-stream。
当浏览器响应content-type属性不是application/octet-stream,则必须加上download属性才能提供下载。
a标签的href属性也可以写查询参数、锚点、相对路径、带有http或者https协议的跳转、伪协议。锚点是不发起get请求的,因为锚点是页面内发起的跳转。其他的都是需要发请求的。不过锚点跳转需要刷新页面。也可以写空。
href可以接:
1. //qq.com
2. #xxx ?name=qqq ./xxx.html
3. javascript:alert(1); javascript:;
<a traget = _top href="//qq.com"></a>:
无协议绝对地址。击之后访问的页面受当前页面的协议控制,如果当前页面是file协议,则点击当前按钮也是访问本地文件。
<a traget = _top href= javascript:;></a>:伪协议。也就是点击a标签什么事情也不做。
如果你打开的是<a traget = _top href= 腾讯首页></a>:点击当前a标签时,访问的绝对不会是qq官网,因为他没有带具体的http或者https协议。
10.<form action="users" method="post" >:
method属性可以是get或者post。但是html里面只有form标签提供上传内容。form标签如果没有提交按钮时不可以提交的所以使用form标签涉及提交时必须要加上提交按钮。
当使用get方法提交时,他会默认把参数放在查询参数里面。post会把参数默认放在请求的第四部分里面。我么可以给url直接加参数让post也可以有查询参数,但是我们不可以通过任何方法让get请求有第四部分。
form标签也可以使用target,跟a标签的target属性基本一样。