确定风格、功能（论坛、留言板、支付、用户登录等）。
美工制作网页效果图（首页、列表页、内容页）。
制作人员切图排版，排成网页形式。
后台程序开始写程序。
前台与后台结合。
注意：注释只是为了以后维护用。
l Type：项目符号的类型，取值：disc（小黑点）、circle（圆圈）、square（实心方块）
内容 内容 内容
或的常用属性
Type：编号类型，取值：1、a、A、i、I
Start：从第几个开始编号
内容…..
常用属性
Direction：滚动方向，取值：up、down、left、right
Width：滚动宽度
Height：滚动高度
BgColor：滚动背景色
ScrollAmount：滚动步长值
ScrollDelay：两步之间的停留值
Loop：循环滚动次数
语法格式：属性=“值”>
常用属性：
Width：图片宽度。
Height：图片高度。
Border：图片的边框。
Src：图片的路径。
Align：left、center、right。（可以实现图文混排效果）
Hspace：图片与文字左右间距。
Vspace：图片与文字上下间距。
语法格式：属性=“值”>内容
Href：目标文件地址URL。
Target：打开方式。 _blank：新窗口、_self：本窗口、_parent:上个窗口打开、top：最顶级窗口打开。
Name：定义描点名称。
mailto
#空链接。
Js连接：
表示方法三种：
颜色单词：blue、green、red、yellow。
10进制表示：rgb（255，0，0）
16进制表示#FF0000（红）、#00FF00（绿）、#0000FF(蓝)
含义：锚点链接，是在一个网页的不同区域进行跳转
定义锚点（做记号）：
例如：
跳转到锚点（记号）：
语法：内容…..
作用：提供网页的元信息。指定网页的搜索关键词。
标记有两个属性：http-equiv和name
1、 http-equiv属性
功能：模拟http协议文件头信息，告诉浏览器怎么打开网页。
http-equiv属性一般与content属性配合使用。Content属性指定信息的详细属性
设置网页的字符集：
网页自动刷新：;
2、 name属性
设置网页的搜索关键词、版权信息、作者等。
（1） 设置网页搜索关键词
（2） 设置网页描述信息
l 所有标记和属性全部小写
l 单边标记必须关闭。如：-----
l 所有的属性值都必须加引号。
l 所有属性都必须有值。如：
l 标机之间要顺序嵌套，外层套内层。
l Xhtml网页必须有DTD文档类型定义代码
DTD文档类型定义
三大类型：
（1）结构：(一行四列)
（2）border属性：
Width：宽度
Height：高度
Border：边框
Bordercolor：边框颜色
Bgcolor：表格背景色
Background：背景图片
Cellpadding：单元格与内容距离
Cellspacing：单元格与单元格距离
Rules：合并边框线，取值：all
（3） tr属性：
bgcolor
align
height：水平：left、center、right
valign：垂直：top、middle、bpttom
（4） td属性：
colspan：合并单元格（左右）
rowspan：合并单元格（上下）
background
width
height
valign
（1）结构：
用户名： 密码：
（2）标记属性----块元素
name
method:提交方式 get、post
action：指定表单的处理程序，一般是PHP文件
enctype：指定表单数据的编码方式。只能在method=post情况下。
application/x-www-form-urldecoded //默认加密方式
multipart/form-data //上传文件，值是他自己
（3）get和post方法
Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全
如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。
POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。
属性：
name：文本框的名字
Type：表单元素类型
Value：文本框的值
Size：文本框的长度
Maxlength：最多可以输入多少个字符。
Readonly：只读属性。可以选中，但不能修改。ReadOnly=“readonly”
Disabled：禁用属性 同上。
语法格式：
语法格式:男
女
name：元素名称
Checked：默认选择checked=“checked”
Value：值
语法格式： 游戏
杀人
放火
北京 天津 重庆
：只有一个name属性。
：两个属性value、selected
Selected：默认选中
层叠样式表方式改下拉列表宽度：type=”width:100px”
Cols：宽度
Rows：高度
提交按钮
重置按钮
图片按钮
普通按钮
普通按钮本身不具备任何功能，需与js配合使用。
Name：名称
Value：上传文件名。Value属性是只读属性，
必须与enctype=”multipart/form-data”>配合实现才能上传
功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。
是的子标记。放在的后面。 网页多媒体网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。 图片热点图片热点：给一张图片加多个热点。语法结构： 标记常用属性： Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形） Coords：热区的坐标 如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150” （x1,y1）为左上角坐标，（x2，y2）为右下角坐标。 如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。 普通框架框架集和框架页：框架集：:主要用来划分窗口。框架页：常用属性： Src：引入文件地址。 Width：宽度 Height：高度 Frameborder：是否显示框架的边框线，取值：yes或no。 Scrolling：是否显示滚动条。取值：yes、no、auto。 Name：制定小窗口的名称，改名称也是给标记的target属性来用。 Align：框架在网页中对齐方式，取值：left、center、right。CSS简介CSS 层叠样式表。CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。 语法格式： CSS选择器基本选择器(1) “*”选择器：通配符 描述：将匹配所有的html标记，所有标记都会改变。 语法：*{color：red；} （2）标签选择器 描述：将匹配指定的html标记 语法：h1{color：red；}（3）class选择器（类选择器）-----使用最多的选择器 描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。 格式： （4）id选择器 描述：给指定id的元素添加样式 注意：网页中html标记的id属性的值，必须是唯一的。style type=”text/css”> #myId{ Color=red; Background-color:yellow; } 组合选择器（1）多元素选择器 描述：给多个元素加同一个样式，多个选择器之间用逗号分开。 格式：h1,p,p,.p1{ background：red； }（2）后代元素选择器(最常用) 描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。 格式： （3）子元素选择器 描述：给某个元素的子元素添加样式CSS尺寸属性 Width：元素宽度，一定要加px单位。 Height：元素高度。CSS字体属性 Font-size：文字大小。如：font-size：14px； Font-family：字体。如：font-family：微软雅黑； Font-style：斜体，取值：italic。如：font-style：italic； Font-weight：粗体，取值：bold。如：font-weight：bold；CSS文本属性 Color：文本颜色 Text-decoration：文本修饰线，取值：none（无）、underline（下划线）、overline（上划线）、line-through（删除线） Text-align：文本水平对齐方式，取值：left、center、right Line-height：行高，可以固定值，也可以百分比、如：line-height：24px；line-height：150%； Text-indent：首行缩进。Text-indent：28px； Letter-spacing：字间距。伪类选择器一个超链接，有四个状态 正常状态（：link）：鼠标没放上之前链接的样式。 放上状态（：hover）：鼠标放到链接上时的样式。 激活状态（：action）：按住鼠标左键不松开的样式。 访问过的状态（：visited）：按下鼠标左键，并弹起，这时的样式。在平时的工作中，会使用以下写法，来给链接加样式：A:link,a:visited{ color:#444;text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。A:hover{ color:#990000;text-decoration:underline; } //”鼠标放上” 单做一种效果CSS列表属性List-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。 北京市东营市上海市深圳市CSS边框属性：每个元素都可以加边框线 Border-left：左边框线。 格式：border-left：粗细 线型 线的颜色 线型：none、solid、dashed（虚线）、dotted（点状线） 举例：border-left：5px dashed red； Border-right：右边框线。 Border-top：上边框线。 Border-bottom：下边框线。 Border：同时给四个边加边框线。CSS内边距属性：边框线到内容的填充注意：平时我们所说的width和height属性，他们指内容的宽度和高度，不含内、外边距、边框线。 Padding-left：左内填充距离，右边线到内容间的距离。 Padding-right：右内填充距离。同上 Padding-top：上。 Paddingbottom：下。 缩写形式 Padding:10px; //四个边的内填充分别为10px； Padding：10px 20px; //上下为10px；左右为20px； Padding：5px 10px 20px; //上为5px，左右为10px，下为20px； Padding：20px 10px 5px 20px; //顺序为上右下左；CSS外边距属性：边线往外的距离 Margin-left：左边线往外的距离 Margin-right：右…… Margin-top：上……. Margin-bottom：下……. 简写式： Margin：10px； //四个外边距分别为10px。 Margin：10px 20px； //上下外边距为10px，左右外边距为20px。 Margin：10px 20px 50px； //上外边距为10px，左右为20px，下为50px。 Margin：10px 20px 30px 40px； //顺序为上右下左。CSS背景属性 Background-color:背景颜色。 Background-image:背景图片地址。 Background-image:url(image/banner.jpg)以上就是分享一个HTML的学习之路的详细内容，更多请关注 第一PHP社区 其它相关文章！ html javascript php 服务器 安全 go css 写下你的评论吧 ! 吐个槽吧,看都看了 会员登录 | 用户注册 推荐阅读 jsp ABAP开发发送邮件程序的配置和代码整理 本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细] 蜡笔小新 2023-12-13 15:50:17 go 知识图谱——机器大脑中的知识库 本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细] 蜡笔小新 2023-12-14 10:06:19 go 单击时动态创建元素 - Dynamically create element on click Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细] 蜡笔小新 2023-12-12 15:59:36 jsp lua语言闭包、模式匹配、日期、编译、模块的特性及应用 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细] 蜡笔小新 2023-12-14 18:18:21 jsp Python高级之网络编程及TCP/IP协议簇的OSI七层模型介绍 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容，主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细] 蜡笔小新 2023-12-14 18:16:27 数组 C#之数据集：DataSet对象的使用及相关方法详解 本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细] 蜡笔小新 2023-12-14 12:09:13 import OC学习笔记之@property和@synthesize 本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细] 蜡笔小新 2023-12-14 12:05:06 jsp Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine 本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细] 蜡笔小新 2023-12-14 12:01:13 jsp Hibernate基础映射 在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细] 蜡笔小新 2023-12-14 10:57:47 jsp SpringBoot集成前端模版（thymeleaf）的配置步骤 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细] 蜡笔小新 2023-12-14 10:11:46 jsp 测试人的性格，点火让他着急，考验婚姻问题的善意玩人 本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细] 蜡笔小新 2023-12-14 09:10:09 jsp Linux进程控制块PCBtask_struct结构体结构及作用详解 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细] 蜡笔小新 2023-12-13 21:31:18 数组 猜字母游戏 猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细] 蜡笔小新 2023-12-13 12:04:03 go Javascript中带有加号 - 减号（±）的极坐标曲线方程 - Polar curve equation with plus-minus sign (±) in Javascript IamtryingtodrawpolarcurvesonHTMLcanvasusingJavascript.WhatshouldIdowhenIwanttoco ... [详细] 蜡笔小新 2023-12-11 18:14:13 import 简单的ajax与struts2实例 前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细] 蜡笔小新 2023-10-16 17:08:23 多米音乐_34014997 这个家伙很懒，什么也没留下！ Tags | 热门标签 regex foreach jsp default char command flutter bitmap javascript datetime express import netty substring dagger testing hook triggers httpclient 数组 hashcode typescript node.js php8 buffer go chat random solr emoji RankList | 热门文章 1linux 脚本怎么编译器,如何在Ubuntu 18.04上安装GCC编译器 2Java实现小猪佩奇_一入java深似海（14期 完整版） 3问个js中解除引用问题 4《木阑花慢 赋白莲和字舜臣韵》翻译 原文赏析诗人元凌云翰 5python从ip端口 获取数据_从Python 3.x中的列表中提取IP和端口 6Windows 10 中查看WIFI密码 7Mac osx 安装metasploit的教程（转译） 8怎样使用Nodejs发布npm包并制作成命令行工具 9【手撸RPC框架】SpringBoot+Netty4实现RPC框架 10php提高网站效率的技巧【PHP】 11短命的 CentOS 8 将停止维护 12读取ELF文件DWARF调试信息的库 13基于jQuery编写的横向自适应幻灯片切换特效 1437.bind和function实现mini线程池 15matlab 设计数字滤波器,基于Matlab的FIR数字滤波器设计 PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。
图片热点
图片热点：给一张图片加多个热点。
语法结构：
标记常用属性：
Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）
Coords：热区的坐标
如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”
（x1,y1）为左上角坐标，（x2，y2）为右下角坐标。
如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。
框架集和框架页：
框架集：:主要用来划分窗口。
框架页：
Src：引入文件地址。
Frameborder：是否显示框架的边框线，取值：yes或no。
Scrolling：是否显示滚动条。取值：yes、no、auto。
Name：制定小窗口的名称，改名称也是给标记的target属性来用。
Align：框架在网页中对齐方式，取值：left、center、right。
CSS 层叠样式表。
CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。
基本选择器
(1) “*”选择器：通配符
描述：将匹配所有的html标记，所有标记都会改变。
语法：*{color：red；}
（2）标签选择器
描述：将匹配指定的html标记
语法：h1{color：red；}
（3）class选择器（类选择器）-----使用最多的选择器
描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。
格式：
（4）id选择器
描述：给指定id的元素添加样式
注意：网页中html标记的id属性的值，必须是唯一的。
style type=”text/css”> #myId{ Color=red; Background-color:yellow; }
（1）多元素选择器
描述：给多个元素加同一个样式，多个选择器之间用逗号分开。
格式：h1,p,p,.p1{ background：red； }
（2）后代元素选择器(最常用)
描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。
（3）子元素选择器
描述：给某个元素的子元素添加样式
Width：元素宽度，一定要加px单位。
Height：元素高度。
Font-size：文字大小。如：font-size：14px；
Font-family：字体。如：font-family：微软雅黑；
Font-style：斜体，取值：italic。如：font-style：italic；
Font-weight：粗体，取值：bold。如：font-weight：bold；
Color：文本颜色
Text-decoration：文本修饰线，取值：none（无）、underline（下划线）、overline（上划线）、line-through（删除线）
Text-align：文本水平对齐方式，取值：left、center、right
Line-height：行高，可以固定值，也可以百分比、如：line-height：24px；line-height：150%；
Text-indent：首行缩进。Text-indent：28px；
Letter-spacing：字间距。
一个超链接，有四个状态
正常状态（：link）：鼠标没放上之前链接的样式。
放上状态（：hover）：鼠标放到链接上时的样式。
激活状态（：action）：按住鼠标左键不松开的样式。
访问过的状态（：visited）：按下鼠标左键，并弹起，这时的样式。
在平时的工作中，会使用以下写法，来给链接加样式：
A:link,a:visited{ color:#444;text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。
A:hover{ color:#990000;text-decoration:underline; } //”鼠标放上” 单做一种效果
List-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。
Border-left：左边框线。
格式：border-left：粗细 线型 线的颜色
线型：none、solid、dashed（虚线）、dotted（点状线）
举例：border-left：5px dashed red；
Border-right：右边框线。
Border-top：上边框线。
Border-bottom：下边框线。
Border：同时给四个边加边框线。
注意：平时我们所说的width和height属性，他们指内容的宽度和高度，不含内、外边距、边框线。
Padding-left：左内填充距离，右边线到内容间的距离。
Padding-right：右内填充距离。同上
Padding-top：上。
Paddingbottom：下。
缩写形式
Padding:10px; //四个边的内填充分别为10px；
Padding：10px 20px; //上下为10px；左右为20px；
Padding：5px 10px 20px; //上为5px，左右为10px，下为20px；
Padding：20px 10px 5px 20px; //顺序为上右下左；
Margin-left：左边线往外的距离
Margin-right：右……
Margin-top：上…….
Margin-bottom：下…….
简写式：
Margin：10px； //四个外边距分别为10px。
Margin：10px 20px； //上下外边距为10px，左右外边距为20px。
Margin：10px 20px 50px； //上外边距为10px，左右为20px，下为50px。
Margin：10px 20px 30px 40px； //顺序为上右下左。
Background-color:背景颜色。
Background-image:背景图片地址。 Background-image:url(image/banner.jpg)
以上就是分享一个HTML的学习之路的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号