HTML&CSS

HTML(hypertext markup language超文本标记语言)用途:

HTML更像是一个网站的框架和内容展示,没有特效,不搭配CSS时表现平淡无奇.

CSS(cascading style sheet层叠样式表):

  h1 {
      coolor:black
      font-size:30px
  }

CSS目前版本为:CSS3,对比HTML,CSS3更依赖于浏览器支持,如果浏览器遇到不支持的标签,就会按照纯文本来处理,因此呈现仍然是正常的.
HTML层次化结构示例

<h1>Bigger headings are more important</h1>
<h2>This is smaller</h2>
<h3>This is smaller still</h3>
<p>this is body copy,and is most common.</p>

输出:

Bigger headings are more important

This is smaller

This is smaller still

this is body copy,and is most common.

测试WEB站点搭建软件:
windows 平台:WAMP 下载链接:https://wampserver.aviatechno.net/
MAC 平台:MAMP

Windows平台需要VS运行库

HTML 标签

HTML标签通常是用英文字母小写,并且是成对的,用来包住要定义的内容,举例:
<p>This is a paragraph</p>

其中<p>和</p>这就是一个标签,其中/是用来表示结尾.整条语句就构成了一个HTML元素

HTML 属性

HTML标签中还存在一个关键文本---attribute属性,属性是为标签应用文本提供额外的信息
属性应位于开始标签的字符后面,属性分2个部分:

语法示例:
<p lang="en">This is a paragraph.</p>
渲染效果:

This is a paragraph.

其中lang是属性,en是值.上面这个例子中属性是用来告诉浏览器,这个段落的语言是英文

display属性

inline:将元素显示为内联元素（如 <span>）。任何高度和宽度属性将不起作用
block:将元素显示为块元素（如 <p>）。它从一条新线开始，并占用整个宽度
contents:使容器消失，使元素的子元素子元素在 DOM 中处于下一个级别
flex:将元素显示为块级 flex 容器
grid:将元素显示为块级网格容器
inline-block:将元素显示为内联级块容器。元素本身的格式设置为内联元素，但您可以应用高度和宽度值
inline-flex:将元素显示为内联级 flex 容器
inline-grid:将元素显示为内联级网格容器
inline-table:元素显示为内联级别表
list-item:让元素表现得像一个<li>元素
run-in:将元素显示为块或内联，具体取决于上下文
table:让元素表现得像一个<table>元素
table-caption:让元素表现得像一个<caption>元素
table-column-group:让元素表现得像一个<colgroup>元素
table-header-group:让元素表现得像一个<thead>元素
table-footer-group:让元素表现得像一个<tfoot>元素
table-row-group:让元素表现得像一个<tbody>元素
table-cell:让元素表现得像一个<td>元素
table-column:让元素表现得像一个<col>元素
table-row:让元素表现得像一个<tr>元素
none:该元素被完全删除
initial:将此属性设置为其默认值。被赐予该属性的文本,将以 默认值 渲染出来.initial语法示例
inherit:继承此属性,inherit语法示例

HTML 注释

注释是用来做 自定义描述,不会被渲染出来,但任何用户都可以查看页面源代码后看到注释.

<!-- 这是一个描述,不会被显示出来 -->
<p lang="en">This is a paragraph.</p>
<!--
  <p>这本来是一段代码,但被注释掉了,因此不会显示</p>
-->

渲染效果:

This is a paragraph.

HTML 页面结构

<!doctype html>

<html class="no-js" lang="">

  <head>

  </head>

  <body>

  </body>

</html>

定义网页结构的标签解释:

title 标签:页面标题

语法示例:

<!doctype html>

<html class="no-js" lang="">

  <head>
    <title>这是title</title>
  </head>

  <body>
    <p lang="en">This is a paragraph.</p>
  </body>

</html>

渲染:
HTML-title-demo

meta 标签

<meta>标签和<title>标签类似,都属于<head>标签,与<title>不同的是<meta>标签不会展示给用户.
<meta>标签根据不同的需求可以设置为多个,例如加上作者信息;为搜索引擎提供一些信息;charset字符集;页面图标,viewport视窗设置等等..

<!doctype html>

<html class="no-js" lang="">

  <head>
    <title>这是title</title>
    <meta charset="utf-8">
    <meta name="auther" content="Mr.Suns">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <p lang="en">This is a paragraph.</p>
  </body>

</html>

HTML 列表

HTML列表分为:

有序列表语法:

<ol>
  <li>这是第一个有序列表</li>
  <li>这是第二个有序列表</li>
  <li>这是第三个有序列表</li>
</ol>

输出:

  1. 这是第一个有序列表
  2. 这是第二个有序列表
  3. 这是第三个有序列表
无序列表语法: 
<ul>
  <li>这是第一个有序列表</li>
  <li>这是第二个有序列表</li>
  <li>这是第三个有序列表</li>
</ul>
输出:

HTML 引用块级文本

语法:
<blockquote>和<cite>
<blockquote>用来引用块级文本,对比markdown,HTML 引用块级文本 没有视觉效果.
如果引用的内容来源于网络,可以使用<cite>标签将原内容出处的URL添加进去,值得注意的是,<cite>属性并不会在浏览器中显示.

语法示例:

    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>

渲染效果:

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

行内文本的格式化

段落;标题;列表都属于 块级元素,因此每个元素渲染出来都是从新的一行开始,并占据所在容器内的整行宽度.
而行内元素反之亦然.
加粗语法:

<strong>语法示例:

  <p>我将加粗一段行内文本,请看效果→<strong>"这是一段加粗文本"</strong>前面的加粗文本是一个行内元素.</p>

渲染效果:

我将加粗一段行内文本,请看效果→"这是一段加粗文本"前面的加粗文本是一个行内元素.

<b>语法示例:

  <p>我将加粗一段行内文本,请看效果→<b>"这是一段加粗文本"</b>前面的加粗文本是一个行内元素.</p>

渲染效果:

我将加粗一段行内文本,请看效果→"这是一段加粗文本"前面的加粗文本是一个行内元素.

斜体语法:

语法示例:

<em>斜体文本-强调语义</em>
<i>斜体文本-不强调语义</i>

渲染效果:
斜体文本-强调语义
斜体文本-不强调语义

下划线&下划虚线文本

<u>表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换。
<ins>元素定义已经被插入文档中的文本。
<abbr>代表缩写,可以添加title属性来标识完整名称(鼠标悬停时).
语法示例:

<u>这是下划线文本</u>
<ins>这是ins元素,用来标识文档中添加的内容</ins>
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

渲染效果:
这是下划线文本
这是ins元素,用来标识文档中添加的内容

You can use CSS to style your HTML.

删除线

<strike>删除线文本早期的语法.
<s>元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用<s> ；为此，提倡使用 <del> 和 <ins> 元素。
<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。

语法示例:

<s>这是有删除线文本,现在的语法</s>
<strike>这是有删除线文本,早期的语法</strike>
<del>这是del元素,用来标识被删除的内容</del>
<ins>这是ins元素,用来标识文档中添加的内容</ins>

渲染效果:
这是有删除线文本,现在的语法
这是有删除线文本,早期的语法
这是del元素,用来标识被删除的内容

突出显示文本

<mark>将文本添加黄色背景

语法示例:

<mark>这是突出文本</mark>

渲染效果:
这是突出文本

注释文本

<small>会让文本大小 小于 默认大小
<sup>上标文本,它会让文本变小一号
<sub>下标文本,它会让文本变小一号
语法示例:

<small>这是注释文本你</small>
<sup>上标文本,它会让文本变小一号</sup>
<sub>下标文本,它会让文本变小一号</sub>

渲染效果:

请看注释效果→"这是注释文本"

请看注释效果→上标文本,它会让文本变小一号

请看注释效果→下标文本,它会让文本变小一号

时间文本

<time>表示时间,通常与<datetime>结合使用,从而让人类可读.

渲染效果:

音乐会会在开始.

本文创建于 .

音乐会开幕时间为:.

换行

<br>强制换行

<p>这是一段文本,即将被换行<br>"被换行的文本"</br>可以看出效果</p>

渲染效果:

这是一段文本,即将被换行
"被换行的文本"
上面是换行文本

代码标记

<code>元素呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示
&lt;是(less than小于)的缩写,用来替代<>是(greater than)的缩写,用来替代>

语法示例:

<p>Regular text. <code>This is code.</code> Regular text.</p>

Regular text. This is code. Regular text.

语法示例:

 <code>
    <h1>Bigger headings are more important</h1>
    <h2>This is smaller</h2>
    <h3>This is smaller still</h3>
    <p>this is body copy,and is most common.</p>
 </code>

渲染效果

<h1>Bigger headings are more important</h1>
<h2>This is smaller</h2>
<h3>This is smaller still</h3>
<p>this is body copy,and is most common.</p>

语法示例:使用<pre> 

 <pre><code>
    <h1>Bigger headings are more important</h1>
    <h2>This is smaller</h2>
    <h3>This is smaller still</h3>
    <p>this is body copy,and is most common.</p>
 </code></pre>

渲染效果:

    Bigger headings are more important
    This is smaller
    This is smaller still
    this is body copy,and is most common.

语法示例:使用<pre>和 < >

    <h1>Bigger headings are more important</h1>
    <h2>This is smaller</h2>
    <h3>This is smaller still</h3>
    <p>this is body copy,and is most common.</p>

渲染效果:

    <h1>Bigger headings are more important</h1>
    <h2>This is smaller</h2>
    <h3>This is smaller still</h3>
    <p>this is body copy,and is most common.</p>

链接

链接(当前标签页打开)语法示例:

<a href="https.www.cisco.com">Cisco</a>
渲染效果:
Cisco

链接(新的标签页打开)语法示例:

语法示例:
<a href="https://www.cisco.com" target="_blank">Cisco</a>

渲染效果:
Cisco

特定(跳转)链接

语法示例:
语法分2部分,锚点<h3 id="#文本内容">和跳转部分<a href="#ID">跳转链接描述</a>

锚点:

<h3 id="top">HTML&CSS</h3>

跳转:

<a href="#top">Top</a>

渲染效果:
Top

链接Email

语法示例:
<a href="mailto:someone@example.com">Send email</a>

渲染效果:
Send email

链接电话

语法示例:
<a href="tel:+199999999">+1 999 99 999</a>
渲染效果:
+1 999 99 999

W3Schools

页面结构

<header>:页眉
<footer>:页脚
<nav>:导航:全称navigation
<li>:列表项,用于<ol>无序列表;<ul>有序列表;<menu>菜单列表
<section>:区域,网站中具有内容的区块,例如"关于我"
<article>:该元素不会在浏览器中呈现为任何特殊内容。但可以使用 CSS 来设置元素的样式
<aside>:该标记定义了除放置它所包含的内容之外的一些内容。旁注内容应与周边内容间接相关。
提示：内容通常作为边栏放置在文稿中。
注意：该元素在浏览器中不会呈现为任何特殊内容。但是，您可以使用 CSS 来设置元素的样式（请参阅下面的示例）.
<main>:该元素内的内容对于文档应该是唯一的。它不应包含在文档中重复的任何内容，例如侧边栏、导航链接、版权信息、站点徽标和搜索表单。
注意：<main>文档中的元素不得超过一个。该<main>元素不能是 <article>、<aside>、<footer><header> 或 <nav> 元素的后代。
<div>: 该元素标记定义一个部门或一个部分。<div>标签用作HTML元素的容器,然后使用 CSS 设置样式 或 使用 JavaScript 进行操作。使用<div>class 或 id 属性可以轻松地为标记设置样式。任何类型的内容都可以放在<div>标签内!
注意：<div>默认情况下，浏览器总是在元素前后放置一个换行符.

导航语法示例:
<nav role="main">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
渲染效果:
页眉页脚语法示例:
<html>
    <head>
        <title>This is test table</title>
    </head>
    <body>
        <header role="banner">
            <h1 class="site-title">Welcome to my site</h1>
            <nav>
                <ul role="main">
                    <li><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div class="wrapper">
            <main role="mail">
                <article role="article">
                    <head>
                        <h2>HTML is to great</h2>
                    </head>
                    <div class="entry">
                        <p>test <b>test</b> test test</p>
                    </div>
                    <footer>
                        <p>Published March 5th at 16:22</p>
                    </footer>
                </article>
            </main>
            <aside>
                <h3>Related Article</h3>
                <ul>
                    <li><a href="https://www.w3schools.com/css/">CSS</a></li>
                </ul>
            </aside>
        </div>
        <footer>
            <p>Copyright Suns</p>
        </footer>
    </body>
</html>

渲染效果:

This is test table

Welcome to my site

HTML is to great

test test test test

Published March 5th at 16:22

Copyright Suns

<article>语法示例:
<html>
  <head>
    <style>
    .all-browsers {
      margin: 0;
      padding: 5px;
      background-color: lightgray;
    }
    .all-browsers > h1, .browser {
      margin: 10px;
      padding: 5px;
    }
    .browser {
      background: white;
    }
    .browser > h2, p {
      margin: 4px;
      font-size: 90%;
    }
    </style>
  </head>
  <body>
    <article class="all-browsers">
      <h1>Most Popular Browsers</h1>
      <article class="browser">
        <h2>Google Chrome</h2>
        <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
      </article>
      <article class="browser">
        <h2>Mozilla Firefox</h2>
        <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
      </article>
      <article class="browser">
        <h2>Microsoft Edge</h2>
        <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
      </article>
    </article>
  </body>
</html>

渲染效果:

Most Popular Browsers

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

Mozilla Firefox

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

<aside>语法示例:
<html>
  <head>
    <style>
      aside {
        width: 30%;
        padding-left: 15px;
        margin-left: 15px;
        float: right;
        font-style: italic;
        background-color: lightgray;
      }
    </style>
  </head>
<body>
    <h1>The aside element - Styled with CSS</h1>
    <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
    <aside>
      <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </aside>
    <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
    <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
    <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
  </body>
</html>

渲染效果:

The aside element - Styled with CSS

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

<mail>语法示例:
<!DOCTYPE html>
<html>
  <head>
  <style>
    main {
      margin: 0;
      padding: 5px;
      background-color: lightgray;
    }
    main > h1, p, .browser {
      margin: 10px;
      padding: 5px;
    }
    .browser {
      background: white;
    }
    .browser > h2, p {
      margin: 4px;
      font-size: 90%;
    }
  </style>
  </head>
  <body>
    <h1>The main element - Styled with CSS</h1>
    <main>
      <h1>Most Popular Browsers</h1>
      <p>Chrome, Firefox, and Edge are the most used browsers today.</p>
      <article class="browser">
        <h2>Google Chrome</h2>
        <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
      </article>
      <article class="browser">
        <h2>Mozilla Firefox</h2>
        <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
      </article>
      <article class="browser">
        <h2>Microsoft Edge</h2>
        <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
      </article>
    </main>
  </body>
</html>

渲染效果:

The main element - Styled with CSS

Most Popular Browsers

Chrome, Firefox, and Edge are the most used browsers today.

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

Mozilla Firefox

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

<div>语法示例:
<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>

渲染效果:

The div element

This is a heading in a div element

This is some text in a div element.

This is some text outside the div element.

媒体

图像

在WEB领域,图像分2种 像素图像 和 矢量图形.使用语法:

<img>:可以插入除SVG外的图形
<figure>:该元素可以包裹多个图片.该元素还可以添加代码;音频;视频广告
<alt>用于描述文本,无障碍性功能
<title>鼠标悬停在图片上时,显示出来的信息.
<figcaption>:给图片加上题注.
<srcset>:响应式图像
<picture>:包含一个或多个<source>标签和一个<img>标签.浏览器将查询与当前视口宽度后,匹配的第一个<source>元素，如果匹配上,浏览器将显示<srcset>中指定图片。在<picture>中<img> 元素作为后背元素是必需的，如果所有<source>都没有匹配上,将显示<img>图片。

<img>添加图片,语法示例:
<img src="images\logo.svg" alt="Adguard LOGO" />

渲染效果:
Adguard LOGO

<figure><figcaption>添加图片语法示例:
<figure>
  <img src="images\logo.svg" alt="Adguard LOGO" />
  <figcaption>这是一个图片题注.<figcaption>
<figure>

渲染效果:

Adguard LOGO
这是一个图片题注.
<srcset>语法示例:
<html>
    <head>
        <title>HTML Boilerplate</title>
    </head>
    <body>
        <picture>
            <source media="(min-width: 1025px)" srcset="images\space-large.jpg">
            <!-- 如果宽带大于1025像素,则显示"images/space-large.jpg"图片 -->
            <source media="(min-width: 801px)" srcset="images\space-medium.jpg">
            <!-- 如果宽带大于801像素,则显示"images\space-medium.jpg"图片 -->
            <img src="images\space-small.jpg" />
            <!-- 如果上述两项宽度都没匹配,默认显示"images\space-small.jpg"图片 -->
        </picture>
    </body>
</html>

渲染效果:

HTML Boilerplate

视频音频

<video>:用于在文档中嵌入视频内容，例如电影剪辑或其他视频流。<video>标签包含一个或多个 具有不同视频源的标签。浏览器将选择它支持的第一个来源。<video>标签包裹的文本只会在浏览器不支持的时候才会显示。<video>属性有:

嵌入视频语法示例:
<video width="800px" controls>
    <source src="video\moon.mp4" type="video/mp4">
    Your browser does not support HTML video.
</video>

渲染效果:

嵌入音频语法示例:
<audio controls>
    <source src="audio\brid.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>
<!-- 以下语法为版权信息 -->
<blockquote cite="https://orangefreesounds.com/forest-bird-chirping-sound/">
    <p>This Audio is used for HTML demos, audio referenced in <a href="https://orangefreesounds.com/forest-bird-chirping-sound/"target="_blank">Orange Free Sounds</a>, copyrighted by <a href="https://orangefreesounds.com"target="_blank">Orange Free Sounds</a>.</p>
</blockquote>

渲染效果:

This Audio is used for HTML demos, audio referenced in Orange Free Sounds, copyrighted by Orange Free Sounds.

表格

元素:
<table>:表格父元素,所有表格数据都应被包裹在<table>内.
<caption>:指定表格的标题.
<thead>:表头,包含各列标题.
<tbody>:表主体,包含表的主要内容或数据.
<tr>:table row 的缩写,每一行数据都应被<tr>包裹.
<td>:table data的缩写,表示一个单元格
<th>:table heading的缩写,粗体显示
<tfoot>:表格页脚
<span>:
<border>:已经被HTML5废弃,现在应该用CSS来定义边框.
属性:
colspan:行跨度(合并单元格:行)
rowspan:列跨度(合并单元格:列)

表格语法示例:
<table border="1">
    <thead>
        <tr>
            <th>Player</th>
            <th>Team</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Derek Jeter</td>
            <td>Yankees</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

渲染效果:

Player Team Number
Derek Jeter Yankees 2
第一列 3
合并表格语法示例:
<table border="1">
    <thead>
        <th colspan="4">Aaron Judge</th>
        <th>RF</th>
    </thead>
    <tbody>
        <tr role="header">
            <td>Year</td>
            <td>Team</td>
            <td>BA</td>
            <td>HR</td>
            <td>RBI</td>
        </tr> 
        <tr>
            <td>2017</td>
            <td rowspan="3">NYY</td>
            <td>.284</td>
            <td>52</td>
            <td>114</td>
        </tr> 
        <tr>
            <td>2018</td>
            <td>.278</td>
            <td>27</td>
            <td>67</td>
        </tr> 
        <tr>
            <td>2019</td>
            <td>.272</td>
            <td>27</td>
            <td>55</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Totals:</td>
            <td>.278</td>
            <td>106</td>
            <td>236</td>
        </tr> 
    </tfoot>    
</table>

渲染效果:

Aaron Judge RF
Year Team BA HR RBI
2017 NYY .284 52 114
2018 .278 27 67
2019 .272 27 55
Totals: .278 106 236

表格CSS样式

表格框
表格折叠
  
    NOKO Genius 5 User Guide
    
    
    
  
  
  
    
      
        模式
        说明
      
      
        Standby
        橙色灯亮起.在待机模式下,充电器没有充电或没有向电池提供任何电源.在这种模式下,节能会被激活.
      
      
        12V
        
      
      
        12v AGM
        
      
      
        12V LITHIUM
        
      
      
        6V
        
      
      
        Force
        
      
      
        12V REPAIR
表格水平对齐
<!--Collapse Table Borders-->
table {
  width: 100%;
  border-collapse: collapse;
}
<!--Horizontal Alignment-->
td {
  text-align: center;
}

架构和组织

具体请参考:https://schema.org
https://schema.org/docs/gs.html

WEB表单

表单通常使用服务器端语言如:PHP;Python;C#进行处理.

<form>:
<textarea>:为用户提供输入文本块,即文本段落.
<select>:可以创建下拉菜单,需要搭配<option>使用,默认用户只能选择下拉菜单中一项,可以配置multiselect属性,让用户可以选中多个.

属性:
action:该属性告诉浏览器表单数据发送到哪里,即:如何处理表单.如通过邮件 或 将表单内容存储到数据库中等,如果不包含action属性,那么现代浏览器将假定当前页面会处理该表单.
method:指定表单数据的发送方式,其中值应为:GET和POST

name:该属性为表单赐予唯一标识,该属性可以被CSS 和 JavaScript 引用该表单.
type:默认值为:text
placeholder:占位文字,如果不使用value属性而使用placeholder,会在该表单属性的文本里显示 灰色文本,以提升用户需要输入的内容.

<input>元素中包含的属性:

input text属性-语法示例1:
<form>
  <input type="text" name="search" value="" />
</form>

渲染效果

input text属性-语法示例2:placeholder带提示的输入框
<html>
  <body>
    <h3>这是(input输入)元素,包含text;placeholder;submit属性</h3>
    <form action="/action_page.php">
      <label for="last_name">Last Name:</lable>
      <input type="text" name="last_name" id="last_name" placeholder="Please enter a last name" />
      <br><br>
      <label for="first_name">First Name:</lable>
      <input type="text" name="first_name" id="first_name" placeholder="Please enter a first name" />
      <br></br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

渲染效果:

这是(input输入)元素,包含text;placeholder;submit属性