Rumah >hujung hadapan web >html tutorial >分享一个HTML的学习之路
分享一个HTML的学习之路
- 零下一度asal
- 2017-06-24 13:23:222443semak imbas
开发网站流程
确定风格、功能（论坛、留言板、支付、用户登录等）。
美工制作网页效果图（首页、列表页、内容页）。
制作人员切图排版，排成网页形式。
后台程序开始写程序。
前台与后台结合。
HTML注释
注意：注释只是为了以后维护用。
项目符号
<ul><li>内容</li> <li>内容</li> <li>内容</li></ul>
- 或
- 的常用属性
l Type：项目符号的类型，取值：disc（小黑点）、circle（圆圈）、square（实心方块）
HTML编号列表（有序）
<ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>
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
#空链接。
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属性是只读属性，
必须与
隐藏域
功能：看不见的框。传递一些值，而又不想让别人看到。主要用于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)
Atas ialah kandungan terperinci 分享一个HTML的学习之路. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cnArtikel sebelumnya：ios中关闭弹窗后有部分还“留在页面上”改如何处理？Artikel seterusnya：APICloud Studio 2使用GIT-SVN 技术的实例教程