第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

第十四周课程（1-12章节）

HTML 裸体

CSS 穿华丽衣服

Javascript 动起来

一 HTML （20个标签）

1.我们的浏览器是socket客户端

2.一套规则，浏览器认识的规则

3.开发者：

学习html规则

开发后台程序：

写html文件（充当模版的作用），

数据库获取数据，然后替换到html文件的指定位置（web框架）

4.本地测试：

找到文件路径，直接浏览器打开

pycharm打开测试

4.编写html文件

在整个html文件里面html标签只能有一个

doctype对应关系

类似html这种格式，都称作html标签 <html>abcd</html>

标签内部可以写属性<html lang="en" name="alex">

单行和多行注释：

head标签里面其他标签都看不到，只有title标签在网址顶部能看到

5.标签分类

- 自闭和标签：建议后面加上/，比如 <br/>, eg： <meta charset="UTF-8">

- 主动闭合标签 eg： <title>badboy</title>

6. head标签中

- <meta > 编码，跳转，刷新，关键字，描述， IE兼容

-title 标签

-<link/>

- <style/>

- <script >

7. body 标签: 标签内部字母大小写不区分

- 图标，空格  大于号> 小于号<

- p标签：段落
- br标签：换行

- h标签：

- span标签：

-----小总结----

所有标签分为：块极标签：div(白板），H系列（加大加粗），p标签（段落和段落之间有间距）

行内标签：span（白板）

标签之间可以嵌套

标签存在的意义：css操作，js操作起来方便

ps：chorme审查元素的使用（可以定位，查看样式）

- input系列

单行文本输入

input type='text - name属性, value= “赵帆”，表示输入框内的默认值

input type='password' -name属性

input type='submit' - value='提交',提交按钮，表单

input type='button' -value='登录'按钮

input type='radio' -单选款 value，checked=checked表示默认勾选，name属性（name相同则互斥）

input type='radio' -复选款 value，checked=checked表示默认勾选，name属性（批量获取数据）

input type=‘file’ -表示上传文件，但它依赖form表单的一个属性，及在form表单里输入enctype= "multipart/form-data", 这表示数据一点一点传给服务器

input type='reset' -表示重置

<textarea>默认值<textarea/> -name属性,表示多行文本输入

<select></select> -表示下拉框选择，name属性，内部option，value，提交到后台，size，multiple表示可以多选

总结：input系列，textarea和select标签都是可以提交到后台的

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8       <input type="text">
 9       <input type="password">
10       <input type="submit">
11       <input type="button">
12
13       <form enctype="multipart/form-data">
14           <div>
15               <select name="city" size="5">
16                   <option value="1">北京</option>
17                   <option value="2">上海</option>
18                   <option value="3" selected="selected">杭州</option>
19                   <option value="4">深圳</option>
20               </select>
21
22               <select name="city" multiple=multipe size="5">
23                   <option value="1">北京</option>
24                   <option value="2">上海</option>
25                   <option value="3" selected="selected">杭州</option>
26                   <option value="4">深圳</option>
27               </select>
28
29               <p>请选择性别</p>
30               男：<input type="radio" name="same" value="1" checked="checked">
31               女: <input type="radio" name="same" value="2">
32
33               <p>请选择爱好</p>
34               足球：<input type="checkbox" name="favor" name="1" checked="checked">
35               篮球：<input type="checkbox" name="favor" name="2">
36               台球：<input type="checkbox" name="favor" name="3">
37
38               <p>上传文件</p>
39               <input type="file" name="fname">
40           <div/>
41
42           <div>
43               <input type="submit" value="提交">
44               <input type="reset"  value="重置">
45           <div/>
46
47           <div>
48               <textarea name="world">hello,world</textarea>
49           </div>
50
51       <form/>
52
53 </body>
54 </html>

二 CSS （颜色，位置。。。）

转载于:https://www.cnblogs.com/wz123/p/10037456.html

第一篇-Html标签中head标签，body标签中input系列，textarea和select标签相关推荐

H5中的label、textarea、select标签
一. label标签 1,如果你想让点击input输入框左边的文字就可以让输入框获取焦点,就可以使用label标签把文字和input包裹起来. 2,如果label里面有多个表单,想定位到某个,可以通过 ...
表单标签form、label、input、textarea、select
表单的介绍表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 . 表单相关标签的使用 <form>标签表示表单标签,定义整体的表单区域 <la ...
C语言函数第一篇------printf输出格式符前的%4.2中的4和2分别代表什么?
这个虽然很简单,但是很容易忘记,而且项目中很少用到忘记了没什么大不了的,把漏的知识点重新捡起来就好了俗话说:温故而知新,可以为师矣来吧,划重点1: 4表示输出的宽度,包括小数部分的所有位数相加, ...
js 将input、textarea、Select等控件替换成标签(span)
代码 function RemoveControl(elements) { var arrObj = new Array(); var count = elements.length; ...
Selenium之定位元素常用的8种方法整理（第一篇）
在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下 ...
第一篇博客------自我介绍
目录自我介绍编程目标如何编程希望进入的公司自我介绍: Hello!!!我是一名即将步入大二的计算机小白. 小白姓名:###(三个字) 性别:男年龄:大二(大概也就0--100 ...
3. 在WordPress管理后台撰写第一篇博客文章
3. 发布第一篇博客文章在前面的文章中,我们首先介绍了1. 购买云服务器和域名的基本操作,然后又成功2. 搭建最简单的博客网站,如果你还没完成上面这些操作,请提前点击查看. 这篇文章我们首先熟悉下网 ...
微信小程序商城项目实战(第一篇:项目搭建与首页)
商城项目第一篇项目搭建项目结构编写整个项目中需要用到的功能 request.js 全局样式组件(搜索框) 首页代码编写效果图项目搭建后端接口:https://www.showdoc.c ...
实现自定义select标签
我们经常会遇到这种场景: 假设项目中有一个分类对象,类似数据字典,一个code对应一个name.这个在页面作为一个过滤条件:选择分类.一般做法是在jsp页面直接写select标签,用opt ...

第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

第一篇-Html标签中head标签，body标签中input系列，textarea和select标签相关推荐

最新文章

热门文章