DAY1内容➡HTML1-2918.常见图片格式jpg/jepg格式有损的压缩格式不支持透明背景动态图。使用场景对图片细节没有极高要求png格式无损的压缩格式支持透明背景不支持动态图。使用场景高质量呈现图片bmp格式不进行压缩的一种格式不支持透明背景动态图。gif格式支持的颜色较少支持简单透明背景动态图webp格式谷歌推出具上述格式的优点但兼容性不太好base64 格式https://www.jyshare.com/front-end/59/文本与图片的相互转换用于与网页同时加载的图片19.超链接蓝→红→紫1跳转页面aenter 快速输入超链接ahref超链接target_blank超链接名字/a!--target中有两种选择一个是_blank,一个是_self--_blank在新的页签中打开_self在当前页签打开注a为行内元素但能够包裹除a自身以外的所有元素href的超链接既能跳转其他页面也能跳转本地页面本地页面详看17.相对路径与绝对路径不输入target则默认为_self超链接间空格/回车只会之间空一格2跳转文件浏览器能支持直接打开jpgmp4gifpdf须手动添加download才能下载不支持zip直接打开但是可以直接下载ahref超链接download自定义下载文件的名字超链接名字/a!--download为下载可添加属性值不填加为文件的名字--3跳转锚点第一种ahref#我是锚点哈哈大笑/a!--记得使用锚点时必须加上#--......aname我是锚点/apsuper big cup/pimgsrchttps://i-blog.csdnimg.cn/direct/d1bf64a88d2648aa95de5a5c1f6c1b4d.jpegalt超大杯第二种更推荐ahref#我是锚点哈哈大笑/a!--记得使用锚点时必须加上#--......pid我是锚点super big cup/pimgsrchttps://i-blog.csdnimg.cn/direct/d1bf64a88d2648aa95de5a5c1f6c1b4d.jpegalt超大杯跳转当前网页顶部刷新网页ahref#回到顶部/a!--可用于网页底部回到顶部href内只写#是回到顶部啥都不写为刷新页面也能回到顶部--还可以从当前网页跳转到其他网页中的锚点处写法如下ahref超链接#我是锚点超链接名字/a弹窗ahrefjavascript:alert(脚本名字);点我出现弹窗/a注具有href属性的a标签为超链接具有name属性的a标签为锚点name和id都是区分大小写的且id最好别以数字开头4唤起指定应用ahreftel:10086电话联系/aahrefmailto:邮箱地址邮件联系/aahrefsms:10086短信联系/a20.列表tab 向右四格shifttab 向左四格1有序列表序号olli文本1/lili文本2/li/ol2无序列表黑点→白点→黑方块用的较多ulli文本1/lili文本2/li/ul3自定义列表术语名称术语描述dldt文本1/dtdd文本1的描述/dddt文本2/dtdd文本2的描述/dd/dl注li/li不可单独使用最好写在ul或ol中列表间可以相互嵌套但是结构一定要完整21.表格一表格结构由表格标题、表格头部、表格主题、表格脚注组成其中表格脚注可写可不写table表格caption表格标题thead表格头部tbody表格主体tfoot表格注脚可写可不写tr每一行th、td每一个单元格其中表格头部用th表格主体、表格注脚中用tdbodytableborder1!--border为边框--caption学生信息/captiontheadtrth姓名/thth性别/thth年龄/thth民族/thth政治面貌/th/tr/theadtbodytrtd张三/tdtd男/tdtd18/tdtd汉族/tdtd团员/td/trtrtd李四/tdtd女/tdtd20/tdtd满族/tdtd群众/td/trtrtd王五/tdtd男/tdtd19/tdtd回族/tdtd党员/td/trtrtd赵六/tdtd女/tdtd21/tdtd壮族/tdtd团员/td/tr/tbodytfoottrtd/tdtd/tdtd/tdtd/tdtd共计:4人/td/tr/tfoot/table/body二常用属性1tableborder1border1时数字为表格最外侧边框像素数目单元格间默认为1border为0则无边框width500调试宽度height300调试单元格高度cellspacing0调试单元格间间距数值0不是合并边框2captain须借助CSS调3theadheight300在表格其他结构height没填写的情况下若table与thead数值一样以thead为主alignleft/center/right调整整个单元格中文字的水平方向的对齐方式valigntop/middle/bottom调整整个单元格中文字的垂直方向的对齐方式4tbody同上5tfood同上6tr同上7thtd调整宽度高度时会同时控制所在那一行那一列width500调试宽度height300调试单元格高度alignleft/center/right调整整个单元格中文字的水平方向的对齐方式valigntop/middle/bottom调整整个单元格中文字的垂直方向的对齐方式bgcolor颜色填充整个单元格的颜色三跨行与跨列alt鼠标左键 增加光标跨列colspan跨行rowspan用于th/td写法th或td colspan/rowspan跨列数目/跨行数目单元格名称/th或/td22.补充几个常用标签1换行标签br(单标签用于换行不适于调间距)ahref超链接1名字1/abr!--此时两个超链接由于标签br不在同一行内--ahref超链接2名字2/a2分割线hr(单标签分割线用法同上)3按原文显示pre双标签preI Love You Love/pre23.表单网页中的交互区域收集用户的数据一基本结构formaction网页地址target_self或_blank method提交方式!--_self和_blank含义详看19.(1)超链接_跳转页面--inputtypetext/passwordname用于指定提交数据的名字value控制框内的默认值maxlength最多文本数目无该属性则无限制!--text表示普通文本password表示加密文本--button按钮名字/button/form例子如下bodyformactionhttps://www.baidu.com/smethodget/postinputtypetextnamewdbutton百度搜索/button/formformactionhttps://search.jd.com/searchtargetinputtypetextnamekeywordbutton京东搜索/button/form/body(二)常用控件1文本输入框input typetextname属性数据的名称value属性输入框内的默认输入值不建议写maxlength属性输入框最大可输入长度placeholder属性输入框内的预写2密码输入框input typepassword常用属性同上3单选框input typeradioname属性数据的名称注想要单选效果多个radio的name属性值要保持一致value属性提交的数据值一定要写checked属性让该按钮默认选中例子如下inputtyperadionamegendervaluemale男inputtyperadionamegendervaluefemalechecked女4复选框input typecheckbox常用属性同上例子如下inputtypecheckboxnamehobbyvaluesmoke抽烟inputtypecheckboxnamehobbyvaluedrink喝酒inputtypecheckboxnamehobbyvalueperm烫头5隐藏域input typehidden作用提交表单时携带固定的数据name属性指定数据的名称value属性指定的是真正提交的数据6提交按钮2种写法button确认/buttoninputtypesubmitvalue点我确认注button标签type的属性默认值为submit即不需要加type属性button不要指定name属性input标签可以通过value属性指定按钮的文字7重置按钮2种写法buttontypereset重置/buttoninputtyperesetvalue点我重置注button不要指定name属性input标签可以通过value属性指定按钮的文字8普通按钮buttontypebutton普通按钮/buttoninputtypebuttonvalue普通按钮9文本域textareanameothercols5rows10/textarearows属性指定默认显示的行数会影响文本域的高度cols属性指定默认显示的列数会影响文本域的宽度不能编写type属性其他属性与1中的input一样10下拉框selectnameplaceoptionvalue陆山东/optionoptionvalue苏江苏/optionoptionvalue沪selected上海/option/selectname属性指定数据的名称option标签设置value属性若没有value属性提交的数据是option中间的文字若设置了value属性提交的数据就是value的值option标签设置了selected属性表示默认选中三禁用表单控件disabled属性可用于标签input、textarea、button、select、option四label标签作用实现 提示的文字 与 其对应的表单控件 相关联即点击文字与之对应的表单控件就会获取焦点两种关联方式1让label标签的for属性的值等于表单控件的id例子如下labelforzhanghu账户/labelinputidzhanghutypetextnameaccount2把表单控件套在label标签的里面例子如下label账户inputtypetextnameaccount/label五fieldset与legend的使用表单控件分组fieldset分组名称legend例子如下fieldsetlegend主要信息/legend....../fieldset24.框架标签1利用行内元素iframe嵌入一个普通网页/广告/本地地址iframesrc地址width900height300frameborder1/iframe!--src的网址frameborder为边框只能为0/1--2iframe与超链接的target属性配合使用ahref超链接target名字超链接名字/abriframename名字src网页地址width900height300frameborder0/iframe3iframe与表单的target属性配合使用formaction网页网址target名字inputtypetextnamekeywordinputtypesubmitvalue搜索/formbriframename名字src网页地址width900height300frameborder0/iframe25.字符实体用一种特殊的形式表示符号一个空格nbsp;或#160;转义符lt;标签gt;或amp;字符实体把字符实体中的省略符号amp;元yen;©版权所有copy;×乘号times;÷除号divide;详情请见https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references作业