程序员经验分享-hwhale

web前端复习

2023-11-01

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

html

javascript

web前端复习 的相关文章

随机推荐

  • Vue.js用cdn方式引入

    Vue js用cdn方式引入 前言 注意本次用cdn形式引入js学习 有node js的玩家可以用node js CDN下载地址 https vuejs org js vue min js以及Node js Vue系列 windows下np

  • 解决asterisk sip错误提示Not Acceptable Here(488)或Not Found(404)

    安装好asterisk后对接到VOS3000使用 可发现VOS死活送不通asterisk 于是回头检查asterisk系统是否安装正确以及是否正常工作 经过反复检查 都没有发现问题 可VOS上面话单显示 开始一直显示488错误 于是我看了下

  • policy gradient详解（附代码）

    1 引言 policy gradient是强化学习中一种基于概率策略的方法 智能体通过与环境的交互获得特定时刻的状态信息 并直接给出下一步要采取各种动作的概率 然后根据该状态动作的策略分布采取下一步的行动 所以每种动作都有可能被选中 只是选

  • 计算 属性

    一 定义 计算属性就是当其依赖属性的值发生变化时 这个属性的值会自动更新 预支相关的DOM部分也会同步自动更新 有缓存 二 用法 1 基础用法 computed getN return this n 1 2 传递参数 返回一个函数 h1 t

  • mmdetection源码阅读

    阅读从tools train py开始 功能模块 Register类 位置 utils registry py 用于注册起到相同作用的 例如coco voc数据类 模型类 数据处理流程类 类别 具体功能是这样的 Register的 init

  • 很不起眼的6个bug，90%的程序员就算写了10年代码也肯定都踩过！

    文章来源 https juejin cn post 7120570066856312839 前言 作为Java程序员的你 不知道有没有踩过一些基础知识的坑 有时候 某个bug查了半天 最后发现竟然是一个低级错误 有时候 某些代码 这一批数据

  • 由jar包冲突导致的logback日志不输出

    文章目录 一 前言 1 resource下面有logback配置但没有生成日志 2 去掉Log4j依赖引用 3 java是如何加载logback 3 1 回顾下我们获取日志对象是如何获取的 一 前言 最近升级一个老项目 发面日志没有按照预期

  • Hydra的基本使用

    R 根据上一次进度继续破解 S 使用SSL协议连接 s 指定端口 l 指定用户名 L 指定用户名字典 文件 p 指定密码破解 P 指定密码字典 文件 e 空密码探测和指定用户密码探测 ns C 用户名可以用 分割 username pass

  • CentOS-Linux安装 XS-Tools (XenServer)

    1 在Xencenter里光驱换成xs tools iso 2 登陆SSH root ns0 cd mnt root ns0 mnt ls root ns0 mnt mkdir xs tools root ns0 mnt mount dev

  • 在解决方案中所使用 NuGet 管理软件包依赖

    使用程序包恢复功能可以在提交源代码时 不需要将代码库提交到源代码管理中 大幅减少项目的尺寸 所有NuGet程序包都存储在解决方案的Packages文件夹中 要启用程序包恢复功能 可右键单击解决方案 注意 不是右键单击项目文件 并选择 Ena

  • C++的const成员函数

    C 的const成员函数 const成员函数是什么 实例 总结 const成员函数是什么 通常我们看到的const成员函数格式类似于 int QueryBalance int iBalanceVal const 简单的说 const成员函数

  • C++学习（三四六）cygwin 交叉编译Android gdal

    官方说gdal的android版本是仍在做的一项工作 BuildingForAndroid GDALhttps trac osgeo org gdal wiki BuildingForAndroid cygwin android ndk r

  • 快速幂计算x的n次幂，递归版本、迭代版本、python实现

    递归 分治思想 二分 def myPow self x float n int gt float def quick pow x n if n 1 return x half quick pow x n 2 y half half if n

  • Android文件存储目录结构

    应用程序在运行的过程中如果需要向手机上保存数据 一般是把数据保存在SDcard中的 大部分应用是直接在SDCard的根目录下创建一个文件夹 然后把数据保存在该文件夹中 这样当该应用被卸载后 这些数据还保留在SDCard中 留下了垃圾数据 并

  • 华为OD机试 Python【最小传输时延Ⅱ】

    题目 题目描述 想象一个M N的大网格 每个格子上都有一个数字 这个数字就是这个格子转发数据的延迟时间 每个格子可以向其周围的8个方向 上 下 左 右以及四个角落 发送数据 现在 有技巧 如果连续两个格子的延迟时间相同 那么我们只算一个时间

  • SQL SERVER专题实验3 简单查询

    第1关 基本知识 第1题 A 第2题 ABC 第3题 AB 第4题 AB 第5题 ABCD 第6题 ABCD 第7题 AC 第2关 按指定列 全部列和计算表达式的查询 本关任务 用 SELECT 语句检索数据表中指定字段的数据 按要求输出目

  • 公交路线推荐

    项目从0 1出 请写出公交车路线推荐策略 逻辑框架 心法 1 产品目标 用户以最低的代价 成本完成想要做的事情 2 需求理解 给出区分不同用户群 场景的规则 定义衡量标准 将其数字化 通常是准确率和召回率 3 提出解决方案 给出针对每个用户

  • 逻辑运算符

    逻辑运算符 逻辑运算符概述 短路逻辑运算符 之间的区别 逻辑运算符概述 可以把多个条件的布尔结果放在一起运算 最终返回一个布尔结果 double length 11 5 double width 6 95 需求 长度大于等于10cm 宽度大

  • Java POI excel单元格背景色(填充)、字体颜色(对齐)、边框(颜色)、行高、列宽设置

    文章目录 1 Excel Cell单元格背景色 颜色名称对照关系 2 Excel Cell单元格背景填充样式 颜色填充对照关系 3 Excel Cell字体样式设置 对照图 4 Excel 行高 列宽设置 5 Excel单元格边框设置 边框

  • web前端复习

    web前端复习 1 文档声明与字符编码 2 HTML常用标签 1 语义 2 常用标签 水平线hr 3 特殊符号 4 div和span标签 5 列表 1 有序列表 ol li 2 无序列表 ui li 3 自定义列表 dl dt 6 图片标签

热门标签