回顾基础--HTML篇

HTML语法规范

<html></html>  开始标签与结束标签
<br />  单标签  包含关系
<head><title></title>
</head>并列关系
<head></head>
<body></body>

1、 标题标签

标题标签 【双标签】【不同标题字体大小不一样,但是都加粗了】
<h1>  ~  <h6>
例子:<h1>一级标题</h1>

2、 分段标签和换行标签

分段标签和换行标签
1、分段标签【用来放置文字段落】<p>...</p>
2、换行标签【单标签】【用来换行】<br />

3、 文本格式化标签

文本格式化标签
1、加粗我是<strong>加粗</strong>的文字  <br />我是<b>加粗</b>的文字            <br />
2、倾斜我是<em>倾斜</em>的文字          <br />我是<i>倾斜</i>的文字            <br />
3、删除线我是<del>删除线</del>            <br />我是<s>删除线</s>                <br />
4、下划线我是<ins>下划线</ins>            <br />我是<u>下划线</u>                <br /> 

4、 div 和 span 标签

    <div>...</div> 【独自占一行】<span>...</span>【只占内容大小】

5、 图像标签

图像标签    <img src="xx.jpg" alt="我是小黄人" title="思密达" width="500" border="15"/>
属性意思
alt替换文本【团片不能显示时,用文字显示】
title提示文本【鼠标停放在图片上时,会有文本显示】
width设定图片宽度
height设定图片高度
border设定边框(黑色)

5.1 相对路径

1、同一路径:<img src="xx.jpg" />
2、下一路径:<img src="images/xx.jpg" />
3、上一路径:<img src="../xx.jpg" />

5.2 绝对路径

<img src="C:\Users\hp\Desktop\xx.jpg" /><img src="https://www.xxx.xx/xx.jpg" />

6、 超链接标签

【a标签:点击跳转到href里面的地址】
1.外部链接:<a href="http://www.qq.com" target="_blank">腾讯</a>target 打开窗口的方式:1.默认的值是_self,当前窗口打开页面2._blank,新窗口打开页面 2.内部链接:网站内部页面之间的相互链接<a href="gongsijianjie.html" target="_blank">公司简介</a>3.空链接:#【暂时没有链接时,代替使用】<a href="#">公司地址</a>4.下载链接:地址链接的是 文件 .exe 或者是 zip 等压缩包形式<a href="xx.zip">下载文件</a>5.网页元素的链接:点击这个图片,会打开百度<a href="http://www.baidu.com"><img src="xx.jpg" /></a>

6.1 锚点标签

<a href="#abc"> AABBAABB </a>......<某标签 id="abc"></某标签>【点击a标签有 href="#abc"(AABBAABB)后,会跳转到 id="abc" 所在地方】

7、 表格标签

    <table><tr> <td>姓名</td><td>性别</td><td>年龄</td> </tr><tr> <td>刘德华</td><td>男</td><td>56</td> </tr><tr> <td>张学友</td><td>男</td><td>58</td> </tr><tr> <td>郭富城</td><td>男</td><td>51</td> </tr></table>

7.1 表格表头

<th>...</th> 和 <td>...</td> 
区别是 <th></th>:会加粗加黑、居中

7.2 表格属性

<table align="center" border="1" cellpadding="50" cellspacing="0" width="500" height="249"></table>
属性名属性值描述
alignleft(左)、center(中)、right(右)对齐方式【整个table标签的】
border1 或 ""默认没有边框
cellpadding像素值单元边缘 与 内容的距离
cellspacing像素值单元格之间距离
width像素值 或 百分比表格宽度
height像素值 或 百分比表格高度

7.3 合并单元格

1、colspan指跨列合并 2格<td colspan="2"></td>2、rowspan指跨行合并 2格<td rowspan="2"></td>    

8、 列表标签(无序|有序|自定义)

1、无序列表<ul><li>...</li><li>...</li><li>...</li></ul>2、有序列表<ol><li>...</li><li>...</li><li>...</li></ol>3、自定义列表<dl><dt>...</dt>  老大<dd>...</dd>  小弟<dd>...</dd><dd>...</dd></dl>

9、 表单标签

1、表单域<form action="处理表单提交的 URL" method="POST或GET" neme="表单的名称">...</form>2、input表单元素<input type="<1>" <2>><1> (1) text     : 文本框(可输入任何文字)(2) password : 密码框(用户看不见密码)(3) radio    : 单选按钮(实现单选)【每个按钮加一个属性 name="",且值需一样】(4) checkbox : 复选框(实现多选)【每个按钮加一个属性 name="",且值需一样】(5) submit   : 提交按钮,把form中元素的值提交【例子:免费注册】(6) reset    : 重置,还原表单元素初始状态【例子:重置表单,必须被 <form> 包围着】(7) button   : 普通按钮【例子:获取验证码】(8) file     : 文件域,上传文件<2> 表单控件:(1) name=""        : 该表单名称(2) value=""       : 表单的初始值(3) placeholder="" : 当没有值设定时,出现在表单控件上的文字(4) type=""        : 表单类型,如 <1>(5) maxlength=""   : 输入字符最大长度【minlength最小长度】(对于输入框)(6) checked        : 首次打开,按钮被选中(对于 单选框 或者 多选框)
    <form action="xxx.php" method="GET"><!-- name 是表单元素的名字 这里性别单选按钮必须有“相同”的名字name 才可以实现多选“ 一 ” -->用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br><!-- text 文本框 用户可以在里面输入任何文字 -->密码: <input type="password" name="pwd"> <br><!-- password 密码框 用户看不见输入的密码 --><!-- 单选按钮和复选框可以设置checked 属性,当页面打开时候就可以默认选中这个按钮 -->性别: 男 <input type="radio" name="sex" checked="checked"> 女 <input type="radio" name="sex"> 人妖 <input type="radio"name="sex"> <br><!-- radio 单选按钮 可以实现多选“ 一 ” -->爱好: 吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby" checked="checked"> 打豆豆 <inputtype="checkbox" name="hobby"> <br><!-- checkbox 复选框 可以实现多选 --><input type="submit" value="免费注册"><!-- 点击了后台按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --><input type="reset" value="重新设置"><!-- 重置按钮可以还原表单元素初始的默认状态 --><input type="button" value="获取短信验证码"> <br><!-- 普通按钮 button  后期结合js 搭配使用 -->上传头像: <input type="file"><!-- 文件域 使用场景 上传文件使用的 --></form>

10、 label标签、select下拉列表和textarea文本域

1、<label>标签【通过 for 值,找到 同值 的 id 值】<label for="text"> 用户名: </label> <input type="checkbox" id="text">【点击 用户名 ,多选框会选上,再次点击,取消选中】2、select下拉列表<select name="" id=""><option value="">北京</option><option value="">山东</option><option value="">天津</option><option value="" selected="selected">火星</option></select>【selected:打开直接选中】3、textarea文本域【可输入多行文本】<textarea name="" id="" cols="50" rows="5">请输入文字</textarea>【cols:显示行数、rows:每行字符数】

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

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

相关文章

计算机网络-各层协议

大家在搞嵌入式开发的时候基本都了解过七层网络协议、五层网络协议、四层网络协议&#xff0c;那么今天让我们更加的深入了解一下&#xff1a; 历史发展介绍 OSI七层模型由ISO国际标准化组织提出的通信标准。TCP/IP四层模型是OSI七层模型的简化版&#xff0c;OSI在它被官方完…

论文阅读1---OpenCalib论文阅读之factory calibration模块

前言 该论文的标定间比较高端&#xff0c;一旦四轮定位后&#xff0c;可确定标定板与车辆姿态。以下为本人理解&#xff0c;仅供参考。 工厂标定&#xff0c;可理解为车辆相关的标定&#xff0c;不涉及传感器间标定 该标定工具不依赖opencv&#xff1b;产线长度一般2.5米 Fa…

浅谈WAF——守护网络安全的无形之盾

随着信息化时代的到来&#xff0c;网络已逐渐融入我们日常生活的方方面面。然而&#xff0c;与此同时&#xff0c;网络安全问题却也如影随形。为此&#xff0c;一种名为“Web应用防火墙”的工具应运而生&#xff0c;简称”WAF”。 WAF是什么&#xff1f; WAF&#xff08;Web …

实现LCM在docker之间的通信

目录 1.docker容器互联 新建网络 连接容器 2.设置环境变量 3.在两个docker之间实现通信 1.docker容器互联 新建网络 $ docker network create -d bridge test-net 连接容器 运行一个容器并连接到新建的 test-net 网络: $ docker run -itd --name lcm_1 --network tes…

通过iFrame嵌入Grafana页面或pannel

前言 在当前数据驱动的时代&#xff0c;有效地可视化和监控关键性能指标变得至关重要。Grafana&#xff0c;作为一个开源的监控解决方案&#xff0c;提供了强大的功能来呈现和分析数据&#xff0c;从而帮助用户及时洞察和响应各种情况。随着技术的不断发展&#xff0c;将这些信…

docker 容器添加指定网络地址

docker 容器添加指定网络地址 在搭建halo博客时&#xff0c;准备让 halo、mysql8.1、nginx 三个容器在同一个网段中&#xff0c;并指定IP。 实现docker内部容器之间网络互通。 查看容器网络信息命令 docker inspect 容器名各容器部署成功后网络效果如下&#xff1a; nginx …

直播美颜SDK开发指南:从零开始搭建主播美颜工具

本篇文章&#xff0c;笔者将带你从零开始&#xff0c;一步步搭建主播美颜工具的开发环境&#xff0c;介绍关键技术和步骤&#xff0c;助你打造出令人惊艳的直播美颜SDK。 第一步&#xff1a;环境搭建 在开始SDK的开发之前&#xff0c;确保你的开发环境准备就绪。选择一个适合的…

挑战Transformer的新架构Mamba解析以及Pytorch复现

今天我们来详细研究这篇论文“Mamba:具有选择性状态空间的线性时间序列建模” Mamba一直在人工智能界掀起波澜&#xff0c;被吹捧为Transformer的潜在竞争对手。到底是什么让Mamba在拥挤的序列建中脱颖而出? 在介绍之前先简要回顾一下现有的模型 Transformer:以其注意力机制而…

一文读懂数字工厂管理系统解决方案

随着科技的飞速发展&#xff0c;数字化转型已成为企业提升竞争力、优化运营管理的必由之路。数字工厂管理系统作为这一转型的核心组成部分&#xff0c;正逐渐受到业界的广泛关注。本文将深入探讨数字工厂管理系统解决方案的核心理念、功能模块、实施步骤及其对企业发展的影响。…

Kubernetes 核心实战之三(精华篇 3/3)

文章目录 6、Ingress ★6.1 安装 Ingress6.2 访问6.3 安装不成功的bug解决6.4 测试使用6.4.1 搭建测试环境6.4.2 配置 Ingress的规则6.4.3 测试I6.4.4 测试II6.4.5 路径重写6.4.6 限流 7. Kubernetes 存储抽象7.1 NFS 搭建7.2 原生方式 数据挂载7.3 PV 和 PVC ★7.3.1 创建 PV …

语义解析:连接自然语言与机器智能的桥梁

文章目录 01 语义解析的应用场景场景一&#xff1a;场景二&#xff1a; 02 语义解析和大模型的关系 语义解析技术可以提高人机交互的效率和准确性&#xff0c;在自然语言处理、数据分析、智能客服、智能家居等领域都有广泛的应用前景。特别是在大数据时代&#xff0c;语义解析能…

2024年甘肃省职业院校技能大赛 “信息安全管理与评估”赛项样题卷①

2024年甘肃省职业院校技能大赛 高职学生组电子与信息大类信息安全管理与评估赛项样题 第一阶段&#xff1a;第二阶段&#xff1a;模块二 网络安全事件响应、数字取证调查、应用程序安全第二阶段 网络安全事件响应第一部分 网络安全事件响应第二部分 数字取证调查第三部分 应用程…

[Linux进程(一)] 什么是进程?PCB的底层是什么?以及进程标识符pid与ppid

文章目录 1、前言2、描述进程 — PCB(os怎么管理进程呢)3、查看进程3.1 方法一3.2 方法二 4、系统调用获取进程标示符(PID)4.1 获取进程的ID4.2 获取进程的父进程ID 5、系统调用创建子进程-fork 1、前言 大家经常都在讲进程&#xff0c;而它到底是什么呢&#xff1f; 这里给大…

Android逆向学习(六)绕过app签名校验,通过frida,io重定向(上)

Android逆向学习&#xff08;六&#xff09;绕过app签名校验&#xff0c;通过frida&#xff0c;io重定向&#xff08;上&#xff09; 一、写在前面 这是吾爱破解正己大大教程的第五个作业&#xff0c;然后我的系统还是ubuntu&#xff0c;建议先看一下上一个博客&#xff0c;关…

Zookeeper设计理念与源码剖析

Zookeeper 架构理解 整体架构 Follower server 可以直接处理读请求&#xff0c;但不能直接处理写请求。写请求只能转发给 leader server 进行处理。最终所有的写请求在 leader server 端串行执行。&#xff08;因为分布式环境下永远无法精确地确认不同服务器不同事件发生的先后…

逐步分解,一文教会你如何用 jenkins+docker 实现主从模式

jenkins 主从模式想必大家都不陌生&#xff0c;大家在学习过程中为了学习方便都在自己本地搭建了 jenkins 环境&#xff0c;然后通过 javaweb 方式实现&#xff0c;对于 docker 下实现主从模式大家好像兴趣挺大。 今天就通过这篇文章给大家讲讲怎么玩&#xff0c;希望对大家有帮…

Vivado开发FPGA使用流程、教程 verilog(建立工程、编译文件到最终烧录的全流程)

目录 一、概述 二、工程创建 三、添加设计文件并编译 四、线上仿真 五、布局布线 六、生成比特流文件 七、烧录 一、概述 vivado开发FPGA流程分为创建工程、添加设计文件、编译、线上仿真、布局布线&#xff08;添加约束文件&#xff09;、生成比特流文件、烧录等步骤&a…

交叉编译ARM64架构electron详解

基本介绍 本文主要参考Electron官方文档中 构建说明 和 构建步骤(Linux) 在amd64环境内构建arm64的electron包。 如果是arm64环境请查看文章arm64架构编译electron长征路 一、环境说明 操作系统版本:统信1060 操作系统架构:amd64 内存:32G 如下图: electron版本:v25…

企业微信forMAC,如何左右翻动预览图片

1、control commandshifd 进入企业微信的debug调试模式 2、按照如下步骤选择 3、重启企业微信

【K8S 存储卷】K8S的存储卷+PV/PVC

目录 一、K8S的存储卷 1、概念&#xff1a; 2、挂载的方式&#xff1a; 2.1、emptyDir&#xff1a; 2.2、hostPath&#xff1a; 2.3、NFS共享存储&#xff1a; 二、PV和PVC&#xff1a; 1、概念 2、请求方式 3、静态请求流程图&#xff1a; 4、PV和PVC的生命周期 5、…