Skip to content

html-02 a标签,表格,表单

一、a标签

  1. a标签表示链接,是内联标签(行内标签)。

  2. 默认有下划线,未访问的时候文字颜色是蓝色,访问以后是蓝紫色

  3. href属性里面放具体路径,可以放绝对路径,可以放相对路径。

  4. target=“_blank”在新建标签中打开页面。

  5. <base target="_blank" /> ba se标签,是一个单标签,直接在head头部填写,当前html文件所有a标签新窗口打开。

  6. target="_self" 在当前标签中打开页面。

  7. 跳转到当前页面的指定位置:在指定位置设置id名,href属性里面设置#id名。

  8. 跳转到另一个页面的指定位置:在另一个页面指定位置设置id名,当前页面href设置另一个页面的路径#id名。

  9. 下载文件:在href属性直接写入文件路径;

二、表格

  1. table标签表示表格,tr标签表示行,td标签表示单元格,

th标签表示单元格标题,th标签默认居中加粗。

  1. 设置表格的边框,在table标签的开始标签里面设置border="1";(不写的话表格无边框)

在css里给每个单元格设置边框

border:1px solid black; 1边框宽度,实线的,黑色边框

  1. 单元格与单元格之间的距离:在table的开始标签里设置cellspacing="0";

单元格的边框与内容之间的距离:在table开始标签设置cellpadding="0";

  1. 给表格设置宽高:在css里面给table设置width和height。

表格边框合并一条线:css里面加:border-collapse:collapse;

  1. 改变其中一个单元格的宽度,可以改变一列的宽度。合并列:colspan="2";

改变其中一个单元格的高度,可以改变一行的高度。合并行:rowspan="3";

  1. 表格的标题用caption,是table标签的子元素,写在table下面。

  2. thead标签,表格的头部,tbody标签,表格的主体,tfoot标签,表格的脚注。

加上可以让表格的语义化更强。

三、表单

表单的目的是收集用户信息。

表单一般由三部分组成:

  1. 表单控件(表单元素),

  2. 提示信息,

  3. 表单域(form),

  4. form标签定义表单

<form action="" method="POST/GET">

action="",表单提交到什么位置,里面写相对路径和绝对路径。

method="POST/GET",表单提交方式,

GET相对不安全,有长度限制,POST相对安全,长度不受限制。

  1. input标签,内联块标签(行内块标签)。
属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮(启动js程序)
submit提交按钮
reset重置按钮
image图像形式提交按钮
file上传文件
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本值
size正整数input控件在页面中显示的宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入最多字符数
  1. label标签:label标签为input元素定义标注。

    作用:点击文字也能选中对应的表单。

    绑定方法:for属性对应表单id。

html
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

简单的写法: //直接label标签包裹input标签,也能选中文字选择对应的选框。

html
<label>
    用户名:<input type="text" name="sex" value="male"> 
</label>
  1. value属性,默认值,改变名字。

  2. placeholder,属性 输入框提示内容(h5新增属性);用在input属性里面。

    需要修改placeholder的颜色,可以用::双冒号选中placeholder;

  3. checked,属性,用在单选框和复选框里,默认选中值,

    checked="checked" 成对直接写一个单词

  4. readonly,属性,只读,用户不可以编辑,用于文本框,可以提交数据

    disabled ,属性,禁用,用户不可以编辑,用于文本框,也不可以提交数据,默认背景灰色。

  5. select标签和option标签配合使用。select是父元素,option是子元素。

    下拉框默认选中,selected,,,size="" 下拉框默认显示几项

    增加:hidden 隐藏表单,在提交到后台时,也能够提交,

  6. textarea标签(不加在input里,是单独的标签),文本域。是内联块标签(行内标签),可以输入多行文字。

    想要给文本域设置宽高,在css中设置,

    默认用户可以自行缩放,禁止缩放在css中设置resize:none;

    <textarea name="" id=""></textarea>

    textarea痛点:不能自适应高度,如果需要自适应高度可以创建一个div标签,并设置contenteditable属性;

注意事项:

使用form表单时必须填写form标签,action和method也填写,当填写了之后输入栏就有值了,text文本框时需要输入提交name名字,否则无法提交数据;

使用小方法:

一般表单用dl、dt、dd用来布局,

dt表示项目,dd表示输入框

面试题

● 如何合并表格单元格?

● thead、tbody、tfoot有什么作用?

● 常见表单元素有哪些?

Released under the MIT License.