html基础知识2

网页元素练习

点击查看作业

笔记

1.链接

作用	代码
跳转网页	<a href="地址"></a>
描点	<a href="id"></a>
下载文件	<a href="文件名"></a>
拨打电话	<a href="tel:136*******"></a>
发送邮件	<a hrref=”mailto:123456@qq.com”

2.列表

名称	代码	备注
无序列表	ul,li
有序列表	ol,li	可以更改顺序，strat=”4”
自定义列表	dl,dt,dd	自定义顺序

3.表格

使用<table>标签，通常有表名，表头，表体，表尾。
-表名通常用<caption>单独写出来
-表头用<thred>表示，通常会加粗，居中
-表体用<tbody>表示，可以把内容分段，更好看
-表尾用<tfoot>表示，可用可不用

4.表单

使用<form>标签表示，表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等

<input>元素可以说是表单中最终的表单元素，它有不同的类型，根据不同的type属性调整

类型	描述
text	常规文本输入
radio	单选按钮输入
password	密码输入
checkbox	复选框

text常用属性

• 使用label for设置，点击名称时，焦点落到文本框里
• 输入提示，使用placeholder
• 必填选项，使用required="required"
• 最长字符，使用maxlength="12"
  ```
  <label for="username">用户名:</label>

        <input
          type="text"
          id="username"
          maxlength="12"
          placeholder="不少于6位"
          required
          autofocus
        />

```

radio单选框属性

• 默认选项，checked
• 点击名称，label for=

checked复选框属性

• 默认选项，checked
• 点击名称，label for=
• 尽量用数组存放

  <section>
  <label for="game">兴趣</label>
  <div class="box">
  <input type="checkbox" name="hobby[]" id="game" />
  <label for="">游戏</label>
  <input type="checkbox" name="hobby[]" id="travel" /> <label for="">旅游</label>
  <input type="checkbox" name="hobby[]" id="programme" checked/>
  <label for="">编程</label>
  </div>
  </section>

总结

总的来说它们都有相同之处，text和password，同样是在文本框中输入文本，但password能掩藏，这一点非常好。