前端基础复习--HTML篇

html: html文件根标签

head:编写页面相关的属性

title:页面标题

body:页面内容展示信息

 标题标签:h1 - h6,数字越大,字体越小 ,例如:

<h1>hello</h1>

p标签:段落标签,回车换行会解析成空格

<br/>:换行标签

换行标签换行后间隙比段落标签间隙小

格式化标签:

  • 加粗:strong 标签和 b 标签
  • 倾斜:em 标签和 i 标签
  • 删除线:del 标签 和 s 标签
  • 下划线: ins 标签和 u 标签

img标签:

img标签必须带有 src 属性。表示图片的路径

<img src="rose.jpg">

相对路径: ./xxx.png

                   ./img/xxx.png        在某个文件夹下

                   ../img/xxx.png

绝对路径:图片路径  网络上的图片

  • alt: 替换文本,当文本不能正确显示的时候,会显示一个替换的文字
  • title:提示文本,鼠标放到图片上,就会有提示
  • width / height:控制宽度高度,高度和宽度一般改一个就行,另外一个会等比例缩放。否则就会图片失衡
  • border:边框,宽度的像素,一般使用CSS来设定
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

超链接标签:

  • href:必须具备,表示点击后会跳转到哪个页面
  • target:打开方式,默认是_self。如果是_blank则用新的标签页打开

链接也可以是图片,例如:

<a><img src="xxx.png" alt="">
</a>

表格标签:

  • table标签: 表示整个表格
  • tr:表示表格的一行
  • td:表示一个单元格
  • th:表示表头单元格,会居中加粗
  • thread:表格的头部区域(注意和 th 区分,范围是比 th 要大的)
  • tbody:表格得到主体区域

表格标签有一些属性,可以用于设置大小边框等,但是一般使用 CSS方式 来设置。

这些属性都要放到 table 标签中

  • align 是表格相对于周围元素的对齐方式,align="center"(不是内部元素的对齐方式)
  • border 表示边框。1表示有边框(数值越大,边框越粗),“”表示没边框
  • cellpadding:内容距离边框的距离,默认1像素
  • cellspacing:单元格之间的距离,默认2像素
  • width / height: 设置尺寸
  • colspan 单元格横向跨越的列数。
  • rowspan 单元格纵向跨越的行数。

列表标签:

主要使用来布局的,整齐好看

输入的时候便捷方式:ul>li*2   (2表示总共几行)

  • 无序列表【重要】  ul li,
<ul type="square"><li>这是内容1</li><li>这是内容2</li>
</ul>
  • disc(默认值):使用实心圆(实心圆点)作为列表项标记。
  • circle:使用空心圆(空心圆点)作为列表项标记。
  • square:使用实心方块(实心方点)作为列表项标记。
  • 有序列表【用的不多】 ol li 
<ol type="a"><li>这是内容1</li><li>这是内容2</li>
</ol>
  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号《默认》
  •  自定义列表【重要】 dl(总标签) dt(小标题) dd(围绕标题来说明)上面有几个围绕着标题来展开的。
<dl><dt>自定义列表标题</dt><dd>咬人猫</dd><dd>兔总裁</dd>
</dl>

 表单标签:用来完成和服务器的一次交互

<form action="">姓名<input type="text"><br/>密码<input type="password"><br/>性别<input type="radio" name="gender">男<input type="radio" name="gender" checked="checked">女<br/>爱好<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏<br/><input type="button" value="这是一个普通按钮" onclick="alert('hello')">
</form>

 action后填服务器端的一个路由地址

  • 表单域:包含表单元素的区域,重点是form标签
  • 表单控件:输入框,提交按钮等,重点是input标签

可以通过对type进行对应的取值,来控制input类型。

text:单行输入

password:密码

radio:单选框        name="gender":只能单选一个        checked:默认选择

checkbox:复选框

button:普通按钮,搭配 JS 使用

提交/重置/上传文件 按钮:

action:后写提交到什么地方

<form action="">课程:<input type="text" name="course">   <input type="submit"><input type="reset"><input type="file">
</form>

label标签:

搭配input使用,点击label也能选中对应的单选/复选框,能够提升用户体验

  • for属性:指定当前label和哪个相同id的Input标签对应,(此时点击才是有用的)
<label for="male">男</label> 
<input id="male" type="radio" name="sex">
<label for="female">女</label> 
<input id="female" type="radio" name="sex">

点击 男/女 也可以选中按钮

select标签:

下拉菜单

  • option中定义 selected="selected"表示默认选中
<select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--1996--</option><option value="">--1997--</option><option value="">--1998--</option><option value="">--1999--</option>
</select>

textarea标签:

<textarea name="" id="" cols="30" rows="10"></textarea>

超过10行会出现滚轮,实际开发通过CSS实现效果

无语义标签:div & span

div:是独占一行的,是一个大盒子

span:不独占一行,是一个小盒子

 特殊字符:

&nbsp;:空格

&lt;:小于号

&gt;:大于号

&amp;:按位与

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/777835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

|行业洞察·手机|《2024手机行业及营销趋势报告-18页》

报告的主要内容解读&#xff1a; 手机行业概述及品牌分布&#xff1a; 2022年&#xff0c;受疫情影响&#xff0c;中国国内手机市场出货量下降22.6%&#xff0c;总计2.72亿部。5G手机市场占有率中&#xff0c;苹果领先&#xff0c;其次是vivo、OPPO和华为。消费者换机时更注重性…

【python分析实战】成本:揭示电商平台月度开支与成本结构占比 - 过于详细 【收藏】

重点关注本文思路&#xff0c;用python分析&#xff0c;方便大家实验复现&#xff0c;代码每次都用全量的&#xff0c;其他工具自行选择。 全文3000字&#xff0c;阅读10min&#xff0c;操作1小时 企业案例实战欢迎关注专栏 每日更新&#xff1a;https://blog.csdn.net/cciehl/…

[git]Git 撤销与 回滚操作

[git]Git 撤销与 回滚操作 开发过程中&#xff0c;你肯定会遇到这样的场景&#xff1a; 场景一&#xff1a; 糟了&#xff0c;我刚把不想要的代码&#xff0c;commit到本地仓库中了&#xff0c;但是还没有做push操作&#xff01; 场景二&#xff1a; 彻底完了&#xff0c;刚线…

C# OpenCvSharp 轮廓检测

目录 效果 代码 下载 效果 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.…

刚租用的服务器被恶意攻击怎么办?

如果你的服务器受到恶意攻击&#xff0c;以下是一些应对措施&#xff1a; 1.立即隔离受影响的系统&#xff1a; 立即将受攻击的服务器与其他系统隔离&#xff0c;以防止攻击进一步蔓延。这可以通过断开网络连接、关闭受影响的服务或者停止服务器实例等方式来实现。 2.通知相关人…

OpenCV 如何使用 XML 和 YAML 文件的文件输入和输出

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;如何利用OpenCV4.9离散傅里叶变换 下一篇: 目标 本文内容主要介绍&#xff1a; 如何使用 YAML 或 XML 文件打印和读取文件和 OpenCV 的文本条目&#xff1f;如何对 OpenCV …

随记----单链表

随便记录一些代码 1.编写算法将带头结点的链表逆置&#xff0c;空间复杂度为1 void Reverse(LinkLNode &L){LNode *pL->next,*r;L->nextNULL;while(r!NULL){rp->next;p->nextL->next;L->nextp;pr;} } 6.有一个带头节点的单链表L&#xff0c;设计一个算法…

镜视界 | DevSecOps CI/CD 管道中数字供应链安全的集成策略

目录 前言 数字供应链&#xff08;DSC&#xff09;的定义 数字供应链安全的重点内容和风险因素 CI/CD管道的安全目标和可信实体 将数字供应链安全集成到CI/CD管道中 结语 本文字数&#xff1a;7715&#xff0c;阅读时长&#xff1a;19分钟 1.前言 在敏捷开发的模式下&…

CSS 结构伪类选择器 伪元素选择器 盒子模型

目录 1. 结构伪类选择器1.1 :nth-child(公式) 2. 伪元素选择器3. 盒子模型3.1 盒子模型的重要组成部分3.2 盒子模型 - 边框线3.3 盒子模型 - 内边距3.4 盒子模型 - 尺寸计算3.5 盒子模型 - 外边距3.6 盒子模型 - 元素溢出3.7 外边距问题 - 合并现象3.8 外边距问题 - 塌陷问题3.…

玩电脑突然停电对电脑有影响吗

在现代社会中&#xff0c;电脑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;当我们正在专注于工作或娱乐时&#xff0c;突然停电可能会给我们带来不小的困扰。那么&#xff0c;玩电脑时突然停电会对电脑产生哪些影响呢&#xff1f;本文将深入探讨这一问题&…

Android 14.0 SystemUI下拉状态栏时间格式的修改(二)

1.概述 在14.0的系统rom产品开发中,在通过上一篇博客已经实现修改了时间显示格式,但是客户修改下拉状态栏时间显示格式为分行显示,即第一行显示时间用大字体显示, 第二行用小字体显示当前日期和周几这样的显示格式 于是继续进行修改 2.SystemUI下拉状态栏时间格式的修改(…

快速上手Spring Cloud 七:事件驱动架构与Spring Cloud

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

【OpenAI援引马斯克评价中国】小米汽车 SU7 顶配版或超 30 万/OpenAI 加持机器人亮相/荣耀已投入 100 亿研发 AI

雷军&#xff1a;共建一个更良性包容的汽车市场舆论环境 Figure 与 OpenAI 联手推出新机器人 亚马逊和 Google 悄悄降低对生成式 AI 的预期 小米生态链模式大改革&#xff0c;将进行分级管理 掌阅科技&#xff1a;致力打造国内首款真正 AI 阅读应用 荣耀称已投入 100 亿用于 AI…

c++中2种返回变量类型名称的方法

std::string real_name abi::__cxa_demangle(typeid(*(*a)).name(), NULL, NULL, &status);必须使用#include <typeinfo> std::string real_name boost::core::demangle(typeid(*(*a)).name());必须使用 #include <boost/core/demangle.hpp> #include <t…

element el-table表格默认勾选toggleRowSelection失效问题

想要实现一个表格默认勾选上次选过的项的功能&#xff1a; 发现直接使用toggleRowSelection不生效&#xff0c;必须使用setTimeout延迟一会才能生效。 表格&#xff1a; <el-tableref"table"borderstripe:data"rows"selection-change"val > (se…

设计模式之原型模式讲解

原型模式本身就是一种很简单的模式&#xff0c;在Java当中&#xff0c;由于内置了Cloneable 接口&#xff0c;就使得原型模式在Java中的实现变得非常简单。UML图如下&#xff1a; 我们来举一个生成新员工的例子来帮助大家理解。 import java.util.Date; public class Employee…

植物大战僵尸Javascript版web游戏源码

源码介绍 植物大战僵尸Javascript版web游戏源码&#xff0c;非常强大&#xff0c;1比1还原电脑版植物大战僵尸游戏&#xff0c;带背景音乐&#xff0c;玩法和原版一模一样。 源码截图 下载地址 https://download.csdn.net/download/huayula/89048275

vue3从精通到入门5:模板语法与指令

Vue 3 的模板语法和指令与 Vue 2 相比&#xff0c;大部分内容仍然是相同的&#xff0c;但是有一些新的改进和优化。以下是对 Vue 3 模板语法和指令的简要概述&#xff1a; 模板语法 Vue 3 的模板语法基于 HTML&#xff0c;允许你使用双大括号 {{ }}来绑定数据&#xff0c;以…

MySQL:DBA看主从延迟

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 1、从DBA的视角来看影响主从延迟因素 1.1 主库更新频繁或主库有大事务 1.1.1 程序相关 1.1.2 变更相关 1.2 从库负载较高&#xff08;CPU负载高、IO负载高、网络负…

《Vision mamba》论文笔记

原文出处&#xff1a; [2401.09417] Vision Mamba: Efficient Visual Representation Learning with Bidirectional State Space Model (arxiv.org) 原文笔记&#xff1a; What&#xff1a; Vision Mamba: Efficient Visual Representation Learning with Bidirectional St…