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>

 

 

表格

  1. table：表格；

  2. caption：表格标题；

  3. thead：表格中的表头内容；

  4. tbody：表格中的主体内容；

  5. tfoot：表格中的表注内容（脚注）；

  6. th：表格中的表头单元格；

  7. tr：表格中的行；

  8. td：表格中的单元；

  9. colgroup：表格中供格式化的列组；

  10. 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>

 

  1.  <audio> 标签包含一个或多个具有不同音频源的 <source> 标签。浏览器将选择其支持的第一个来源。
  2. <audio> 和 </audio> 标记之间的文本将在不支持 <audio> 元素的浏览器中显示。
  3. 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>

 

 

  1. <video> 标签包含一个或多个具有不同视频源的 <source> 标签。浏览器将选择其支持的第一个源。
  2. 可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
  3. 目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

 

 

 img：图片：

<img> 标签有两个必需的属性:

  1. src - 指定图像的路径
  2. 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事件：

 

一、鼠标相关的所有事件：

  1. onclick：鼠标单击元素时触发；

  2. ondbclick：鼠标双击元素时触发；

  3. onmousedown：在元素上按下鼠标时触发；

  4. onmouseup：在元素上释放鼠标时触发；

  5. onmouseover：当鼠标指针移动到元素上时触发；

  6. onmouseout：当鼠标指针移出元素时触发；

  7. onmousemove：当鼠标指针移动到元素上时触发；

 

二、键盘相关的所有事件：

  1. onkeydown：按下按键时触发；

  2. onkeyup：释放按键时触发；

  3. onkeypress：敲击按键时触发；

 

 三、窗口window的相关事件：

  1. onload：页面结束加载之后触发；

  2. onresize：浏览器窗口被调整大小时触发；

  3. onerror：在错误发生时触发；

 四、表单相关事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

 

  1. onfocus：当元素获得焦点时触发；

  2. onblur：当元素失去焦点时触发；

  3. oninput：当元素获得用户输入时立即触发；

  4. onchange：当元素的值被改变时且在元素失去焦点时触发；

  5. onsubmit：当表单元素被提交时触发；

  6. onselect：当元素中文本被选中后触发；

  7. onsearch：当用户在搜索字段中写入内容时触发 (对于 <input="search">)；

  8. oninvalid：当元素无效时触发；

 

 

 

 

 

 

###################

 
posted @ 2019-03-25 11:13  igoodful  阅读(155)  评论(0)  编辑  收藏  举报