链接&表格&表单

最新推荐文章于 2024-01-20 12:40:08 发布

BonbonB

最新推荐文章于 2024-01-20 12:40:08 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/weixin_45502025/article/details/98942815

版权

1:无序列表

ul>li

2:有序列表

排名 ol>li ol order list

3:自定义列表

dl>dt标题+dd每一条数据

4:超链接标签

<a></a>  anchor 锚点

(1)链接使用

href : 链接地址

target: 控制链接的打开方式

_self 默认打开方式在本页打开

_blank 在新页面打开

<base  target="_blank">  一次性设置超链接的打开方式为新页打开
必须放在head标签里

(2)锚点功能

点击锚点链接跳转相同界面的不同部分

抛锚船靠岸le 就是在目标跳转点的元素身上写一个属性 id =" id名" id名不要以数字开头
拽锚绳子

5:表格

用明显的多行多列结构局部布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table>
        <caption>标题</caption>
        <!-- 表格头部  thead-->
        <thead>
            <!-- 字段  tr行 > th字段 -->

            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>email</th>
                <th>薪资</th>
            </tr>
        </thead>
        <!-- 表格身体部分  tbody -->
        <tbody>
            <!-- tr >td 列 单元格  -->
            <tr>
                <td>二妮</td>
                <td>78</td>
                <td>女</td>
                <td>无</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>3妮</td>
                <td>78</td>
                <td>女</td>
                <td>无</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>4妮</td>
                <td>78</td>
                <td>女</td>
                <td>无</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>5妮</td>
                <td>78</td>
                <td>女</td>
                <td>无</td>
                <td>8000</td>
            </tr>

        </tbody>


    </table>
</body>

3:默认属性:

border: 边框 border=“1” 边宽默认是黑色
cellpadding: 10px ; 单元格内容与边框的距离
cellspacing:10px; 单元格与单元格的距离
?cellpadding=“0px” cellspacing=“0px” 双线合并成单线—> 粗的因为是两条合并 —> 细线边框 ? css 一个属性
宽度属性 width
高度属性 height
bgcolor : 背景色
align: 表格水平对齐方式
background: 背景图片 background=“地址”

4: CSS属性

细线边框属性:border-collapse: collapse(合并，折叠)

文本对齐 text-align: left 居左/right右对齐/center居中

5: 合并单元格

跨行合并

1:rowspan =" 合并的行数" 从上到下合并最初始的那一行身上

2:删除被合并的那几行删除的行数= 合并的行数-1

跨列合并 column 列

1:colspan =“合并的列数” 从左到右合并属性写到最左边的那一列身上

2:删除的列数= 合并的列数-1

默认属性设置宽高合并过后会丢失样式 ,要新添加样式

6:表单

功能:用于收集用户数据

<body>
    <!-- 大盒子 -->
    <form action="">
        <fieldset>  //边框
            <legend>标题</legend>
        
        <!-- 表单控件  input type="类型" 
        type: 
           text: 文本框
           password 密码框  文字隐藏 变成小圆圈
           radio   单选框 
           checkbox  多选框
           file 文件上传域  只能上传一个文件
         文本域  <textarea  ></textarea>
          属性 cols="" rols=""(不建议使用) width=""  height=""
           button      普通按钮  没有提交功能
           submit   提交按钮  作为表单提交的按钮 form 必须包含一个提交按钮
           reset    重置按钮
           image    图片提交按钮
                      
		   
		   value:提供默认可选值
           name: 作用:指明当前用户输入的是什么数据
		   checked  被勾选
           selected
           placeholder  默认提示文字
        -->
        姓名: <input type="text"  name="username"><br>
        密码: <input type="password" name="userpasswd"><br>
        <!-- 要想实现单选框成为一道单选题 必须保证这两个表单元素身上的name属性值相同 -->
        性别: 男: <input type="radio"  name="sex"  value="1" > 
              女: <input type="radio"  name="sex" value="0"><br>


        爱好:   <br>
        游泳  <input type="checkbox"  name="hobby"  value="swimming">
        唱歌   <input type="checkbox" name="hobby" value="sing">
        耍杂技  <input type="checkbox" name="hobby" value="shua">
        数钱: <input type="checkbox" name="hobby" value="money"><br>

        <!-- 下拉列表  select > option 选项  -->
            
        工作地:
        <select name="city" id="">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select><br>
        上传自拍(不要美颜):
        <input type="file" name="photo"><br>
        评价你自己:
        <textarea name="desc" id="" cols=""  rows=" " style="width:316px;height:273px" ></textarea>
<br>
        <!-- <input type="button"  value="普通按钮"><br> -->
      <!-- <input type="submit">  -->
        <!-- <input type="reset"> --> 

        <!-- 弥补默认提交按钮样式上的缺陷   css不是万能的  -->
        <!-- <input type="image" src="./image/图片提交按钮.png"> -->
		</fieldset>

    </form>
</body>
</html>