服装网站建设比较好,建立网站的服务器,中国机械加工网易下拉教程,免费代理Html 简介
超文本结构语言 html并非一种编程语言#xff0c; 而是一种描述超文本文档的标记语言#xff0c;用html编写的超文本文档成为html文档。 超文本文档指的是#xff0c;可以加入图片、声音、动画、影视等内容#xff0c;并可以利用超链接方便的从一个文件跳转到网…Html 简介
超文本结构语言 html并非一种编程语言 而是一种描述超文本文档的标记语言用html编写的超文本文档成为html文档。 超文本文档指的是可以加入图片、声音、动画、影视等内容并可以利用超链接方便的从一个文件跳转到网络上其他主机的另一个文件。
Html标签结构形态
Html的标签主要有三种形态如下所示 标签元素/标签 是开始标签中间元素结束标签 标签 属性名“属性值”元素/标签 属性表示标签的信息其中多个属性时候无先后之分而且需要使用空格分隔注意是空格分隔 标签 属性名“属性值” / 既是开始标签也是结束标签也成为了单标签空标签也可以后跟属性
Html的文档结构
Html主要分文档头和文档体两个文档头是对文档的必要定义文档体才是要显示的各种文档信息。
demo
htmlhead头部信息例如标题等等。 是文件头/headbody正文部分。 是文件体/body
/html其中 html在最外层表示中间内容是HTML文档一些HTML文档可忽略html标签
文件头可以根据需要就行忽略文件体常常不会被忽略。
Html的常用标签
html标签
html或者是/html任意删除一个或者是全部是允许的但是在html前或者是在/html后面任意加入一些字符是错误的。
body标签
text属性(设置文本颜色)bgcolor属性(设置背景颜色) hn标签
hn 标题内容 /hn, 其中 n 为标题的等级n 在 1~6之间。可以具有 align 的属性用法和 p 的align 一样
htmlheadtitle这是一个标题标签的测试/title/headbodyh1这是一个一级标题/h1h2这是一个二级标题/h2h3这是一个三级标题/h3h4这是一个四级标题/h4h5这是一个五级标题/h5h6这是一个六级标题/h6/body
/html结果展示:
p标签和br标签
br标签的作用是换行是一个空标签即为br/br 等价于br /相当于我们平时的 ‘\n’p是为了使得文档排列的整齐p意味着文档开始/p表示文档的结束。 p便签有一个属性 align对齐一般有ceter, left, right三种有些是时候align在部分浏览器上不兼容
htmlheadtitle这是一个简单的测试/title/headbodyp aligncenter ceter paragraph /pp alignleft left paragraph /pp alignright right paragraph/p/body/html显示效果展示 p和br标签的区别 br会强迫调至下一行p会产生一行空白br会强制换行一行 多个br效果会累加但是p会换行而且多跳一行但是多个p效果同一个p是相同的。 htmlheadtitle测试 p 与 br 的区别/title/headbody这是第一行内容仅仅只有一个 br br /这是第二行内容有多个 br br /br /这是第三行内容仅仅只有一个 p p /这是第四行内容有多个 p p /p /p /这是最后一行/body/html运行结果 主要是设置文档的字体非常好用他的属性如下所示size 属性 有效值为 1~7其中default“3”color属性可以使#RRGGBB, 如#1e00ff–天蓝色 也可以使用颜色的单词, red等等face属性用来设置问题的字体如 黑体 宋体华文彩云
htmlheadtitle测试font的使用方法/title/headbodyp alignrightfont size3 colorRed face黑体size3 colorRed face黑体/fontbr /font size4 coloryellow face宋体size4 coloryellow face宋体/fontbr /font size5 colorblue face华文彩云size5 colorblue face华文彩云/fontbr //p/body/html运行结果 a标签(超文本链接) 打开有问题 a表示连接开始/a表示链接的结束他有两个属性href和target href 定义了这个链接所指的地方 如 href“www.baidu.com” target属性指明了在何处打开链接文档有两个属性值_blank, _self 一个表示新建标签页 一个表示在当前页。
htmlheadtitle测试font的使用方法/title/headbodyp alignlefta hrefhttps://www.baidu.com targer_blank在新建标签页打开百度链接/a/pp alignlefta hrefhttps://www.baidu.com targer_self在当前页打开百度链接/a/p/body
/html运行结果
Html的表格
表格就是由行和列组成的栅格每个单元格可以用来放置 文本或者是图片表格由 table标签开始/table标签结束内容由tr, th, td标签定义分别表格的行表格的头以及单元格的具体数据其中td 与 th标签类似但是th标签定义单元格的内容会被 居中加粗显示 tr, th 可以设计 width height
设置表格的大小、边框
设置表格的大小 一般情况下表格的宽度和长度会根据各行各列的总和进行自动调整倘若固定时格式如下table width“w” height“h”需要补上table 的属性 比如table width“300” height“100” 这里的300,100都指的是像素比如table width“50%” height“10%” 设置表格的边框 表格边框可以通过 border属性来调整 0 ~ 多少自己 可以试试。 表格也可以设置居中不是内容居中而是总体表格的居中 align属性
跨行、列表格的设计行列同时未成功
设置表格的大小边框用到的是 table上面的属性 width height border
但是要设计到跨行、跨列的表格需要使用的是单元格的属性 th 或者是 td的属性 colspan 或者 rowspan属性值域就是要合并的个数。
表格设计展示
htmlheadtitle测试table的使用方法/title/headbodyfont size5 color#1e00ff p alignleft 表格一 col 合并 /p/font table width300 height150 border3tr th rowspan4 表格测试1/thth姓名/thth年龄/th/trtr tdxyg/tdtd21/td/trtr tdxm/td td20/td/trtr tdxy/td td50/td/tr/tablefont size6 color#b22222 p alignleft 表格二 row 合并/p/font table width50% height25% border2tr th colspan2 表格测试2/th /trtr th姓名/thth年龄/th /trtr tdxyg/tdtd21/td /trtr tdxm/td td20/td /trtr tdxy/td td50/td /tr/tablefont size6 color#b22222 p alignleft 表格三 col row 合并 /p/font table width50% height25% border1tr th colspan2 rowspan2 表格测试3/th /trtr th姓名/thth年龄/th /trtr tdxyg/td td21/td /trtr tdxm/td td20/td /trtr tdxy/td td50/td /tr/table/body
/html结果展示可惜行列没能一块合并了
Html的表单
HTML的表单用于收集用户的输入用户填好信息后通过点击提交按钮上传至服务器。
元素类型元素描述text单行文本框password密码框radio单选按钮checkbox多选按钮textarea多行文本框select下拉列表submit提交按钮reset重置按钮
单行文本框text
功能内容本身较短只有一行需要用户输入属性有 size 和 valuesize属性用来设置文本框的显示长度默认为20 value 用来设置文本框初始值如果不希望内容被编辑(一直显示初始值value)可以使用属性 readonly “readonly”
htmlheadtitle测试text的使用方法/title/headbodyforminput typetext nameUserName size20 value请输入姓名/form/body
/html密码框password
输入的内容是看不到的可以有 size value属性
htmlheadtitle测试text的使用方法/title/headbodyforminput typepassword nameps size20 value123456/form/body
/html结果显示
单选按钮radio
功能呢就是单项选择为了实现单选的效果同一列要求 name 属性一致想要默认选中需要属性 checked可以不加属性值一定要注意示例中 value “工人” 外面又有了个工人
htmlheadtitle测试text的使用方法/title/headbodyforminput typeradio nameidentity value工人 checked工人br /input typeradio nameidentity value农民农民br /input typeradio nameidentity value商人商人br /input typeradio nameidentity value企业家企业家br //form/body
/html运行结果 复选框checkbox 仍旧是需要一组复选框选项 name 属性一致。 感觉除了 checkbox 的type和 radio 不同其余都差不多
htmlheadtitle测试checkbox的使用方法/title/headbodyforminput typecheckbox nameidentity value工人 checked工人br /input typecheckbox nameidentity value农民农民br /input typecheckbox nameidentity value商人 checked商人br /input typecheckbox nameidentity value企业家企业家br //form/body
/html运行结果 多行文本框textarea 有两个常用属性 rows cols 分别表示文本框的行数和列数 文本框初始内容需要写在标签体中而不是value中 虽然没有type不是上面的 input也没有value但是依旧需要 name
htmlheadtitle测试textarea的使用方法/title/headbodyformtextarea namedescription rows5 cols30输入你的职业描述 /textarea/form/body
/html结果展示 下拉列表select 配合optioin
为了实现下拉列表的多项选择可以使用multiple属性支持多项选择时候size 需要大于1option标签中selected属性表明默认被选中option常常仅仅用value,selected属性表示数值和被选中列表select常用属性为size name用于表示选项的数量和 服务器端的name
提交按钮
完成表单提交
重置按钮
将表单元素恢复至原始状态
表单
一个包含表单元素的区域主要有两个属性method和actionmethod表示表单的提交方式分为get和post两种默认为get提交 action“deal.jsp表明表单元素信息是提交给服务器上面的deal.jsp文件来处理表单元素在form和/form之间一个页面可以有多个表单表单之间不可以嵌套重叠
下拉列表、提交按钮、重置按钮、表单的综合演示
htmlheadtitle小测试/title/headbodyform methodpost actiondeal.jspselect size1 namemysiteoption value136 selected 网易 /optionoption valuesouhu 搜狐 /optionoption valuesina 新浪 /option/selectbr /input typesubmit value提交 nameb1br /input typereset value重置 nameb2br //form/body
/html结果显示 项目开发1:用户注册页面
目标开发效果 html代码与运行结果
htmlheadtitle 用户注册界面test /title/headbodyp aligncenterfont face宋体 size5 用户注册 /font/pp aligncenterformtable border1trtd姓名/tdtdinput typetext nameusername size30/td/trtrtd密码/tdtdinput typepassword nameps size30/td/trtrtd确认密码/tdtdinput typepassword nameps2 size30/td/trtrtd性别/tdtdinput typeradio namesex value男 checked 男input typeradio namesex value女 女/td/trtrtd职业/tdtdselect size1 nameidentityoption valueworker selected公司员工/optionoption valuestudent学生/optionoption valueteacher教师/option/select/td/trtrtd电话号码/tdtdinput typetext nametel size30/td/trtrtd电子邮箱/tdtdinput typetext nameemail size30/td/trtrtd兴趣爱好/tdtdinput typecheckbox namefavor valueSport sport br /input typecheckbox namefavor valueReading Reading br /input typecheckbox namefavor valueTravelling Travelling br /input typecheckbox namefavor valueEating Eating br //td/trtrtd自我简介/tdtdtextarea rows5 cols30 nametarea /textarea/td/trtrtd colspan2input typesubmit namebtn1 valuesubmit/td/tr/table/form/p/body
/html 细节上还是差一点下面我们改进一下
细节修改
将表格 table, td, th进行align即可同时hn 标题也是可以 align 的
htmlheadtitle 用户注册界面test /title/headbodyh1 aligncenter 用户注册 /h1 br /formtable border1 aligncentertrtd aligncenter姓名/tdtdinput typetext nameusername size30/td/trtrtd aligncenter密码/tdtdinput typepassword nameps size30/td/trtrtd确认密码/tdtdinput typepassword nameps2 size30/td/trtrtd aligncenter性别/tdtdinput typeradio namesex value男 checked 男input typeradio namesex value女 女/td/trtrtd aligncenter职业/tdtdselect size1 nameidentityoption valueworker selected公司员工/optionoption valuestudent学生/optionoption valueteacher教师/option/select/td/trtrtd电话号码/tdtdinput typetext nametel size30/td/trtrtd电子邮箱/tdtdinput typetext nameemail size30/td/trtrtd兴趣爱好/tdtdinput typecheckbox namefavor valueSport sportinput typecheckbox namefavor valueReading Reading br /input typecheckbox namefavor valueTravelling Travellinginput typecheckbox namefavor valueEating Eating br //td/trtrtd自我简介/tdtdtextarea rows5 cols30 nametarea /textarea/td/trtrtd colspan2 aligncenterinput typesubmit namebtn1 valuesubmit/td/tr/table/form/body
/html 项目开发2:图书管理系统静态页面
作业
1.定义一个期末考试成绩的表格包括姓名学号成绩等列。
2.创建一个登录表单输入用户名和密码登录系统。
作业一
htmlheadtitle期末考试成绩表格/title/headbodyp aligncenterfont size5 color#1e00ff 作业一期末考试成绩表格/fontbr //pp定义一个期末考试成绩的表格,包括姓名学号成绩等列。font color#b22222 size4不及格使用红色标记/font/pp aligncentertable border2 width60% height30%trth rowspan518级计算机成绩单/thth姓名/thth学号/thth成绩/thth班级/th/trtrtd邢佑广/tdtd2018113/tdtd100/tdtdclass_4/td/trtrtd小妖怪/tdtd2018114/tdtd100/tdtdclass_4/td/trtrtdluckylight/tdtd2018115/tdtd100/tdtdclass_4/td/trtrtdfont color#b22222 size4挂科/font/tdtd2018116/tdtd59/tdtdclass_4/td/tr/table/p/body
/html结果展示: 作业二
htmlheadtitle登录表单/title/headbodyp aligncenterfont color#1e00ff size6 作业二创建一个登录表单/font/pp创建一个登录表单输入用户名和密码登录系统。/ph1作品如下/h1br /formp aligncenterfont size5 color#b22222 欢迎来到本系统 /font br / br /账号:input typetext nameUserName size20 value请输入ID br /密码:input typepassword nameps size20 br \身份:input typeradio nameident value游客 checked 游客 input typeradio nameident value管理 管理 input typeradio nameident value学生 学生 input typeradio nameident value教师 教师 br /input typereset namereset1 value重置input typesubmit namesubmit1 value提交 br /a hrefwww.ysuregister.com target_blank没有账号点击此处马上进行注册/a/p/form/body
/html结果展示
