Web基础学习---HTML 第一天
Web基础学习---HTML 第一天
1 HTML标签
2、CSS
Web开发基础
HTML
好吧离开Python几天。。。
如何学好前端?? 多去看别人的网站、多看、多写、多练,(知乎、36Kr、)
多练就好
前端是啥、为什么要学、如何学 ======从零开始=====千万别掉队====
1、标签有些不需要用的、20个基础,其余的浏览
2、学不好,就是在给自己挖坑 HTML
1、一套规则,浏览器认识的规则。
2、开发者:
学习Html规则
开发后台程序:
- 写HTML文件(充当模板的作用)
- 数据库获取数据, 然后替换到html文件的指定位置(web框架)
3、本地测试
- 直接浏览器打开
- pycharm
4、编写html文件
- doctype 对应关系
- html标签: 标签内部可以写属性
- 注释: <!— 注释内容 —>
5、标签分类
- 自闭合标签 <meta charset=“UTF-8”>
- 主动闭合标签<a></a> - 20 个标签
CSS
- 颜色
- 位置
- 。。。 20个标签?是啥。。 格式:
<!DOCTYPE html> # 这里是对应关系 <html lang="en"> # html标签 <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> abc </div> </body> </html> 一、<head>标签:
- <meta>: 刷新、跳转,编码,关键字、描述、IE兼容
<meta http-equiv=“X-UA-Compatible” content=“IE=IE9;IE=IE8” />
- title标签
- link, 图标
<link rel="shortcut icon" href="https://static.zhihu.com/static/favicon.ico" type="image/x-icon" />
- style
- script
********下面的需要记住了了, 上面的不需要。*****
二、body
1、各种符号
图标:$nbsp; $gt; $lt;
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2、段落<p></p>,段落之间有间隔
3、换行 <br /> <br> <!— 自闭合可以加/或不加,所有标签不区分大小写 —>
4、标题:h1 h6
5、span,本身无特性,对CSS这些来说使用方便 所有标签分为:
块级标签:占用整行,H系列(加大加粗)、P标签(段落和段落之间有间距)
行内标签(内联标签):有多少占多少。span(白板) 6、DIV,块级,这个通过CSS几乎可以构造出所有的功能、CSS可以将块级、行内相互转换,
* div+css \ span+css, 完全可以的,只不过可能div+css是第一个人提出来的,所以普遍都是div
7、标签嵌套:
标签存在的意义:定位操作,CSS操作,JS操作
chrome 审查元素的使用
- 定位
- 查看样式 8、表单<form action=“http:….” method=“POST” >
<input />. type=text,password,button,submit, reset
type = “radio” 单项先择
name=“user”, value=“值”
submit 提交表单信息(Input) GET\POST何方妖孽:
发送的数据有两部份:1、请求头,2、请求数据
Get在url里,post在body里、在内容里,它们没有安全这一说 GET: POST 单选框:<input type=“radio” name=“gender” value=“1” />. name相当于分组了,同名的为一组 (同名互斥)
复选框:<input type=“checkbox” /> name属性(批量获取数据)
文件: <input type=“file” name=“put filename” /> 上传文件, 默认文件是发不过去的。依赖表单的属性(enctype="multipart/form-data"
),表示一点一点的发送的服务器。
多行文本: <textarea name=“content” >default value </textarea>
下拉框:<select name=“address”></select>, size=3,下拉列表框,multiple多选 <select name="address"> <option value="1">SH</option> <option value="2" selected=“selected”>BJ</option> </select>
<select name="address" size="3" multiple="multiple">
option分组
<optgroup label="China"> <option value="3">xx</option> </optgroup> ******能提交到后台的数据数*****END******
9、超级链接 a标签
- 跳转
- 锚点 <a href=“#333”>xxx</a> 跳到当前页面的id=333位置 10、图片域<img>
- src
- alt
- title
11、列表<ul> </ul> 这个听说可以忽略、后期都是用CSS改样式
- <li></li>
- <ol><li></li> </ol>
- <dl> </dl>
- dt. Dd
12、表格table tr td th
- thread 这个里面的字段只能是th了,定义表头
tr th
- <tbody> </tbody>
tr td
- 合并单元格
- tr rolspan
- td colspan
13、label 通常与input合用,
用于点击元素,使得关联的标签获取光标
<label for="username">用户名:</label> <input id="username" type="text" /> 14、filedset 几乎不用, 在一框上有字
- legend #终于弄完了标签了
=======Web基础学习---HTML 第一天的更多相关文章
- Spark基础学习精髓——第一篇
Spark基础学习精髓 1 Spark与大数据 1.1 大数据基础 1.1.1 大数据特点 存储空间大 数据量大 计算量大 1.1.2 大数据开发通用步骤及其对应的技术 大数据采集->大数据预处 ...
- 监听器(web基础学习笔记二十二)
一.监听器 监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程序,这个程序专门 ...
- JSTL 标签库 使用(web基础学习笔记十九)
标签库概要: 一.C标签库介绍 1.1.<c:> 核心标签库 JSTL 核心标签库(C标签)标签共有13个,功能上分为4类:1.表达式控制标签:out.set.remove.catch2 ...
- EL运算符(web基础学习笔记十七)
一.EL语法 1.1.语法结构 ${expression} 1.2.[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符号,就一 ...
- JSP实现数据保存(web基础学习笔记四)
session对象: //服务端设置Session属性 session.setAttribute("user", username); //客户端接收Session Object ...
- Web基础学习
Servlet和Servlet容器.Web服务器概念:https://blog.csdn.net/lz233333/article/details/68065749 <初学 Java Web 开 ...
- 过滤器(web基础学习笔记二十一)
一.过滤器简介 二.在Eclipse中创建过滤器 三.使用过滤器设置全部web字符编码 public void doFilter(ServletRequest request, ServletResp ...
- Servlet一(web基础学习笔记二十)
一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...
- Java中执行存储过程和函数(web基础学习笔记十四)
一.概述 如果想要执行存储过程,我们应该使用 CallableStatement 接口. CallableStatement 接口继承自PreparedStatement 接口.所以CallableS ...
随机推荐
- spring JdbcTemplate数据库
DAO package DAO; import org.springframework.jdbc.core.JdbcTemplate; public class OrderDao { private ...
- SpringBoot------自定义Logback日志
帮助文档: https://docs.spring.io/spring-boot/docs/2.1.0.BUILD-SNAPSHOT/reference/htmlsingle/#boot-featur ...
- python 为空判断场景
判定为空的场景: 取值为数字0.None.''.[]四种情况.
- How to write threats to validity?
Paper reference Threats to construct validity are concerned with the relationship between theory and ...
- mui 窗口管理及窗口之间的数据传递
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Java 将word转为pdf jacob方式
package com.doctopdf; import java.io.File; import com.jacob.activeX.ActiveXComponent; import com.jac ...
- python--列表,元组,字符串互相转换
列表,元组和字符串python中有三个内建函数:,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示 >>> s = "xxxxx& ...
- JVM内存布局
1. 概述 对于从事c和c++程序开发的开发人员来说,在内存管理领域,他们既拥有最高权力的”皇帝“又是从事最基础工作的”劳动人民“---既拥有每个对象的”所有权“,又担负着每个对象开始到终结的维护责任 ...
- BeeHive小思考
事件分发和事件处理 将所有行为注册为不同的时间类型,配置Module,让他们在事件发生时,响应这些事件(除了系统的事件,还可以注册自定义事件,触发自定义事件) Module注册之后应当会生成单例对象, ...
- idea便利配置使用配置
让properties能够中文正确显示 1.file encoding ---改为utf-8 spring的autowried没得错误,mybaties没得黄色背景 inspections--spri ...