站长资讯平台首页> 网页制作 > css >
菜鸟的HTML学习之路
2018-06-24 01:27:30来源:未知 阅读 ()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)结构:(一行四列)
(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)结构:
用户名:
密码:
(2)标记属性----块元素
name
method:提交方式 get、post
action:指定表单的处理程序,一般是PHP文件
enctype:指定表单数据的编码方式。只能在method=post情况下。
application/x-www-form-urldecoded http://默认加密方式
multipart/form-data http://上传文件,值是他自己
(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:值
下拉列表
语法格式:
北京
天津
重庆
:只有一个name属性。
:两个属性value、selected
Selected:默认选中
层叠样式表方式改下拉列表宽度:type=”width:100px”
文本区域
语法格式:
属性:
name:元素名称
Cols:宽度
Rows:高度
各种按钮
提交按钮
重置按钮
图片按钮
普通按钮
普通按钮本身不具备任何功能,需与js配合使用。
上传文件域
语法格式:
属性:
Name:名称
Value:上传文件名。Value属性是只读属性,
必须与配合实现才能上传
隐藏域
功能:看不见的框。传递一些值,而又不想让别人看到。主要用于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为半径。
普通框架
框架集和框架页:
框架集::主要用来划分窗口。
框架页::主要用来指定默认显示的网页地址。
属性:
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属性来用的。
含义:当浏览器不支持框架时,会提示信息。低版本不支持。高版本都支持。
语法格式:内容
内嵌框架(行内框架)
与普通框架区别:
常用属性:
Src:引入文件地址。
Width:宽度
Height:高度
Frameborder:是否显示框架的边框线,取值:yes或no。
Scrolling:是否显示滚动条。取值:yes、no、auto。
Name:制定小窗口的名称,改名称也是给标记的target属性来用。
Align:框架在网页中对齐方式,取值:left、center、right。
CSS简介
CSS 层叠样式表。
CSS的主要目的:是给html标记添加各种各样的表现(表格、样式)。比如:文字样式、背景、文本样式、连接样式。
语法格式:
h1{
Color:red; http://文本颜色
Text-align:center; http://对齐方式
Border:1px solid #444; http://半框样式
Background-color:#ffff00; http://背景色
}
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; } http://将“正常状态”和“访问过的状态”合二为一。
A:hover{ color:#990000;text-decoration:underline; } http://”鼠标放上” 单做一种效果
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; http://四个边的内填充分别为10px;
Padding:10px 20px; http://上下为10px;左右为20px;
Padding:5px 10px 20px; http://上为5px,左右为10px,下为20px;
Padding:20px 10px 5px 20px; http://顺序为上右下左;
CSS外边距属性:边线往外的距离
Margin-left:左边线往外的距离
Margin-right:右……
Margin-top:上…….
Margin-bottom:下…….
简写式:
Margin:10px; http://四个外边距分别为10px。
Margin:10px 20px; http://上下外边距为10px,左右外边距为20px。
Margin:10px 20px 50px; http://上外边距为10px,左右为20px,下为50px。
Margin:10px 20px 30px 40px; http://顺序为上右下左。
CSS背景属性
Background-color:背景颜色。
Background-image:背景图片地址。 Background-image:url(image/banner.jpg)
标签:网站建设php文件html标记html网页网站制作html注释css+div水平居中CSS 简单了解(二)DIV居中的经典方法Html/css 列表项 区分列表首尾HTML骨架转行Web前端工程师要掌握的学习知识汇总HTML基础教程_1主机资讯注册资讯托管资讯vps资讯网站建设建站经验策划盈利搜索优化网站推广免费资源联盟新闻联盟介绍联盟点评网赚技巧搜索引擎网络游戏电子商务广告传媒Asp.Net编程Asp编程Php编程Xml编程AccessMssqlMysql其它Web服务器Ftp服务器Mail服务器Dns服务器安全防护其它软件WordExcelPowerpointGhostVistaQQ空间QQFlashGet迅雷FrontPagesDreamweaverJavascriptcssphotoshopfireworksFlashJava技术C/C++VBdelphi网络协议网络安全网络管理组网方案Cisco技术Win2000WinXPWin2003Mac OSLinuxFreeBSDcss代码ps图片处理html缩进flash 动画制作ps新手入门基础图解ps怎么合成css网页模板html透明ps cs6flash动画作品欣赏10秒ps在线版photoshop在线精简版ps倒影ps插画教程photoshop软件ps运用技巧前端视频网页页面设计html常用标签Photoshop绘制立体风格的微笑表情PS文字特效教程:制作公路上个性的涂鸦Photoshop设计卷边效果的变形金刚电影PS色彩修复教程:利用色阶工具快速给红PS半透明物体抠图:利用通道选区工具抠PS海报设计技巧教程:学习制作个性的扭PS图片特效制作教程:学习给铁塔图片制学习用photoshop把浑浊的海水照片后期PS古风照片教程:给古风美女打造出女侠PS个性人物海报制作:设计创意时尚的玻揭秘黑客步骤:怎么盗取别人的微信密码?揭秘黑客教程:盗取微信号密码最简单方揭秘黑客步骤:怎么盗取别人的微信密码?揭秘黑客步骤:怎么盗取别人的微信密码?福利来了,各种技术视频资源VS Code如何更换主题皮肤?layui 弹出框改变按钮颜色样式 自定免费搜索引擎提交(登录)入口大全SqlBulkCopy使用介绍以及注意事项【从零开始搭建自己的.NET Core Api框谷歌移动友好算法AVPSFTP软件IEloadimg使用POSTHTTPCOMHTMLem定义数据timwordClass网络安全运维经验IT技术分享运维随笔录鲜花东郊到家往约到家
智能索引记录
-
2026-04-19 06:10:27
综合导航
成功
标题:第21章第1页_只进不出 休息_笔趣阁
简介:第21章第1页_只进不出 休息_海鶄落_笔趣阁
-
2026-04-19 06:09:41
综合导航
成功
标题:Apple Pay â Apple (SE)
简介:Apple Pay är ett enkelt sätt att betala i butiker, online
-
2026-04-19 07:04:06
数码科技
成功
标题:边关小厨娘第31章 第 31 章_边关小厨娘_团子来袭_十二小说网_规则类怪谈扮演指南
简介:边关小厨娘最新章节第31章 第 31 章出自团子来袭的作品边关小厨娘最新章节每天第一时间更新。边关小厨娘txt电子书下载
-
2026-04-21 04:07:57
综合导航
成功
标题:Наматрацник-чохол ТЕП Latt 5-00382-00000 30х200х200 см (217739755) - RIA
简介:Продаю на RIA - Наматрацник-чохол ТЕП Latt 5-00382-00000 30х
-
2026-04-18 12:42:15
游戏娱乐
成功
标题:剑星完美辅助脊椎奖杯怎么解锁-stellarblade完美辅助脊椎奖杯获取攻略_3DM单机
简介:《剑星》是金亨泰领衔的韩国游戏开发商Shift Up制作的单人动作冒险游戏,本作为ps5独占。游戏总共有43个奖杯,其中