本文配套资料https://pan.quark.cn/s/b5638e1405d7简介HTML 是什么htyper text markup language 即超文本标记语言。超文本: 就是指页面内可以包含图片、链接甚至音乐、程序等非文字元素。标记语言: 标记标签构成的语言。什么是标签:是由一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头.标签不区分大小写. 和 . 推荐使用小写.标签分为两部分: 开始标签 和 结束标签. 两个标签之间的部分 我们叫做标签体.有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如:标签可以嵌套.但是不能交叉嵌套.标签的属性:通常是以键值对形式出现的. 例如 name“nick”属性只能出现在开始标签 或 自闭和标签中.属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name“nick”如果属性值和属性名完全一样.直接写属性名即可. 例如 readonlyHTML5基本结构:将HTML4中的DTD定义为如下结构即可其他不变。!DOCTYPEHTMLHTML5支持的两种指定页面使用的字符集的方式:使用Content-Type指定字符集metahttp-equivContent-Typecontenttext/html ;charsetUTF-8/直接使用charset指定字符集metacharsetUTF-8 head 标签 titletitleTitle/title base/标签为页面上的所有链接规定默认地址或默认目标。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8titleTitle/titlebasehrefhttp://images.cnblogs.com/cnblogs_com/suoning/845162//basetarget_blank//headbodyimgsrco_s.pngalt图片加载失败。。。/ahrefhttp://cnblogs.com/suoning/nick blogs/a/body/html# 上面这段代码中img标签的src属性是一个相对路径因为head中通过base标签设置了链接的默认地址 所以img的src实际的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。 同样的a中只是指定了href并未指定target属性所以也会使用base中设置的target属性的值。** link/ **引用外部文档常见于引用外部样式。重要属性有三个rel、href、type。rel规定文档与被链接文档之间的关系。rel“dns-prefetch” 预先解析缓存文档中使用的域名目的是为了提高网页访问速度。使用场景在一个网页频繁使用其他域名资源时。relshortcut icon或rel“icon” 在收藏和标题栏上用于显示的图标。示例。注意IE浏览器只支持ico格式为了兼容IE图片文件采用ico格式。rel“stylesheet” 引用外部样式表。rel“nofollow” 用于指示搜索引擎不要追踪爬虫抓取减少垃圾链接。用于标签使用场景网页不被信任或是不希望呗搜索引擎录入的网站。href资源的路径相对路径/绝对路径。type规定被连接文档的MIME类型用于明确文件的打开方式。例如.ico文件 image/x-icon。** meta/ **定义关于HTML文档的元数据。 重要的属性有三个http-equiv、name、contenthttp-equiv把content属性值关联到http头部。Content-Type浏览器接受的文档类型一般是text/htmlrefresh网页刷新以秒为单位expires设定网页到期时间一旦过期必须到服务器上重传metahttp-equivContent-Typecontenttext/html ;charsetUTF-8/metahttp-equivRefreshcontent2metahttp-equivRefreshcontent2;URLhttps://www.baidu.commetahttp-equivexpirescontent6 Jun 2016/name把content属性关联到一个名称。keywords搜索关键字用于搜索引擎抓取信息的显示description搜索到网站后显示的网页内容简描述author站点制作者信息generator用以说明生成工具name也可以根据特定的功能自定义在新浪网中有使用360认证和搜狐认证meta name360-site-verificationcontent“63349**********”/、meta namesogou_site_verificationcontent“BVI*******”/。metanamekeywordscontent搜索关键字metanamedescriptioncontent简要描述metanameauthorcontenthttp://cnblogs.com/suoningmetanamegeneratorcontent用以说明生成工具content定义与http-equiv或name属性相关的元信息是必要的属性。 body 标签1、块级标签和内联标签块级标签内联标签block块元素的特点① 总是在新行上开始② 高度行高以及外边距和内边距都可控制③ 宽度缺省是它的容器的100%除非设定一个宽度。④ 它可以容纳内联元素和其他块元素inline内联元素的特点① 和其他元素都在一行上② 高行高及外边距和内边距不可改变③ 宽度就是它的文字或图片的宽度不可改变④ 内联元素只能容纳文本或者其他内联元素对行内元素需要注意如下设置宽度width 无效。设置高度height 无效可以通过line-height来设置。设置margin 只有左右margin有效上下无效。设置padding 只有左右padding有效上下则无效。注意元素范围是增大了但是对元素周围的内容是没影响的。2、基本标签~标题标签.: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.styletext-indent: 2em可以设置样式为首行缩进两个字符。可以用来设置整个段落的缩进。: 加粗标签.: 为文字加上一条中线.: 文字下方加下划线.: 文字变成斜体.和: 上角标 和 下角标.:换行.:水平线.块级标签。块级标签常用于布局行级标签常用语显示内容。div的显示通常使用id或class来标识。id为唯一的标签标识class为标签的类标识。div的大小是由内容来决定的默认情况下高度由内容的高度决定宽度适应屏幕。可以容纳其他元素是一个容器。3、特殊符号 空格 引号© 版权符号特殊符号 符号码 quot ; amp ; lt ; gt ; © copy ; ® reg ; ± plusmn ; × times ; § sect ; ¢ cent ; ¥ yen ; · middot ; euro ; £ pound ; ™ trade ;4、 超链接标签(锚标签)重要属性有三个href、target、namehref超链接地址可以是Web上任意资源包括图片网页样式脚本文件等。href#时表示被链接页面就是当前页面。target文档打开时要显示的目标位置属性值一般有_blank新窗口中打开、_self默认在超链接所在的容器中打开、_parent在超链接的父容器中打开、_top整个容器中打开、name框架名称。name锚记名称。作用跳转到文档的某个地方。返回首页。# 跳转网页ahrefhttp://cnblogs.com/suoningtarget_blankNick Blogs/a# 跳转锚记书签名称anametoph3Top/h3/adivstyleheight:800px/divahref#toptop/a1.标签最简式ahrefmailto:xxxxx.com邮件联系/a2.标签帮你填抄送地址ahrefmailto:xxxxx.com?ccxxxxxx.com邮件联系/a3.标签帮你填暗送地址ahrefmailto:xxxxx.com?bccxxxxxx.com邮件联系/a4.暗,抄ahrefxxxxxxx.com邮件联系/a5.标签帮你填主题ahrefmailto:xxxxx.com?subject这是主题邮件联系/a6.填邮件内容ahrefmailto:xxxxx.com?body这是内容邮件联系/a7.多址发送ahrefmailto:xxxxx.com,xxxxxx.com邮件联系/amailto标签发送邮件实例# http://shang.qq.com/v3/widget.htmlatarget_blankhrefhttp://wpa.qq.com/msgrd?v3uin630571017siteqqmenuyesimgborder0srchttp://wpa.qq.com/pa?p2:630571017:51alt点击这里给我发消息title点击这里给我发消息//a链接QQ实例一ahreftencent://message/?uin630571017target_blankimg styleborder:0px; srchttp://wpa.qq.com/pa?p1:707321921:13/a# 更多图片地址如下 # http://wpa.qq.com/pa?p1:707321921:1 # http://wpa.qq.com/pa?p1:707321921:2 # http://wpa.qq.com/pa?p1:707321921:3 # http://wpa.qq.com/pa?p1:707321921:4 # http://wpa.qq.com/pa?p1:707321921:5 # http://wpa.qq.com/pa?p1:707321921:6 # http://wpa.qq.com/pa?p1:707321921:7 # http://wpa.qq.com/pa?p1:707321921:8 # http://wpa.qq.com/pa?p1:707321921:9 # http://wpa.qq.com/pa?p1:707321921:10 # http://wpa.qq.com/pa?p1:707321921:11 # http://wpa.qq.com/pa?p1:707321921:12 # http://wpa.qq.com/pa?p1:707321921:13链接QQ实例二5、 图形标签行级标签用来显示图片。重要属性有src、title、alt、width、height、align。src图片地址。title鼠标悬浮在图片上的文字。alt图片找不到时要替换的文字。如果图片资源使用的是外网资源则不会显示要替换的文字。如果使用的是本网站的资源相对路径给出则找不到图片时会显示替换的文字并保留图片设置的宽高结构。align图片周围文字的垂直对齐情况。常用的属性值有top与图片的顶部对齐、middle与图片的中部对齐、bottom默认与图片的底部对齐。width图片的宽height图片的高 (宽高两个属性只用一个会自动等比缩放.)imgsrchttp://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.pngalt图片加载失败。。。titleThe knife girl, kiss/6、列表标签 ul :无序列表标签:列表中的每一项. ol :有序列表标签:列表中的每一项.主要的属性有type、value两个:type指明项目的类型属性值有AaIi1disc实心圆square实心正方形circle空心圆。value表示序号值从几开始。 dl 定义列表列表标题列表项 htmlABC34标题第一项第二项第三项**7、 table 表格标签** html table border1 thead tr th序号/th th姓名/th /tr /thead tbody tr th1./th tdnick/td /tr tr th2./th tdjenny/td /tr /tbody /table** table ** 表格标签border:表格边框align水平对齐方式bgcolor背景颜色cellpadding内边距单元格与内容之间的距离cellspacing外边距单元格的间距设置为0时表格变为实线表格width表格的宽度可以用%或者像素最好通过css来设置长宽 caption表格的标题 tr表格的数据行table row th表格的表头名称与不同在于文字采用加粗居中的形式显示table head cell td单元格用来显示表格内容table data cell** thead ** 表格头部使结构更加分明 tbody表格主体部分使结构更加分明rowspan单元格竖跨多少行作用在th或者td上colspan单元格横跨多少列即合并单元格作用在th或者td上tablecaptionxxxxxxxxxx/captiontheadtrth序号/thth姓名/thth年龄/thth女神/th/tr/theadtbodytrth1./thtdnick/tdtd18/tdtd可可西/td/trtrth2./thtdjenny/tdtd21/tdtdnick!!!/td/tr/tbody/table**8、**** form**表单标签表单属性HTML 表单用于接收不同类型的用户输入用户提交表单时向服务器传输数据从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。属性action、method、enctypeaction表单要提交的地址用于处理表单的内容一般是提交字典到后台的一个接口这个接口是java写成的提交到这个接口后后台就知道如何处理这些数据了。method提交的方法默认是get方式提交。get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.enctype对表单数据进行编码默认都是要编码的。格式为application/x-www-form-urlencoded表单默认的编码格式表单发送前对所有字符进行编码。编码规则空格转换为“”号特殊符号转换为ASC HEX值。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时编码就需要采用另一种格式multipart/form-data不对字符编码文件上传时使用。text/plain是一种纯文本编码空格转换为“”号但是不对特殊字符进行编码。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8titleTitle/title/headbodyformactionhttps://www.baidu.com/sinputtypetextnamewdinputtypesubmitvalue百度一下/form/body/html百度搜索实例!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8titleTitle/title/headbodyformactionhttps://www.sogou.com/webinputtypetextnamequeryinputtypesubmitvalue搜狗搜索/form/body/html搜狗搜索实例表单元素** input **type属性text文本框输入默认text文本框类型。autocomplete自动完成输入的内容要求表单元素要有name属性才有自动完成的效果off表示自动完成不可用on表示自动完成可用disabled设置或者获取控件的状态默认是false即可用等于true时不可用不能输入内容password密码框。以下属性text和password共有size指定表单元素的初始宽度。当type为text或password时表单元素的大小以字符为单位对于其他元素宽度以像素为单位maxlengthtype为text或password时表示输入的最大字符数有利于防止sql的注入攻击readonly 只读.placeholder 框内预置内容(灰色)写上内容时才消失radio单选按钮。属性name将name的值设置为相同值才表示一组数据才能实现单选功能value必须要写提交到服务器的key值实际开发过程中value一般是编号checked是否被选中的状态checkbox复选框。name名字一定要一样一样的才表示是一组数据添加到同一value值列表提交到服务器value必须要写提交到服务器的key值实际开发过程中value一般是编号checked是否被选中的状态file文件域上传文件不同的浏览器表现形式不同submit提交按钮。用于提交表单。reset重置按钮。清空表单的输入恢复到表单默认的状态。button普通按钮。一般结合javascript使用。image图片按钮用来提交表单与submit是一样的效果。src图片路径hidden隐藏字段。value隐藏的内容color颜色标签。value指定颜色值采用#十六进制数表示。date日期。value值指定默认的日期格式为****--年月日。datetime-local显示本地时间value值指定默认的时间格式为2016-05-20T11:10:10年月日T时分秒。number数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。range滑动标签。min指定最小值、max指定最大值、value指定当前默认值。week每年的周数。value指定哪一年第几周格式为2016-W252016年第25周。** textarea **文本域标签。默认表现形式是可以输入很多行文本的文本框。name 表单提交项的keycols设置文本域宽度rows设置文本域高度即行数** select **下拉框标签。使用时要结合子标签一起使用。name:表单提交项的keysize选项个数multiple多选下拉选中的每一项* value表单提交项的值 * selectedselected下拉选默认被选中为每一项加上分组** label **把元素与文本结合起来友好设计不只是选中复选框才能选中并打钩要求点击对应的文字也能选中该复选框。这种情况下要用到标签的for属性设置或获取给定标签对象指定到的对象值另一个元素的id号即可labelforname姓名/labelinputidnametypetext** fieldset **对表单中的相关元素进行分组fieldsetlegend温馨提示/legenddivalignmiddle不要忘记点赞哦 /div/fieldsetvalue: 表单提交项的值对于不同的输入类型value 属性的用法也不同type“button”, “reset”, “submit” - 定义按钮上的显示的文本type“text”, “password”, “hidden” - 定义输入字段的初始值type“checkbox”, “radio”, “image” - 定义与输入相关联的值框架 frameset 框架用来划分窗体不能放在中否则没有效果。cols纵向分割页面。其数值表示方法有三种“30%、30或者30px、”数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%“30”表示该区域横向宽度为30像素“”表示该区域占用余下页面空间。例如cols“25%,200,*” 表示将页面分为三部分左面部分占页面30%中间横向宽度为200像素页面余下的作为右面部分。rows横向分割页面。属性和cols一样frameborder设置是否显示框架边框。设定值只有0、10 表示不要边框1 表示要显示边框border框架之间的距离一般设置为0bordercolor边框的颜色framespacing设置框架与框架间的保留的空白距离framesetcols40%,*,*第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。framesetcols*,*,*,*浏览器窗口等分为四部分。 iframe 框架元素会创建包含另外一个文档的内联框架即行内框架name设置框架名称。此为必须设置的属性src设置此框架要显示的网页名称或路径。此为必须设置的属性scrolling设置是否要显示滚动条。设定值为auto, yes, nobordercolor设置框架的边框颜色frameborder设置是否显示框架边框。设定值只有0、10 表示不要边框1 表示要显示边框noresize设置框架大小是否能手动调节marginwidth设置框架边界和其中内容之间的宽度marginhight设置框架边界和其中内容之间的高度width设置框架宽度height设置框架高度