简单介绍前端的标签知识

标签： 标签有很多种并且每一种都有一项独特的功能可用于一些特定的场所。

1. 标题标签h? 例如<h1></h1>自带加粗字体
2. p段落标签，每段之间有一定的默认距离
3. em斜体，用在文字上可以使字体倾斜
4. strong加粗
5. del删除线
6. ins下划线
7. 还有一些对应着
8. Img图片标签，可以引用图片，属性：src图片路径可以是绝对路径、相对路径、网路路径；title图片标题；alt图片加载错误时会提示的内容；width图片宽度；height图片高度
9. audio 音频标签：用来播放音频
10. video 视频标签：用来播放视频；注意：不同浏览器兼容格式不一样，也就是说可能播放不了
11. a 标签：用于超链接：就是点一下可以跳转
12. 列表标签：分为三种

无序列表：自带实心黑圆圈

<ul>

 <li></li>

 <li></li>

.....

</ul>

有序列表：有顺序的可以使用type决定排序规律

<ol>

<li></li>

<li></li>

.....

</ol>

自定义列表

<dl>

   <!-- dt对dd总结说明 -->   

   <dt>衣服</dt>

   <dd>衬衣 马甲 西服</dd>

   <dd>毛线衣 皮夹克</dd>

   <dt>裤子</dt>

   <dd>牛仔裤 七分裤 西裤</dd>

   <dd>短裤 内裤</dd>

  </dl>

13.表单

作用：以什么样的方式提交数据给服务器

（1）method

GET:数据随着URL一起提交

POST：数据封装到reuqest请求体对象提交

（2）action:指定数据提交的服务器地址

  <input name="" value=""  type=""/>

readonly:是否只读

disabled:是否禁用

placeholder:输入框文本提示

pattern:输入内容正则表达式

type:输入控件的类型,默认为text(文本框)

text:文本框

password：密码框

submit：提交按钮

reset:重置按钮

radio:单选按钮

file:文件域

checkbox:多选框

button:普通按钮

image:图片按钮[提交表单的作用]

email：邮箱

url:url地址

number:数字

range:滑块

Date pickers (date, month, week, time, datetime, datetime-local) ：日期选择器

color:颜色

name:数据提交的key，也是控件的名称：就是提交的类名

value:控件值 可赋初始值但是和实际输入一样

maxlength：最大输入长度

minlength：最小输入长度

size：输入控件的长度，默认是20

checked：是否选中

required：是否必须

placeholder：文本提示：和上面不同在输入时会消失，没有字时会重新出现

pattern：正则表达式，此输入文本的格式。

max:最大值

min:最小值

step:步长

14.下拉菜单

生日：<select name="birthday" id="">

<option value="1991">1991</option>

<option value="1999">1999</option>

<option value="2004">2004</option>

<option value="2008">2008</option>

<option value="2012">2012</option>

</select>年

 

15.文本域：可输入字，也可以设置默认值

<textarea cols="20" rows="10">请输入您的自我介绍</textarea>

cols:表示文本框的宽度

rows:表示文本框的高度

16.*表格

  table

   1.border:边框

   2.cellspacing:单元格外边距

   3.cellpadding:单元格内边距

   4.align:水平对齐方式[*.left *.right *.center]

   5.bgcolor:表格背景

   6.rowspan:行合并

   7.colspan:列合并

   表格结构标签

   1.thead:表头

   2.tbody:表体

   3.tfoot:表脚