前端面试基础复习-HTML部分

HTML

1. html的定义

HTML不是一种编程语言，是一种标记语言，用来描述网页的语言。

2. HTML标签关系

嵌套关系

并列关系

3. HTML基本标签

div p span

标题标签：h1-h6 有序：ol,li 无序：ul,li 自定义：dl,dt,dd

水平分割线：hr 换行：br

加粗：b,strong 删除线：del,s 斜体：em，i 下划线：u

上标：sup 下标：sub

img标签：

    <img src="" alt="" title="">
    <!-- src---引入图片的路径（绝对路径,相对路径）
    alt---图片加载失败时显示的文字
    title---鼠标移入图片时显示的文字 -->

a标签

    <a href="" target=""></a>
    <!-- href---引入文件的路径
    target---跳转的方式（_self自身窗口跳转，_blank新建窗口跳转）

4. 表单

    <form action="" method="" name="">在这里写表单控件</form>
    <!-- action---提交到的服务器端的地址
    method---提交的方式，get明文提交，post密文提交

文本域

    <input type="text" name="" value="">
    <!-- text---指定是一个文本域
    value---文本框提示的内容

密码框

    <input type="password" name="psd">
    <!-- password---指定是一个密码框 -->

按钮

    <button></button>

提交按钮

    <input type="submit" value="确定">
    <!-- submit---指定是一个提交按钮
    value---可改变按钮上的文字 -->

重置按钮

    <input type="reset" value="清除">
    <!-- reset---指定是一个重置/清除按钮
    value---可改变按钮上的文字

普通按钮

    <input type="button" value="自己写功能">
    <!-- button---指定是一个没有功能的按钮
    value---可以自己写功能 -->

单选框

     <input type="radio" name="" value="">
    
    ps：
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女

复选框

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

    ps:
    <input type="checkbox" name="hobby" value="a">篮球
    <input type="checkbox" name="hobby" value="b">足球
    <input type="checkbox" name="hobby" value="c">棒球
    <input type="checkbox" name="hobby" value="d">乒乓球
    <input type="checkbox" name="hobby" value="e">羽毛球

多行文本域

    <textarea name="" id="" cols="30" rows="10"></textarea>
    <!-- cols---一行所能容纳的字符数
    rows---行数
    最大的长度：maxlength -->

下拉菜单

    <select name="" id="" size="">
        <option value="" selected=""></option>
    </select>
    <!-- id---不用可以删除
    size=""---表示会显示几条
    selected---默认被选中，当selected="selected"时，可以简写 -->
    
    ps:
    <select name="city" size="3">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="" selected>深圳</option>
    </select>

文件上传

    <input type="file"/>

分组表单字段--fieldset/legend

    <fieldset class="box">
        <legend>组的名称</legend>
        <!-- 内容 -->
    </fieldset>

label关联文本--label

     <!-- 方法一：文本和控件在一起 -->
    <label>
        <input type="radio" name="genter" value="male">男
    </label>

    <!-- 方法二：文本和控件的距离较远的时候，用label的for属性关联控件的id属性 -->
    <input type="radio" name="genter" value="male" id="male">
    <label for="male">男</label>

表单的高级应用

隐藏域：type="hidden"

只读：readonly

禁读：disabled