第十四周课程（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 标签:  标签内部字母大小写不区分

- 图标，空格&nbsp;    大于号&gt;      小于号&lt;

- 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标签都是可以提交到后台的

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <input type="text">

       <input type="password">

       <input type="submit">

       <input type="button">

       <form enctype="multipart/form-data">

           <div>

               <select name="city" size="5">

                   <option value="1">北京</option>

                   <option value="2">上海</option>

                   <option value="3" selected="selected">杭州</option>

                   <option value="4">深圳</option>

               </select>

               <select name="city" multiple=multipe size="5">

                   <option value="1">北京</option>

                   <option value="2">上海</option>

                   <option value="3" selected="selected">杭州</option>

                   <option value="4">深圳</option>

               </select>

               <p>请选择性别</p>

               男：<input type="radio" name="same" value="1" checked="checked">

               女: <input type="radio" name="same" value="2">

               <p>请选择爱好</p>

               足球：<input type="checkbox" name="favor" name="1" checked="checked">

               篮球：<input type="checkbox" name="favor" name="2">

               台球：<input type="checkbox" name="favor" name="3">

               <p>上传文件</p>

               <input type="file" name="fname">

           <div/>

           <div>

               <input type="submit" value="提交">

               <input type="reset"  value="重置">

           <div/>

           <div>

               <textarea name="world">hello,world</textarea>

           </div>

       <form/>

 </body>

 </html>

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

第一篇-Html标签中head标签，body标签中input系列，textarea和select标签的更多相关文章

  1. 第一篇 - bsp抓取python中文开发者社区中的所有高级教程

    工具:python3.6  pycharm 库:bs4 + urllib 第一步:读取html源码 from bs4 import BeautifulSoup import urllib.reques ...

  2. 第一篇 网站基础知识 第4章 Java中Socket的用法

    第4章 Java中Socket的用法 4.1 普通Socket的用法 Java中的网络通信是通过Socket实现的,Socket分为ServetSocket和Socket两大类,ServetSocke ...

  3. jQuery系列之操作select标签

    每次看完东西基本就忘了,现在决定写一下博客来记录,不知道效果咋样. 一.jQuery操作选择器 1.基本选择器 关于基本选择器,我就不用太多说了,包括了ID.类.标签等选择器. 2.层次选择器 我觉得 ...

  4. 前端开发【第一篇：HTML】

    HTML初识 1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都 ...

  5. javaWeb技术第一篇之HTML

    <!-- 当前是最简的html --> <html> <!-- 告诉浏览器当前是一个html文档 最外面的标签. --> <head> <!--h ...

  6. select标签让文字垂直居中问题

    直接在select样式中添加:padding:npx 0; n的大小视select标签的高度而定.一般为8px左右.

  7. 微软BI 之SSRS 系列 - 如何实现报表标签的本地化 - 中文和英文的互换

    SSRS 中并没有直接提供本地化的配置方式,因此在 SSRS 中实现本地化,比如有英文标题还有可选的中文标题,就需要通过其它的方式来解决. 比如默认是这样的英文标题 - 但是本地中方用户可能比较喜欢看 ...

  8. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  9. 03_MyBatis基本查询，mapper文件的定义，测试代码的编写，resultMap配置返回值，sql片段配置，select标签标签中的内容介绍，配置使用二级缓存，使用别名的数据类型，条件查询ma

     1 PersonTestMapper.xml中的内容如下: <?xmlversion="1.0"encoding="UTF-8"?> < ...

随机推荐

  1. rest-framework之认证组件

    认证组件 认证简介 作用:校验是否登录 首先定义一个类,集成BaseAuthentication,写一个方法:authenticate,在方法内部,实证过程,认证通过,返回None或者两个对象(use ...

  2. 深入理解SpringBoot之启动探究

    SpringApplication是SpringBoot的启动程序,我们通过它的run方法可以快速启动一个SpringBoot应用.可是这里面到底发生了什么?它是处于什么样的机制简化我们程序启动的?接 ...

  3. mysql 开发进阶篇系列 47 物理备份与恢复(xtrabackup 的完全备份恢复，恢复后重启失败总结)

    一. 完全备份恢复说明 xtrabackup二进制文件有一个xtrabackup --copy-back选项,它将备份复制到服务器的datadir目录下.下面是通过 --target-dir 指定完全 ...

  4. salesforce零基础学习（九十一）Facet

    说Facet以前,我们先说一下浏览器加载解析以及渲染的过程.浏览器获取一个HTML的文件时,会按照自上向下的顺序进行解析,并在加载过程中进行渲染.对html解析成DOM树,对CSS 解析成CSS Ru ...

  5. java与json，一篇就够了

    本示例使用的json包为阿里的fastjson 首先写三个工具类(seter和geter方法省略,自行补上): /** * 屏幕实体类 */ public class Screen { private ...

  6. 【Flask-RESTPlus系列】Part2：响应编组

    0x00 内容概览 响应编组 基本使用 重命名属性 默认值 自定义字段及多值情况 Url及其他具体字段 复杂结构 列表字段 嵌套字段 api.model()工厂 clone实现复制 api.inher ...

  7. MyBatis源码解析（二）——Environment环境

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6625612.html 本应该先开始说Configuration配置类的,但是这个类有点过于 ...

  8. QT 应用程序测试

    添加环境 export QTEDIR='/Qt5' export QTINC='/Qt5/include/' export QTLIB='/Qt5/lib' export QT_QPA_FB_TSLI ...

  9. Centos 7.6配置nginx反向代理,直接yum安装

    一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76    nginx负载均衡器 192.168.2.82    web ...

  10. Verification and validation

    Verification Verification is the process to make sure the product satisfies the conditions imposed a ...