那些你可能忽略的标签或标签属性👍

191 阅读5分钟
1.超链接标签
<a href=""></a>
<a href="" target="_blank"></a>     //再新开一个窗口,窗口的默认打开方式
<a href="" target="_top" ></a>      //顶层窗口,回到顶部
<a href="" target="_self" ></a>     //当前网页打开原网页被覆盖
<a href="" target="_parent"></a>    //这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
----------------
<a href="#top">
    加上id后可以指定跳转到本页面的某个位置
</a>
<p id="top">
    这是要跳转到的位置
</p>
<a href="某个页面 #id">
    跳转到某个页面的某个位置
</a>
----------------
<a href="#">回到顶部</a>
<font>这个标签已经过时,里面可以放文字和内容,具有改变文字颜色和字号大小的属性</font>
2.图像标签
<img src="图片的路径" title="图片的标题" alt="图片加载失败显示的内容" width="图片的宽度" height="图片的高度">
<img src=../>    // ../代表退回上一级目录
// 注意:如果设置了完整的高和宽,再没有决定测量好尺寸的情况下,图片会变形,解决方案:只设置一边像素,另一边会自动的等比例缩小。
<!--图片根据需求设置,不要大图缩小显示。-->
3.表格标签
<table>
    <th></th> //一般用作表头(加粗居中显示)
    ---------------
    <tr>  //行
    <td>内容</td> //列
    </tr>
</table>

2.表格标签具有的属性:

  • border:设置表格的边框。(已过期)
  • align:center:让整个表格在屏幕居中显示。(已过期)
  • width:设置表格的宽度。
  • height:设置表格的高度。
  • cellspacing:控制单元格之间的间距。
  • cellpadding:控制文字和单元格边框之间的间距。
  • bgcolor:设置表格背景颜色。(已过期)

可以给tr设置的属性:

  • bgcolor:设置单元格的背景颜色。
  • align="center":表格居中。
  • height:设置行高。

可以给td设置的属性:

  • width:宽度(影响整列的宽度)。
  • height:高度(影响整行的高度)。
  • algin:设置当前单元格的内容对齐方式。
  • bgcolor:设置单元格背景的颜色。

thead:用来对表格里面的内容分块,表示表头的意思。

tbody:用来对表格里面的内容分块,表示内容的意思。

tfoot: 用来对表格里面的内容分块,表示尾部的意思。

rowspan:合行,垂直方向的合并。

colspan:合列,水平方向的合并。

4.列表标签

在HTML中提供了有序列表和无序列表标签来组织文本内容,一般用作与导航栏。

//无序列表
<ul>
    <li>1</li>
    <li>2</li>
</ul>
//有序列表
<ol>
    <li>1</li>
    <li>2</li>
</ol>
//定义列表
<dl>
    <dt></dt>
    <dd></dd>
</dl>
//dl:一条信息,一条记录
//dt:内容,可以图片和文字
//dd:对内容的描述
//作用:给到一些特殊浏览器的识别(盲人浏览器/阅读浏览器),更好的让搜索引擎进行识别
---------------------------
列表特点:
//有序和无序都会有一定的默认间距:上下16px,左40px
//每个li标签都是独占一行的(默认)
//可以在每个li标签内进行嵌套
5.表单标签

网页一般需要提供一些标签来获取用户的输入信息,例如登录功能以及注册功能。

1.表单区域的定义

<form action="user" method="get/post">
    // action代表信息发送的目的地,服务器地址
    //method代表发送的形式(post隐式发送;get显示发送)
    //get代表获取资源,提交数据,数据会放在url地址里面,post提交隐藏数据
</form>

2.表单组件的定义

专门用于获取用户数据的组件就称为表单组件。

//文本框
​
<label for="">用户名:</label><input type="text">
​
//密码框
​
<label for="">密码:</label><input type="password">
​
//单选框
​
<label for="">男:</label><input type="radio" value="nan" name="gender">
<label for="">女:</label><input type="radio" value="nv" name="gender">
​
//复选框
​
<input type="checkbox" value="" ><label for="">游戏</label>
<input type="checkbox" value=""><label for="">阅读</label>
​
//下拉框
<select name="city" multiple>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="shenzheng">深圳</option>
</select>
​
//按钮的定义方式
​
<input  type="button" value="">//普通按钮1
<button type="button">普通按钮2</button>
<button type="submit">提交2</button>
<button type="resrt">重置2</button>
​
//登录,重置的按钮
​
<input type="submit" value="">//提交1
<input type="reset"  value="重置1">
---------------------------------
//点击游戏文字就会选中复选框
<input type="checkbox" value="" id="hobby"><label for="hobby">游戏</label>
//文本框和密码框开发过程中有name value属性
--------------------------

3.文本框和密码框可以设置的属性

  • maxlength:限制文本最大长度(值)。
  • placeholder:设置文本框中的提示信息,一般用于提示用户输入的方式。
  • readonly:设置文本是否可读。(不提交服务器数据)。
  • vlaue:值。
  • disabled:禁用,不仅无法操作数据,数据也无法获取。

4.单选框可以设置的属性值

  • name:名字(设name属性为相同的值,可以实现单选框多选一的功能)。
  • cheked:默认选中。

5.下拉框

<select>
    <option>111</option>
    <option>222</option>
</select>

下拉框可以设置的属性

size:控制显示的个数。

multiple:按ctrl多选。

6.文本域

<textarea name="" cols="" rows=""></textarea> //只能设置行数rows,列数显示的字数cols

7.文件上传和日历标签和隐藏标签

<input type="hidden">//特殊表单标签,隐藏标签和文件上传组合
<input type="file" name=""> //文件上传,获取的是文件的绝对路径。
-----------------------------
<input type="date"> //日历标签
6.其他标签
<span>一般用于提示信息,行级元素</span>
<label>与span标签一样</label>
<p>段落标签,块级元素</p>
<i>斜体标签</i>
<em>斜体标签</em>
<br/>换行标签
<hr/>分割标签
<strong>粗体标签</strong>
<b>粗体标签</b>
<u>下划线标签</u>
<del>中划线标签</del>
<small>小号字体标签</small>
<div>布局标签,无样式,块级元素</div>
<pre>
格式化标签,空格,换行均可保留
</pre>
空格符&nbsp
小于号&lt
大于号&gt
<audio>音频标签,不添加controls无法显示控件</audio>
<video>视频标签</video>
----------------------------------------------
//iframe是一个内联框架,可以在一个网页中嵌套另一个网页。
<iframe name="name" src="网页地址" frameborder="0" width="100%" height="500px">  //frameborder框架边框 1:有边框(默认)0:无边框
//说明:可以在此标签src属性放置加载的网页路径,但是使用的不多,原因为有的网站限制使用这框架。
 <a href="" target="_parent"></a> 
</iframe>
----------------------------------------------
// 跑马灯
<marquee behavior="" direction="">默认:文字在文本上方从右到左移动,循环显示</marquee>
<fieldset>  //框边
    <legend>
        边框的标题
    </legend>
   边框里的文字
</fieldset>