HTML5-CSS学习笔记（2）HTML表单标签

单

1 ：表单标签

<form></form>
属性：
action='接口地址'
method='get / post'
name='表单名称'

2 ：表单控件

<input>
属性：
type='控件类型'
name：属性标识表单域的名称；
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
maxlength：控制最多输入的字符数，
Size：控制框的宽度（以字符为单位）
1）文本框
<input type="text" value="默认值"/>
2)密码框
<input type="password" />
3)提交按钮
<input type="submit" value="按钮内容" />
4)重置按钮
<input type="reset" value="按钮内容" />
5)空按钮
<input type="button" value="按钮内容" />

3：表单补充

1）单选按钮组
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默认选中)女
2）复选框组
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
* disabled="disabled" (禁用)
* checked="checked" (默认选中)
3）下拉列表（菜单）：
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
…………
</select>
表示下拉列表，name属性不是必须的
默认选择项用selected属性；
4）表单域多行文本定义：
语法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
5)上传文件：
语法：<input type="file">

4：表单标签补充

1）表单字段集
语法：<fieldset></fieldset>

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
?
2）字段级标题：
语法：<legend align="left/center/right/justify"></legend>
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。
3)提示信息标签：
语法：<label for="绑定控件id名"></label>
?
说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

拓展：post/get

(1). 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；
(2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；
(3). 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的请求头中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的请求体中。
(4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。
(5). 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。

转自：知乎Eric

.注释标记()

语法：

2.文件标记(<html>…</html>)

语法： <html>…</html>

说明：<html>这对标记是HTML文件的标记。<html>处于文件的最前面，表示HTML文件的开始。即浏览器从<html>标记开始解释，直到遇到</html>标记为止。

3.文件头标记(<head>…</head>)

语法： <head>…</head>

说明：

①由head这组标记定义的元素中，并不放置网页的任何内容，是放置关于这份HTML文件的信息。就是说，它并不属于HTML文件的主体，它包含文件的标题、编码方式和URL等。这些信息大部分用于提供索引、辨认或其他应用。

②这对标记在HTML文件中并不是必需的。如果某个HTML文件并不需要提供相关信息，则可省略<head>标记。

4.文件标题标记(<title>…</title>)

语法： <title>文件标题文字</title>

说明：此标记用于设定HTML文件的标题名称，它将显示在浏览器的标题栏中。

注意：<title>标记用于<head>标记中。但如果HTML文件中没有使用<head>标记，则<title>标记仍然起作用。

5.文件主体标记(<body>…</body>)

语法： <body>…</body>

说明：

①由<body>标记所建立的元素是HTML文件的内容主体，也是HTML文件的重点所在。HTML文件中要显示在网页上的所有内容，也都放置在这个元素中。

②<body>具有一些特殊的属性，可以设定背景及字符颜色等。

入我的主页，查看更多HTML的分享！

一. 结构标签

1. 页面布局：

<aside>定义页面内容之外的内容</aside>
<footer>定义文档或节的页脚</footer>
<header>定义文档或节的页眉</header>
<main>定义文档的主内容</main>
<nav>定义文档内的导航链接</nav>
<!-- 示例： -->
<header>我是导航栏</header>
<nav>我是导航栏</nav>
<aside>我是侧边栏</aside>
<main>我是内容</main>
<footer>我是页脚</footer>

2. details、summary（折叠）

可配合CSS实现漂亮的折叠面板。

<details>定义用户可查看或隐藏的额外细节</details>
<summary>定义 <details> 元素的可见标题</summary>
<!-- 示例： -->
<details>
  <summary>HTML 5</summary>
  这是展开后看到的内容
</details>

3. 进度条（progress）

可以实现行业占比显示、任务进度、动态进度条等。

<progress>定义任务进度</progress>
<!-- 示例： -->
<style>
progress {
    -webkit-appearance: none;
    width: 180px;
    height: 18px;
    background-color: transparent;
}
progress::-webkit-progress-bar {
    border-radius: 4px;
    background-color: #efefef;
    border: thin solid #efefef;
}
progress::-webkit-progress-value {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: teal;
}
progress::-moz-progress-bar {
    background: #34538b;
}
progress::-ms-fill {
    background: #34538b;
}
</style>
<progress value="40" max="100"></progress>

4. dialog（弹窗）

close() 关闭
open() 打开（注意css样式的定位不变）
showModal() 打开（注意css样式的定位变为absolute，建议自定义样式）

<dialog>定义对话框或窗口</dialog>
<!-- 
  示例：
  与form配合，这时点击两个按钮都会自动关闭
  不与form配合，可手动调用close()关闭，从而避免自动关闭
-->
<style>
  dialog:not([open]) {
    display: none;
  }
  dialog{}
  dialog::backdrop{}
</style>
<dialog id="dialog">
  <form method="dialog">
    <p>
      要关闭？
    </p>
    <button type="submit" value="false">取消</button>
    <button type="submit" value="true">确定</button>
  </form>
</dialog>
<script>
  let d=document.getElementById("dialog");
  let s=d.showModal();
  d.addEventListener("close", function() {
    console.log(d.returnValue); //returnValue对应button上的value
  });
</script>

5. figcaption（包含的容器）

<figcaption>定义 <figure> 元素的标题</figcaption>
<figure>定义自包含内容，比如图示、图表、照片、代码清单等等</figure>
<!-- 示例： -->
<figure>
  <img src="" alt="" width="200" height="200" />
  <figcaption>我是图片的描述内容</figcaption>
</figure>

6. mark（标记）

<mark>定义重要或强调的内容</mark>
/*示例：*/
<style>
  mark {
    background-color: red;
    padding: 0 4px;
    margin: 0 4px;
    border-radius: 3px;
    font-size: 15px;
    color: #fff;
  }
</style>
<p>今天加班了，下班时记得<mark>打卡</mark></p>

7. meter

IE 浏览器不支持 meter 标签。

<meter>定义已知范围（尺度）内的标量测量</meter>
<!-- 示例： -->
<meter value="0.6"></meter> 
<meter value="6" min="0" low="5" max="10"></meter>

8. article、sectionarticle：定义来自外部（引用）的论坛帖子、报纸文章、博客条目、用户评论等，通常包含标题、页脚等标签，对比<section>更具体。

<article>定义页面内的文章</article>
<section>定义文档中的节</section>
<!-- 示例： -->
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<section>
<h1>WWF</h1>
  <p>
    The World Wide Fund for Nature (WWF) is an international organization working on 
    issues regarding the conservation, research and restoration of the environment, 
    formerly named the World Wildlife Fund. WWF was founded in 1961.
  </p>
</section>

9. 其它

/* 仅Firefox 8.0 以及更高的版本支持 */
<menuitem>定义用户能够从弹出菜单调用的命令/菜单项目</menuitem>

二、文本标签

1. h-（标题）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2. bdo（方向）

<bdo dir="rtl">定义相反的的文本方向</bdo></p>

3. ruby、rp、rt（注释）

<rp>定义在不支持 ruby 注释的浏览器中显示什么</rp>
<rt>定义关于字符的解释/发音（用于东亚字体）</rt>
<ruby>定义 ruby 注释（用于东亚字体）</ruby>
<!-- 示例： -->
<ruby> 汉 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>

4. time


<time>定义日期/时间</time>
<!-- 示例： -->
<article>
<time datetime="2011-09-28" pubdate="pubdate"></time>
Hello world. This is an article....
</article>

5. wbr（单词换行时机）

IE不支持。

<wbr>定义可能的折行（line-break）</wbr>

6. abbr、acronym （缩写）

IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签

<abbr title=""></abbr>
<acronym title=""></acronym>

7. del（删除线）

<del>位于中间的删除线</del>

三、表单

1. fieldset（带标题的边框）

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

2. output（存放输出内容）

Internet Explorer 8 以及更早的版本不支持 <output> 标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
</form>

四、媒体

1. video（视频）

controls="controls"，控制面板
autoplay="autoplay"，自动播放
width、height 宽高
loop="loop" 无限循环，loop="1"只循环播放1次
muted="muted" 静音
poster="" 预览图（包括下载的文件）
preload 预加载，与autoplay冲突（只使用其中一个）

<video src="">
您的浏览器不支持 video 标签。
</video>

2. audio（音频）

controls="controls"，控制面板
autoplay="autoplay"，自动播放
loop="loop" 无限循环，loop="1"只循环播放1次
muted="muted" 静音
preload 预加载，与autoplay冲突（只使用其中一个）

<audio src="">
您的浏览器不支持 audio 标签。
</audio>

3. source（源文件）

Internet Explorer 8 以及更早的版本不支持 <source> 标签。

<video controls>
   <source src="" type="video/mp4">
   <source src="" type="video/ogg">
 Your browser does not support the audio element.
</video>

五、文档

MDN(https://developer.mozilla.org/zh-CN/docs/Web/HTML)

W3Cschool(https://www.w3cschool.cn/html5)

菜鸟教程(https://www.runoob.com/html/html5-intro.html)

还会完善一些常用的元素，比如input；如果有补充内容，请在评论区留言。

在线咨询

上一篇：JavaScript命名规范很重要
下一篇：零基础学会表格技巧标题合并居中常用技巧三秒解决数

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商