01.HTML基础命令笔记

目录

HTML结构

body内常用标签

常用

 div与span

img

a标签 超链接标签

其他格式标签

列表

表格

表单

select标签

label标签

textarea多行文本


HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML结构</title>
</head>
<body></body>
</html>

通常编辑器输入!,在按Enter或tab能xia显示(vs code和pycharm)

body内常用标签

常用

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s><p>段落标签</p><h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6><!--换行-->
<br><!--水平线--><hr>

 div与span

<div>标签用来定义一个块级元素,并无实际的意义</div>
<div>主要通过CSS样式为其赋予不同的表现</div>
<span>span标签用来定义内联(行内)元素,并无实际的意义</span><span>主要通过CSS样式为其赋予不同的表现</span>

img

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签 超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

<a href="http://www.taobo.com" target="_blank" >点我</a>

target:

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

其他格式标签

列表

1.无序列表

<ul type="disc"><li>第一项</li><li>第二项</li>
</ul>

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表

<ol type="1" start="2"><li>第一项</li><li>第二项</li>
</ol>

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd>
</dl>

结果为

表格

<table><thead><tr><th>序号</th><th>姓名</th><th>爱好</th></tr></thead><tbody><tr><td>1</td><td>Egon</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

表单

<form action="form_action.asp" method="get"><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" />
</form>

input

<input> 元素会根据不同的 type 属性,变化为多种形态。

type属性值表现形式对应代码
text单行输入文本<input type=text" />
password密码输入框<input type="password"  />
date日期输入框<input type="date" />
checkbox复选框<input type="checkbox" checked="checked"  />
radio单选框<input type="radio"  />
submit提交按钮<input type="submit" value="提交" />
reset重置按钮<input type="reset" value="重置"  />
button普通按钮<input type="button" value="普通按钮"  />
hidden隐藏输入框<input type="hidden"  />
file文本选择框<input type="file"  />

 属性说明:

  • name:表单提交时的“键”,注意和id的区别
  • value:表单提交时对应项的值
    • type="button", "reset", "submit"时,为按钮上显示的文本年内容
    • type="text","password","hidden"时,为输入框的初始值
    • type="checkbox", "radio", "file",为输入相关联的值
  • checked:radio和checkbox默认被选中的项
  • readonly:text和password设置只读
  • disabled:所有input均适用

select标签

<form action="" method="post"><select name="city" id="city"><option value="1">北京</option><option selected="selected" value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select>
</form>

属性说明:

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

label标签

定义:<label> 标签为 input 元素定义标注(标记)。
说明:

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同
<form action=""><label for="username">用户名</label><input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默认内容
</textarea>

属性说明:

  • name:名称
  • rows:行数
  • cols:列数
  • disabled:禁用

 

摘抄自:https://www.cnblogs.com/liwenzhou/p/7988087.html

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

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

相关文章

ios numlock_从“提示”框:默认情况下启用NumLock,无广告的iOS应用和立体声供电的派对灯...

ios numlockOnce a week we round up some of the great tips readers have sent into the tip box. This week we’re looking at how to enable the NumLock by default, stripping ads from iOS apps, and turning Christmas lights into audio-responsive party lights. 每…

Windows 7 自动更新失败导致无法进系统解决方案

故障现象&#xff1a;自动更新后&#xff0c;重启电脑&#xff0c;提示&#xff1a;&#xff08;配置Windows update 失败 还原更改 请勿关闭计算机&#xff09;&#xff0c; 而计算机一直停留该界面&#xff0c;如果半个小时以上都无反应。此时&#xff0c;就不要再继续等待了…

PaperWeekly 第28期 | 图像语义分割之特征整合和结构预测

“ 余昌黔 华中科技大学硕士 研究方向为图像语义分割 知乎专栏 https://zhuanlan.zhihu.com/semantic-segmentation 前言 近来阅读了 PASCAL VOC 2012 排行榜上前几的文章&#xff0c;包括 PSPNet 和林国省老师的几篇论文&#xff0c;觉得现在在 semantic segmentation 领域对于…

02.CSS基础笔记及导入

CSS是什么 CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;它就会按照这个样式表来对文档进行格式化&#xff08;渲染&#xff09;。 CSS样式 CSS引入HTML 内部样式与外部样式 <!DOCTYPE> …

如何还原桌面图标_如何为Windows 10桌面图标还原或更改文本的默认外观?

如何还原桌面图标For whatever reason, sooner or later we all have someone or something mess around with our keyboards and create ‘interesting’ results. With that in mind, today’s SuperUser Q&A post has a simple and elegant way to help a frustrated re…

「前端早读君007」css进阶之彻底理解视觉格式化模型

今日励志 不论你在什么时候开始&#xff0c;重要的是开始之后不要停止。 前言 对于部分前端工程师来讲&#xff0c;有时候CSS令他们很头疼&#xff0c;明明设置了某个样式&#xff0c;但是布局就是不起作用。 如果你也有这种问题&#xff0c;那么是时候学习下什么是css视觉格式…

.NET周报【11月第3期 2022-11-22】

国内文章.NET Conf China 2022 第一批讲师阵容大揭秘&#xff01;整个期待了&#xff01;https://mp.weixin.qq.com/s/4p89hhBPw6qv-0OB_T_TOg目光看过来 2022 年 12 月 3-4 日&#xff0c;一场社区性质的国内规模最大的 线上线下.NET Conf 2022 技术大会 即将盛大开幕。目前大…

解读Facebook CAN:如何给人工智能赋予艺术创作的力量

雷锋网 AI 科技评论按&#xff1a;能够迭代进化、模仿指定数据特征的GAN&#xff08;生成式对抗性网络&#xff09;已经是公认的处理图像生成问题的好方法&#xff0c;自从提出以来相关的研究成果不少&#xff0c;在图像增强、超分辨率、风格转换任务中的效果可谓是惊人的。 &a…

全向轮底盘磁导轨寻迹

全向轮底盘上安装两条磁传感器带用于磁导轨寻迹 如简图所示&#xff0c;两条与Y直线相交的黑色线条我们认为是两条磁检测传感器带 矢量方法修正车体位置 定义轨道左为负向&#xff0c;轨道右为正向。传感器左检测为负&#xff0c;右检测为正&#xff1b; 定义底盘坐标系为αβ&…

02-1.CSS边框,边界,布局相关笔记

目录 CSS盒子模型 padding内填充 边框 边框属性 border-radius margin外边距 CSS盒子模型 Content(内容): 盒子的内容&#xff0c;显示文本和图像 >>>>类似word 文字A&#xff0c;改变字体与大小padding: 用于控制内容与边框之间的距离 …

android仿ios弹框_在“提示”框中:iOS外观(在Android上运行),Google Maps作为Time Machine,下载Wii游戏保存...

android仿ios弹框Once a week we round up some great reader tips and share them with everyone. Read on to see how to make your Android phone look like iOS, use a Google Maps mashup like a time machine, and download Wii game saves. 每周一次&#xff0c;我们收集…

使用 C# 开发的摸鱼背单词软件 ToastFish

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具和组件&#xff0c;希望对您有用&#xff01;摸鱼神器ToastFish 是一个使用 C# 开发的桌面软件&#xff0c;由 Uahh 开发&#xff0c; 这是一个利用Windows通知栏背单词的软件&…

03.JavaScript对DOM操作

JavaScript引入方式 外部引入 在head或者body中&#xff0c;添加以下代码 <script type"text/javascript" src"js/demo.js"></script> 内部引入 在head或body中&#xff0c;定义script标签&#xff0c;然后在script标签里面写js代码 <…

kotlin的suspend对比csharp的asyncawait

协程的出现大大降低了异步编程的复杂度&#xff0c;可以让我们像写同步代码一样去写异步代码&#xff0c;如果没有它&#xff0c;那么很多异步的代码都是需要靠回调函数来一层层嵌套&#xff0c;这个在我之前的一篇有介绍 rxjava回调地狱-kotlin协程来帮忙本篇文章主要介绍kotl…

file协议 控制面板_如何在Windows File Explorer导航窗格中显示控制面板和回收站

file协议 控制面板By default, the Windows File Explorer’s sidebar is divided into big categories like Quick Access, This PC, Network, and so on. But a quick setting change can make your navigation pane look a bit more like the traditional tree you’d see i…

过滤器(Filter)

1 什么是过滤器 过滤器JavaWeb三大组件之一&#xff0c;它与Servlet很相似&#xff01;不它过滤器是用来拦截请求的&#xff0c;而不是处理请求的。 当用户请求某个Servlet时&#xff0c;会先执行部署在这个请求上的Filter&#xff0c;如果Filter“放行”&#xff0c;那么会继…

发布适用于 .NET 7 的 .NET MAUI

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;6分钟)我们在六个月前向您介绍了 .NET 多平台应用程序 UI (MAUI)&#xff0c;现在我们很高兴地宣布 .NET MAUI 在我们的下一个主要版本 .NET 7 中普遍可用。在此短的时间范围内&#xff0c;我们在 .NET MAUI 中的主要…

03:数据结构 栈、队列、链表与数组

算法其他篇 目录&#xff1a; 1.1 数据结构中的一些概念1.2 栈&#xff08;stack&#xff09;1.3 队列1.4 链表1.5 python中字典对象实现原理1.6 数组1.1 数据结构中的一些概念 返回顶部 1、数据结构是什么 1、简单来说&#xff0c;数据结果就是设计数据以何种方式存储在计…

力登:以智能化管理提升数据中心服务能力成熟度

2017年2月28日&#xff0c;由全国信息技术标准化技术委员会信息技术服务分技术委员会指导的《信息技术服务数据中心服务能力成熟度模型》发布&#xff0c;在业界首次提出“数据中心服务能力成熟度”概念&#xff0c;使得数据中心的管理真正实现了数字化和持续优化&#xff0c;是…

基于.NET 7 的 WebTransport 实现双向通信

Web Transport 简介WebTransport 是一个新的 Web API&#xff0c;使用 HTTP/3 协议来支持双向传输。它用于 Web 客户端和 HTTP/3 服务器之间的双向通信。它支持通过 不可靠的 Datagrams API 发送数据&#xff0c;也支持可靠的 Stream API 发送数据。因为 HTTP/3 使用了基于 UDP…