分享一个HTML的学习之路

开发网站流程

• 确定风格、功能（论坛、留言板、支付、用户登录等）。

• 美工制作网页效果图（首页、列表页、内容页）。

• 制作人员切图排版，排成网页形式。

• 后台程序开始写程序。

• 前台与后台结合。

HTML注释

注意：注释只是为了以后维护用。

项目符号

<ul><li>内容</li>　　<li>内容</li>　　<li>内容</li></ul>

或
• 的常用属性

  l  Type：项目符号的类型，取值：disc（小黑点）、circle（圆圈）、square（实心方块）

  HTML编号列表（有序）

  <ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>

   

  或
  1. 的常用属性

     •  Type：编号类型，取值：1、a、A、i、I

     •  Start：从第几个开始编号

     滚动字幕标记（已被淘汰）

     <marquee> 内容…..  
     
     </marquee>

       常用属性

     •   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连接：

     Html颜色表示

     表示方法三种：

       颜色单词：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）       设置网页描述信息

     Xhtml规范

     • l  所有标记和属性全部小写

     • l  单边标记必须关闭。如：
       -----
       

     • l  所有的属性值都必须加引号。

     • l  所有属性都必须有值。如：

       ---

       ---

       ---

     • l  标机之间要顺序嵌套，外层套内层。

     • l  Xhtml网页必须有DTD文档类型定义代码

      

      

     DTD文档类型定义

     三大类型：

      

     表格标签

     （1）结构：(一行四列)

     <table border=“1”>   <tr><td> </td><td> </td><td> </td><td>< /td>   </tr></table>

      

     （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

     •   bgcolor

     •   align

     •   valign

     表单

     （1）结构：

              

     　　<form name=”form1” method=“get” action=“login.php”>   用户名：<input type=”text” name=”username”/>   密码：<input type=”password” name=”userpwd”/>   <input type=”submit” value=”提交表单”/></form>

      

     （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：文本框的名字

     •   Type：表单元素类型

     •   Value：文本框的值

     •   Size：文本框的长度

     •   Maxlength：最多可以输入多少个字符。

     •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

     •   Disabled：禁用属性 同上。

      

     单选按钮

     语法格式:男

                        女

       属性：

     •   name：元素名称

     •   Checked：默认选择checked=“checked”

     •   Value：值

     复选框

     语法格式： 游戏

                          杀人

                          放火

      属性：

     •   name：元素名称

     •   Checked：默认选择checked=“checked”

     •   Value：值

     下拉列表

      

     语法格式：

     <select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>

      

     •   ：只有一个name属性。

     •   ：两个属性value、selected

     •   Selected：默认选中

     •   层叠样式表方式改下拉列表宽度：type=”width:100px”

      

     文本区域

     语法格式：

       属性：

     •   name：元素名称

     •   Cols：宽度

     •   Rows：高度

      

      

     各种按钮

     •   提交按钮

     •   重置按钮

     •   图片按钮

     •   普通按钮

     •   普通按钮本身不具备任何功能，需与js配合使用。

     上传文件域

     语法格式：

       属性：

     •   Name：名称

     •   Value：上传文件名。Value属性是只读属性，

     • 必须与enctype=”multipart/form-data”>配合实现才能上传

     隐藏域

     功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。

     语法格式：

      

     表格标题

     语法格式：

      

     是

     的子标记。

     放在的后面。

      

     网页多媒体

     网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。

      

      

     图片热点

     图片热点：给一张图片加多个热点。

     语法结构：

     <ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /></map>

      

     标记常用属性：

     •  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为半径。

      

      

     普通框架

     框架集和框架页：

     框架集：:主要用来划分窗口。

     框架页：:主要用来指定默认显示的网页地址。

     属性：

     •   Cols:划分左右型框架。

     •   Cols=”200,*”   左边为宽度200px，剩下的为右边。

     •   Cols=”180,*,180”   左右框架为180px，剩下的为中间框架

     •   Rows：划分上下型框架

     •   Rows=”200,*”  上框架高度为200px，剩下的为下框架。

     •   Frameborder：是否显示边框线，取值0或1.

     •   Border：边框粗细。

     •   Bordercolor：边框颜色。

     框架页的属性 ：

     •   Src：该小窗口中，默认显示的网页地址。

     •   Noresize：不能调整大小。Noresize=”noresize”

     •   Scrolling:是否显示滚动条，取值：auto、yes、no

     •   Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。

     </strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容

     内嵌框架（行内框架）

     与普通框架区别：

     常用属性：

     •   Src：引入文件地址。

     •   Width：宽度

     •   Height：高度

     •   Frameborder：是否显示框架的边框线，取值：yes或no。

     •   Scrolling：是否显示滚动条。取值：yes、no、auto。

     •   Name：制定小窗口的名称，改名称也是给标记的target属性来用。

     •   Align：框架在网页中对齐方式，取值：left、center、right。

     CSS简介

     CSS 层叠样式表。

     CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。

      

     语法格式：

     <style type=”text/css”> h1{Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色}</style>

      

     CSS选择器

     基本选择器

     (1) “*”选择器：通配符

     •   描述：将匹配所有的html标记，所有标记都会改变。

     •   语法：*{color：red；}

      

     （2）标签选择器

     •   描述：将匹配指定的html标记

     •   语法：h1{color：red；}

     （3）class选择器（类选择器）-----使用最多的选择器

     •   描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。

     •   格式：

       　　　　　　  

       　　　　　　 

         

       　　　　　　 

         

       　　　　　　 

       （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 学习 菜鸟

       来源：php.cn
       上一篇：ios中关闭弹窗后有部分还“留在页面上”改如何处理？ 下一篇：APICloud Studio 2使用GIT-SVN 技术的实例教程
       本站声明

       本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
       作者最新文章

       • NameValuePair方式传参数实例教程
         1970-01-01 08:00:00
       • 使用dom4j解析xml文档实例
         1970-01-01 08:00:00
       • Catalog Service - 解析微软微服务架构实例代码
         1970-01-01 08:00:00
       • .net Elasticsearch入门实例详解
         1970-01-01 08:00:00
       • 详细介绍Spring boot 添加jsp支持配置的实例
         1970-01-01 08:00:00
       • JS怎么检测window.open打开的窗口是否关闭？
         1970-01-01 08:00:00
       • 分享一个sqlyog连接数据库乱码的问题以及解决方法
         1970-01-01 08:00:00
       • 使用Java中可变长参数的实例
         1970-01-01 08:00:00
       • 最新的高德地图API WEB开发实例教程
         1970-01-01 08:00:00
       • AJAX的优点和缺点
         1970-01-01 08:00:00
       最新问题

       PX自动转换为REM错误  <style>html {   字体大小：calc(100vw / 3.75);      }body {    字体大小：0.16rem；      }</s...

       来自于 2024-04-16 09:34:16

       0

       0

       4687

       页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...

       来自于 2024-04-06 21:58:04

       0

       1

       800

       解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...

       来自于 2024-04-06 20:22:15

       0

       1

       454

       如何在 livewire 惰性占位符中使用 laravel 组件 我想在livewire3占位符内添加我的laravel组件的骨架到目前为止我已经尝试过：通过包含Laravel组件来实现Livewire类：publicfunctionplaceh...

       来自于 2024-04-06 20:02:10

       0

       2

       543

       用 HTML 代码（从数组生成）替换字符串的顶级方法 给定一个像这样的字符串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何将子字符串#...

       来自于 2024-04-06 17:40:41

       0

       2

       410
       相关专题

       更多>

       • html版权符号
       • html在线编辑器
       • html网页制作
       • html空格
       • html是什么
       • html字体大小怎么设置
       • html转txt
       • html文本框代码怎么写
       热门推荐

       • url是什么意思？
       • DOM是什么意思
       • 如何改变图片大小
       • HTML中如何将字体加粗
       • html图片大小如何设置

       热门教程

       更多>

       相关教程

       热门推荐

       最新课程

       • 
         最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

         1416847
       • 
         php入门教程之一周学会PHP

         4257456
       • 
         JAVA 初级入门视频教程

         2475861
       • 
         小甲鱼零基础入门学习Python视频教程

         503689
       • 
         PHP 零基础入门教程

         844126

       • 
         最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

         1416847次学习
       • 
         JAVA 初级入门视频教程

         2475861次学习
       • 
         小甲鱼零基础入门学习Python视频教程

         503689次学习
       • 
         Web前端开发极速入门

         215275次学习
       • 
         零基础精通 PS 视频教程

         876903次学习

       • 
         【web前端】Node.js快速入门

         6363次学习
       • 
         国外Web开发全栈课程全集

         5011次学习
       • 
         Go语言实战之 GraphQL

         4196次学习
       • 
         550W粉丝大佬手把手从零学JavaScript

         633次学习
       • 
         python大神Mosh，零基础小白6小时完全入门

         21319次学习

       最新下载

       更多>

       网站特效

       网站源码

       网站素材

       前端模板

       • [表单按钮] jQuery企业留言表单联系代码
       • [播放器特效] HTML5 MP3音乐盒播放特效
       • [菜单导航] HTML5炫酷粒子动画导航菜单特效
       • [表单按钮] jQuery可视化表单拖拽编辑代码
       • [播放器特效] VUE.JS仿酷狗音乐播放器代码
       • [html5特效] 经典html5推箱子小游戏
       • [图片特效] jQuery滚动添加或减少图片特效
       • [相册特效] CSS3个人相册封面悬停放大特效

       • [前端模板] 家居装潢清洁维修服务公司网站模板
       • [前端模板] 清新配色个人求职简历引导页模板
       • [前端模板] 设计师创意求职简历网页模板
       • [前端模板] 现代工程建筑公司网站模板
       • [前端模板] 教育服务机构响应式HTML5模板
       • [前端模板] 网上电子书店商城网站模板
       • [前端模板] IT技术解决互联网公司网站模板
       • [前端模板] 紫色风格外汇交易服务网站模板

       • [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
       • [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
       • [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
       • [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
       • [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
       • [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
       • [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
       • [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

       • [前端模板] 家居装潢清洁维修服务公司网站模板
       • [前端模板] 清新配色个人求职简历引导页模板
       • [前端模板] 设计师创意求职简历网页模板
       • [前端模板] 现代工程建筑公司网站模板
       • [前端模板] 教育服务机构响应式HTML5模板
       • [前端模板] 网上电子书店商城网站模板
       • [前端模板] IT技术解决互联网公司网站模板
       • [前端模板] 紫色风格外汇交易服务网站模板

       关于我们 免责声明 Sitemap

       PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！