前端基础复习--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.mfbz.cn/a/495956.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WPF自定义Panel:让拖拽变得更简单

在 WPF 应用程序中&#xff0c;拖放操作是实现用户交互的重要组成部分。通过拖放操作&#xff0c;用户可以轻松地将数据从一个位置移动到另一个位置&#xff0c;或者将控件从一个容器移动到另一个容器。然而&#xff0c;WPF 中默认的拖放操作可能并不是那么好用。为了解决这个问…

http接口测试—自动化测试框架设计(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、测试需求描述 对服务后台一系列的http接口功能测试。 …

【Git篇】复习git

文章目录 &#x1f354;什么是git⭐git和svn的区别 &#x1f354;搭建本地仓库&#x1f354;克隆远程仓库&#x1f6f8;git常用命令 &#x1f354;什么是git Git是一种分布式版本控制系统&#xff0c;它可以追踪文件的变化、协调多人在同一个项目上的工作、恢复文件的旧版本等…

微信开发者工具创建一个小程序

创建项目 对于上面这个AppID可以自行选择是注册还是测试号&#xff0c;我是使用的测试号&#xff0c;之后再下面选择模板&#xff0c;我这里选择了JS-基础模板。 进入项目后在模拟器中可看到如下页面&#xff1a; 添加提交按钮进行页面跳转 添加需要跳转的文件夹&#xff0c;…

更新时间后OpenStack neutron 401 Unauthorized解决办法

发现时间跟现实时间有偏差&#xff0c;用 ntpdate cn.pool.ntp.org 更新时间后再用neutron 发现报错 401-{uerror: {umessage: uThe request you have made requires authentication., ucode: 401, utitle: uUnauthorized}} 而且用的是账号密码的认证&#xff0c;还是无法正…

跑通飞浆平台的MTMCT 跨镜跟踪示例

想跑通飞浆平台的MTMCT跨镜跟踪示例&#xff0c;真的是难上加难啊&#xff01; 改了几处代码&#xff0c;可以顺利跑通了&#xff0c;特此记录&#xff1a; 第一处&#xff1a;不要拉主线的代码&#xff0c;改成 !git clone https://gitee.com/paddlepaddle/PaddleDetection…

Wagtail-基于Python Django的内容管理系统CMS实现公网访问

目录 ⛳️推荐 前言 1. 安装并运行Wagtail 1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具 3. 实现Wagtail公网访问 4. 固定Wagtail公网地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给…

【vue3学习笔记(一)】vue3简介;使用vue-cli创建工程;使用vite创建工程;分析工程结构;安装开发者工具

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 对应课程136-140节 课程 P136节 《vue3简介》笔记 课程 P137节 《使用vue-cli创建工程》笔记 官方文档&#xff1a; https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create官方文档地址 查看vue-cli版本&#x…

人大金仓数据库介绍与使用指南

人大金仓数据库是一款强大的关系型数据库管理系统&#xff0c;具有简单易用、高性能和稳定可靠的特点。本文将介绍人大金仓数据库的安装方法、常用的SQL语法以及相关工具的使用。 一、安装方法&#xff1a; 1、下载人大金仓数据库安装程序&#xff1b; 2、运行安装程序&#…

Visio中存在问题的解决方法

公式缩放 mathtype公式在visio缩放之后&#xff0c;出现了变形。 解决方法&#xff1a;每次输入公式都通过 插入->对象->mathType Equation 新建一个公式。可以避免 注&#xff1a;网上有的说在word中使用mathtype编写公式&#xff0c;之后复制到visio中。 插入波形 选择…

如何制定具有挑战性的绩效目标,同时又能激励员工积极投入工作?

在现代企业管理中&#xff0c;绩效目标的设定不仅是评价员工工作成果的依据&#xff0c;更是激励员工积极投入工作的重要手段。然而&#xff0c;如何制定出既具有挑战性又能激励员工的目标&#xff0c;往往成为管理者需要深思熟虑的问题。本文将探讨如何平衡这两点&#xff0c;…

matplotlib 绘图

matplotlib 绘图 方便设置legend图例的位置 ax1.legend(loc‘upper center’, bbox_to_anchor(0.3, -0.1)) ax2.legend(loc‘upper center’, bbox_to_anchor(0.6, -0.1)) import numpy as np import matplotlib.pyplot as plt from scipy.stats import norm from scipy.inter…

金融案例:构建高效统一的需求登记与管理方案

在金融行业数字化转型背景下&#xff0c;银行等金融机构面临着业务模式创新与数据应用的深度融合。业务上所需要的不再是单纯的数据&#xff0c;而是数据背后映射的业务趋势洞察&#xff0c;只有和业务相结合转化为业务度量指标&#xff0c;经过数据分析处理呈现为报表进行展示…

一键永久存档,帕鲁冒险永不丢失

天生不爱笑的瞅什魔、最强打手炎魔羊、跑图之王云海鹿、万能配种棉悠悠...... 真的永远不想和这些可爱的帕鲁说再见&#xff5e; 那么&#xff0c;如果服务器快过期了&#xff0c;如何永久保存游戏&#xff0c;保留我们和帕鲁的美好回忆呢&#xff1f;本教程说明如何使用轻量对…

如何利用OpenCV4.9 更改图像的对比度和亮度

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;使用 OpenCV 添加&#xff08;混合&#xff09;两个图像 下一篇:如何利用OpenCV4.9离散傅里叶变换 ​目标 在本教程中&#xff0c;您将学习如何&#xff1a; 访问像素值用零…

鸿蒙OS开发实例:【工具类封装-首选项本地存储】

import dataPreferences from ohos.data.preferences; import bundleManager from ohos.bundle.bundleManager; 本地首选项数据的保存&#xff0c;利用key value 【使用要求】 DevEco Studio 3.1.1 Release api 9 【使用示例】 1、app启动时&#xff0c;从本地读取数据&…

Spring Integration 是什么?

Spring Integration 是什么&#xff1f; Spring Integration 在 Spring 家族不太有名气&#xff0c;如果不是有需求&#xff0c;一般也不会仔细去看。那么 Spring Integration 是什么呢&#xff1f;用官方的一句话来解释就是&#xff1a;它是一种轻量级消息传递模块&#xff0…

干货分享:品牌如何通过社媒激发年轻人消费力?

随着年轻人的消费愈发理性&#xff0c;年轻人在消费时更偏向于熟人种草场景下的信任决策&#xff0c;社交媒体成为品牌吸引用户的必争之地。今天媒介盒子就来和大家聊聊&#xff1a;品牌如何通过社媒激发年轻人消费力。 一、 激发用户共鸣&#xff0c;与用户产生情感连接。 虽…

通达信指标公式--通达信波段极品抄底指标公式,波段顶部和底部的判断

今日分享的通达信波段极品抄底指标公式&#xff0c;是一个波段顶底的提示指标。 具体信号说明&#xff1a; 当指标信号柱出现洋红柱子时&#xff0c;是波段底的信号&#xff0c;此时是参考持股的信号。 抄底信号出现在黄色直线附近较好&#xff0c;出现在背离走势更好。懂波浪…

【正点原子FreeRTOS学习笔记】————(12)信号量

这里写目录标题 一、信号量的简介&#xff08;了解&#xff09;二、二值信号量&#xff08;熟悉&#xff09;三、二值信号量实验&#xff08;掌握&#xff09;四、计数型信号量&#xff08;熟悉&#xff09;五、计数型信号量实验&#xff08;掌握&#xff09;六、优先级翻转简介…
最新文章