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 第一天的更多相关文章
	

    
								
  1. Spark基础学习精髓——第一篇
		
    Spark基础学习精髓 1 Spark与大数据 1.1 大数据基础 1.1.1 大数据特点 存储空间大 数据量大 计算量大 1.1.2 大数据开发通用步骤及其对应的技术 大数据采集->大数据预处 ...
    
		
    2. 
						
  2. 监听器(web基础学习笔记二十二)
		
    一.监听器 监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程序,这个程序专门 ...
    
		
    3. 
						
  3. JSTL 标签库 使用(web基础学习笔记十九)
		
    标签库概要: 一.C标签库介绍 1.1.<c:> 核心标签库  JSTL 核心标签库(C标签)标签共有13个,功能上分为4类:1.表达式控制标签:out.set.remove.catch2 ...
    
		
    4. 
						
  4. EL运算符(web基础学习笔记十七)
		
    一.EL语法 1.1.语法结构 ${expression} 1.2.[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符号,就一 ...
    
		
    5. 
						
  5. JSP实现数据保存(web基础学习笔记四)
		
    session对象: //服务端设置Session属性 session.setAttribute("user", username); //客户端接收Session Object  ...
    
		
    6. 
						
  6. Web基础学习
		
    Servlet和Servlet容器.Web服务器概念:https://blog.csdn.net/lz233333/article/details/68065749 <初学 Java Web 开 ...
    
		
    7. 
						
  7. 过滤器(web基础学习笔记二十一)
		
    一.过滤器简介 二.在Eclipse中创建过滤器 三.使用过滤器设置全部web字符编码 public void doFilter(ServletRequest request, ServletResp ...
    
		
    8. 
						
  8. Servlet一(web基础学习笔记二十)
		
    一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...
    
		
    9. 
						
  9. Java中执行存储过程和函数(web基础学习笔记十四)
		
    一.概述 如果想要执行存储过程,我们应该使用 CallableStatement 接口. CallableStatement 接口继承自PreparedStatement 接口.所以CallableS ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Windows上使用telnet测试端口号
			
    之前测试服务器某一端口开启开启情况一般在服务器上使用  netstat –ano|findstr "端口号"命令查看. 但是有时候端口在服务器上开通了,但是客户端并不一定可以访问到 ...
    
			
    2. 
						
  2. Elasticsearch设置最大返回条数
			
    在Elasticsearch中如果需要做分页查询,我们通常使用form和size实现.form指定从有序哪一行开始,size表示从当前开始读取多少行.但是我们发现查询结果最大只能到10000,这是因为 ...
    
			
    3. 
						
  3. ubuntu中python3安装package
			
    1.实验环境 Ubuntu16.04x86 + python3.5 ubuntu中同时存在python2.7 和 python3.5 2.pip使用说明 sudo pip install packag ...
    
			
    4. 
						
  4. mui---获取设备的网络状态
			
    在用mui做音乐或视频播放器的时候,往往会考虑当前音乐+视频的播放环境.例如是4G ,WIFI,无网络,给出特定的提示: 具体做法:根据 getCurrentType来进行获取当前网络的类型: plu ...
    
			
    5. 
						
  5. Mac os的使用
			
    来北京入职java开发实习,公司标配macook.一开始不会使用macos系统,用起来很不适应,我是拒绝的.但是leader说mac是开发效率最高的工具了·.一开我很怀疑,后来觉得mac系统用起来还真 ...
    
			
    6. 
						
  6. python3 中 Event.wait 多线程等待
			
    event.wait(time) 等待 time 时间后,执行下一步.或者在调用 event.set() 后立即执行下一步. event.clear()  清除信号 event.set() 设置信号  ...
    
			
    7. 
						
  7. Map 嵌套存储Map
			
    import java.util.HashMap;import java.util.Iterator;import java.util.Set;import java.util.Map.Entry;  ...
    
			
    8. 
						
  8. transform的兼容性写法浏览器 和 transition
			
    transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firef ...
    
			
    9. 
						
  9. oracle安装教程
			
    首先下载oracle 12c的安装包(一共有两个组成),下载完之后将两个压缩文件解压到同一个目录下 https://pan.baidu.com/s/1ydsClsHv04RAwaoGmHrFVQ ht ...
    
			
    10. 
						
  10. php中，echo,print,var_dump的三个区别
			
    1.echo语句 echo - 能够输出一个以上的字符串 <?php      echo "<h2>www.dc3688.com</h2>";     ...
    
			
    11.