web前端复习

1.文档声明与字符编码

在这里插入图片描述

2.HTML常用标签

1.语义

在这里插入图片描述

2.常用标签

在这里插入图片描述

水平线hr

在这里插入图片描述

    <hr>
<!-- 默认的hr有阴影，去阴影： --> <hr noshade>

在这里插入图片描述

3.特殊符号

在这里插入图片描述
&后面加一堆：各种符号表情

4.div和span标签

div标签，没有具体含义，用来划分页面的区域，默认独占一行

快捷键
一次创建多个div：div*3
内容 div{ } 回车

span，没有实际意义，主要应用于在对文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

5.列表

在这里插入图片描述

1.有序列表 ol li

li里面可以随意放标签，但是ol里面只能放置li ol属性type：1，a，A，i，I start属性：取值只能是一个数字

<ol type="a" start="3">
        <li>12</li>
        <li>34</li>
</ol>

2.无序列表 ui li

ul里面只能放li，li里面可以放其他标签 type：disc（默认黑色实心），circle（空心圆），square，none[用的多]

快捷键：
创建无序列表：ul>li*3

3.自定义列表 dl dt

快捷键：在一半处跳到下一行：ctrl+Enter
dl>dt{ }+dd{ }

6.图片标签的路径和属性

1.图片标签的路径

同级目录：
1.code.gif
2. ./code.gif

<img src="" alt="">

. .上上一级

在这里插入图片描述

2.图片标签的属性

在这里插入图片描述
title：鼠标放上显示图片内容

7.超链接标签

在这里插入图片描述

8.table表格

1.基本结构

在这里插入图片描述

2.table属性

在这里插入图片描述
百分比是相对于父元素的

3.行tr属性

在这里插入图片描述

4.td属性

如果给一个单元格设置了宽（高）度，影响的是这一整列（行）的宽度
在这里插入图片描述

5.表格合并

在这里插入图片描述
被合并的留第一个填这个，剩下几个注释掉

表格案例：

<body>
    <table border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="green" >
        <tr align="center">
            <td width="120" height="56">会员姓名</td>
            <td width="200"></td>
            <td width="120">出生日期</td>
            <td width="200"></td>
        </tr>
        
        <tr align="center">
            <td height="56">身份证号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        
        <tr align="center">
            <td height="56">通信地址</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        
        <tr height="56" align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>

        <tr height="56" align="center">
            <td>会员卡号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
    </table>
</body>

9.表单标签

在这里插入图片描述
换行：
1.用br换行
2.在外面套p标签/div标签

submit 提交信息到action指定的地址
value：自定义显示内容
在这里插入图片描述

<form action="https://www.baidu.com/" method="POST">
        用户信息 <input type="text" placeholder="请输入你的用户名" name="username">
        <br>
        密码 <input type="password" >
        <br>
        <input type="submit" value="登录">
        <button type="submit">登录</button>

        <input type="reset" value="重新输入">
        <button type="reset"></button>   
</form>

10.CSS 层叠样式表

1.内部样式表

在这里插入图片描述

2.外部样式表

在这里插入图片描述
外部样式引入2种方式：

<link rel="stylesheet"  type="text/css" href="./index.css">

<style>
        @import url(index.css);
</style>

在这里插入图片描述

3.行内样式表

在这里插入图片描述
直接在一行里面加

4.样式表的优先级

就近原则：
行内样式优先级最高，内部其次，外部最低。
改变优先级：加 ! important