html
#################
https://www.w3schools.cn/tags/ref_byfunc.asp
基础元素:html-head-body
表单元素:
form:表单,用于为用户输入创建 HTML 表单。
<!DOCTYPE html> <html> <body> <form name='my_form' action="https://www.cnblogs.com/igoodful"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
<form>
元素可以包含以下一个或多个表单元素:
input:单行输入框,用户可以在其中输入数据是最重要的表单元素。
根据类型属性type的不同, <input>
元素可以以多种方式显示:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
(默认值)<input type="time">
<input type="url">
<input type="week">
button:按钮
<form> <input type="button" value="Click me" onclick="msg()"> </form>
image:图象提交按钮:
<form action="/action_page.php"> <label for="fname">First name: </label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name: </label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
checkbox:多选框
<form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form>
text:文本框:
<form action="/action_page.php"> <label for="fname">First name: </label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name: </label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>
password:密码框:
<form action="/action_page.php"> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd" minlength="8"><br><br> <input type="submit"> </form>
search:搜素框:
<form action="/action_page.php"> <label for="gsearch">Google:</label> <input type="search" id="gsearch" name="gsearch"> <input type="submit"> </form>
radio:单选框:
<form action="/action_page.php"> <p>Please select your age:</p> <input type="radio" id="age1" name="age" value="30"> <label for="age1">0 - 30</label><br> <input type="radio" id="age2" name="age" value="60"> <label for="age2">31 - 60</label><br> <input type="radio" id="age3" name="age" value="100"> <label for="age3">61 - 100</label><br><br> <input type="submit" value="Submit"> </form>
reset和submit:重置框和提交框:
<form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <label for="pin">Enter a PIN:</label> <input type="text" id="pin" name="pin" maxlength="4"><br><br> <input type="reset" value="Reset"> <input type="submit" value="Submit"> </form>
file:文件上传框:
<h3>单文件上传:</h3> <form action="/action_page.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit"> </form> <h3>多文件上传:</h3> <form action="/action_page.php"> <label for="myfile">Select files:</label> <input type="file" id="myfile" name="myfile" multiple><br><br> <input type="submit"> </form>
email:邮件输入框:
<h3>只许填入一个email:</h3> <form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> <input type="submit"> </form> <h3>允许多个email:</h3> <form action="/action_page.php"> <label for="emails">Enter email addresses:</label> <input type="email" id="emails" name="emails" multiple> <input type="submit"> </form>
range:范围滑动框:
<form action="/action_page.php"> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="100" value=20> <input type="submit"> </form>
number:数字输入框:
<form action="/action_page.php"> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> <input type="submit"> </form>
tel:电话输入框:
<form action="/action_page.php"> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br> <input type="submit"> </form>
time:时间输入框:
<form action="/action_page.php"> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> <input type="submit"> </form>
url:网址输入框:
<form action="/action_page.php"> <label for="homepage">input your url:</label> <input type="url" id="homepage" name="homepage"><br><br> <input type="submit"> </form>
datetime-local:年月日时分输入框:
<form action="/action_page.php"> <label for="birthdaytime">年月日时分:</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> <input type="submit"> </form>
date:年月日输入框:
<form action="/action_page.php"> <label for="birthday">年月日:</label> <input type="date" id="birthday" name="birthday"> <input type="submit"> </form>
month:年月输入框,年份只能手动输入:
<form action="/action_page.php"> <label for="bdaymonth"> 输入年月:</label> <input type="month" id="bdaymonth" name="bdaymonth"> <input type="submit">
week:第几周输入框:
<form action="/action_page.php"> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> <input type="submit"> </form>
color:颜色输入框:
<form action="/action_page.php"> <label for="favcolor">选择一种颜色:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br> <input type="submit"> </form>
hidden:隐藏输入框:
<form action="/action_page.php"> <label for="fname">name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="提交"> </form>
output:定义输出的一些类型
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50">+<input type="number" id="b" value="25">=<output name="x" for="a b"></output> </form>
textarea:多行文本输入框:通常用于表单中,用于收集用户输入,如评论或评论
<form action="/action_page.php"> <label for="w3review">多行输入:</label> <textarea id="w3review" name="w3review" rows="4" cols="50"> They offer free tutorials in all web development technologies.谢谢谢谢谢寻寻寻寻寻寻寻寻寻 xxx yyy </textarea> <br><br> <input type="submit" value="Submit"> </form>
button:按钮:
<button type="button" onclick="alert('Hello world!')">button</button>
select:下拉列表:
<form action="/action_page.php"> <label for="cars">请选择:</label> <select name="cars" id="cars"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> </select> <br><br> <input type="submit" value="Submit"> </form>
fieldset和legent:fieldset定义围绕表单中元素的边框;legent定义 fieldset 元素的标题:
<form action="/action_page.php"> <fieldset> <legend>legend</legend> <label for="fname">name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>
datalist:下拉列表:
<form action="/action_page.php" method="get"> <label for="browser">从列表中选择一个浏览器:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>
optgroup:定义选择列表中相关选项的组合:
<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> <br><br> <input type="submit" value="Submit"> </form>
表格
-
table:表格;
-
caption:表格标题;
-
thead:表格中的表头内容;
-
tbody:表格中的主体内容;
-
tfoot:表格中的表注内容(脚注);
-
th:表格中的表头单元格;
-
tr:表格中的行;
-
td:表格中的单元;
-
colgroup:表格中供格式化的列组;
-
col:表格中一个或多个列的属性值;
如下:
<table> <colgroup> <col span="2" style="background-color:red"> <col span="3" style="background-color:green"> </colgroup> <tr> <th>aaaa</th> <th>bbbb</th> <th>cccc</th> <th>dddd</th> <th>eeee</th> <th>ffff</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </table>
列表:有序ol-li,无序ul-li,定义列表dl-dt-dd
ul:无序列表:通常ul与li一起使用
<ul style="list-style-type:circle"> <li>apple</li> <li>google</li> <li>facebook</li> </ul> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
ol:有序列表:
<ol style="list-style-type:cjk-ideographic"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:decimal"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:decimal-leading-zero"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<ol style="list-style-type:lower-alpha"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:lower-latin"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:upper-alpha"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:upper-latin"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<ol style="list-style-type:lower-roman"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:upper-roman"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:inherit"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol style="list-style-type:lower-greek"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
音频视频图象:
audio:音频:用于将声音内容嵌入文档中,例如音乐或其他音频流
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 你的浏览器暂不支持 </audio>
-
<audio>
标签包含一个或多个具有不同音频源的<source>
标签。浏览器将选择其支持的第一个来源。 <audio>
和</audio>
标记之间的文本将在不支持 <audio> 元素的浏览器中显示。- HTML 有三种受支持的音频格式: MP3, WAV, and OGG.
video:视频:用于将视频内容嵌入文档中,例如电影剪辑或其他视频流。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 你的浏览器暂不支持. </video>
<video>
标签包含一个或多个具有不同视频源的<source>
标签。浏览器将选择其支持的第一个源。- 可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
- 目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
img:图片:
<img>
标签有两个必需的属性:
- src - 指定图像的路径
- alt - 如果由于某种原因无法显示图像,则为图像指定备用文本
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
figure:图片:使用 <figure> 元素标记文档中的照片,使用 <figcaption> 元素定义照片的标题
<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:40%"> <figcaption>到此一游</figcaption> </figure>
img-map-area:图片映射:通过img的usemap属性对应到map的name属性:
<area>
元素总是嵌套在 <map> 标签中。
在img定义的图象中点击对应的区域将会跳转到不同的图象中,下面定义了三个区域
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
canvas:图形:
<!DOCTYPE html> <html> <body> <br> <canvas id="myCanvas">你的浏览器暂不支持.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 100); </script> </body> </html>
svg:定义 SVG 图形的容器:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 你的浏览器不支持 SVG. </svg>
链接:
a:超链接
<p>Open link in a new window or tab: <a href="https://www.w3schools.com" target="_blank">Visit W3Schools!</a></p>
link:定义文档与外部资源的关系,最常见的用途是链接样式表,是空元素,它仅包含属性
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World!</h1> <h2>I am formatted with a linked style sheet.</h2> </body> </html>
nav:定义导航链接
<nav> <a href="/html/">google</a><br> <a href="/css/">apple</a><br> <a href="/js/">facebook</a><br> <a href="/python/">twitter</a><br> </nav>
abbr:缩写
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
address:地址信息
<address> 姓名:史珍香<br> 个人网址:<a href="https://www.cnblogs.com/igoodful">https://www.cnblogs.com/igoodful</a>.<br> 地址:湖北省武汉市武昌区<br> 联系电话:123456789<br> 微信:123456789<br> </address>
<address> 标签定义文档或文章的作者/拥有者的联系信息。 联系信息可以是电子邮件地址、URL、地址、电话号码、社交媒体等。 如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。 如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。 <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
HTML事件:
一、鼠标相关的所有事件:
-
onclick:鼠标单击元素时触发;
-
ondbclick:鼠标双击元素时触发;
-
onmousedown:在元素上按下鼠标时触发;
-
onmouseup:在元素上释放鼠标时触发;
-
onmouseover:当鼠标指针移动到元素上时触发;
-
onmouseout:当鼠标指针移出元素时触发;
-
onmousemove:当鼠标指针移动到元素上时触发;
二、键盘相关的所有事件:
-
onkeydown:按下按键时触发;
-
onkeyup:释放按键时触发;
-
onkeypress:敲击按键时触发;
三、窗口window的相关事件:
-
onload:页面结束加载之后触发;
-
onresize:浏览器窗口被调整大小时触发;
-
onerror:在错误发生时触发;
四、表单相关事件:由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):
-
onfocus:当元素获得焦点时触发;
-
onblur:当元素失去焦点时触发;
-
oninput:当元素获得用户输入时立即触发;
-
onchange:当元素的值被改变时且在元素失去焦点时触发;
-
onsubmit:当表单元素被提交时触发;
-
onselect:当元素中文本被选中后触发;
-
onsearch:当用户在搜索字段中写入内容时触发 (对于 <input="search">);
-
oninvalid:当元素无效时触发;
###################