我要学前端 - ->>HTML基础总结(二)

    科技2025-07-12  13

    文章目录

    div与span标签divspan 表格标签表单标签

    div与span标签

    div

    每个div标签内容可独占一行内容 语法:

    <div>内容 </div>

    1.块元素、表示一块内容

    2.没有具体的语义

    3.唯一的格式就是换行。

    4.常结合CSS用于页面布局 例如:

    <!DOCTYPE html> <html> <head> <title>span与div</title> </head> <body> <div>hello</div> <div>world</div> </body> </html>

    span

    语法:

    <span>内容</span>

    1.行内元素、内容有多宽就占用多宽的空间距离

    2.没有具体的语义

    3.常用于修改段落中局部样式

    表格标签

    语法:

    <table> <tr> <td>第一行第一格</td> <td>第一行第二格</td> </tr> <tr> <td>第二行第一格</td> <td>第二行第二格</td> </tr> </table>

    表格标签属性: 语法:

    <table border="" width="" height="" align=""> <tr> <td>第一行第一格</td> <td>第一行第二格</td> </tr> <tr> <td>第二行第一格</td> <td>第二行第二格</td> </tr> </table>

    例如:

    <!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <table border="1" width="500" height="500" align="center"> <tr> <td>第一行第一格</td> <td>第一行第二格</td> </tr> <tr> <td>第二行第一格</td> <td>第二行第二格</td> </tr> <tr> <td colspan="2">第三行单元格合并</td> </tr> </table> </body> </html>

    表单标签

    语法:

    <form> <label>用户名:</label> <input type="text" name=""> </form>

    属性:

    <from></from>声明单区间 action属性定义表单数据提交地址,(空的默认为提交到当前页) method属性定义表单提交方式(get/post)<label></label>为单定义文字标注 for属性与标签id名绑定点击label区域激活该id标签标签_单标签 (例如:<input type=“text” name=“username”) 1.type=“text”–>输入框且为明文

    2.type=“password”–>输入框且为密文

    3.type=“radio”–>单选,但注意要加上name属性。如果提交要有value属性

    4.type=“checkbox”–>多选,但注意要加上name属性。如果提交要有value属性

    5.type=“file”–>上传文件(图片,word文档…)

    6.type=“submit”–>表单提交,通过value值改变按钮显示值

    7.type=“reset”–>重置按钮,通过value值改变按钮显示值

    <textarea name="introduce" cols="30" row="10"></textarea>

    注意: 1.当不设置cols属性与rows属性时,文本框可以自动收缩,会影响布局 2.提交时要设置name属性

    select标签 语法: <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">长沙</option> </select>

    例如:

    <!DOCTYPE html> <html> <head> <title>表单</title> </head> <body> <form action="" method="post"> <div> <label>用户名:</label> <input type="text" name="username"> </div> <div> <label>&nbsp;&nbsp;&nbsp;码:</label> <input type="password" name="paaword"> </div> <div> <!-- 单选框 --> <label>&nbsp;&nbsp;&nbsp;别:</label> <label for="male"><input type="radio" name="gender" id="male"></label> <label for="female"><input type="radio" name="gender" id="female"></label> </div> <div> <!-- 多选框 --> <label>&nbsp;&nbsp;&nbsp;好:</label> <label><input type="checkbox" name=""></label> <label><input type="checkbox" name=""></label> <label><input type="checkbox" name="">rap</label> </div> <div> <input type="submit" name="submit"> </div> <div> <textarea name="introduce" cols="30" row="10"></textarea> </div> <div> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">长沙</option> </select> </div> </form> </body> </html>

    Processed: 0.011, SQL: 8