陈子-零基础网站开发教程
关注
分享
扫一扫
不需要编程基础，学习：HTML+CSS+JavaScript+简易Photoshop制图+PHP+MySQL+……
陈子2005
2005年电子商务专业毕业，从事网站程序开发至今，2020年第15个年头。参与及独立开发过500多个网站，近几年专注于H5网站、微信公众号、小程序及各类侧重程序算法的B/S模式软件。因为喜欢，所以专注。微信：ww2016178
展开
-
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：父标签、子标签和后代标签
（七）父标签、子标签和后代标签 HTML标签嵌套后，两个直属嵌套的标签，外层的标签称为父标签，内层的标签称为子标签；子标签的子标签则称为父标签的后代标签，子标签也属于后代标签。如：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;...原创 2020-04-11 11:36:38 · 1308 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：DTD文档类型和HTML版本
（六）DTD文档类型和HTML版本 浏览器的工作模式通常称为“渲染模式”。在同一个浏览器里，同样的网页代码，渲染效果根据各个网页所指定的DTD（Document Type Definition，文档类型定义）而有差异；在不同的浏览器里，同样的网页代码、同样的DTD，渲染出来的效果也有差异。有些HTML标签或CSS属性的渲染效果差异比较细微，而有些HTML标签或CSS属性的渲染效果差别巨大...原创 2020-04-11 11:36:20 · 214 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：HTML标签的id属性
（五）HTML标签的id属性 几乎所有的HTML标签都支持id属性，举例：<!DOCTYPE HTML><html id="id1"><head id="id2"><meta id="id3" http-equiv="Content-Type" content="text/html; charset=utf-8"><ti...原创 2020-04-11 11:36:14 · 289 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：浏览器容错
（四）浏览器容错 各种浏览器在解析和处理HTML代码时，都具有很强的容错能力，但是为了所开发的网页在各种浏览器中呈现的效果尽可能的接近、排版不错乱、页面不乱码，网站开发人员需要按W3C标准来开发网页，而不是随意、任意的编写代码。 例如，网页1的HTML代码：这是一个用于显示的标准页面，却没有任何HTML标签，但浏览器能显示出本内容。这是浏览器做了容错处理（兼容处理）。这...原创 2020-04-11 11:36:08 · 167 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：网页编码
网页编码 在我们之前的演示例子中，网页编码都使用了utf-8编码，如：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>网页编码</title><...原创 2020-04-11 11:35:58 · 446 阅读 · 1 评论 -
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：img图片标签的宽度属性（width）和高度属性（height）
（二）img图片标签的宽度属性（width）和高度属性（height） 归纳起来讲，img图片标签的宽度属性（width）和高度属性（height）在指定值时，会有四种情况。1.通常情况下填写的是：图片的实际宽度和高度（单位默认为像素） 如（图2-41），在资源管理器中点中某张图片后，可以看到资源管理器最下方有图片的属性信息，其中的尺寸即是图片的实际宽度和高度，单位是像素。也可以...原创 2020-04-11 11:35:50 · 2319 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：绝对地址和相对地址
三、HTML及网页相关的知识点（一）绝对地址和相对地址 绝对地址和相对地址是网站开发基础知识中很重要的知识点。1.在网页中插入文件时，不可以使用硬盘的绝对路径 举个例子，在网页中插入图片，代码如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" c...原创 2020-04-11 11:35:43 · 341 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：form，表单（块级元素）
5.form，表单（块级元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>form标签</title></head><body>...原创 2020-04-11 11:35:22 · 633 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：label（内联元素）
4.label（内联元素） label基本只用于表单中提高用户的数据录入体验。 label的for属性，指定为某一个input的id值时，则两者会关联在一起：当鼠标点击label里的文字，浏览器就会自动将焦点聚到所关联的表单控件上。<!DOCTYPE HTML><html><head><meta http-equiv="Con...原创 2020-04-10 20:51:11 · 250 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：input（内联元素）
3.input（内联元素） input标签通过设置type属性的值而定义为不同类型的表单元素，可以创建为：输入框、单选框、复选框、提交按钮等。在HTML标签中，input标签算是比较复杂的。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/...原创 2020-04-10 20:49:48 · 494 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：select，下拉选择框（内联元素）
2.select，下拉选择框（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>select标签</title></head><b...原创 2020-04-10 20:48:37 · 448 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：form表单标签 textarea
form表单标签 表单在网页中主要负责数据收集，如会员注册表单，会员登录表单，投票表单，在线留言表单等。1.textarea，多行文本输入框（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf...原创 2020-04-10 20:47:06 · 254 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：area图片热点（内联元素）
（四）、area图片热点（内联元素） 有一种情况：比如一张中国地图，有30多个省份，鼠标点击不同的省份时，链接到不同的页面。并且每个省份的图案并不规则，各形各状。这种情况下，就需要用到图片热点。图片热点，允许在图片上勾勒出任意形状，对该形状设置链接，并且一张图片可以设置多个热点。<!DOCTYPE HTML><html><head><me...原创 2020-04-10 20:44:53 · 354 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：frameset，框架集（块级元素）
2.frameset，框架集（块级元素） frameset标签可以在网页中嵌入框架集（框架的集合），即多个框架。 iframe虽然可以在网页中嵌入单个的框架，但要在一个页面中嵌入多个框架（比如左中右三个框架，或上中下三个框架），却很难控制这些框架各自的宽度或高度以自适应显示屏。以一个网页插入左中右三个框架为例，我们控制左边的框架宽200（像素）、中间的框架宽100（像素）、右边的...原创 2020-04-10 20:41:25 · 369 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：iframe、frameset、frame框架标签
iframe、frameset、frame框架标签1.iframe ，框架（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>iframe标签</titl...原创 2020-04-10 18:59:43 · 266 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：table，表格（块级元素）
4.table，表格（块级元素） table标签用于显示表格类数据。网站开发新手常用table标签来分隔和布局网页里的元素，这是错误的方法，table标签应当只用于显示表格类的数据。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...原创 2020-04-10 18:55:38 · 623 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：dl，有标题和内容项的列表项目（块级元素）
3.dl，有标题和内容项的列表项目（块级元素） dl标签用于显示有标题和内容项的列表项目，dl标签内嵌dt和dd标签，dt标签表述标题，dd标签表述内容。dl、dt、dd是在一起使用的，各自并不分开使用。 dl、dt、dd标签自带缩进渲染效果，但使用时通常都会用CSS重新定义新的样式以符合网页整体美观需要。<!DOCTYPE HTML><html&g...原创 2020-04-10 18:55:22 · 294 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：ul，无序列表（块级元素）
2.ul，无序列表（块级元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ul标签</title></head><body>u...原创 2020-04-10 18:55:03 · 568 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：ol，有序列表（块级元素）
（二）、几组定义条目、列表、结构化数据的HTML标签 有几组定义条目、列表、结构化数据的HTML标签，在使用时都成套出现，并不单独使用，在这里归类讲解。1.ol，有序列表（块级元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...原创 2020-04-08 10:24:55 · 452 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：u，下划线效果（内联元素，常见标签但不被推荐使用）
23.u，下划线效果（内联元素，常见标签但不被推荐使用）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>u标签</title></head>&l...原创 2020-04-08 10:22:31 · 165 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：s，删除线效果（内联元素，常见标签但不被推荐使用）
22.s，删除线效果（内联元素，常见标签但不被推荐使用）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>s标签</title></head><...原创 2020-04-08 10:21:04 · 199 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：font，文字样式（内联元素，常见标签但不被推荐使用）
21.font，文字样式（内联元素，常见标签但不被推荐使用） font标签可以指定文本的字体、颜色、大小。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>font...原创 2020-04-08 10:19:18 · 429 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：center，居中效果（块级元素，常见标签但不被推荐使用）
20.center，居中效果（块级元素，常见标签但不被推荐使用）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>center标签</title></he...原创 2020-04-08 10:17:41 · 613 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：object，向网页插入对象（内联元素）；embed，向网页插入插件（内联元素）
19.object，向网页插入对象（内联元素）；embed，向网页插入插件（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>object标签</title&...原创 2020-04-08 10:14:19 · 727 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：meta，用于提供网页相关的元信息
18.meta，用于提供网页相关的元信息 meta标签提供网页相关的元信息，也可以理解为提供网站相关的设置、配置信息，如网页的关键字、网页的描述等。meta标签必须嵌套在head标签中。常见的meta标签有： （1）keywords，设置网页关键字，用于被搜索引擎收录： <meta name="keywords" content="网页,网页教程,陈子网页教程"...原创 2020-04-08 10:11:27 · 256 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：link，基本只用于引用外部的CSS样式表文件
17.link，基本只用于引用外部的CSS样式表文件<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>link标签</title><link rel="st...原创 2020-04-08 10:08:32 · 741 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：img，图片（内联元素）
16.img，图片（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>img标签</title></head><body>...原创 2020-04-08 10:01:41 · 232 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：script，向网页中插入脚本代码（内联元素）
15.script，向网页中插入脚本代码（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>script标签</title></head>...原创 2020-04-08 09:57:48 · 432 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：sub，下标；sup，上标（内联元素）
14.sub，下标；sup，上标（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>sub和sup标签</title></head><...原创 2020-04-07 13:00:28 · 887 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：pre，预格式化（块级元素）
13.pre，预格式化（块级元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>pre标签</title></head><body>...原创 2020-04-07 12:59:02 · 363 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：i，斜体字效果（内联元素）
12.i，斜体字效果（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>i标签</title></head><body>i...原创 2020-04-07 12:57:26 · 790 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：hr，分隔线（块级元素）
11.hr，分隔线（块级元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>hr标签</title></head><body>h...原创 2020-04-07 12:55:33 · 601 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：h1、h2、h3、h4、h5、h6，表示文章标题的大小层级（块级元素）
10.h1、h2、h3、h4、h5、h6，表示文章标题的大小层级（块级元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>h1-h6标签</title>&l...原创 2020-04-07 12:54:07 · 1950 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：b ，加粗（内联元素）；strong，语气强调（内联元素）
9.b ，加粗（内联元素）；strong，语气强调（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>b和strong标签</title></h...原创 2020-04-07 12:52:13 · 881 阅读 · 1 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：style，常用于放置CSS样式代码的容器（内联元素）
8.style，常用于放置CSS样式代码的容器（内联元素）<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>style标签</title><style t...原创 2020-04-07 12:17:47 · 291 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：span ，通用容器（内联元素）
7.span ，通用容器（内联元素） span也是一个通用容器标签,但span是内联元素（也称行内元素，内嵌元素），无换行效果，也不自带其它任何渲染效果。 按W3C标准，内联元素嵌在块级元素中是正确的，但块级元素嵌在内联元素中则是错误的。所以div中嵌入span标签，是正确的，但在span中嵌入div标签则是错误的。不过由于很多原因，比如程序员为了加快网站开发而忽略该规则，浏览器...原创 2020-04-07 11:05:07 · 626 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：p，段落（块级元素）
6.p，段落（块级元素） p也是一个容器标签，并且是块级元素，用于定义段落。div标签除了换行效果，没有其它渲染效果，但p标签除了换行效果，还定义了段落与段落之间的间距，在两个段落之间看起来会有一些空白，好像多了一行空白行。很多情况下我们并不需要这空白行，会使用CSS代码去掉它（CSS在后面的章节中讲解）。 既然有了div标签为什么还要p标签？HTML标签的设计之初，很多标签都带...原创 2020-04-07 11:04:24 · 1251 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：div，通用容器（块级元素）
5.div，通用容器（块级元素） div是一个通用容器标签，并且是块级容器。容器可用于存放文字、图片、多媒体等等任意的内容。块级容器中允许嵌入文字、内联元素、块级元素，即div中可放置任意元素。块级元素会另起一行开始渲染，并且占用一整行，所以带有换行效果。<!DOCTYPE HTML><html><head><meta http-equ...原创 2020-04-07 11:04:46 · 385 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：a，链接（内联元素）
4.a，链接（内联元素） a用于创建链接，它有两个重要属性：href和target。 href属性用于指定所要链接到的网址。 target属性指定打开链接的目标位置，其值有： （1）_blank（在 新页面 打开）； （2）_self（在 本页面 打开。如果a标签不设置target属性，默认为该值）； （3）_parent（在 父页面 打开，应用于框...原创 2020-04-06 12:28:25 · 260 阅读 · 0 评论 -
第二章 网站开发基础之HTML教程 - 二、常用HTML标签：br，换行
3.br，换行<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>br标签</title></head><body>br标签是告诉浏览...原创 2020-04-06 12:26:13 · 209 阅读 · 0 评论