邯山区建设局网站,网站页面关键词优化,广东百度seo关键词排名,陕西网站建设维护文章目录1 HTML简介1.1 什么是HTML1.2 HTML能做什么1.3 HTML书写规范2 HTML基本标签2.1 结构标签2.2 排版标签2.3 块标签2.4 基本文字标签2.5 文本格式化标签2.6 标题标签2.7 列表标签(清单标签)2.8 图片标签2.9 链接标签2.10 表格标签3 HTML表单标签3.1 form元素常用属性3.2 i…
文章目录1 HTML简介1.1 什么是HTML1.2 HTML能做什么1.3 HTML书写规范2 HTML基本标签2.1 结构标签2.2 排版标签2.3 块标签2.4 基本文字标签2.5 文本格式化标签2.6 标题标签2.7 列表标签(清单标签)2.8 图片标签2.9 链接标签2.10 表格标签3 HTML表单标签3.1 form元素常用属性3.2 input元素3.3 select 元素(下拉列表)3.4 textarea元素(文本域)4 HTML框架标签4.1 框架结构标签frameset4.2 框架标签frame4.3 基本的注意事项4.4 综合案例4.5 iframe5 特殊字符标签5 特殊字符标签1 HTML简介
1.1 什么是HTML HTML全称Hyper Text Markup Language(超文本标记语言) 超文本:页面内可以包含图片、链接甚至音乐、程序等非文字元素标记:标签不同的标签实现不同的功能语言:人与计算机的交互工具 1.2 HTML能做什么 HTML使用标记标签来描述网页,展示信息给用户 1.3 HTML书写规范 HTML标签是以尖括号包围的关键字HTML标签通常是成对出现的有开始就有结束HTML通常都有属性格式:属性‘属性值’(多个属性之间空格隔开)HTML标签不区分大小写,建议全小写 2 HTML基本标签
2.1 结构标签
html:根标签 head网页头标签title/title:页面的标题 /head body/body网页正文
/html属性名代码描述text body text“#f00”/ body设置网页正文中所有文字的颜色bgcolor body bgcolor“#00f”/ body设置网页的背景色background body background“1.png”/ body设置网页的背景图颜色的表示方式 第一种方式用表示颜色的英文单词例red green blue 第二种方式用16进制表示颜色例#000000 #ffffff #325687 #377405 2.2 排版标签 可用于实现简单的页面布局 注释标签 换行标签 br 段落标签 p文本文字/ p 特点段与段之间有空行属性align对齐方式(left、center、right) 水平线标签: hr/ 属性: width水平线的长度(两种:第一种:像素表示第二种百分比表示) size: 水平线的粗细 (像素表示例如10px) color:水平线的颜色 align:水平线的对齐方式 2.3 块标签 使用CSSDIV是现下流行的一种布局方式 标签代码描述div div/ div行级块标签独占一行换行span span/ span行内块标签所有内容都在同一行
2.4 基本文字标签 font标签处理网页中文字的显示方式 属性名代码描述size font size“7”/ font用于设置字体的大小最小1号最大7号color font color“#f00”/ font用于设置字体的颜色face font face“宋体”/ font用于设置字体的样式
2.5 文本格式化标签 使用标签实现标签的样式处理 标签代码描述b b/ b粗体标签strong strong/ strong加粗em em/ em强调字体i i/ i斜体small small/ small小号字体big big/ big大号字体sub sub/ sub上标标签sup sup/ sup下标标签del del/ del删除线
2.6 标题标签 随着数字增大文字逐渐变小字体是加粗的内置字号默认占据一行 标签代码描述h1 h1/ h11号标题最大字号h2 h2/ h22号标题h3 h3/ h33号标题h4 h4/ h44号标题h5 h5/ h55号标题h6 h6/ h66号标题最小字号
2.7 列表标签(清单标签) 无序列表使用一组无序的符号定义 ul /ul ul typecircleli/li
/ul属性值描述用法举例circle空心圆 ul type“circle” /uldisc实心圆 ul type“disc” /ulsquare黑色方块 ul type“square” /ul有序列表使用一组有序的符号定义 ol /ol ol typea start1li/li
/ol属性值描述用法举例1数字类型 ul type“1” /ulA大写字母类型 ul type“A” /ula小写字母类型 ul type“a” /ulI大写古罗马 ul type“I” /uli小写古罗马 ul type“i” /ul列表嵌套无序列表与有序列表相互嵌套使用 代码举例olli/lili/liliulli/li/ul/li/ol2.8 图片标签 在页面指定位置处中引入一幅图片 img / 属性名描述src引入图片的地址width图片的宽度height图片的高度border图片的边框align与图片对齐显示方式alt提示信息title鼠标移到图片上显示的文字
2.9 链接标签 在页面中使用链接标签跳转到另一页面 标签 a href“” /a 属性href:跳转页面的地址(跳转到外网需要添加协议) 设置跳转页面时的页面打开方式target属性 _blank在新窗口中打开_self在原空口中打开 指向同一页面中指定位置 定义位置 a name“名称” /a指向 a href“#名称” /a 2.10 表格标签 普通表格(table,tr,td) tabletrtd/td/tr
/table表格的列标签(th)内容有加粗和居中效果 tabletrth/th/tr
/table表格的列合并属性(colspan)在同一行内同时合并多个列 tabletrtd colspan/td/tr
/table表格的行合并属性(rowspan)在同一列跨多行合并 tabletr rowspantd/td/tr
/table3 HTML表单标签 html表单用于收集不同类型的用户输入数据 3.1 form元素常用属性 form表单用于收集数据并提交到服务器 属性 action : 表单提交的服务器地址method : get方法和post方法enctype : 表单的提交形式 application/x-www-form-urlencoded默认的以字符串的形式(key-value)提交multipart/form-data(以二进制的流的形式提交表单) ) 3.2 input元素 作为表单中的重要元素可根据不同type值呈现为不同状态 属性值描述代码text单行文体框 input type“text”/password密码框 input type“password”/radio单选按钮 input type“radio”/checkbox复选框 input type“checkbox”/date日期框 input type“date”/time时间框 input type“time”/datetime-local日期和时间框 input type“datetime-local”/email电子邮件输入 input type“email”/number数值输入 input type“number”/file文件上传 input type“file”/hidden隐藏域 input type“hidden”/submit表单提交按钮 input type“submit”/button普通按钮 input type“button”/reset重置按钮 input type“reset”/image图片提交按钮 input type“image”/
3.3 select 元素(下拉列表) 单选下拉列表 select /select 默认选中属性selected“selected” selectoption selectedselected内容/option...option/option
/select3.4 textarea元素(文本域) 多行文本框 textarea cols“列” rows“行” /textarea 4 HTML框架标签 通过使用框架你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架并且每个框架都独立于其他的框架。使用框架的缺点 开发人员必须同时跟踪更多的HTML文档很难打印整张页面 4.1 框架结构标签frameset 框架结构标签 frameset /frameset用于定义如何将窗口分割为框架每个 frameset 定义了一系列行或列rows/columns 的值规定了每行或每列占据屏幕的面积 frameset rows“” /framesetframeset cols“” /frameset 4.2 框架标签frame 每个frame引入一个html页面 frameset cols*,*frame srcinfo1.html /frame srcinfo2.html /
/frameset4.3 基本的注意事项 不能将 body /body 标签与 frameset /frameset 标签同时使用假如一个框架有可见边框用户可以拖动边框来改变它的大小。为了避免这种情况发生可以在 frame标签中加入noresize“noresize”。 4.4 综合案例 主页面 !-- frameset标签(不能与body标签一起使用) --
frameset rows20%,80%frame srctop.html noresize/frameset cols15%,*frame srcleft.html noresize/frame srccontent.html noresize namecontent//frameset
/framesettop页面 bodyh1这是页面的头部/h1
/bodyleft页面 员工管理部门管理用户管理 bodyullia hrefhttp://www.baidu.com targetcontent员工管理/a/lilia hrefhttp://www.taobao.com targetcontent部门管理/a/lilia hrefhttp://www.jd.com targetcontent用户管理/a/lilia hrefhttp://www.sina.com targetcontent订单管理/a/li/ul
/bodycontent页面 bodyh1这是页面的中间/h1
/body4.5 iframe iframe 元素会创建包含另外一个文档的内联框架即行内框架 !-- iframe标签 --
ullia href08_超链接标签.html targetcontent员工管理/a/lilia href09_表格标签.html targetcontent部门管理/a/lilia href10_表格跨行跨列.html targetcontent用户管理/a/lilia href11_表单标签.html targetcontent订单管理/a/li
/ul
diviframe src08_超链接标签.html width600px height600px namecontent/iframe
/div5 特殊字符标签
!--
nbsp; 空格
gt; 大于号
lt; 小于号
reg; 商标
copy; 版权
quot; 双引号
-- i部门管理
用户管理
订单管理 5 特殊字符标签
!--
nbsp; 空格
gt; 大于号
lt; 小于号
reg; 商标
copy; 版权
quot; 双引号
--
