WEB开发零基础到入门之HTML+CSS(学习记录)

有其它开发语言基础的。语言都是有共性的，如果有其它语言基础，学起来会容易很多。
英语比较好的，web开发使用的是英语，很多函数通过函数名就可以大概的了解函数的作用，另外特别多的技术文档是英语，所以英语好的人比较有优势。
有计算机基础的，当然如果了解计算机原理的人更好。还有打键盘速度要快，不要一指禅(所谓一指弹就是一个手指头看半天键盘点一下的)。
理科生，对数据比较敏感。在做数据处理时比较有优势。
逻辑能力比较好。业务开发中，离不开对流程的控制。逻辑能力比较好的朋友，思路清晰，效率高。

万事没有绝对的事，并不是说没有以上条件的朋友就不能学，只是可能需要花比大家更多多的时间和精力。

学习过程中需要注意什么

有耐心

很多朋友包括我自己身边的朋友(我推荐去学习)刚开始学习，三分钟热度，(当然我也在高中和大学期间也是自学和在某在线教育机构平台学习也是三分钟热度,可是我现在面临的是毕业,面临出校园后关于自己的未来选择,没办法我开始给自己下更多的功夫每天大概就睡了3-4小时,目的就是为了多学习我还不知道的东西还不能熟练运用的东西)学习一段时间就放松或者放弃，从事开发需要做事认真,有耐性,能耐的住寂寞(这是我之前在教育机构上学习时候老师说的话)。

知行合一

学的过程中，很多人以为自己懂了，但是让自己做又做不出来，知道是一回事，能做出来又是一会事，经验是通过实践积累出来的，纸上谈兵的人大把，想脱颖而出，那么你就得比别人做得更好。看一万遍不如练一遍。古言："读书万卷书，行万里路"；平时多看看大牛分享的干货或站点内的基础视频等之类,但是不能只是看看必须练，因为这东西你不练只是看看,那永远不会有进步的空间！要让自己亲身体验,让你的手指和大脑灵活运用起来！

本教程的优点

1.常用的，不照本宣科讲大量的理论

2.供快捷易懂的学习内容

3.不需要特意去背

4.提升学习能力，解决问题能力

web应用开发结构：

web应用

Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户很容易访问应用程序。用户只需要有浏览器即可，不需要再安装其他软件。通俗的讲，web应用就是大家通常接触到的网站。
应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序，也就是说这类程序一般独立运行。而B/S就是浏览器端/服务器端应用程序，这类应用程序一般借助IE等浏览器来运行。WEB应用程序一般是B/S模式。Web应用程序首先是“应用程序”，和用标准的程序语言，如C、C++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。换句话说，它是典型的浏览器/服务器架构的产物。更多关于WEB应用的了解

web应用概念

网站

网站是构成web的基础，所谓网站(Website)，就是指在网际网络（万维网）上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合, 同时也是构成web的基础。

网页

网页，是网站中的页面，是构成网站的基础。网页是构成网站的基本元素，是承载各种网站应用的平台。简单来说，网站就是由网页组成的。网页通常是HTML格式（文件扩展名为.html 或.htm或.php或.aspx或.asp或.jsp等）。网页要通过网页浏览器来阅读。在浏览器访问相对应的url（地址）就可以往服务器发给送请求

web请求

当客户端向服务器的程序提出请求时，web服务器根据请求响应对应的页面，当页面中含有php脚本时，服务器会交给PHP解释器进行解释执行，将生成的html代码再回传给客户端，客户端的浏览器解释html代码，最终形成网页格式的页面。

web应用开发结构

如何构建一个一个完整的web应用，需要了解到web应用的主要结构。

展现层面

展现层面指用户可以看到的网页，开发一个网页需要学习（html+css+javascript+jq）,也就是通常讲的前端开发

逻辑/业务层面

接受用户的请求或者数据，进行相关业务流程的处理，这部分需要学习（php或者其它语言java,python,ASP等）;也就是通常讲的后端开发

存储层面

一个完整的应用需要把数据进行存储，读取，需要学习（mysql或者其它数据库SQL Server，mongodb等）。

开发工具/环境

优秀的工具，可以使你的开发工作事半功倍，帮助你创建出高品质的Web应用。以下工具在整个web开发过程中慢慢会用到。

PhpStorm

PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具，旨在提高用户效率，可深刻理解用户的编码，提供智能代码补全，快速导航以及即时错误检查。智能PHP编辑器、JavaScript 编辑器、HTML/CSS编辑器、轻量级IDE、智能的环境、可在Windows, Mac OS X, Linux上运行。
下载地址：https://www.jetbrains.com/phpstorm/

Sublime Text

Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器，方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱!Sublime Text 2这款程序员必备代码编辑器，几乎每位程序员提到Sublime Text 2都是赞不绝口！它体积小巧，无需安装，绿色便携；它可跨平台支持Windows/Mac/Linux；支持32与64位操作系统，它在支持语法高亮、代码补全、代码片段（Snippet）、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时，又保证了其飞快的速度！(个人推荐Sublime Text)
下载地址：
http://www.sublimetext.com/3

picpick

PicPick是一款免费截图软件，它可以抓取全屏幕或是局部的画面，而且操作也很简单，还具备了一般最常用到的基本图像编辑、屏幕尺、角度、测距、及屏幕演示白板等功能。在前端学习开发中非常有。

git

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。管理代码时候用到。

PhpStudy

PhpStudy就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。

支持CentOS、Ubuntu、Debian、Fedora、deepin，Web端管理，QQ群及论坛技术支持
一键创建网站、FTP、数据库、SSL；安全管理，计划任务，文件管理，PHP多版本共存及切换；自带LNMP与LAMP

下载地址：https://www.xp.cn/

navicat

强大的数据库管理和设计工具,支持 Win、Mac 和 linux。直观的 GUI 让用户简单地管理 MySQL、MariaDB、SQL Server、SQLite、Oracle 和 PostgreSQL 的数据库。

Xshell

Xshell 是一个强大的安全终端模拟软件，它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。

8uFtp

8UFTP客户端工具,涵盖其它FTP工具所有的功能。8uftp不占内存,体积小,多线程,支持在线解压缩。

SourceTree

SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具，同时也是Mercurial和Subversion版本控制系统工具。

展现层面（HTML/CSS）

HTML简介

一、网页的构成

展现形式上的构成

文字，图片和链接是构成一个网页最基本的元素。除此之外，网页的元素还包括表单（控件），表格，动画、音乐、视频等等。

代码结构上的构成

从代码结构上讲，网页的构成就是由html标签组成，我们需要掌握不同的标签分别代表着什么意义，掌握在网页中展现不同的东西分别需要用什么标签。

二、什么是 HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
更多关于HTML的介绍

HTML 文档 = 网页

三、如何创建一个HTML文档

包含HTML标签的文件叫HTML文档，文件扩展名为.html 或.htm等。HTML文档要通过网页浏览器来阅读。浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

通过谷歌或者火狐浏览器，我们可以很方便的看HTML文档的源代码或者HTML文档的结构。

通过使用任意文本编辑器直接新建一个文件，文件扩展名为.html 或.htm保存就创建了一个HTML文档。通过浏览器访问这个HTML文件。

HTML是一种描述性的语言，没有逻辑性，所以学习起来非常容易

四、自己的第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>YDTD丶Annuo</title>
</head>
<body>
	这是我的第一个html页面
</body>
</html>

**PS：**看到这朋友你有心动了嘛？不妨赶快打开你的编辑器跟着我建立自己的第一个网页，并通过浏览器访问吧！

HTML基础

一、HTML页面主体结构

<html>
	<head>
		<!–- 对html文档进行诠释、定义、描述不会显示在文档当中-->
	</head>
	<body>
		<!-– 对页面内容进行排版、编辑、显示在页面当中，是html页面的主体-->
	</body>
</html>

二、HTML语法结构

1、 HTML标签

所有标签：

http://www.w3school.com.cn/tags/index.asp

https://www.runoob.com/tags/html-reference.html

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如<body>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
关于HTML基础标签除了上面给出的菜鸟及W3sc之前我也整理过一篇文章 HTML基础标签用于参考

标记符结束中的标记元素用尖括号括起来，带斜杠的元素表示该标记结束，大多数标记符必须成对使用，以表示作用的起始和结束。

结束标记一定要以"/"结束，引号必须使用英文引号，标签之间不能交叉嵌套，例如<strong>YDTD丶Annuo<li></strong></li>。

标签特性

用两个尖括号括起来。
不区分大小写，但推荐采用小写
每个标签都是闭合的
同一标签可以同时拥有N个不同属性】

标签类型

对标签

包含起始标签和结束标签
内容写在对标签中间
属性写在起始标签尖括号内
例如<a href='http://www.ydtdml.com'>YDTD丶Annuo</a>

单标签

只有一个由尖括号括的标签
属性直接写在标签尖括号内
例如<img src='ydtd.jpg' alt='YDTD' />

2、HTML属性

必须放在开始标签里面，属性可以为标签提供更多样化的特性。

3、元素

开始和结束标签连同包含在他们之间内容，我们通常叫做元素

三、HTML注释

注释其实就是对代码的解释说明，在代码书写过程中合理运用注释是十分有必要的。浏览器不会解析注释。说白了，注释是给人看的，不是给浏览器看的。在sulime Text 中，用Ctrl+?可快速的注释。

<!-- 注释内容 -->

四、常用头部标签的含义

<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
    <meta name="keywords" content="关键词，多个关键词用英文逗号隔开"/>
    <meta name="description" content="本篇网页的概述"/>
</head>

例子解释
<meta charset="编码">编码设置
<title>标题标签，显示在浏览器标签中。
<keywords> 关键词，多个关键词用英文逗号隔开。
<description> 本篇网页的概述，一段话，对网站的进一步描述。

五、常见字体标签

<h1>标题字(最大)</h1>
<h6>标题字(最小)</h6>
<strong>粗体字</strong>
<em>斜体字</em>
<span>无意义的文字标签 </span>
<u>添加下划线</u> 
<i>斜体</i> 
<b>加粗</b>

标题字(最大)

标题字(最小)
粗体字
斜体字
无意义的文字标签
添加下划线
斜体
加粗

**PS：**跟着我建一个完整的html文档，并且把常用的字体标签练习几遍吧。

HTML编码

一、字符编码

计算机要准确的处理各种文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
案例：

在显示器上看见的文字、图片等信息在电脑里面其实并不是我们看见的样子，即使你知道所有信息都存储在硬盘里，把它拆开也看不见里面有任何东西，只有些盘片。假设，你用显微镜把盘片放大，会看见盘片表面凹凸不平，凸起的地方被磁化，凹的地方是没有被磁化；凸起的地方代表数字1，凹的地方代表数字0。硬盘只能用0和1来表示所有文字、图片等信息。那么字母”A”在硬盘上是如何存储的呢？可能小张计算机存储字母”A”是1100001，而小王存储字母”A”是11000010，这样双方交换信息时就会误解。比如小张把1100001发送给小王，小王并不认为1100001是字母”A”，可能认为这是字母”X”，于是小王在用记事本访问存储在硬盘上的1100001时，在屏幕上显示的就是字母”X”。也就是说，小张和小王使用了不同的编码表。（谍战密码本）；

常用字符编码

GBK - 汉字内码扩展规范，兼容GB2312。
[danger]* UTF-8 - 万国码（推荐）。
关于更多字符编码介绍

二、乱码产生的原因

文件存储的字符编码与浏览器在解析的字符编码不一致。

网页编码可以理解为两部分：

head头部设置的编码(浏览器在解析的字符编码)
网页文件本身的编码

解决乱码也很简单，只需要将两部分编码保持一致即可。

使用editplus等编辑器可以查看文件的存储编码。

<meta charset="编码">

**PS：**建一个HTML文件，以utf-8保存，charset设置为gbk,浏览看是否乱码吧！

HTML链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

一、a标签

Html语法中最重要的标签之一。通过使用 href 属性，创建指向另外一个页面的链。通过使用id 属性，创建一个文档内部的文档片段的书签(可直接跳到文档指定位置--锚链接)。

普通链接

<a href="https://www.csdn.net/" target="_blank" title="显示">YDTD丶Annuo</a>

例子解释

href 属性规定链接的目标
YDTD丶Annuo 始标签和结束标签之间的文字被作为超级链接来显示。
target定义被链接的文档在何处显示,target="_blank"新窗口打开
title鼠标移过时显示的文字

锚链接

给页面当中的某个特定位置添加标记，可以通过a链接直接指向这个位置，经常用在页面内容比较多的情况。我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<div class="d1">
	<a href="#mao1">点我跳转mao1</a>
	<div class="d2">
	<a name="mao1">我是mao1</a>
	</div>
</div>

例子解释

<a name="mao1">定义锚点
<a href="#mao1">跳转到mao1这个位置

**PS：**页面中增加a链接，指向CSDN，点击新窗口打开。在页面的底部设置一个锚点，点击跳转到顶部。

HTML图像

通过使用 HTML，可以在文档中显示图像。

一、img标签

<img src="/images/logo.png" alt="网站LOGO"  title="LOGO" width="280" height="140">

例子解释

src源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
alt属性用来为图像定义一串预备的可替换的文本，一般用于图片加载失败时的文本提示。
title鼠标移过时显示的文字。
width图片宽度。
height图片高度。

img标签为单标签，没有结束标签

关于更多img标签的介绍https://www.runoob.com/html/html-images.html

二、图片知识

格式	透明度	动画	特点	适用场景
JPG/JPEG	×	×	色彩丰富，压缩比高，画质损失小，体积小	色彩丰富、要求体积要小
PNG	√	×	色彩丰富，w，设置任意透明度，体积较小，但比jpg体积大一些。 IE6不支持png图片透明	对色彩有特殊要求、需要透明效果
GIF	√	√	仅支持256种颜色，体积小，只有透明和不透明两种效果	图片颜色少、需要透明效果
BMP	×	×	色彩丰富，画质清晰，但体积偏大	不推荐在网页中使用

三、路径知识

绝对路径

绝对路径就是指带有域名的完整路径。或者从盘符开始，具体的目标位置。
比如"中国北京市朝阳区建国里二巷27号"这就是一个生活动中的经典" 绝对"方式的描述

相对路径

相对路径则是从当前目录说起，参照起点为本文件。
相对于本目录<a href="./1.html">本目录下页面</a>。
相对于上级目录<img src="../meinv.jpg" title="YDTD" />。

**PS：**试一试在网页中分别会绝对路径和相对路径插入不同的图片。

HTML列表

在页面设计中，一系列类似的结构或者数据，可以通过列表的形式来处理。

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于<ul> 标签。每个列表项始于<li> 。

<ul>
	<li>钰嵩君</li>
	<li>情感语录平台</li>
</ul>

效果如下

钰嵩君
情感语录平台

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
	<li>钰嵩君</li>
	<li>情感语录平台</li>
</ol>

效果如下

钰嵩君
情感语录平台

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
	<dt>钰嵩君</dt>
	<dd>简单而深情</dd>
	<dt>总有一句话</dt>
	<dd>为你而写</dd>
</dl>

效果如下

钰嵩君

简短而深情

总有一句话

为你而写

以上效果都是没有做修饰，为默认效果。实际开发中会以css进行修饰。

**PS：**试着把三种列表都练习几遍，理清结构和写法。

HTML表单

HTML 表单用于搜集不同类型的用户输入,是Web浏览器和Web服务器进行通信的最常用的手段，即通过表单，浏览器不仅能从Web服务器中获得信息，而且还能向Web 服务器反馈信息。HTML为此提供了表单(Form)元素来设计和实现这种交互界面。

常用表单元素

表单形成的交互界面上有许多元素，负责收集用户输入的各种信息，这些元素一般称为控件。

单行/多行文本框
复选框
单选按钮
文件域
隐藏域
下拉菜单
提交按钮
重置按钮

<form method="post" action="">
	<!--单行文本-->
	<input type="text" />
	<!--密码-->
	<input type="password" />
	<!--单选框-->
	<input type="radio" />
	<!--多选框-->
	<input type="checkbox" />
	<!--隐藏域-->
	<input type="hidden" />
	<!--提交按钮-->
	<input type="submit" />
	<!--文件域-->
	<input type="file" />
	<!--重置按钮-->
	<input type="reset"	/>
	<!--按钮-->
	<input type="button"/>
	<!--文本区域-->
	<textarea></textarea>
	<!--下拉框-->
	<select>
		<option>下拉1</option>
		<option>下拉2</option>
	</select> 
</form>

效果如下：

`input`标签共有的一些属性

type 控件的类型
value 指定默认值
name 用于服务器获取数据

`radio`单选和`checkbox`多选

checked 默认的选中项
value 该选项被选中后提交到服务器的值
name 用于服务器获取数据

`select`元素（下拉列表）

HTML是通过<select>和<option>标记来定义输入列表框的。列表框标记<select>是成对出现标记，首标记<select>和尾标记</select> 之间的内容就是一个列表框的内容。和<option>标记用于定义列表框中的各个选项

<select name="" id="" size="" multiple="">
	<option value="">下拉1</option>
	<option value="">下拉2</option>
	<option value="" selected="">...</option>
	<option value="">下拉n</option>
</select>

例子解析

name用于服务器获取数据
sizesize属性是可选的，用于定义列表框的长度。size属性的参数值是数字，表示显示在列表框中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该列表框添加滚动条，用户可以使用滚动条来查看所有的选项。size属性的缺省值为1。
*multiple表示可以多选，如果不设置本属性，那么只能单选；按 Ctrl可以多选. 用法：multiple="multiple"
value当该项被选中并提交后，web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容
selected用来指定选项的初始状态，表示该选项在初始时是被选中的。

label标签

用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<p>请点击文本标记之一，就可以触发相关控件：</p>
<form>
	<label for="male">Male</label>
		<input type="radio" name="sex" id="male" />
	<br />
	<label for="female">Female</label>
		<input type="radio" name="sex" id="female" />
</form>

效果如下：

请点击文本标记之一，就可以触发相关控件：

例子解析

for规定label 绑定到哪个表单元素。
id需要绑定的元素加个标识。

**PS：**试着把所有常用的表单都练习几遍，理清不同类型表单的作用。

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母<td> 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>

效果如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

跨行或跨列的表格单元格

跨列

<table border="1">
	<tr>
	  <th>姓名</th>
	  <th colspan="2">电话</th>
	</tr>
	<tr>
	  <td>Annuo</td>
	  <td>183 2070 282</td>
	  <td>183 2070 232</td>
	</tr>
</table>

效果如下：

姓名	电话
Annuo	183 2070 282	183 2070 232

例子解释

属性colspan横跨的列数（合并列）。

跨行

<table border="1">
	<tr>
	  <td>姓名</td>
	  <td>Annuo</td>
	</tr>
	<tr>
	  <td rowspan="2">电话</td>
	  <td>183 2070 282</td>
	</tr>
	<tr>
	  <td>183 2070 232</td>
	</tr>
</table>

效果如下：

姓名	Annuo
电话	183 2070 282
电话	183 2070 232

例子解释

属性rowspan横跨的行数

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

综合运用：把所有以上的知识点的全部结合一下，通过以上学习内容，运用表格标签和表单标签，布出下面简历。

HTML 实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（< ）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。

HTML 中有用的字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（< ）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。

HTML 中有用的字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

HTML框架

帧窗口是一种页面技术，应用帧技术可以使得用户在同一个浏览器中，浏览不同的页面，并且各个页面之间相互联系，并且能够相互访问和进行操作。

实现思路

将浏览器的窗口按照不同的功能分割成多个小窗口，每个窗口对应自己的HTML页面，按照一定的方式组合起来，实现特殊的效果。

应用场景

网站后台操作界面,内容层级明确的页面

缺点

页面布局比较复杂，效率没有单页面高，对搜索引擎的友好程度不高

一、 frameset

不能和body共存。
表示框架开始，指定框架的个数以及边框等属性
属性：rows="" 、cols=""、值可以是百分比也是可以是具体的数字，也可以是* 进行等分
frameborder="" ,0表示没有边框，1表示有边框

例1

<frameset cols="25%,50%,25%">
    <frame src="frame_a.htm" />
    <frame src="frame_b.htm" />
    <frame src="frame_c.htm" />
</frameset>

例2

<frameset rows="50%,50%">
	<frame src="frame_a.html">
	<frameset cols="25%,75%">
		<frame src="frame_b.html">
		<frame src="frame_c.html">
	</frameset>
</frameset>

二、 iframe

用于在网页内显示网页,可以和body体共存，用法和类似，用于早期实现异步传输等视觉效果。

实例

<iframe class="HtmlEdit" width="100%" frameborder=0 height="100" scrolling="no" src="https://www.csdn.net/" MARGINHEIGHT="1" MARGINWIDTH="1" name="testframename">
</iframe>
<a href="http://www.ydtdml.com" target="testframename">点击指向其它框架</a>

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

**PS：**那么咱们对于HTML的介绍及实例介绍到这就结束了；如果有了解不透的点击下方链接详细了解

https://www.runoob.com/html/html-tutorial.html

https://www.w3school.com.cn/html5/index.asp

文章持续更新中...下篇是CSS的展现层面介绍！

Annuo、

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
WEB开发零基础到入门之HTML+CSS(学习记录)

序言之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭；所以就放弃了用个人站记录的想法，关于这里简单说明下web应用开发学习具体记录方向； HTML/CSS箭头→Javascript→Jquery→PHP→框架设计→mysql→Linux 关于框架设计这块我个人先推荐一款比较适合新手学习的YDTDPHP框架；推荐目的不是为了让你必须去看懂...
复制链接

扫一扫

专栏目录