2023年6月20日发(作者:)HTML 1 标签 标签指示浏览器该如何解读信息 标签可以有属性,属性由属性名和值组成,为了避免解释错误,值要用双引号引起 若本身就想显示双引号,则需要在外面再用单引号引起 属性之间要用空格隔开,顺序和大小写无关 2 常用标签 2.1 HTML固有标签 定义HTML网页,所有内容要在这两个标签之中 定义文件头,不显示在网页内容中,定义格式、脚本等 定义文件体,网页的主题部分 2.2 meta标签 定义文件信息,使用手工写,使用dreamweaver HTML选项可以选择添加。 2.3 标题标签title 用来定义网页名字,将来会显示在网页标题栏 eg :this is a title 属性: 2.4 段落标签p „„本段文字„„ 在body中使用 eg this is a paragraph 2.5 换行br :紧凑换行 在显示上段和段之间差着两行,在设计区直接按Enter相当于制造了两段 之间的行紧挨着,在设计区用shift+enter实现 制造空的一行 2.6 水平线hr 制造一条水平线 属性:颜色 eg:color=”reg” 2.7 注释 2.8 超链接 2.8.1 文间链接 创建超链接: 文本或图片等 效果:将以蓝色显示并链接到网址 eg: 绝对地址 page 相对地址 page page TIPS:添加google maps显示当先地址 2.8.2 文内链接 创建锚点进行文内链接,不能用数字开头的字符串作为锚点 定义锚点 引用锚点„„ 引用其他文章的锚点„„ 创建电子邮件 kangde@ 防止垃圾邮件 a在ASCII中编码为a;用它替换原来的字符。 2.9 定义列表 2.9.1 定义有序列表 有序列表,每个表项有数字号 :表示有序列表 :表示表项 „„„„ „„„„ 2.9.2 定义无序列表 无序列表,每个表项有个点号 :表示有序列表 :表示表项 „„„„ „„„„ 2.9.3 定义定义列表 定义列表:定义无缩进,术语缩进两格 :表示有序列表 :表示表项 定义 定义内容 定义 „„„„ 2.9.4 列表嵌套 列表可以嵌套 基本格式,以无序列表为例 „„ „„ 2.9.5 列表标签属性 无序列表 circle或者square 或者 „„ 有序列表 upper-alpha或者lower-alpha或者lower-roman 2.10 格式化标签 2.10.1 文本格式化 加粗:„„ 斜体:„„ 上标:„„ 下标:„„ 保持空格: 2.10.2 文本和背景颜色 背景颜色: style=”backgroung-color:blue” 背景图像:style=”background-image:url()” 文本颜色: color:blue 同时使用 注意:使用分号 属性:background-repeat: 指定背景图像平铺方式repeat、repeat-x、repeat-y、no-repeat 2.11 插入图片 web支持文间格式为GIF、JPEG、JPG、PNG 插入图片格式: src:图片文件名 alt:用户无法下载图片时显示的文本,若不需要,alt=“” 缩略图超链接图片 /> 属性 1、style=”border-style:none”:去掉超链接图像的边框 2、title=””:指定鼠标指向图像时显示的文字 3、style=”float:”参数:left、right指定文字环绕模式 4、style=”vertical-align:”参数text-top(同一行内容顶部对齐)、text-bottom(同一行内容底部对齐)、middle(同一行内容中心对齐)、baseline(同一行文本基线对齐) 5、width=”200px” height=”100px”设定图像大小,防止浏览器拉伸大小 2.12 创建表格 、用于创建表格 用于创建一行,包括一个或多个单元格 用于创建表头 用于创建单元格 注意:对表格进行修饰的CSS不能出现在中,其对表格不会产生影响,需要出现在中。 eg: 表项1 表项2 内容1 内容2 属性: style=”width:500px”指定表格宽度 用于table标签 style=”height:400px”指定表格长度 用于table标签 style=“width:20%”指定单元格百分比,用于th/td标签,也可指定像素等 style=“vertical-align:”参数:top、middle、bottom、text-top、text-bottom和baseline指定表格中数据垂直对齐方式 colspan=“2”指定单元格跨越两列,不使用style rowspan=“2”指定单元格跨越两行,不使用style style=“background-color:red” style=“background-image:”指定使用的背景,可以再table、tr、td、th中使用 cellpadding=“2”(单位默认为像素)指定表格边框之间和表格单元格之间的间距 cellspacing=“2”(单位默认为像素)指定单元格中的信息四周的间距 border=1 表示边框可见 表格可以嵌套,表格嵌套可以用来布局 2.13 创建框架 2.13.1 定义框架集 rows或者cols必须指定 rows用来指定分为上下两部分的框架的大小 cols用来指定分为左右两部分的框架的大小 eg: rows=“80,*”上边为80像素,下边为剩下所有 rows=“20%,*”上边为20%,下边为剩下所有 rows=“30%,*,*”上边为30%,剩下两个框架平分剩余空间 注意:不能在head或者body中设置,在它们之外之中设置 2.13.2 定义框架 指定框架中填充的网页并提供框架区域应用名称 eg 该框架指示建立一个有两个内容的框架,各占20%和80%,其中上边框架默认引用网页,上边框架名称为top,下面框架默认引用网页,下面框架名称为name 其他属性,以下属性用于frame标签 marginwidth 指定框架的左右边距,单位:像素 marginheight 指定框架的上下边距,单位:像素 scrolling:是否显示滚动条 yes或no frameborder:是否显示该框架与相邻框架之间的分割线,1:是,0:否 noresize:是否允许用户调整框架大小 直接noresize 2.13.3 引用框架 超链接中添加target属性 点击该超链接,内容都将出现在main框架中,若想其用一个网页单独显示,需要设置target为_blank 2.14 创建表单 2.14.1 声明表单 指定创建表单 eg: 表单内容 action有两种处理方法:1、引用web服务器中脚本;2、mailto引用电子邮件地址。 2.14.2 创建文本信息 文本 表示在提示信息“文本”后出现一个框,该框长20像素,最大能接受30个字符,maxlength值超过size,会向做滚屏 type属性值为text表示表单元素为文本 其他参数 加密显示 type=”password” 2.14.3 创建复选框 选项文本 name属性必须要有 checked表示默认选项 tips文本 imput标签末尾加空格可以扩大选项到文本的距离 2.14.4 创建单选框 选项文本 value属性可以是任何名称或编码 2.14.5 创建滚动列表 选项文本 AM/FM Radio „„„„ size属性表示同时显示多少项,若少于实际选项,则将显示滚动条 multiple属性表示可以同时选中多项 selected属性指定默认选项 2.14.6 创建多行文本 提示文本 rows属性指定行数 cols属性指定列数 2.14.7 创建按钮 创建默认提交按钮 value指定按钮的内容 创建图像提交按钮 重置按钮 创建图像重置按钮 2.15 插入视频音频 简单格式 文本或图片 强制用media player播放视频同时指定大小 height=”305”> 播放该视频 表示视频在页面打开后会自动播放 随页面打开自动播放 controls=”All” loop=”false” autostart=”true” pluginspage=”www.„„„„” /> realplayer编码 CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA MIME格式: 3 样式表CSS CSS是一种将文本和格式分离的布局,格式化方案。 在head中引用样式表: 3.1 布局属性 一、布局属性display 3.2 格式化属性 3.2.1 创造边框border 在元素四周建立一个课件的方框 border-width:5px 指定边框宽度,单位像素 border-color:指定边框颜色 border-style:指定边框样式,参数solid(单实线)、double(双实线)、dashed(虚线)、dotted(点线)、groove(沟线)、ridge(脊线)、inset(内线边框)、outset(外凸边框),none(无边框) border-left:指定边框左边 border-right:指定边框右边 border-top:指定边框顶部 border-bottom:指定边框底部 border:指定边框的所有边 color:边框内部文字颜色 background-color:边框内部文字背景颜色 3.2.2 文本处理 统一用style=引用 对齐 text-ailgn:参数:center、left、right 缩进 text-indent:参数XXpx/XXpt 字体集 font-family:参数:times new roman、arial„„备选项用逗号隔开 字体大小 font-size:参数:XXpt或px 斜体 font-style:参数:normal、italic、oblique 加粗 font-weight:参数:normal、bold、bolder、lighter 颜色 color:参数:„„ 文本行高度 line-height: 删除链接下划线 text_decoration:参数:none、underline、italic和line-through 设置左右边距 margin-left: margin-right: 字母间距 单位:像素 letter-spacing 词间距 单位:像素 word-spacing 小型大写字母 font-variant:small-caps 自动转换段落文本大小写 text-transform:参数:none、uppercase(大写)、lowercase(小写)、capitalize(首字母大写) 3.3 修改超链接外观 Link:链接尚未访问过 Hover:鼠标指向链接 Active:链接被激活 Visited:链接被访问过 先设置后引用 设置: a:link{ CSS} 引用: „„ 对多个类指定统一格式,用逗号分隔 a:link,a:visited,a:active{ CSS} a.1:link,a.2:visited,a.3:active{ CSS} 3.4 注释 /*„„„„*/ 3.5 通用类 可以用于任何样式 eg: .bold{font-weight:bold } 3.6 应用样式 3.6.1 样式类 定义样式类:样式名:类名 样式之间用分号隔开,最后一个样式也要加分号 样式类应用于整个站点 eg {font-size:12pt; color=red;} „„„„ 3.6.2 内部样式表 应用于单个网页 必须在head中定义样式表 不需要link标签引用样式表 在其他网页中不能引用该样式表除非将其复制过去 eg: „„ 3.6.3 内联样式表 将样式应用于单个元素 一行:XXX 一块:XXX 3.7 单独用style指定样式示例 (文本/图像)对齐方式:style=”text-ailgn: ”参数:center、left、right 字体:style=”font-family: ”参数times new roman、arial„„ 字号:style=”font-size: ” 参数:XXpt或px 颜色:style=”color: ”参数:„„ 字体加粗:style=”font-weight:”参数:normal、bold、bolder、lighter 字体斜体:style=”font-style:”参数:normal、italic、oblique 列表编号类型:style=”list-style-type:numtype:”参数:decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none 列表项目标记类型:style=”list-style-type:bullettype”参数:disc、circle、square、none 3.8 样式规则 样式之间用分号隔开分号后无空格 eg:it is bold and italic 参数可以设多个备选项 eg:有空格的话需要加单引号 4 特殊符号 2023年6月20日发(作者:)HTML 1 标签 标签指示浏览器该如何解读信息 标签可以有属性,属性由属性名和值组成,为了避免解释错误,值要用双引号引起 若本身就想显示双引号,则需要在外面再用单引号引起 属性之间要用空格隔开,顺序和大小写无关 2 常用标签 2.1 HTML固有标签 定义HTML网页,所有内容要在这两个标签之中 定义文件头,不显示在网页内容中,定义格式、脚本等 定义文件体,网页的主题部分 2.2 meta标签 定义文件信息,使用手工写,使用dreamweaver HTML选项可以选择添加。 2.3 标题标签title 用来定义网页名字,将来会显示在网页标题栏 eg :this is a title 属性: 2.4 段落标签p „„本段文字„„ 在body中使用 eg this is a paragraph 2.5 换行br :紧凑换行 在显示上段和段之间差着两行,在设计区直接按Enter相当于制造了两段 之间的行紧挨着,在设计区用shift+enter实现 制造空的一行 2.6 水平线hr 制造一条水平线 属性:颜色 eg:color=”reg” 2.7 注释 2.8 超链接 2.8.1 文间链接 创建超链接: 文本或图片等 效果:将以蓝色显示并链接到网址 eg: 绝对地址 page 相对地址 page page TIPS:添加google maps显示当先地址 2.8.2 文内链接 创建锚点进行文内链接,不能用数字开头的字符串作为锚点 定义锚点 引用锚点„„ 引用其他文章的锚点„„ 创建电子邮件 kangde@ 防止垃圾邮件 a在ASCII中编码为a;用它替换原来的字符。 2.9 定义列表 2.9.1 定义有序列表 有序列表,每个表项有数字号 :表示有序列表 :表示表项 „„„„ „„„„ 2.9.2 定义无序列表 无序列表,每个表项有个点号 :表示有序列表 :表示表项 „„„„ „„„„ 2.9.3 定义定义列表 定义列表:定义无缩进,术语缩进两格 :表示有序列表 :表示表项 定义 定义内容 定义 „„„„ 2.9.4 列表嵌套 列表可以嵌套 基本格式,以无序列表为例 „„ „„ 2.9.5 列表标签属性 无序列表 circle或者square 或者 „„ 有序列表 upper-alpha或者lower-alpha或者lower-roman 2.10 格式化标签 2.10.1 文本格式化 加粗:„„ 斜体:„„ 上标:„„ 下标:„„ 保持空格: 2.10.2 文本和背景颜色 背景颜色: style=”backgroung-color:blue” 背景图像:style=”background-image:url()” 文本颜色: color:blue 同时使用 注意:使用分号 属性:background-repeat: 指定背景图像平铺方式repeat、repeat-x、repeat-y、no-repeat 2.11 插入图片 web支持文间格式为GIF、JPEG、JPG、PNG 插入图片格式: src:图片文件名 alt:用户无法下载图片时显示的文本,若不需要,alt=“” 缩略图超链接图片 /> 属性 1、style=”border-style:none”:去掉超链接图像的边框 2、title=””:指定鼠标指向图像时显示的文字 3、style=”float:”参数:left、right指定文字环绕模式 4、style=”vertical-align:”参数text-top(同一行内容顶部对齐)、text-bottom(同一行内容底部对齐)、middle(同一行内容中心对齐)、baseline(同一行文本基线对齐) 5、width=”200px” height=”100px”设定图像大小,防止浏览器拉伸大小 2.12 创建表格 、用于创建表格 用于创建一行,包括一个或多个单元格 用于创建表头 用于创建单元格 注意:对表格进行修饰的CSS不能出现在中,其对表格不会产生影响,需要出现在中。 eg: 表项1 表项2 内容1 内容2 属性: style=”width:500px”指定表格宽度 用于table标签 style=”height:400px”指定表格长度 用于table标签 style=“width:20%”指定单元格百分比,用于th/td标签,也可指定像素等 style=“vertical-align:”参数:top、middle、bottom、text-top、text-bottom和baseline指定表格中数据垂直对齐方式 colspan=“2”指定单元格跨越两列,不使用style rowspan=“2”指定单元格跨越两行,不使用style style=“background-color:red” style=“background-image:”指定使用的背景,可以再table、tr、td、th中使用 cellpadding=“2”(单位默认为像素)指定表格边框之间和表格单元格之间的间距 cellspacing=“2”(单位默认为像素)指定单元格中的信息四周的间距 border=1 表示边框可见 表格可以嵌套,表格嵌套可以用来布局 2.13 创建框架 2.13.1 定义框架集 rows或者cols必须指定 rows用来指定分为上下两部分的框架的大小 cols用来指定分为左右两部分的框架的大小 eg: rows=“80,*”上边为80像素,下边为剩下所有 rows=“20%,*”上边为20%,下边为剩下所有 rows=“30%,*,*”上边为30%,剩下两个框架平分剩余空间 注意:不能在head或者body中设置,在它们之外之中设置 2.13.2 定义框架 指定框架中填充的网页并提供框架区域应用名称 eg 该框架指示建立一个有两个内容的框架,各占20%和80%,其中上边框架默认引用网页,上边框架名称为top,下面框架默认引用网页,下面框架名称为name 其他属性,以下属性用于frame标签 marginwidth 指定框架的左右边距,单位:像素 marginheight 指定框架的上下边距,单位:像素 scrolling:是否显示滚动条 yes或no frameborder:是否显示该框架与相邻框架之间的分割线,1:是,0:否 noresize:是否允许用户调整框架大小 直接noresize 2.13.3 引用框架 超链接中添加target属性 点击该超链接,内容都将出现在main框架中,若想其用一个网页单独显示,需要设置target为_blank 2.14 创建表单 2.14.1 声明表单 指定创建表单 eg: 表单内容 action有两种处理方法:1、引用web服务器中脚本;2、mailto引用电子邮件地址。 2.14.2 创建文本信息 文本 表示在提示信息“文本”后出现一个框,该框长20像素,最大能接受30个字符,maxlength值超过size,会向做滚屏 type属性值为text表示表单元素为文本 其他参数 加密显示 type=”password” 2.14.3 创建复选框 选项文本 name属性必须要有 checked表示默认选项 tips文本 imput标签末尾加空格可以扩大选项到文本的距离 2.14.4 创建单选框 选项文本 value属性可以是任何名称或编码 2.14.5 创建滚动列表 选项文本 AM/FM Radio „„„„ size属性表示同时显示多少项,若少于实际选项,则将显示滚动条 multiple属性表示可以同时选中多项 selected属性指定默认选项 2.14.6 创建多行文本 提示文本 rows属性指定行数 cols属性指定列数 2.14.7 创建按钮 创建默认提交按钮 value指定按钮的内容 创建图像提交按钮 重置按钮 创建图像重置按钮 2.15 插入视频音频 简单格式 文本或图片 强制用media player播放视频同时指定大小 height=”305”> 播放该视频 表示视频在页面打开后会自动播放 随页面打开自动播放 controls=”All” loop=”false” autostart=”true” pluginspage=”www.„„„„” /> realplayer编码 CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA MIME格式: 3 样式表CSS CSS是一种将文本和格式分离的布局,格式化方案。 在head中引用样式表: 3.1 布局属性 一、布局属性display 3.2 格式化属性 3.2.1 创造边框border 在元素四周建立一个课件的方框 border-width:5px 指定边框宽度,单位像素 border-color:指定边框颜色 border-style:指定边框样式,参数solid(单实线)、double(双实线)、dashed(虚线)、dotted(点线)、groove(沟线)、ridge(脊线)、inset(内线边框)、outset(外凸边框),none(无边框) border-left:指定边框左边 border-right:指定边框右边 border-top:指定边框顶部 border-bottom:指定边框底部 border:指定边框的所有边 color:边框内部文字颜色 background-color:边框内部文字背景颜色 3.2.2 文本处理 统一用style=引用 对齐 text-ailgn:参数:center、left、right 缩进 text-indent:参数XXpx/XXpt 字体集 font-family:参数:times new roman、arial„„备选项用逗号隔开 字体大小 font-size:参数:XXpt或px 斜体 font-style:参数:normal、italic、oblique 加粗 font-weight:参数:normal、bold、bolder、lighter 颜色 color:参数:„„ 文本行高度 line-height: 删除链接下划线 text_decoration:参数:none、underline、italic和line-through 设置左右边距 margin-left: margin-right: 字母间距 单位:像素 letter-spacing 词间距 单位:像素 word-spacing 小型大写字母 font-variant:small-caps 自动转换段落文本大小写 text-transform:参数:none、uppercase(大写)、lowercase(小写)、capitalize(首字母大写) 3.3 修改超链接外观 Link:链接尚未访问过 Hover:鼠标指向链接 Active:链接被激活 Visited:链接被访问过 先设置后引用 设置: a:link{ CSS} 引用: „„ 对多个类指定统一格式,用逗号分隔 a:link,a:visited,a:active{ CSS} a.1:link,a.2:visited,a.3:active{ CSS} 3.4 注释 /*„„„„*/ 3.5 通用类 可以用于任何样式 eg: .bold{font-weight:bold } 3.6 应用样式 3.6.1 样式类 定义样式类:样式名:类名 样式之间用分号隔开,最后一个样式也要加分号 样式类应用于整个站点 eg {font-size:12pt; color=red;} „„„„ 3.6.2 内部样式表 应用于单个网页 必须在head中定义样式表 不需要link标签引用样式表 在其他网页中不能引用该样式表除非将其复制过去 eg: „„ 3.6.3 内联样式表 将样式应用于单个元素 一行:XXX 一块:XXX 3.7 单独用style指定样式示例 (文本/图像)对齐方式:style=”text-ailgn: ”参数:center、left、right 字体:style=”font-family: ”参数times new roman、arial„„ 字号:style=”font-size: ” 参数:XXpt或px 颜色:style=”color: ”参数:„„ 字体加粗:style=”font-weight:”参数:normal、bold、bolder、lighter 字体斜体:style=”font-style:”参数:normal、italic、oblique 列表编号类型:style=”list-style-type:numtype:”参数:decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none 列表项目标记类型:style=”list-style-type:bullettype”参数:disc、circle、square、none 3.8 样式规则 样式之间用分号隔开分号后无空格 eg:it is bold and italic 参数可以设多个备选项 eg:有空格的话需要加单引号 4 特殊符号 本文发布于:2023-06-20,感谢您对本站的认可!本文链接:http://www.torson.com.cn/chengxu/1687262109a443.html版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。本文标签:html滚动条样式发布评论 取消回复评论列表(有0条评论)最近发表使用html2canvas遇到的问题成为java高级开发工程师需要具备什么(共勉)java 算法 刷题java程序员职业生涯规划范本如何解决安卓手机收不到消息提醒python权重的计算方法jQuery.form.js使用jQuery插件——x-editable表单字段实时编辑)——Validator校验,编辑...基于jQuery框架的Ajax应用开发《网页设计与制作立体化教程(DreamweaverCC2018)》教学大纲关于使用vue的兼容性问题及处理利用善领界面做一机多图导航系统垃圾清理脚本(windows)sql数据库心得体会数据库学习笔记7关系数据库标准语言SQL数据库知识点——SQL查询Ado.NetSQL语句参数化(SqlParameter用法)(多条件模糊查询的实现)企业客户管理系统ef执行原生sql语句_在EF中执行SQL语句将SQLServer2000中image类型的图片显示出来拓祥电子编程网拓祥电子编程提供编程程序员技术分享技术,经验代码。相关推荐Dreamweaver中部分bHTMLb标签及其属性html回到顶部锚点,基于JS实现回到页面顶部的五种写法(从实现到增强...HTML实现左侧内容可滚动,右侧列表固定布局html table布局bootstraptable表头固定、冻结列、横向纵向滚动条HTML元素拖拽功能实现的完整实例解决ios系统h5页面滚动条问题html+css笔记HTMLtable表格thead表头固定,tbody滚动htmlcss好看的提示框,div对话框,js+div+css实现好看的提示框效果(转...htmldiv代码大全,DIV+CSS常用代码大全html全局背景代码,html背景代码HTML常用框架淘宝网店铺装修装饰HTML代码大全HTML页面中解决内容元素随窗口变化布局变乱问题html题目[wps演示如何制作滚动条图文教程] wps表格滚动条设置JQUERY实现滚动效果原理详解1HTML、JS、CSS实现Matrixrain效果代码解读el-table暂无数据居中,不随滚动条滚动标签列表未连接在服务器的网络是什么意思我的世界服务器p27什么意思wifi远端服务器无响应是什么意思华为服务器超聚变是干什么的为什么网吧的gta5总是连不上服务器手机qq发电脑照片为什么显示服务器拒绝我的世界服务器修复师有什么用绯色回响日服为什么进不了服务器方舟电脑版什么样的服务器会删档亚服阿拉希服务器为什么看不到玩游戏服务器不在线什么原因怎么看天龙八部什么服务器h5的服务器域名是什么意思域名根服务器f i k l什么意思运营商服务器异常是什么意思台湾同胞玩ps5上什么服务器百度云盘服务器在什么地方首先会通过什么寻找服务器的ip地址未来之役为什么不可以换服务器n1做服务器有什么用吗