HTML(基础语法)(1)

标题标签
h1~h6双标签
h1一个网页只能用一次
其他可多次使用

段落标签
p

换行<br>            

水平线<hr>

文本格式化标签 
加粗 strong /b
倾斜 em/i
下划线 ins/u
删除线 del/s

图片标签
<img src="图片">
 src用于指定图片的位置和名称
./开头,有提示功能
 alt替换文本,图片无法显示时显示的文本
title提示文本,鼠标悬停显示的文本
width图片宽度
height图片高度
用空格隔开

相对路径
从当前文件位置出发
绝对路径
从盘符出发
. 当前文件所在文件夹
.. 当前文件上一级文件夹
/ 进入某个文件夹里面


超链接
<a href="地址">跳转到</a> 
<a href="地址" target="_blank"></a> 打开新窗口,不覆盖前网页

href属性值为#,表示空链接,不会跳转

音频标签
<audio src="音频"></audio>
<audio src="" controls  loop></audio>
control是controls="control"的简写,控制面板
loop循环播放
autoplay 自动播放

视频标签
<video src="视频"></video>
controls
loop
muted 静音播放
autoplay浏览器支持静音状态自动播放


列表
无序 列表
<ul>
    <li></li>

    <li></li>

    <li></li>
</ul>
有序列表
<ol>
    <li></li>
</ol>
定义列表
<dl>
    <dt>
        <dd></dd>
        <dd></dd>
    </dt>
</dl>

表格
table 表格
tr 行
th 表头单元格
td 内容单元格
<table> 
        <tr></tr>
</table>

thead 表格头部
tbody 表格主体
tbody 表格底部

合并单元格
跨行合并rowspan
跨列合并colspan

表单
登录页面
注册页面
搜索页面
input标签基本使用
type属性不同,功能不同
<input type="...">

type属性值
text 文本框
password 密码框
radio 单选项
checkbox 多选项
file 上传文件


提示文字:<input type="text">

input标签占位文本
placeholder框内灰色文字

单选项radio
name 控件名称
checked 默认选中

性别:
<input type="radio" name="gender">男
<input type="radio" name="gender"  checked>女

上传文件file 
上传多个文件
上传文件<input type="file" multiple>

多选框checkbox
默认选中 checked
<input type="checkbox">1
<input type="checkbox" checked>2
<input type="checkbox">3

下拉菜单
select嵌套option,select是下拉菜单正题,option是下拉·菜单的每一项
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>武汉</option>
</select>

selected 默认选项

文本域
多行输入文本的表单控件
<textarea>请输入评论</textarea>
右下角有拖拽功能,未来禁用

label标签
扩大表单控件的选择范围
<label></label>
写法一:
label标签只包裹内容,不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man"> <label for="man">男</label>
方法二:
<label><input type="radio" name="gender">女<label>

按钮button
<button type="">按钮<button>
type属性值
submit 提交按钮
reset 重置按钮
button 普通按钮
 如果省略type属性,功能也是提交

form表单区域
action发送数据的地址
<form  action="">
    用户名:<input type="text">
    <br></br>    
    密码:<input type="password">
    <br></br>
    <button type="submit">提交<button>
    <button type="reset">重置<button>
    <button type="button">普通按钮<button>
</form>

无语义的布局标签
布局网页
div 独占一行
span 不换行
 
字符实体
 显示预留字符
&nbsp 空格
&lt <
&gt >


<h2>注册信息</h2>
<form action="">
    <label>姓名:</label><input type="text" placeholder="请输入真实姓名">
    <br></br>
    <label>密码:</label><input type="password" placeholder="请输入密码">
    <br></br>
    <label>确认密码:</label><input type="password" placeholder="请输入密码">
    <br></br>
    <label><input type="radio" name="gender">男</label>
    <label><input type="radio" name="gender"checked>女
</ label>
    <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
    </select>
    <textarea></textarea>
    <br></br>
    <label type="checkbox">已阅读并同意以下协议:</label>
         <ul>
        <li><a href="#">《用户服务协议》</a></li>
        <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
</form>
 

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

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

相关文章

【选型推荐】洁净室( 区) 悬浮粒子的测试方法及仪器选型

环境监测承担着环境污染控制措施有效性的评判者的角色。其本身不是一个控制措施&#xff0c;环境监测本身并不能够改变环境指标&#xff0c;降低污染。一个有效的环境监测体系是能反映洁净区内的粒子和微生物的真实水平。确认环境是否满足法规的要求&#xff0c;同时给予污染控…

【Java 演示灵活导出数据】

演示灵活导出数据 &#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;【小吴小吴bug全无开通公众号】关注公众号获取第一时间博客动态 背景今天临时起兴打开稀土掘金导航栏看到页面推广gitee项目恰巧最近也在学习python了解到python爬虫很厉害&…

java基础之特殊类枚举

一、什么是枚举 枚举是JDK5新增特性&#xff0c;用来表示一组常量值&#xff0c;比如一年由四个季节&#xff0c;一年中有12个月份&#xff0c;、订单有未付款​、已付款、已发货、已收货状态等。 二、枚举的好处 ​用枚举来表示组常量值&#xff0c;可以避免非法值。 publ…

# 从浅入深 学习 SpringCloud 微服务架构(十八)

从浅入深 学习 SpringCloud 微服务架构&#xff08;十八&#xff09; 一、开源配置中心 Apollo&#xff1a;概述 1、开源配置中心 Apollo Apollo -A reliable configuration management system Apollo(阿波罗)是携程框架部门研发的分布式配置中心&#xff0c;能够集中化管理…

一篇文章告诉你:通信网优比计算机岗位好在哪?

据优橙2023年就业人员专业分布统计&#xff0c;通信专业学员占比32.7%&#xff0c;非通信专业学员占比64.8%&#xff0c;其他占比2.5%。 可见从事网优的学员中大部分为非通信专业。而非通信专业中72%的学生在学习通信网优还是计算机专业中&#xff0c;选择了通信网优。 为什么越…

解决:el-image标签嵌套在table中样式穿透

el-image标签嵌套在table中样式穿透 ::v-deep .el-table__cell {position: static !important; // 解决el-image 和 el-table冲突层级冲突问题 }

聚焦光量子应用开发!Quandela 发布新版量子计算云服务

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;1200字丨5分钟阅读 摘要&#xff1a;法国光量子计算公司 Quandela宣布推出新版量子计算云服务 Quandela Cloud 2.0&#xff0c;通过创新技术确保量…

很难找到全的!150个软件测试领域专业术语汇总

1. 单元测试&#xff08;Unit Testing&#xff09;&#xff1a;对软件中的最小功能单元&#xff08;通常是函数或方法&#xff09;进行测试&#xff0c;以验证其是否按预期工作。 2. 集成测试&#xff08;Integration Testing&#xff09;&#xff1a;测试不同模块之间的交互…

编程经验总结

1.一个变量在一个函数里&#xff0c;但另一个函数也想用这个变量。 解决&#xff1a;那就把这个变量拿出来去作全局变量。

Python 运筹优化13 Thompson Sampling 解读

说明 这部分应该是Multi-Armed Bandit的最后一部分了。 内容 1 On Line Ads 这个实验&#xff0c;最初的目的就是为了选出最佳的广告。首先&#xff0c;通过伯努利分布&#xff0c;模拟了某个广告的有效率。在真实场景里&#xff0c;我们是无法知道那个广告更好的。可能在t…

kafka安装部署

kafka 官网下载&#xff1a; kafka https://downloads.apache.org/kafka/3.7.0/zookeeper https://downloads.apache.org/zookeeper/ run kafkazookeeper&#xff0c;conf目录下创建zoo.cfg&#xff0c;运行bin目录下的zkServer脚本文件 kafka eagle 参考&#xff1a;htt…

java springboot连接sqlserver使用

pom.xml增加sqlserver驱动 <dependency><groupId>com.microsoft.sqlserver</groupId><artifactId>mssql-jdbc</artifactId><version>9.4.0.jre8</version></dependency>application.yml配置文件 server:port: 9001 #spring: …

sklearn.preprocessing.normalize()

sklearn.preprocessing.normalize()是Scikit-learn库中的一个函数&#xff0c;用于对特征向量进行归一化处理。归一化的目的是将每个样本的特征向量缩放到单位范数&#xff08;即长度为1&#xff09;。 normalize函数的主要参数包括&#xff1a; X&#xff1a;要归一化的数组…

【Vue】vue项目中使用百度地图教程

在Vue项目中显示百度地图&#xff0c;你需要遵循以下步骤&#xff1a; 1. 注册百度开发者账号并获取API密钥2. 在Vue项目中引入百度地图API3.在Vue组件中创建地图容器4. 在Vue组件中初始化地图5. 添加其他地图组件&#xff08;可选&#xff09;6. 处理地图事件&#xff08;可选…

C# 结构体数组内指定字段的升序、降序排列

目录 实现目标 结构体定义 升序排列 方法一&#xff1a;使用Array.Sort配合自定义比较器 方法二&#xff1a;使用LINQ的OrderBy 降序排列 方法一&#xff1a;使用Array.Sort配合自定义比较器 方法二&#xff1a;使用LINQ的OrderBy 实现目标 要对结构体数组按照其成员字…

【Power BI】DAX语言 VS Power Query M语言

DAX&#xff08;Data Analysis Expressions&#xff09;和Power Query M语言是Microsoft Power BI和Excel中的两种强大的数据处理和分析工具。尽管它们在许多方面都有重叠之处&#xff0c;特别是用于数据建模和数据转换&#xff0c;但它们在用途、语法和功能上有显著的区别。本…

CSPM是否可以申请职称?解答来了

在当今项目管理领域&#xff0c;PMP证书与CSPM证书都是备受认可的专业证书。CSPM证书不等于职称&#xff0c;不过CSPM证书有国家标准作为背书&#xff0c;《项目管理专业人员能力评价要求》国家标准可作为各省市区县开展项目管理专业人才引进、培养、职称评定和任用等工作的依据…

嵌入式单片机笔试题

DC-DC 和 LDO两者有何区别&#xff1f; DC-DC转换器&#xff08;直流-直流转换器&#xff09;和LDO&#xff08;低压差线性稳压器&#xff09;都是用于电源管理的设备&#xff0c;但它们在原理和特性上有一些显著的区别&#xff1a; 原理&#xff1a; DC-DC转换器通过改变输…

Linux 第二十七章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

格式化容量或速度

枚举 StorageSpeedUnit enum StorageSpeedUnit{NUMERIC,STORAGE,SPEED; }日志 Loggable public static void logger(String pattern,Object... paramArray) {String cls MethodHandles.lookup().lookupClass().getName();System.Logger logger System.getLogger(cls);Strin…