HTML一篇通

在Windows11上安装ubuntu版linux系统并实现桌面图形化(WSL) 在Windows11上安装ubuntu版linux系统并实现桌面图形化(WSL),xfce桌面美化、安装google-chrome 阅读详情

目录

HTML全部标签都可使用的属性

HTML事件属性

 基础标签介绍

关于文本的标签:

 ​​​​p - 段落标签

​编辑

 sub -- sup  上下标标签

  del  -  ins  -  u  -  s 标签介绍

 textarea 文本框标签

​编辑

  blockquote 引用标签

​编辑

 abbr 缩写表述标签

 cite 定义作品标题标签

​编辑

 address 存放作者联系人信息标签

 code  存放代码的标签

 pre -- small -- b -- i -- q -- bdo -- bdi -- time -- mark -- span 文本标签

​编辑

 video  -  audio  标签介绍:

 图片相关标签介绍:

 form  表单介绍

ul  --  ol  列表标签介绍

 input 标签介绍:

输入框相关

  多选框

单选框

 文件选择相关

提交按钮相关

时间选择标签

值选择框:

按钮:

颜色选择标签: 

隐藏的标签: 

 其他标签介绍:

br 换行标签

hr 下划线标签

 header - main - footer 页眉-主体-页脚标签介绍

 div 区域标签

 h1  -  h6  标题标签

hgroup

 a  超链接标签

nav 导航条标签

 script  -  noscript 脚本标签

button 按钮标签

 progress  -  meter  进度标签

 fieldset - legend 标签

下拉选项列表相关

 object 文件载入标签 和 param 对载入文件进行设置标签

label 标记标签

datalist 数据列表标签

 figure -- figcaption 标签

字体注音标签

dl - dt - dd 标签

template 隐藏标签介绍

article 标签

section 标签

  表格标签相关


 

 

HTML全部标签都可使用的属性

属性

描述

accesskey

设置访问该元素的键盘快捷键。

语法: <元素标签 accesskey="快捷键字符" >

如:<a href="//www.baidu.com" accesskey="h"> 按住alt+h跳转到百度 </a>

激活方法: IE--Chrome = Alt + 定义的快捷键字符
                 Firefox = Alt + Shift + 定义的快捷键字符

class

规定元素的类名(classname)

语法:<元素标签 class="string">

如:<h1 class="intro">标题 1</h1>

name

给元素取一个名字(name)

语法:<元素标签 name="string">

如:<h1 id="intro">标题 1</h1>

id

给元素设置一个id(id 在 HTML 文档中必须是唯一的。)

语法:<元素标签 name="string">

如:<h1 id="intro">标题 1</h1>

dir

设置元素中内容的文本方向。

语法:<元素标签 dir="ltr | rtl | auto">  ltr (从左向右)  rtl (从右向左)  auto (让浏览器判断)

如:<bdo dir="rtl">文本方向从右到左!</bdo>

hidden

对元素进行隐藏。

语法:<元素标签 hidden>

如:<p hidden>这是一段隐藏的段落。</p>

lang

告诉元素该标签内的内容是什么语言

语法:<元素标签 lang="en">

如:<p lang="en">asd</p>

spellcheck

检测元素是否拼写错误

语法:<元素标签 spellcheck="true|false"> true为开启检查,false为关闭

如:<p spellcheck="true">asb</p>

contenteditable

当属性值为true时,可对该标签的文本进行编辑操作

语法:<元素标签  contenteditable="true|false">

如:<p contenteditable="true">这是一个可编辑段落。</p>

title

规定元素的额外信息(可在工具提示中显示)

语法:<元素标签  title="string">

如:<p title="菜鸟">小菜鸟</p>

style

给该元素设置样式,一个或多个由分号分隔的 CSS 属性和值。 

如:<h1 style="color:blue;text-align:center">这是一个标题</h1>

data-*

用于存储页面的自定义数据

draggable

该属性可以规定该标签是否可以拖动(移动)

语法:<元素标签  draggable="true|false"> true为可移动

如:<p draggable="true">这是一段可移动的段落。</p>

HTML事件属性

事件属性描述

ondblclick

当对该元素进行双击鼠标时运行指定函数
如: <button οndblclick="函数名">复制文本</button>  

onclick

当对该元素进行单击鼠标时运行指定函数
如: <button οnclick="函数名">复制文本</button>

onsubmit

当提交表单时运行指定函数
如: <form action=" " οnsubmit="函数名">

onresize

当调整窗口大小时运行指定函数
如: <body οnresize="函数名">

 基础标签介绍

<!DOCTYPE html>  <!-- 声明标签,告诉浏览器我们的html文件是什么版本的,html是HTML5版本的 -->

<html lang="en"> <!--html标签,表示该文档是html文档-->

<head> <!-- <head> 元素是所有头部元素的容器。-->

    <meta charset="UTF-8">
    <!--meta标签为定义文档的一些内容。该标签不会显示在页面中,通常用于指定网页的描述,关键词,
    文件的最后修改时间,作者及其他元数据。charset="UTF-8" 指定该文档使用的编码-->

    <meta http-equiv="refresh" content="30">    <!--refresh 定义刷新设置,指定每隔30秒刷新一次页面-->

    <meta name="author" content="Hege"> <!--author 定义作者标签,content=规定文档的作者的名字。-->

    <meta name="description" content="Free web tutorials"><!--
    规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。-->

    <meta name="keywords" content="HTML, meta tag, tag reference"><!--
    	规定一个逗号分隔的关键词列表 - (告诉搜索引擎页面是与什么相关的)。
    	总是规定关键词(对于搜索引擎进行页面分类是必要的)。-->

    <title>Title</title>
    <!--<title> 标签定义文档的标题,会显示在工具栏中和收藏夹还有引擎搜索结果中-->

    <base href="http://www.runoob.com/images/" target="_blank">
    <!-- 规定页面上所有链接的默认 URL 和默认的target,该标签只可使用一次,应在head内使用,
     这样在文本中就算链接标签没有设置target他也会给他们自动添加一个target-->


    <link rel="stylesheet" type="text/css" href="theme.css"> <!-- 
      <link> 标签定义文档与外部资源的关系。此元素只能存在于 head 部分;   
      rel="stylesheet" 	要导入的样式表的 URL。  ;
      type="text/css"  这个标签链接的内容的类型  ;  href="theme.css"  url或文件的地址 -->

    <style >
    h1 {color:red;}
    p {color:blue;}
    </style><!--style 样式标签,可在此标签内定义你想要的元素样式-->

</head>

<body>  <!-- body主体标签。对主文的设置都在该标签内 -->

</body>

</html>

关于文本的标签:

 ​​​​p - 段落标签

<p> 段落标签 </p> <!-- 段落标签,标签的前后会自动添加换行 -->


 sub -- sup  上下标标签

<p>这个文本包含 <sub>下标</sub>文本。</p><br>
<!--sub该标签内的内容会变成下标,文本会比普通文本矮半截-->

<p>这个文本包含 <sup>上标</sup> 文本。</p><br>
<!--sup该标签内的内容会变成上标,文本会比普通文本高半截-->


  del  -  ins  -  u  -  s 标签介绍

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <!--<del> 标签定义文档中已删除的文本。
<ins> 标签定义已经被插入文档中的文本。两标签一般搭配出现 -->

<u>text</u><br>   <!--u标签会为其中的内容添加下划线-->

<s>My car is blue.</s><br>  <!--<s> 标签对那些不正确、不准确或者没有用的文本进行中间横线标识。-->


 textarea 文本框标签

<textarea maxlength="50" placeholder="描述信息..." >
</textarea><!--textarea 标签定义一个多行的文本输入控件。
    disabled 禁用该标签  form=""定义该文本标签是哪个表单的
    maxlength="50" 限制文本框能输入的字符个数
    placeholder="描述信息..." 该属性规定一个简短的提示,它描述了文本区域的期望值。
    readonly 规定文本为只读。  required 规定文本区域是必需的/必填的。-->


  blockquote 引用标签

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization.
</blockquote>   <!-- 引用标签,标签内的文本为引用文本,cite为该文本来自哪里,标签内文本会自动缩进处理-->


 abbr 缩写表述标签

<abbr title="World Health Organization">WHO</abbr> was founded in 1948. <!--  标签用来表示一个缩写词或者首字母缩略词,
通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 -->


 cite 定义作品标题标签

<p><cite>呐喊</cite> 创作与 1893.</p>
<!-- <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题 -->


 address 存放作者联系人信息标签

<address> 斜的 </address>     <!-- 该标签定义文档作者/所有者的联系信息。文本是斜体的  -->


 code  存放代码的标签

<code>一段电脑代码 print("Hello World")</code>
<!--code标签内可以存放任何的代码,不会对其进行执行操作,用于显示输入的代码-->


 pre -- small -- b -- i -- q -- bdo -- bdi -- time -- mark -- span 文本标签

<pre>
<!-- 不对 pre 标签内的文本进行任何处理,会保留空格和换行符。而文本也会呈现为等宽字体-->

小型文本:  <small>Copyright 1999-2050 Data.</small>  <!--small标签内的文本会被变小化,相当于小型文本-->

加粗文本:  <b>加粗文本</b>  <!-- 加粗文本标签 -->

斜体文本:  <i>The lightning</i>  <!-- i 标签内容将呈现为斜体状态-->

引号:  <q>Build a .</q> <!--q标签为引用标签,会将标签内的内容用双引号引起来-->

文字显示方向:  <b><bdo dir="rtl">该段落文字从右到左显示。</bdo></b><!-- <bdo>标签用于设置文本的显示方式,dir:rtl(右到左),ltr(左到右)正常的 -->

隔离文本:  <b>这句话叫:<bdi>独立的</bdi></b><!-- <bdi>标签可以让你将特别的信息单独隔离起来,这样就不会和普通的东西合在一起了-->

文本时间:  <b>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</b><!--time标签为文本添加时间-->

背景颜色:  <b>Do not  <mark>milk</mark> today.</b>  <!--mark标签内的文本会被添加背景颜色-->

字体颜色:  <b>我的母亲有 <span style="color:#0033ff;font-weight:bold">蓝色</span> 的眼睛</b><br><!--span标签可以自定义标签内的文本颜色-->

</pre>

 video  -  audio  标签介绍:


<video controls width="320" height="240" src="">
    <!--<video> 标签定义视频,比如电影片段或其他视频流。目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
width=""  设置视频播放器的宽度。;                       height   设置视频播放器的高度。
autoplay 如果出现该属性,则视频在就绪后马上播放。;         controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop  如果出现该属性,则当媒介文件完成播放后再次开始播放。;   muted  如果出现该属性,视频的音频输出为静音。
poster   规定视频正在下载时显示的图像,直到用户点击播放按钮。  src="" 要播放的视频的 URL或地址。
preload="metadata"(	指示当页面加载后仅加载音频/视频的元数据。)
        "auto"(指示一旦页面加载,则开始加载音频/视频。)
        如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。-->
    <track default
           kind="captions"
           srclang="en"
           src="" /> <!-- track标签为视频/音频标签插入字幕文件。格式为 WebVTT 格式(.vtt 格式文件)。
           src="" 	必需的。字幕文件所在地址
           default 当该标签设置这个属性时,当没有为这个视频文件添加字幕的话,就默认使用这个字幕标签
           kind="captions" 在视频中显示字幕,
                "subtitles" 在视频中显示字幕,
           srclang="" 如果 kind 属性的值是 "subtitles",则 srclang 属性是必需的。该字幕文件使用的是什么语言-->
    抱歉,您的浏览器不支持嵌入视频!
</video>


----------------------------------------------------------------


<audio controls>   <!-- 音频标签,该元素支持的3种文件格式:MP3、Wav、Ogg
可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
autoplay	属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。
controls	如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop	    如果出现该属性,则每当音频结束时重新开始播放。
muted	    如果出现该属性,则音频输出为静音。
src		    规定音频文件的 URL或地址。-->
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    <!-- 该标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择,(如果都支持则任选一个)
    src  	规定媒体文件的 URL或地址。
    type	规定媒体资源的类型。video或audio-->
</audio>

 图片相关标签介绍:

<img src="qw.jpg" width="145" height="126" alt="Planets" usemap="#pla" >
<!--该标签定义显示的图片
 src:要显示的照片的路径或url;  width:规定图形的宽度;  height:规定图形的高度;
 alt:当浏览器无法显示指定图片时用户就可以通过该元素来查看alt的内容,alt的内容可以告诉用户该照片是什么
 usemap:使用name为pla的<map>标签, -->


<map name="pla">  <!-- 该标签内可以定义一些规则,让图片绑定这个规则,当图片内被触发了指定规则时就会执行指定操作 -->
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="qq.jpg">
    <!--该标签定义图片内哪些区域是可以点击的
 coords:规定可点击区域的坐标;  href:指定要访问的url或指定的东西
 shape:规定形状,(default)规定全部区域。(rect)定义矩形区域。(circle)定义圆形。(poly)定义多边形区域。
 alt:当浏览器无法显示指定图片时用户就可以通过该元素来查看alt的内容,alt的内容可以告诉用户该照片是什么
 target:要在什么地方打开该网页;  type:打开网页的类型 -->
</map>

------------------------------------------------------------------


<picture><!--picture 元素允许我们在不同的设备上显示不同的图片.
<picture> 元素中要有零或多个 <source> 元素和一个 <img> 元素,
每个 <source> 元素匹配不同的设备并引用不同的图像源,如果没有匹配的,则显示 <img> 元素的的图片。-->
  <source media="(min-width: 100px)" srcset="aa.jpg">
  <source media="(min-width: 465px)" srcset="qw.jpg">
  <img src="qw.jpg">
</picture>

 form  表单介绍

<form action="" accept-charset="ISO-8859-1" enctype="multipart/form-data" method="post" novalidate>
    <!--form 表单标签,action="该表单提交到哪" ; accept-charset="设置表单提交时使用的字符编码"
    enctype=application/x-www-form-urlencoded (在发送前对所有字符进行编码)。
            multipart/form-data (不对字符编码。当使用有文件上传控件的表单时,该值是必需的。)
            text/plain (将空格转换为 "+" 符号,但不编码特殊字符。)
    method="get|post"  指定该表单以什么方式提交数据
    novalidate 如果使用该属性,表单提交时将不对其进行验证
    target=_blank | _self | _parent | _top	规定在何处打开 action URL。-->
</form>

ul  --  ol  列表标签介绍

<ul>  <!--无序列表 -->
  <li>Coffee</li>  <!-- 列表的内容 -->
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol><!--有序列表 -->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 input 标签介绍:

input 标签除了特别说明的属性外,其它的都可以随便共同使用。

输入框相关


    字符限制和输入框长度设置: <input type="text" name="pin" maxlength="4" size="4"><br>
    <!--定义一个文本标签,maxlength=该标签可接收的最长字符限制,size=该标签的元素长度-->

    禁用该标签: <input type="text" name="lname" disabled ><br>
    <!-- 定义一个文本标签,disabled 禁用这个标签 -->

    只读标签: <input type="text" name="country" value="Norway" readonly><br>
    <!-- 定义一个文本标签,该标签只可读,不可写入-->

    设置提示标签:<input type="text" name="lname" placeholder="Last name"><br>
    <!-- 定义一个文本标签,placeholder=在这个元素内添加提示信息-->

    该标签必须得输入内容:<input type="text" name="usrname" required><br>
    <!-- 定义一个文本标签,该标签必须得输入内容-->
    <hr>

    搜索输入框<input type="search" name="googlesearch">
    <!--定义搜索输入框,可以让用户输入内容,获取这个元素内容对其进行搜索操作-->
    <hr>


    电话号码输入框<input type="tel" name="usrtel">
    <!--定义用于输入电话号码的字段,该标签会显示用户自己输入过的电话值-->
    <hr>

    邮件输入框:<input type="email" name="usremail"><br>
    <!--定义一个邮件地址标签,(当提交表单时会自动对 email 字段的值进行验证)-->
    <hr>

    密码输入<input type="password" name="pwd">
    <!--定义密码字段(密码字段中的字符会被遮蔽)-->
    <hr>

    方便选择框<input list="browsers">
    <datalist id="browsers">
     <option value="Internet Explorer">
     <option value="Firefox">
    </datalist>
    <!--输入标签,该标签绑定一个列表元素,从而让用户方便输入-->
    <hr>


  多选框

    checkbox--value--checked:<br>

    <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
    <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
    <input type="checkbox" name="vehicle[]" value="Boat" checked > 我有一艘船<br>
    <!--定义多选框标签,name=这个元素的名字。value=这个元素的值。
checked 自动选择这个元素(这个属性只适合这个类型和radio类型的元素)-->
    <hr>


单选框

    radio:<br>

    <input type="radio" value="male"> Male<br>
    <input type="radio" value="女"> 女 <br>
    <!--允许用户在一定数量的选择中选取一个选项-->
    <hr>


 文件选择相关

    file--accept: <br>
    <input type="file" accept="image/*"><br>
    <!-- 选择文件标签,accept=可接受的文件类型,audio/* 接受所有的声音文件。video/* 接受所有的视频文件。 image/*	接受所有的图像文件。-->

    选择多个文件: <br>
    <input type="file" multiple>
    <!--该标签可选择一个或多个文件-->
    <hr>


提交按钮相关

    submit--formaction:<br>
    <input type="submit" formaction="demo-admin.php" value="提交">
    <input type="submit">
    <!--定义一个提交按钮,点击该按钮就会将表单内容提交到指定的路由中,formaction="指定该按钮会将值传递到何处"
    默认为from内指定的,formaction属性只适合image和submit-->

    <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
    <!--定义一个提交按钮,formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。使得不对提交的数据进行验证-->
    <hr>
    reset<br>
    <input type="reset" value="重置">
    <!--从重按钮,点击的话就会重置表单内容-->
    <hr>

    image--src--alt--width--height:<br>
    <input type="image" src="qq.jpg" alt="Submit" width="48" height="48">
    <!-- 定义图像作为提交按钮 ,src=图形的地址 , alt=无法查看图像时提供了替代文本。 和设置图片的款和高。这三个属性只针对 type=image -->
    <hr>


时间选择标签


    年月选择框:<input type="month" name="bdaymonth"><br>
    <!--定义一个选择年月的标签-->

    年月日选择框:<input type="date" ><br>
    <!--定义一个选择年月日的标签-->

    年月日和具体时间选择框:<input type="datetime-local" name="bdaytime"><br>
    <!--定义一个选择年月日和具体时间的标签-->


    时间选择框:<input type="time" name="usr_time">
    <!--定义一个选择时间的标签-->
    <hr>


值选择框:

    范围内移动取值:<input type="range" name="points" min="1" max="10">
    <!--定义拉动条获取值字段,可以设置其的大小值-->
    <hr>


    上下取值:<input type="number" name="quantity" min="1" max="10" step="2">
    <!-- 定义数值标签,并限制他的最大最小区间 ,每次选择跨越的步长是两步-->
    <hr>


按钮:

    按钮控件:<input type="button" value="点我" onclick="msg()"><br>
    <!--定义一个按钮标签,该按钮的名字是点我-->
    <hr>


颜色选择标签: 

    颜色选择器:<input type="color" name="favcolor" form="form_id"><br>
    <!--定义一个颜色选择器,form=这个元素是哪个表单的元素-->
    <hr>


隐藏的标签: 

    隐藏的标签:<input type="hidden" name="country" value="Norway"><br>
    <!--定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由 JavaScript 改变它们的值-->
    <hr>

 其他标签介绍:

br 换行标签

<br>  <!-- 换行标签,只要一遇到这个标签就会自动换行一次 -->

hr 下划线标签

<hr><!-- 下划线标签-->

 


 header - main - footer 页眉-主体-页脚标签介绍


<header>
<!--<header> 标签定义文档一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中,您可以定义多个 <header> 元素。-->
</header>

<main>
该html的主体内容。<!--<main> 元素是唯一的,所以不能出现一个以上的 <main> 元素。-->
</main>

<footer>
    <!--<footer> 标签定义文档一部分区域的页脚。在典型情况下,该元素会包含文档创作者的姓名、
文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,可以定义多个 <footer> 元素。-->
</footer>

 


 div 区域标签

<div>  <!--<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。-->
  <h6>这是一个在 div 元素中的标题。</h6>
  <p>这是一个在 div 元素中的文本。</p>
</div>

 


 h1  -  h6  标题标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!-- 六个不同大小的标题标签-->

hgroup

<hgroup>
<!--<hgroup> 标签被用来对标题(h1-h6)元素进行分组。-->
</hgroup>

 


 a  超链接标签

<a href="aa.jpg" download="/images/logo.png">点击下载<br>  <!-- 超链接标签-定义下载属性,当点击该链接时就会下载指定照片-->

<a href="http://www.runoob.com" target="_top" type="text/html" >访问菜鸟教程!</a><br>  <!--
    <a>超链接标签-href是必要的属性,当点击该标签时会跳转到指定的url中
    target=规定在何处打开这个标签的 URL。仅在 href 属性存在时使用。
           _blank:在新页面中打开链接;   _parent:在当前页面中打开链接。
           _self:默认,在当前页面中打开链接;  _top:在当前页面打开链接,并替换当前的整个框架页。
     type="" 规定打开的页面是什么类型的-->

 


nav 导航条标签

<nav>
    <!--<nav> 标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <nav> 元素。
    <nav> 元素只是作为标注一个导航链接的区域。-->
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>


 script  -  noscript 脚本标签

<!--<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。如果使用 "src" 属性,则 <script> 元素必须是空的。
async 属性一旦脚本可用,则会异步立即执行。;  defer 属性规定当页面已完成加载后,才会执行脚本。
src="ss.js"  脚本的位置  ; type="text/javascript" 脚本的类型-->
<script src="ss.js" charset="UTF-8"></script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript><!--
noscript 元素用来定义在脚本未被执行时的替代内容(文本)。-->

button 按钮标签

<button type="button">点我!</button> <!-- 在 <button> 标签内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。
按钮的属性:
    disabled  规定应该禁用该按钮。
    form="表单的id值"  规定按钮属于哪个表单。
    formaction="url或地址"  规定将表单数据发送到的地址。
    formenctype=application/x-www-form-urlencoded (在发送前对所有字符进行编码(默认)。) | multipart/form-data (不对字符编码。当使用有文件上传控件的表单时,该值是必需的。) | text/plain (将空格转换为 "+" 符号,但不编码特殊字符。)
    value="" 规定按钮的初始值。可由脚本进行修改
    type="submit"	该按钮是提交按钮 | "button"	该按钮是可点击的按钮 | "reset"	该按钮是重置按钮。
    name="" 规定按钮的名称。-->

 


 progress  -  meter  进度标签

<progress value="22" max="100"></progress><!--<progress> 标签定义运行中的任务进度(进程)。
请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
value="22"  当前值。     max="100"  规定需要完成的值。-->

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6" >60%</meter>
<!--展示给定的数据范围:value="要显示在哪个点上"-->

 

 


 fieldset - legend 标签

<form>
  <fieldset><!-- 将这个标签内的内容用矩形括起来 -->
    <legend>Personalia:</legend>  <!--<legend> 元素为 <fieldset>元素定义标题。-->
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>


下拉选项列表相关

<select><!--<select> 元素用来创建有两个选项的下拉列表。
    disabled 禁用该标签  form=""定义该文本标签是哪个表单的
    multiple 可选择多个选项。  required  规定用户在提交表单前必须选择一个下拉列表中的选项。
    size="2" 属性规定下拉列表中可见选项的数目。-->

  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
      <!-- <option> 标签定义下拉列表中的一个选项(一个条目)。
    disabled 禁用该标签  value="" 定义送往服务器的选项值。-->
    <option value="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">  <!-- <optgroup> 标签把相关的选项组合在一起 label=""为选项组规定描述。-->
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
    
</select>


 object 文件载入标签 和 param 对载入文件进行设置标签

<object data="horse.wav">  <!--可将指定文件载入到该html文档中,data=""要载入的文档的位置
         form=规定对象所属的一个或多个表单 ; width  height  name  type -->
  <param name="autoplay" value="true"><!--设置name="autoplay" 为 value="true",音频载入后会自动播放-->
</object>

label 标记标签

<form action="">
  <label for="male">Male</label>  <!-- 文本标签,给input标签当标记用的 for 规定 label 与哪个元素绑定。
  | form 规定 label 字段所属的一个或多个表单。-->
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>


datalist 数据列表标签

<datalist id="aa">
  <option value="Internet Explorer">
  <option value="Firefox">
</datalist>
<!-- 数据列表标签,该标签内可以添加一些可选项,然后让其他元素可以通过id调用他,来获取列表内容 -->

 


 figure -- figcaption 标签

<figure>  <!--<figure> 标签规定独立的内容(图像、图表、照片、代码等等)。内容应该与主内容相关。-->
  <img src="qq.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    <!-- <figcaption> 标签为 <figure> 元素定义标题。-->
</figure>


字体注音标签

<ruby><!--<ruby> 标签定义 ruby 注释(中文注音或字符)。-->
  漢 <rp>(</rp><rt>han</rt><rp>)</rp><!--<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。-->
  字 <rp>(</rp><rt>zi</rt><rp>)</rp><!--<rt> 标签定义字符(中文注音或字符)的解释或发音。-->
</ruby>


dl - dt - dd 标签

<dl><!--<dl> 标签定义一个描述列表。-->
  <dt>Coffee</dt>  <!-- <dt> (定义项目/名字)-->
    <dd>Black hot drink</dd>  <!--<dd> (描述每一个项目/名字)-->
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

 


template 隐藏标签介绍

<template><!-- <template> 标签定义在页面加载时隐藏的一些内容,该标签中的内容可以稍后使用 JavaScript 呈现。-->
    <h2>logo</h2>
</template>

article 标签

<article> </article>  <!--  该标签定义独立的内容。 -->

section 标签

<section><!--<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。-->
  <h1>WWF</h1>
  <p>介绍上面缩写词的意思</p>
</section>

 

  表格标签相关

<table >
  <caption>表格标题</caption><!-- <caption> 标签必须直接放置到 <table> 标签之后。作用是:定义表格的标题。只能对每个表格定义一个标题。-->

  <tr>  <!--tr表格中的行标签,行标签内的内容代表这一行的内容,下一个行标签代表下一行的内容-->
    <th>Month</th>
<!--每一个th标签代表为这一行中的一个单元格。<th> 元素中的文本通常呈现为粗体并且居中。-->
    <th>Savings</th>
  </tr>

  <tr>
    <td>January</td>
<!--每一个td标签代表为这一行中的一个单元格.<td> 元素中的文本通常是普通的左对齐文本。-->
    <td>$100</td>
  </tr>

</table>

从扇束到平行束:等角重排算法在CT重建中的核心原理与MATLAB实践 本文深入解析了CT图像重建中等角扇束重排算法的核心原理与MATLAB实现。通过将实际采集的扇束投影数据,利用几何映射和两次关键插值,转换为适用于经典滤波反投影算法的平行束数据,打通了高效重建的关键路径。文章结合Shepp-Logan模型仿真,提供了完整的MATLAB代码实践,并分析了源-物距、采样率等关键参数对重建质量的影响。 阅读详情

相关推荐

别再为10G UDP发愁了!手把手教你用Xilinx 10G/25G Ethernet Subsystem IP核搭建FPGA网络栈(附12套工程源码)

本文详细介绍了基于Xilinx UltraScale架构的FPGA网络栈开发,重点讲解了10G/25G Ethernet Subsystem IP核的应用实践。通过手把手教程和12套工程源码,帮助开发者解决10G UDP通信中的物理层接口、协议栈实现和系统集成等核心挑战,实现高性能FPGA网络栈搭建。

weixin_42522575的博客 364

html如何控制文本每行字数,网页设计中的文字长度如何控制

网页设计中的文字长度如何控制网页设计中的文字长度设计也是很有讲究的,那么网页设计中的文字长度如何控制呢,下面小编为你讲解一下吧!提升网页文字可读性的关键之一,就是让每行文字承载合适的字数。这不仅仅是设计一下文字宽度的`问题,它也应该是一个易读性的问题。文字最佳长度是每行承载50-60字符,包括空格。也有其他资料建议不超过75字/行也可以接受。但你一定会问,不按这样的标准做又会怎样?太长-如果一行里...

weixin_35739967的博客 4480

代码实现ROS2bag录制数据和回放数据(C++)

ROS2的ROS2bag功能可以将指定Topic中的数据以.db3的格式(不同于ROS)保存到本地文件中。读取文件数据可以实现数据回放。

m0_57124501的博客 3257

html设置段落每行字数,CSS控制每行字数

在网页排版设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS的代码控制来实现文本截取的方法,与程序员的直接字符截取的方式有些区别,其优势是可以自动控制文本显示的长度;缺点是不同浏览器的兼容性并不完美。使用overflow,text-overflow,white-space这三个主要的属性,其他的代码属于修饰作用。CS...

weixin_34696129的博客 3812

Multisim仿真入门:单相半波可控整流电路从搭建到波形分析(附避坑指南)

本文为电力电子技术初学者提供了一份详细的Multisim仿真指南,手把手教你从零搭建单相半波可控整流电路。通过对比纯电阻、阻感负载及加入续流二极管后的波形变化,直观理解晶闸管触发、电感续流等核心原理,并附有实用的参数设置与常见问题避坑指南,帮助你将抽象理论转化为可视化的工程实践。

weixin_29208077的博客 343

Prokka实战:10分钟搞定细菌基因组注释(附详细参数解析)

本文深入解析Prokka细菌基因组注释工具的核心参数与实战策略。通过拆解其集成化工作流程,详细解读物种分类、功能注释、输出控制等关键参数,并提供快速初筛、高质量发表、质粒注释及批量处理四种典型场景的高效参数组合方案,帮助用户精准掌控注释过程,将原始序列转化为有价值的生物学见解。

weixin_29271053的博客 444

HTML怎么限制每行字数,JS实现每行固定字数,自动换行

JS实现每行固定字数,自动换行autoWrap.html 原码.wrap_focus{border-width: 3px;border-style: solid;border-color:orange;width: 250px;height: 25px;font-size: 16px;font-weight: bolder;};.wrap_blur{border-width:0 0 1px 0;b...

weixin_42099530的博客 1896

CCS配置MSPM0G3507(七) 编码器(TIMER-QEI)

1.选择时钟源 BUSCLK2.时钟分频配置为1分频3.分频系数配置为14.若勾选 Start ,则生成程序后会自动开启定时器的计数,否则需手动在程序中开启5.Load Value 设置为65535。

kaneki_lh的博客 1万+

html设置某一行的字号为10px,为什么即使设置html为font-size:62.5%,有时候1rem != 10px...

为什么即使设置html为font-size:62.5%,有时候1rem != 10px问题描述为什么有些情况1rem不等于10pxhtml{font-size: 62.5%;}.div1{width: 500px;height: 100px;background: red;}.div2{width: 50rem;height: 10rem;background: blue;} 按照道理,页面的两个...

weixin_39953629的博客 445

Zemax操作--2(单透镜和双胶合透镜优化)

单透镜 要求 镜头数据里面的数量变化后要重新设计优化函数 设计 一、初始参数 按照要求输入波长、入瞳孔径、视场数据编辑器如图 物面--透镜前表面--透镜后表面--相面(镜头数据再插入一个面如图) 将2面曲率半径F数设置为10,zemax自动给出合适值 设置面2的边缘光线高度,zemax自动给出合适值 二、评价参数设置 将面1曲率半径设置为变量 再设置评价函数告诉zemax我们需要什么条件,评价函数默认即可 执行优化 双胶合透镜 要求 ...

lzy750750的博客 1万+

银河麒麟桌面操作系统V10(SP1)ssh服务安装与配置

在国产化的大背景下,各种国产操作系统逐步进入运维人员的视野,ssh作为linux远程连接工具,是运维人员必需的工具之一。本文主要介绍在银河麒麟桌面操作系统V10(SP1)上安装和配置ssh服务。

zhengshaolin128的博客 7811

html 限制每行字数,毕业论文每行字数的设置

毕业论文有的要求“用A4纸印刷,论文每页30行,每行36字”,可是当你按照步骤:文件—页面设置—文档网络,文档网络标签页下,设定网格、字符、行等的数组时,不同的文档的每行字符数的范围不一样,每页行数的范围也不一样,如图1、图2所示。因为这个我重新打印了8份论文,耗费了近3/4天的时间,花了100多块钱,劳神又费力,唉,不应该的啊。吃一堑长一智,把教训写下来,以后可别再范这种错误了。按要求设置了同样...

weixin_30854435的博客 1532

Oracle EBS GL日记账批“选定以过账”状态数据修复

日记账来源:应收账款。用户操作过账以后,自动提交请求“过账:单一分类账”一直运行中,该请求执行5,6个小时甚至10多个小时无法完成,导致“标准管理器”阻塞大量请求待定,“冲突解决管理器”的待定数量不断增加。系统管理员不得不把该请求强制取消,此时,日记账批的状态处于“选定以过账”(GL_JE_BATCHES.STATUS为S),如下图 检查此日记账批有3千多条日记账题头,由于日记账比较多,日记账的科目余额计算需要大量服务器资源和执行时间比较长。

陈显平的专栏-Oracle EBS 3245

速通前端篇 —— HTML

HTML的介绍、如何创建HTML文件、HTML文件的基本结构、HTML标签:title标签,标题标签,段落标签,换行标签,图片标签,超链接,表格标签,表单标签,无语义标签列表标签、、综合练习

我要学编程的博客 1万+

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

HTML速通

什么?博主要带你们速通HTML!这怎么可能?!? 凡事趁早,没有那么多来日方长

qq_62073188的博客 2602

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

前端速通——HTML

1.HTML简介HTML(Hyper Text Markup Language)中文译为“超文本标记语言”,主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化的描述。HTML和其他编程语言不同,HTML不是一门真正意义上的编程语言,而是一种标记语言,通过带有尖角号的标签对文本进行标记,从而实现网页的结构搭建。

weixin_73870552的博客 6972

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

学习HTML5这一篇就够了

目录第一章 HTML5概述1.1、什么是HTML1.2、什么是HTML51.3、本文重要说明1.4、浏览器的版本1.5、选择开发工具第二章 HTML5语法2.1、基本结构2.2、语法规范2.3、标签规范第三章 HTML5标签3.1、标题标签3.2、段落标签3.3、链接标签3.4、图像标签3.5、表格标签3.6、列表标签3.7、分组标签3.8、语义标签3.9、表单标签3.10、框架标签3.11、音频标签3.12、视频标签3.13、其它标签3.14、头部标签第四章 HTML5属性4.1、属性概述4.2、通用属性

轻松的小希 9万+

thinkPHP上一篇和下一篇

HTML中: <div class="pages"> <p>上一篇: <if condition="$pre eq '没有了'"> <a href="javascript:void(0)">没有了!</a> <else/> <volist name="pre" id="pre"> &l...

夜空下的凝视 5489

小鹅通以及简书的首页的html网页设计

</i>IT技术</div><div><i class="iconfont icon-zhinanzhen"></i>首页</div><div><i class="iconfont icon-shouji"></i>下载App</div><div><i class="iconfont icon-huangguan">

2301_80494758的博客 1086

html msn 消息,msn在线通玩法介绍 如何创建自己的msn在线通HTML代码

之前的一篇文章已经介绍了msn在线通的功能以及特色,相信在很多的情况下,我们会用到msn在线通,鉴于msn在线通的携带性,微软开发了msn在线通的新玩法,就是创建自己的msn在线通HTML代码,大家只要知道自己的HTML代码,就可以快速的登入msn在线通,并且快速的与好友进行聊天了。如何创建自己的msn在线通HTML代码1、链接「MSN 在线通」服务网页:http://settings.messe...

weixin_34640051的博客 367

学习html看这一篇就够用了

基础标签 <h1></h1>:标题 <p></p> 段落 <hr>水平线 <br>换行 <span></span>分区,可多标签一行 <div></div>分区,每个标签一行 文本格式化标签 <b></b> <strong></stro...

李亚飞的博客 8898

【HTML5】看这一篇h5就够了!!!!

【HTML5】看这一篇h5就够了!!!!【HTML5】看这一篇h5就够了!!!!常见的浏览器以及浏览器的内核(针对面试)Web标准的组成文字标签图像标签链接标签锚点定位base标签特殊字符——实体字符集相对路径与绝对路径列表标签表格input标签h5的发展史h5新加的标签html5新增的input type属性多媒体标签完结导出与导入导出导入 【HTML5】看这一篇h5就够了!!!! 之前,更新了关于前端的一部分内容,于是,我就开始琢磨着怎样能够系统的学习前端呢?对于刚刚入门前端的小白,提供一些学习路径。

xuwenjie的博客 6977

一篇文章弄懂 HTML

layout: post title: 一篇文章弄懂 HTML categories: HTML description: 一篇文章快速学习HTML keywords: HTML HTML是网页展示的基础,很简单,更重要。 从事 Java 后端开发工作很久了,一直没有系统的学习总结过前端的东西,都是需要用的时候再来查,导致效率低下。算是做一篇笔记吧,后面再打算做一篇 HTML 的 wiki,...

greatplum的博客 545

掌握html这一篇就够了

HTML是互联网的基础,是构建网页和应用程序的重要组成部分。它的简单语法和强大功能使其成为广泛使用的网页开发工具。HTML使用标签描述网页的结构和内容,并使用标签间的嵌套关系来定义网页的布局和样式.本文详细介绍了标签的使用和案例

hanqing_165的博客 1137

HTML表格(HTML 表格的使用,收藏这一篇就够了)

HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐(align)(居中,左对齐,右对齐)5.2. 背景色&图片(bgcolor & background)5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距(cellpadding)5.4 单元格间的距离(cel

weixin_47139649的博客 7万+

一篇入门HTML

作为前端三剑客之一的HTML,有必要入个门,话不多说,直接上菜。 目录 一、工具 二、HTML简介 HTML框架 三、HTML基本标签 基础标签 实体符号 四、表格 单元格合并 thead、tbody、tfoot 五、背景颜色与图片 设置背景图或者背景色 插入图片 六、超链接 七、列表 无序列表 有序列表 八、表单(重点) 用户注册表单 上传文件 hidden组件 readonly与disabled 九、节点的id属性 十、div与span 一、工具 .

m0_56620669的博客 954
上一篇: python-爬虫
下一篇: CSS教学
adjnd
博客等级 码龄7年 11粉丝 14原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值