form表单

作者: Lily的夏天 | 来源:发表于2016-08-07 21:46 被阅读0次

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？

<ol> 标签定义有序列表,使用编号来记录项目的顺序,默认每个列表项前面显示1、2、3...。
属性：

2438058-26d2c9339fd7a733.png
例子：

<ol type="A" reversed>
       <li>萨博</li>
       <li>沃尔沃</li>
       <li>斯堪尼亚</li>
</ol>

QQ图片20160806105010.png

<ul> 标签定义无序列表,项目列表默认用圆点,项目顺序不分先后。
例子：

<ul>
       <li>萨博</li>
       <li>沃尔沃</li>
       <li>斯堪尼亚</li>
</ul>

QQ图片20160806110544.png

<dl> 标签定义自定义列表,自定义列表不仅仅是一列项目，也是项目及其注释的组合。自定义列表始于<dl>标签，每个列表项始于表头<dt>,列表项的说明始于表内容<dd>。

<dl>
       <dt>我是表头1</dt>
       <dd>萨博</dd>
       <dd>沃尔沃</dd>
       <dt>我是表头2</dt>
       <dd>斯堪尼亚</dd>
</dl>

QQ图片20160806153959.png

三者在语义上的区别：
三种列表都可以运用在网页布局上，相比于全部用div布局，用列表布局由大到小更符合语义化，而且还能够节省css命名。
有序列表适用于明显的排列顺利，而且次序不能乱，因此经常使用无序列表和自定义列表，因为他们没有顺序可以并列；这两个列表相比的话，自定义列表更简单，精准，也更好理解。
如何嵌套：

<dl>
       <dt>这里是嵌套</dt>
       <dd>
            <ol>
                 <li>课程目标
                         <ul>
                              <li>熟悉列表的使用场景和用法</li>
                              <li>理解HTML语义化</li>
                              <li>理解行内元素、块级元素概念</li>
                              <li>熟悉常见input表单的使用方式</li>
                              <li>掌握 POST 与 GET 方式的区别</li>
                         </ul>
                 </li>
                 <li>预习视频</li>
                 <li>课程任务</li>
            </ol>
       </dd>
</dl>

35622CC5-3C98-4D89-94C6-1CBA19E08C1E.png

2.如何去除列表前面的点或者数字？

list-style:none;

3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？

答：区别：1）ID具有唯一性，Class具有普遍性；2）ID的样式优先级高于Class；3)class可以写成class="intro other"，可以有多个class名，id名不能这样写。
ID是唯一的，所以尽量在结构外围使用，通常用于页面布局，Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
参考文档

4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

答：每个元素都有一个默认的 display 值，这与元素的类型有关。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

区别：1）.块级元素会独占一行，其宽度自动填满其父元素宽度,行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化;2).块级元素可以设置 width, height属性，行内元素设置width, height无效；3）.块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
对应标签：
常见块级元素：<div>,<p>,<h1>···<h6>,<table>,<tr>,<ul>,<li>,<dl>,<dt>,<form>
常见行内元素：<a>,<span>,<img>,<input>,<button>,<em>,<textarea>

5.display: block、display: inline、display: inline-block分别有什么作用?

答：display: block：此元素将显示为块级元素，元素前后会带有换行符
display: inline：此元素将显示为行内元素，元素前后不会带有换行符
display: inline-block：将元素设置为行内块元素，既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置宽高和上下左右的边距,但缺点是IE8以下不能使用。

6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .wrap{
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id='header'>
        <div class="wrap">
            <a id='logo' href="#"><img src=""></a>
            <ul class="nav">
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
            </ul>
        </div>
    </div>
    <div id='content'>
        <div class="wrap">
            <div class="aside">侧边栏</div>
            <div class="main">中心区块</div>
        </div>
    </div>
    <div id='footer'>
        <div class="wrap">这里是 footer</div>
    </div>
</body>
</html>

这段代码构建了页面header、content、footer三个部分，页面主体随着浏览器大小自动调整，最小宽度为900px。header部分分为logo和导航1、导航2、导航3；content部分分为侧边栏和中心区块。

7、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？

答：HTML CSS语义化个人理解是根据内容和需求选择合适的标签和合适的css属性。

结构上有2个作用，第一是使阅读者（人）对网站更加清晰，很容易将网站分块，便于阅读，而且可以减少单独再写class，第二是对于机器（搜索引擎，屏幕阅读器）更加友好，让机器更加准确的去理解你的网页。
功能上的是浏览器在底层对其中的一些标签实现了一些比较复杂的功能，比如video,audio，还有一些属性，这是为了方便开发者，让更多的开发者来使用我的浏览器。

在平时写代码过程中要注意选择合适的标签，class命名最好根据功能需求来，命名风格要统一等。
参考文档

8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

答：form表单的作用是用于把用户输入的数据提交到后台。
常见的input标签：

type="text",用于输入文本。placeholder属性展示的是输入框里的提示，maxlength，限制最大输入长度。
type="password"，用于输入密码,叫做密码域，输入的内容显示为星号。
type="radio"，单选按钮。注意：name要相同，这样表示它们是一组，才能实现单选，value要有值，否则后台无法显示对应的输入值。
type="checkbox"，复选框。加checked属性会默认选上
type="submit"，用于提交表单数据
type="textarea"，文本域，用于输入多行文本。
type="hidden"，隐藏域，用户看不到，用于暂存数据或者安全性校验.

9.post 和 get 方式的区别？

答：1）、数据提交方式不同，GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。POST把提交的数据则放置在是HTTP包的包体中。
2）、Get是向服务器发索取数据的一种请求，Get是获取信息，而不是修改信息，类似数据库查询功能一样，数据不会被修改；而Post是向服务器提交数据的一种请求。
3）、GET方式提交的数据最多只能是1024字节，理论上POST没有限制，可传较大量的数据，对POST起限制作用的是服务器的处理程序的处理能力。
4）、POST的安全性要比GET的安全性高，GET请求的数据会被浏览器缓存起来，用户名和密码将明文出现在URL上，其他人可以查到历史浏览记录，数据不太安全。在服务器端，用Request.QueryString来获取Get方式提交来的数据Post请求则作为http消息的实际内容发送给web服务器，数据放置在HTML Header内提交，Post没有限制提交的数据。

10.在input里，name 有什么作用？

答：

作为可与服务器交互数据的HTML元素的服务器端的标示。
当name的值相同时表示一组，可以实现单选。复选框中，可以把name值设置成一个数组，这样在命名的时候比较方便，后台也会给这些变量选择对应的输入数据。
参考文档

11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？

答：

<button>,在 button 元素内部可以放置内容，<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。注意：Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。
<input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非写了javascript 阻止它。
<a class="btn" href="#">提交</a>是超链接，链接到另一个URL。

12.radio 如何分组?

答：通过设置name值进行分组，如果name值是一样的，就是一组，分组后组内的选项是单选的。

爱好：<input type="radio" name="hobby" value="reading"></input>
       <input type="radio" name="hobby" value="run"></input>

13.placeholder 属性有什么作用?

答：placeholder 属性提供可描述输入字段预期值的提示信息。是HTML5新属性，IE8及以下不支持。

14.type=hidden隐藏域有什么作用? 举例说明

答：

1 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
2 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等。
3 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。

例子：

<form name="myForm" action="/test/6.php" method="post">
        密码:<input name="pwd" type="password" placeholder="密码" maxlength="10"/><br/>
         <input type="hidden" name="safe" value="123"/><br>
         <input type="submit" name="submit" value="提交">
    </form>

56DF5D04-7C25-4D02-B693-79ECAE5BC12F.png

50143D57-E1EC-4ECB-ABCF-85D7BDA62E1C.png

form表单

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？

2.如何去除列表前面的点或者数字？

3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？

4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

5.display: block、display: inline、display: inline-block分别有什么作用?

6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式

7、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？

8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

9.post 和 get 方式的区别？

10.在input里，name 有什么作用？

11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？

12.radio 如何分组?

13.placeholder 属性有什么作用?

14.type=hidden隐藏域有什么作用? 举例说明

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

form表单

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？

2.如何去除列表前面的点或者数字？

3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？

4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

5.display: block、display: inline、display: inline-block分别有什么作用?

6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式

7、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？

8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

9.post 和 get 方式的区别？

10.在input里，name 有什么作用？

11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？

12.radio 如何 分组?

13.placeholder 属性有什么作用?

14.type=hidden隐藏域有什么作用? 举例说明

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？

12.radio 如何分组?