<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>表单类型</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } form { max-width: 500px; width: 100%; margin: 32px auto 0; font-size: 16px; } label { display: block; margin: 10px 0; } input { width: 100%; height: 25px; margin-top: 2px; display: block; } </style> </head> <body> <form action=""> <fieldset> <legend>表单类型</legend> <label for=""> email: <input type="email" name="email" required> </label> <label for=""> color: <input type="color" name="color"> </label> <label for=""> url: <input type="url" name='url'> </label> <label for=""> number: <input type="number" step="3" name="number"> </label> <label for=""> range: <input type="range" name="range" value="100"> </label> <label for=""> search: <input type="search" name="search"> </label> <label for=""> tel: <input type="tel" name="tel"> </label> <label for=""> time: <input type="time" name="time"> </label> <label for=""> date: <input type="date" name="date"> </label> <label for=""> datetime: <input type="datetime"> </label> <label for=""> week: <input type="week" name="month"> </label> <label for=""> month: <input type="month" name="month"> </label> <label for=""> datetime-local: <input type="datetime-local" name="datetime-local"> </label> <input type="submit"> </fieldset> </form> <input type="text" list="myData"> <datalist id="myData"> <option>本科</option> <option>研究生</option> <option>不明</option> </datalist> <!-- 上方代码中，input里的list属性和 datalist 进行了绑定。数据列表可以自动提示。 --> </body> <body> <!-- 区别 行内元素： ·和相邻的行内元素在一行上 ·高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效 ·默认的宽度就是它本身的宽度 ·行内元素只能容纳纯文本或者是其他的行内元素（a标签除外） 块级元素： ·块级元素会独占一行 ·高度，行高，外边距和内边距都可以单独设置 ·宽度默认是容器的100% ·可以容纳内联元素和其他的块级元素 行内块级元素的特点： ·和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙 ·默认的宽度就是本身内容的宽度 ·高度，行高，内边距和外边距都可以设置--> <!-- 以下是常见块级元素 --> <!-- 只有文字才能组成段落，因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素； 因为它们都是文字块级标签，里面不能再存放其他的块级标签。 链接里面不能再存放链接 --> <h1>h1~h6都是块级元素</h1> <h6>h1~h6都是块级元素</h6> <p>p也是块级元素</p> <div> <p>div当然是块级元素</p> </div> <ul> <li>ul是块级元素</li> </ul> <ol> <li>同理ol也是块级元素</li> </ol> <dl> <dt>dt当然是块级元素</dt> <dd>dd也是块级元素</dd> </dl> <!-- 在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性 --> <img src="./Photo.webp" alt="None" width="100px" height="50px" align="left"> <!-- 常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等 --> <span><a href="https://www.baidu.com">a is a in-line-elements</a></span> <span><p>span is also a in-line-elements</p></span> <!-- html 元素的嵌套关系 块级元素可以包含行内元素。 块级元素不一定能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。 行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。 注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的 ；但是在 html 4.0.1 中， a > div 仍然是不合法的。 --> </body> <body> <div><a href="https://www.baidu.com">Link</a></div> <div><a href="https://www.baidu.com">Link</a></div> </body> </html> <!-- HTML兼容性测试网站 https://html5test.com/index.html HTML能力检测 caniuse.com -->
