WEB前端基础

上不如老下不如小

已于 2024-01-08 17:39:50 修改

阅读量392

点赞数 8

分类专栏： web前端文章标签：前端

于 2024-01-06 22:13:42 首次发布

本文链接：https://blog.csdn.net/m0_74234026/article/details/135431948

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基础标签使用

<html> -- 整个网页

<head> -- 网页头部

<title> -- 网页标题

<body> -- 网页主体

<h1> ~ <h6> -- 1 ~ 6 级标题

<br> -- 回车

<hr> -- 水平线

2.文本格式化标签

3.图像标签

<img src = "./img.jpg" alt = "替换文本" title = "提示文本" width=,hight>

-- src填写的是图片连接
-- alt是图片未加载出来之前显示的内容
-- title是鼠标悬停的显示内容

· 属性名 = "属性值"

· 属性写在尖括号里面，标签名后面，标签名和属性名之间用空格隔开，不区分先后

4.多媒体标签--音频和视频

音频标签audio

<audio src = "文件路径"> </audio> -- 但不会自动播放
可<audio src = "文件路径" controls = "文件路径"> </audio> -- 可直接写controls

加loop是循环播放
加autoplay即可自动播放，但是浏览器一般禁用自动播放，加了也没用

视频标签video

<video src = "文件地址" controls loop muted autoplay></vedio>

5.列表

·ul是无序列表
前面自动加·
其中包括的是li，不能有其他标签，但刻在li标签之内
·ol是有序列表
前面自动加编号1、2、3
其中包括的是li，不能有其他标签，但刻在li标签之内

·dl是定义列表
其中包括dt和dd
dt是列表标题
dd包裹的是相亲，一般包裹超链接用a标签

    <ul> <!-- 无序列表 -->
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ul>
    <ol> <!-- 有序列表 -->
        <li>列表条目1</li>
        <li>列表条目2</li>
    </ol>
    <dl> <!-- 定义列表 -->
        <dt>服务中心</dt>  <!-- 列表标题 -->
        <dd>申请售后</dd>  <!-- 详情 -->
        <dd><a href="#">售后政策</a></dd>  <!-- 详情 -->
    </dl>

6.单元格

·单元格信息放在table中
有border属性
如<table border="1"> 双引号内部用数字，代表边框宽度

表格结果标签如下

    <table border="3">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td>
                <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>

合并单元格的步骤

1.明确合并的目标

2.保留最左上的单元格，添加属性(取值是数组，表示需要合并的单元格数量)

- 跨行合并，保留最上单元格，添加属性rowspan = "数字"

- 跨列合并，保留最左单元格，添加属性colspan = "数字"

3.删除其他单元格

如上面代码中的这一部分

<td rowspan="2">100</td>

<td colspan="3">全市第一</td>

效果图如下：

7.表单 -- input标签

    文本框：<input type="text" placeholder="请输入用户名">
    <br><br>

    密码框：<input type="password" placeholder="请输入密码">
    -- placeholder是没有输入的情况下输入框中显示的内容

    <input type="radio" name = "性别">男
    <input type="radio" name = "性别" checked>女 -- checked是默认选中

    多选框：<input type="checkbox" checked>

    <input type="file" multiple> -- multiple是可以上传多个文件的属性

8.下拉菜单 -- select标签

标签：select嵌套option，select是下了菜单整体，option是下拉菜单中的每一项

selected表示默认选择的

    城市：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option selected>武汉</option>  <!-- selected第一个显示的 -->
    </select>

9.文本域 -- textarea标签

作用：多行输入文本的表单控件。

<textarea>发表你的评论</textarea>


<texterea> 默认提示文字</textarea>

10.label -- 增大input标签中单选多选点击范围的标签

作用：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

<label><input type="radio" name = "gender" >  男</label>
<label><input type="radio" name = "gender" checked>  女</label>

使用方法为直接用label标签包裹input的选项标签

11.按钮 -- button标签

<button type="">按钮上的文字信息</button> type默认为提交

想要使用上面的功能需要把内容全部放在from标签当中

    <form action="">
        用户名：<input type="text" placeholder="请输入用户名">
        <br><br>
        密码：<input type="password" placeholder="请输入密码">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>

12.div和span标签

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

· div：独占一行

· span：不换行

13.字符实体

在网页中显示空格以及<>

因为正常情况是无法打印出着几个东西的

14.实战一 -- 获奖信息列表（bushi

<ul>
        <li>
            <img src="../第1个案例/图片/img2.png" width = 100 alt = "初赛奖项" title = "初赛奖项">
            <h4>初赛奖项</h4>
        </li>
        <li>
            <img src="../第1个案例/图片/img.jpg" width = 100 alt = "省赛奖项" title = "省赛奖项">
            <h4>省赛奖项</h4>
        </li>
        <li>
            <img src="../第1个案例/图片/管理系统.png" width = 100 alt = "管理系统" title = "管理系统">
            <h4>管理系统</h4>
        </li>
    </ul>

15.实战二 -- 注册信息收集

<h1>注册信息</h1>
    <form action="">
        <!-- 个人信息 -->
        <h2>个人信息</h2>
        姓名：<input type="text" placeholder="请输入真实姓名">
        <br><br>
        密码：<input type="password" placeholder="请输入密码">
        <br><br>
        确认密码：<input type="password" placeholder="请输入确认密码">
        <br><br>
        性别：<label><input type="radio" name="gender">&nbsp; 男 &nbsp;</label><label><input type="radio" name = "gender" checked>&nbsp;女</label>
        <br><br>
        <label>居住城市：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected>南昌</option>
        </select>
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        最高学历：
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>大专</option>
            <option>高中</option>
            <option>初中</option>
            <option>小学</option>
        </select>
        <br><br>
        学校名称：<input type="text" placeholder="请输入最高学历学校">
        <br><br>
        所学专业：<input type="text" placeholder="请输入所学专业">
        <br><br>
        在校时间：
        <select>
            <option>2010</option>
            <option>2011</option>
            <option>2012</option>
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option selected>2019</option>
            <option>2020</option>
            <option>2021</option>
        </select>
        --
        <select>
            <option>2010</option>
            <option>2011</option>
            <option>2012</option>
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
            <option selected>2023</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称：</label><input type="text">
        <br><br>
        工作描述：<br>
        <textarea></textarea>
        <br><br>
        <ul>
            <li>
                <a href="#"><ins>《用户服务协议》</ins></a>
            </li>
            <li>
                <a href="#"><ins>《隐私政策》</ins></a>
            </li>
        </ul>
        <input type="checkbox">已阅读并同意以上协议
        <br><br><br>
        <!-- 协议 和 按钮 -->
        <button type="submit">免费注册</button>
        <button type="reset">重新填写</button>
    </form>