ＨＴＭＬ重点标签

L_Itself
231 阅读3分钟

a标签的用法

属性

1、href

a链接的
地址
取值：
1、网址:

　a.www.baidu.com

　b.www.baidu.com

　c.//www.baidu.com (首选)
2、路径：

　a.绝对路径：/a/b/c

　b.相对路径：index.html和./index.html
3、伪协议

　a.javascript:代码;【需要写冒号和分号】

i.应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：
ii.<a href="javascript:0;"></a>
iii.这就相当于执行一段没有意义的js代码

　b.mailto:邮箱

  i.<a href="mailto:123@qq.com"></a>

　c.tel:手机号

  i.<a href="tel123456789"></a>

2、target

　a.决定是在本页面还是在新页面打开链接

　b.取值:

　　i.系统内置的名字:

    1.a_blank打开新页面
    2.a_self在当前页面打开
    3.a_top顶部页面打开
    4.a_parent在父级页面打开，3和4适合用于有iframe内嵌窗口的情况

a标签的作用

跳转到外部页面 跳转到内部锚点 跳转到邮箱或电话

table标签

完整的table标签包含的元素有：

thead

  • tr table row 一行
  • th table head表头

tbody

  • tr table row
  • td table data数据

tfoot

  • <tr><td></td></tr>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>

效果如下图

image.png

两个表头怎么实现？

image.png 如图所示，这里有两个表头，分别是小红小明小颖这一行和 数学语文英语这一列

表头都用<th></th>

数据都用<td></td>

        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小强</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>91</td>
                <td>86</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>

table的样式

table-layout:

  • table-layout: auto; auto表示根据内容来计算宽度
  • table-layout: fixed; fixed表示定宽，尽可能地让宽度平均

border-collapse 和 border-spacing用来调整表格Border的间隔

一般会设置为：

  table {
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }

设置前：

设置后：

如果table-layout是fixed, 每一栏会是等宽，而如果是auto, 内容多的那一列会更宽一些

img标签

作用：

发出GET请求，展示图片

属性

  1. src: 图片地址
  2. alt: 如果图裂了，无法加载，会显示这个alt属性的文字作为备用
  3. width 如果只写宽度，高度会自适应
  4. height 如果只写高度，宽度会自适应

一个合格的前端不能让图变形！所以就只写宽度或者高度！

事件

onload 加载成功

onerror 加载失败

响应式

关键就是“max-width: 100% ;”

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  img {
      max-width: 100%;
  }

这样图片就可以自适应不同的屏幕大小

form标签

作用：

发get或者post请求，刷新页面

属性

action: 往哪里发请求

method: Get 或者 POST 控制用哪种方式请求

autocomplete 自动填充，值可以取"off"或者"on"

  • off：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
  • on：浏览器能够根据用户之前在表单里输入的值自动补全, 会给出填这个表单的提示

target: 在当前页面提交，还是新开一个页面提交

Input的submit和button的submit有什么区别？

Input标签里不能再有其他的标签

button标签里可以有其他的标签

 <form action="/xxx" method="GET" autocomplete="on">
        <input type="text" name="username" id="">
        <input type="submit" value="input提交">
        <button type="submit">
            <strong>button提交</strong>
        </button>
    </form>

效果如下

一个表单必须有一个type=submit的东西，要么是Input要么是button

Input标签

作用：

让用户输入内容

JS事件：

onchange, onblur, onfocus

属性：

类型type:

  • text 输入文本

  • password 输入密码

  • radio 单选

　　1、怎么样实现两个radio类型的Input二选一

　　2、让这两个Input有相同的name即可

　　3、比如，我们想实现男女性别二选一

 <input type="radio" name="gender"> 男
 <input type="radio" name="gender"> 女
  • checkbox 多选

　　同样的，也需要给同类型的多选框写上相同的Name

<input type="checkbox" name="hobby" id="">唱
<input type="checkbox" name="hobby" id="">跳
<input type="checkbox" name="hobby" id="">rap
<input type="checkbox" name="hobby" id="">篮球

  • file 上传文件
  • 上传一个文件：<input type="file">
  • 上传多个文件<input type="file" multiple>
  • textarea 文本框
  • 需要文本框不能自由拖动，固定大小
<textarea style="resize:none; width:50%; height:300px;"></textarea>
  • select 选择
<select name="week" id="">
    <option value="">- 请选择 -</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
</select>

注意事项

  1. 一般不监听Input的click
  2. form里的Input要有Name
  1. form里必须有一个type=submit的input或者button才能出发submit事件
avatar
文章
阅读
粉丝