嵌入式学习day38 HTML

1.格式
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8"> 
        <title>中文测试。。。。</title>
    </head>
    <body>
        这里是测试body测试内容。。。
    </body>
</html>

2.标签 在body内
<h1></h1>双标签 标题 ,加粗,换行  1-6 ---》小
<p></p> 双标签  段落,有换行功效
<hr> 单标签  左到右分割符
<!--    -->注释


3,元素的属性
给元素提供更多的属性,大部分的元素属性
语法:<标签 属性1=参数1>
1)align left,right,center
2) bgcolor ,body的属性设置网页的背景色
<body bgcolor="0x00ff1234">
4,文本元素属性
b 元素 <b>内容</b> 加粗
br 换行<br> 如果是p标签中间有间隔
i元素, 字体倾斜<i></i>
del元素 删除文字<del></del>
strong  强调一段文字,效果类似 b标签
u元素,下划线<u></u>
small元素, 超小字体<small></small>
sub 下标<sub></sub>
sup  上标<sup></sup>
<br>h<sub>2</sub>0
        <br>100m<sup>2</sup>
ruby,拼音,<ruby>二姐 <rt>(er) (jie)<rt></ruby>,可能部分浏览器不支持。
make 元素 <mark> </mark> 加黄色背景

5超链接
5种形式
1,链接外部网站
2,链接本地文件
3,图片链接
4,电子邮件链接打开电子邮件
5,下载文件链接

        <a href="http://www.baidu.com">baidu</a>
        <br><a href="1.html">1111</a>
        <br><a href="1.html"><img src="abc.jpg"></a>
        <br><a href="mailto:123@13.com">contract me</a>
        <br><a href="abc.jpg">下载</a>
上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>

6 img 单标签
src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh
<img src="abc.jpg" alt="美女" width="100" height="200"> px
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的, 高度百分比无效的
    
7列表
有序列,无需序列
自定义列表
无序列表 前面无数字
<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
</ul>
有个type属性 文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块
有序列,前面有数字

<ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
</ol>
其中可以放文字,图片,或链接
有type属性,设置排序使用什么数字

表格的构成,
    table,外框
    tr 行
    td 列
    <table>
        <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
        <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
        <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        3行 3列

表格的属性
 border 边框粗细
 th,是tr的属性,列标题,自动居中,加粗
 colspan,横向合并单元格,需要 整形参数
    <tr><th colspan="3">name</th></tr> 
表格的合并
rowspan ,列项合并,整数参数
caption 给表格加标题 子属性
表格还有3个字属性
thead 都是双标签
tbody
tfoot
这些属性,后期主要和css,js配合使用
9 html 实体
用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

10 style 元素,html样式
引入样式的三种方法
1),外部样式 需要css
<link rel="stylesheet" type="text/css" href="">
2)内部样式 <style type="text/css" ></style>
样式需要放在<head></head>之间,这个属于布局。
3).内联样式<p style="color:red"></p> 单独的设置一个


11. div布局 需要配合css样式设置
9.html
12 通用属性
每个元素都用
    id属性,指定元素的标识符,唯一性。
    class 指定类型名,归类,统一设置共同的属性
    title 当鼠标移动到元素的时候显示的内容
    dir 用于控制显示输出的方向
    <bdo dir="rtl">123456</bdo>
    style 样式设置
    
12,表单    传递参数,数据
<form>
</form>
    <!-- 表单中重要的字元素 input button -->
<!-- 属性 action,指定表单发送的地址 -->
<!-- 属性 method 发送的方式 get,post -->
<!--get方法 数据会附加到url的后面传递给服务器 默认-->
<!--post,将数据包大包发给服务器,等候服务器来读取 -->
13,input元素,(输入框)他是表单的一个字属性
    指定表单中的内容项,比如输入内容的文本框
    可以指定表单属性,也可以放在表单的外面。
    input元素的属性:
        type,指定输入框的类型,text单行文本,password密码,submit提交按钮,
        reset,重置按键,button按键,普通的按键需要和特定的时间关联。
        image:图片式按键
        hidden:隐藏字段,该内容不显示在页面上,提交其他的一些变量。
        email: 是一个邮箱类型,新特性,可能支持有差异
        required:表示内容必须填写,不然不能提交。
    name:名称,输入内容识别名称,传递参数时候的参数名称
    value: 默认值,输入框默认填入的内容,
    maxlength,指定最大长度
    placeholder,设置提示信息的。

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

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

相关文章

Ubuntu 安装 KVM 虚拟化

1. Ubuntu 安装 KVM 虚拟化 KVM 是 Linux 内核中一个基于 hypervisor 的虚拟化模块&#xff0c;它允许用户在 Linux 操作系统上创建和管理虚拟机。 如果机器的CPU不支持硬件虚拟化扩展&#xff0c;是无法使用KVM(基于内核的虚拟机)直接创建和运行虚拟机的。此时最多只能使用…

flink重温笔记(十七): flinkSQL 顶层 API ——SQLClient 及流批一体化

Flink学习笔记 前言&#xff1a;今天是学习 flink 的第 17 天啦&#xff01;学习了 flinkSQL 的客户端工具 flinkSQL-client&#xff0c;主要是解决大数据领域数据计算避免频繁提交jar包&#xff0c;而是简单编写sql即可测试数据&#xff0c;文章中主要结合 hive&#xff0c;即…

初探文件包含漏洞

目录 1.什么是文件包含漏洞2.漏洞分类3.php中常见的文件包含函数4.文件包含漏洞的绕过方法4.1本地文件包含&#xff08;LFI&#xff09;绕过方法&#xff1a;4.2远程文件包含&#xff08;RFI&#xff09;绕过方法&#xff1a; 5.对于文件包含漏洞的防御措施 1.什么是文件包含漏…

SpringBoot3整合Elasticsearch8.x之全面保姆级教程

整合ES 环境准备 安装配置ES&#xff1a;https://blog.csdn.net/qq_50864152/article/details/136724528安装配置Kibana&#xff1a;https://blog.csdn.net/qq_50864152/article/details/136727707新建项目&#xff1a;新建名为web的SpringBoot3项目 elasticsearch-java 公…

Hive实现查询左表有右表没有的记录

工作中遇到这样一个场景&#xff0c;业务逻辑是&#xff1a;如果一个主体发生了某一问题&#xff0c;就不再统计该主体的其他问题。 思路&#xff1a;首先想到的方法就是not in方法&#xff0c;但是Hive并不不支持。那么使用left join对两个表进行连接&#xff0c;右表主键为空…

uploads-labs靶场(1-10关)

一、搭建环境: 下载upload-labs源代码 下载链接&#xff1a;https://codeload.github.com/c0ny1/upload-labs/zip/refs/heads/master 将压缩包解压后的文件名改为upload-labs&#xff0c;然后放入phpstudy\www目录下 二、关卡通关: 1、pass-01&#xff08;前端绕过&#xf…

B. Array Fix

思路&#xff1a;我们倒着看&#xff0c;首先判断以下当前元素有没有被操作过&#xff0c;被操作过的话&#xff0c;那么需要改为操作后的数&#xff0c;然后跟当前数的前一个数进行比较&#xff0c;如果a[i] < a[i - 1]的话&#xff0c;那么需要将a[i - 1]拆分&#xff0c;…

【SpringBoot】头条新闻项目实现CRUD登录注册

文章目录 一、头条案例介绍二、技术栈介绍三、前端搭建四、基于SpringBoot搭建项目基础架构4.1 数据库脚本执行4.2 搭建SprintBoot工程4.2.1 导入依赖:4.2.2 编写配置4.2.3 工具类准备 4.3 MybatisX逆向工程 五、后台功能开发5.1 用户模块开发5.1.1 jwt 和 token 介绍5.1.2 jwt…

huawei services HK华为云服务

huaweiserviceshk是一种云计算服务&#xff0c;为华为云服务用户提供了多种服务&#xff0c;包括云服务器、数据库、存储、网络等&#xff0c;用户可以根据自己的需求选择不同的服务并支付相应的费用 如何付费呢&#xff0c;这里可以使用441112&#xff0c;点击获取 卡片信息在…

Makefile+OpenOCD开发STM32

准备工作 平台&#xff1a;Windows11&#xff08;Linux&#xff0c;MAC同理&#xff09; 编译链&#xff08;arm-none-eabi-gcc&#xff09;&#xff1a;Downloads | GNU Arm Embedded Toolchain Downloads – Arm Developer 下载对应平台工具链并添加到环境变量&#xff0c…

springboot+poi-tl根据模板导出word(含动态表格和图片),并将导出的文档压缩zip导出

springbootpoi-tl根据模板导出word&#xff08;含动态表格和图片&#xff09; 官网&#xff1a;http://deepoove.com/poi-tl/ 参考网站&#xff1a;https://blog.csdn.net/M625387195/article/details/124855854 pom导入的maven依赖 <dependency><groupId>com.dee…

hcie数通和云计算选哪个好?

1. 基础知识与技能要求 数通技术是网络技术的核心&#xff0c;它涉及到网络协议、路由交换、网络安全等多个方面。如果你是一名网络工程师或开发者&#xff0c;想要在数通领域有所建树&#xff0c;你需要具备扎实的基础知识和丰富的实战经验。 云计算则更注重于虚拟化、存储、网…

基于openCV实现的单目相机行人和减速带检测

概述 在计算机视觉项目中&#xff0c;相机标定是一项至关重要的任务&#xff0c;因为它可以校正相机内部参数&#xff0c;消除因镜头畸变等因素导致的图像失真&#xff0c;从而提高后续图像处理和分析的精度。在这个项目中&#xff0c;相机标定的核心功能集成在名为calibratio…

redis的安装与string类型

1. redis的安装 1.1 升级gcc版本 因为centos7.x的gcc版本还是4.8.5&#xff0c;而编译指定的版本是需要5.3以上。 环境部署与安装scl源 yum install gcc cmake -y --部署安装环境 yum install centos-release-scl scl-utils-build -y --安装scl源 安装gcc新版本 yum -y ins…

还原wps纯粹的编辑功能

1.关闭稻壳模板&#xff1a; 1.1. 启动wps(注意不要乱击稻壳模板&#xff0c;点了就找不到右键菜单了) 1.2. 在稻壳模板选项卡右击&#xff1a;选不再默认展示 2.关闭托盘中wps云盘图标&#xff1a;右击云盘图标/同步与设置&#xff1a; 2.1.关闭云文档同步 2.2.窗口选桌面应用…

Vue2+ElementUI表单、Form组件的封装

Vue2ElementUI表单、Form组件的封装 &#xff1a;引言 在 Vue2 项目中&#xff0c;ElementUI 的 el-form 组件是常用的表单组件。它提供了丰富的功能和样式&#xff0c;可以满足各种需求。但是&#xff0c;在实际开发中&#xff0c;我们经常会遇到一些重复性的需求&#xff0c…

16.WEB渗透测试--Kali Linux(四)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;15.WEB渗透测试--Kali Linux&#xff08;三&#xff09;-CSDN博客 1.crunch简介与使用 C…

分布式CAP理论

CAP理论&#xff1a;一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容错性&#xff08;Partition tolerance&#xff09;。是Eric Brewer在2000年提出的&#xff0c;用于描述分布式系统基本性质的定理。这三个性质在分布式系统…

SQLZoo:SELECT from WORLD Tutorial/zh

name continent area population gdp Afghanistan Asia 652230 25500100 20343000000 Albania Europe 28748 2831741 12960000000 … name:國家名稱 continent:洲份 area:面積 population:人口 gdp:國內生產總值 Country Profile 在這教程中&#xff0c;我們會使用SELECT語句&…

python pytest 最简单的接口自动化测试框架

最近由于工作的原因&#xff0c;需要开发一个接口自动化测试框架&#xff0c;使用pytest框架、数据驱动&#xff0c;并展示直观的测试报告。 具体的开发过程如下&#xff1a; 安装必要的库&#xff1a; pytest&#xff1a;用于编写和运行测试用例。requests&#xff1a;用于发…