对于前端的学习要先了解一下浏览器和html的发展史
其次看看这篇文章：https://kb.cnblogs.com/page/129756/#chapter1
我读到这句话时候感觉到了科技这个东西有很多时候并不是一家独大的。
而现实生活中是需要互相学习的
奇怪的是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进的结果。

HTML 网页结构：html经过浏览器 渲染以后 展现出来的页面
渲染：渲染在电脑绘图中是指用软件从模型生成图像的过程。
模型：是用严格定义的语言或者数据结构对于三维物体的描述，
它包括几何、视点、纹理以及照明信息
编码：通过代码的形式，把想要展现的页面，写在html文档中
相关的语言有html+css+javascript
html+css可以写出来网页的样式
javascript页面的行为
标签<a>一般是成对出现的 也有单标签<br> <br/>(可以省略)
属性：在元素中添加的 附加的信息<标签 name="value">
自定义标签
HTML 标签指示浏览器做出的相应的显示
1.html 从上到下解析
2.元素可以互相嵌套
<!DOCTYPE html>文档类型 声明用哪个版本的HTML
<html lang="zh">根元素 语言中文
<head>
配置
<title></title>网页上面标题
<meta charset="UTF-8">
</head>
<body style="css"> css的内容
网页内容
</body>
<p>段落<\p>
<h1>标题<h1>
<br>换行
&npsb；空格
文本格式化标签
<strong>
<em>斜体
<del>删除线
<span style="">
图片
<img src="路径" alt="可替换文本" title="图片上显示字">
格式：jpg 有损压缩 影响画质 小 不支持透明通道
png,无损压缩支持透明通道
gif
网络图片<img src="网络路径">
本地图片
绝对路径比如（C:sytem\s\）
相对路径 "../img/"

超链接：<a href="http//" target=“-black>
<img src="" alt="">跳到图片
</a>
书记标记：锚点
设置个锚点<a id="maodian">

点击跳到这个锚点 <a href="#idmaodian">

图片的映射
<body>
<img src="图片路径" alt="" usemap="#01图片">
<map name="01这张图片">
<area shape="circle" coords="中心（X,Y），半径" href="" alt="一链接">
<area shape="rect" coords="" href="左上方的坐标（X,Y），右下角点的坐标（X,Y）" alt="二链接">
</map>

列表
无序列表 ul+li 无顺序关系
有序列表 ol+li 有顺序关系
自定义列表 内容标题+内容 列表 dl+dt+dd

<ul type="" \style="">改变前面的东西
<li></li>
</ul>
<ol>
<li></li>
</ol>

<dl>
<dt><dt>
<dl>

</body>

表格是由若干行组成的
<body>
<table>表格
<tr>行
<th></th>标题
<td></td>内容
</tr>
</body>
porder="1"表格的边框
colspan 单元格可横跨的列数
rowspan 单元格可横跨的行数

表单
收集 用户输入 发送或者 提交给服务器
用户输入：
文本：普通 密码
单选框
多选框
下拉框

提交：提交按钮
http 超文本传输协议 浏览器和服务器的通讯
模式：请求-应答 浏览器主动发起请求-》服务器接收-》自生做处理-》结果返回浏览器-》浏览器根据结果展示出来
GET POST -->

<from action="" method="GET">action提交的页面 GET放在浏览器的头里默认method不变化
<input type="text" name="usr">用户的
<input type="password" name="pwd">

单选框 性别：<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
复选框 兴趣: <input type="checkbox" name="" >篮球
<input type="checkbox" name="" >足球
<input type="checkbox" name="" >排球
下拉框 城市: <select name="city">
<option value="">上海<\option>
<option value="">北京<\option>
</from>
布局
<body>
一般来说布局是先按功能分成好多小块 排列好

<div > 容器 用来装东西
</div>
布局div+css
table
frameset:管理后台

iframe: 嵌套页面
百度页面：<iframe src="" frameborder="0" width="100%"></iframe >
腾讯页面：<iframe src="" frameborder="0" width="100%"></iframe >
frameset:

</body>
可以实现局部刷新
<frameset rows="15%,85%">和body同级标签
<frame src=frame1.html>
<frameset cols="20%,80%">和body同级标签
<frame src=frame2.html>
<frame src=frame3.html>
<frame src=frame1.html>
</frameset>

嵌套规则
块元素：独立成一行 可以设置宽高 默认宽高100%
{
文字类块元素：p h1-h5
容器类块元素：div table from ul li

}
行元素：不独立成一行,不可以设置宽高 由内容决定宽高
{ a img input strong em span del}

特殊字符：文字 br &nbsp;

嵌套规则
1.块元素可以嵌套行元素
eg <div ><a href=""> 块嵌套行</a></div>
2行元素可以嵌套行元素
< span ><strong>行嵌套行</ span ></strong>

3.行元素不可以嵌套块元素

4.文字类元素不可以嵌套块元素

5.容器类块元素 可以嵌套块元素

HTML新手推荐的更多相关文章

  1. 新手推荐:Hadoop安装教程_单机/伪分布式配置_Hadoop-2.7.1/Ubuntu14.04

    下述教程本人在最新版的-jre openjdk-7-jdk OpenJDK 默认的安装位置为: /usr/lib/jvm/java-7-openjdk-amd64 (32位系统则是 /usr/lib/ ...

  2. iOS 远程消息推送，原理和开发详解篇（新手推荐）

    1.APNS的推送机制 首先我们看一下苹果官方给出的对ios推送机制的解释.如下图 Provider就是我们自己程序的后台服务器,APNS是Apple Push Notification Servic ...

  3. pl/sql报错快速解决方法(新手推荐)

    一:简介 今天登录数据库时莫名报了个奇怪的错:ORA-01033: ORACLE initialization or shutdown in progress可能是昨天匆忙电脑没正常关机导致的... ...

  4. 新手推荐：IIS+PHP+MYSQL环境配置教程

    本文介绍刚开始接触php的朋友如何为自己的服务器配置php环境 首先我们要的工具: 1.IIS:这个当然是不能少的了,用系统自带的就好了,这里就不教大家怎么装了. 2.PHP:php-5.2.0-wi ...

  5. 最常用的~正则表达式-相关js函数知识简洁分享【新手推荐】

    一.正则表达式的创建 JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 varregObj =newRegExp("(^\s+)|(\s+ ...

  6. wireshark抓包思维导图---新手推荐

  7. 最适合和最不适合新手使用的几款 Linux 发行版

    大多数知名的Linux发行版都属于"比较容易使用"这一类.一些观察人士可能会驳斥这个观点,但事实上,说到Linux,大多数并非从事IT或软件开发工作的人会被最容易的使用体验所吸引. ...

  8. 对于大一学习计算机的新手（c/c++ ）提出一些学习经验

    对于刚刚上大一的新手,且是那种十分有上进的学生,在学习计算机的过程中必然会有一大堆的困惑,比如: 1 .如何学好编程(这与以往的应试教育完全不同,按照以往的那种学习方式,看书刷题不过是成为一个考试学霸 ...

  9. javascript书籍推荐

    本文转自:http://blog.csdn.net/yangnihaozan/article/details/48294545 在当下,极多的程序员是通过自学来完成入门以及提升的.对于JavaScri ...

随机推荐

  1. Ｄubbo 自定义异常，你是怎么处理的？

    前言 记录Dubbo对于自定义异常的处理方式． 实现目标 服务层异常,直接向上层抛出,web层统一捕获处理 如果是系统自定义异常,则返回{"code":xxx,"msg& ...

  2. 利用python 学习数据分析 (学习一)

    内容学习自: Python for Data Analysis, 2nd Edition         就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...

  3. SpringCloud学习笔记(一)——基础

    什么是微服务架构 简单地说,微服务是系统架构上的一种设计风格,它的主旨是将一个原本独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间通过基于HTTP的RESTful API进 ...

  4. bzoj4842: [Neerc2016]Delight for a Cat

    bzoj4842 这是一道网络流的题(大家都看出来了吧) 首先我们简化一下题目,选出最关键的部分(就是知道什么和要求什么,还有条件) 我们在这里把睡觉设为0,至少有t0时间在睡觉,把打隔膜设为1,至少 ...

  5. 42.oracle物化视图

    写在前面 先大概列一下数据库表设计的常规流程.方案.要遵循的规则 根据业务切分设计表 逻辑分层(数据库分层) 数据库结构设计与拆分:水平拆分(mysql分片)oracle分区物化视图中间表设计方案 优 ...

  6. C#-WebForm-组合查询（Queryable延迟查询、Intersect交集）、分页展示基础

    组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...

  7. 编程开发之--java多线程学习总结（1）问题引入与概念叙述

    1.经典问题,火车站售票,公共票源箱,多个窗口同时取箱中车票销售 package com.lfy.ThreadsSynchronize; /** * 解决办法分析:即我们不能同时让超过两个以上的线程进 ...

  8. Spring+SpringMVC+Mybatis整合redis

    SSM整合redis redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列. 这里用的是ssm框架+maven构建的项目 ...

  9. springmvc 运行原理 Spring ioc的实现原理 Mybatis工作流程 spring AOP实现原理

    SpringMVC的工作原理图: SpringMVC流程 . 用户发送请求至前端控制器DispatcherServlet. . DispatcherServlet收到请求调用HandlerMappin ...

  10. C. Edgy Trees Codeforces Round #548 (Div. 2) 【连通块】

    一.题面 here 二.分析 这题刚开始没读懂题意,后来明白了,原来就是一个数连通块里点数的问题.首先在建图的时候,只考虑红色路径上的点.为什么呢,因为为了不走红色的快,那么我们可以反着想只走红色的路 ...