2023年6月20日发(作者:)

HTML1. html基本结构 Document

解释说明: 声明⽂档类型 html5⽂档 元数据标签 charset设置字符编码 utf-8万国码3. 图⽚标签1. 属性解释:src ⽤来引⼊图⽚路径alt 图⽚加载出错,⽤来替代图⽚的⽂本title ⿏标放到图⽚上时的提醒⽂字width 图⽚的宽度height 图⽚的⾼度2. 属性src值(三种引⼊⽅式)1.当html⽂件与图⽚在同⼀个⽬录下,直接写图⽚名称2.当html⽂件与图⽚所在的⽂件夹在同⼀个⽬录下,先找图⽚的⽂件夹名称/图⽚名称3.当html⽂件所在的⽂件夹与图⽚所在的⽂件夹在同⼀个⽬录,需要通过../跳出当前html所在的⽬录,然后查找图⽚⽂件夹名称/图⽚名称 ../图⽚⽂件夹名称/图⽚名称4. 列表定义列表

术语
对术语的解释说明
....
Type=”squal ” 实⼼圆 空⼼圆 ⽅块list-style:none;5. 加粗 :样式表现为粗体:主旨是强调,表现为粗体如果主要⽬的是强调,同时样式与其他元素表现出区别的建议使⽤6. 倾斜6. 倾斜(表⽰强调):样式表现为斜体体:主旨是强调,表现为斜体如果只是单纯的样式表现建议使⽤7. 上下标 < sup>< /sup> 上标 < sub>< /sub> 下标 ⼩字体8. 字符实体 空格:      ⼩于号: <      ⼤于号: > 版权符号:© -------- ©

实⼼圆:• ------------- •9. 超链接 超链接属性: 跳转的路径值:   1)跳转⽹址   2)相对路径   3)mailto:邮箱地址

(注意:字符"mailto:"不能省去)   4) 回到顶部

href = “#”   5)表⽰下载   6)锚点 #id值

模块
跳转到模块 打开⽅式   值:      1. _blank 在新窗⼝中打开      2. _self(默认,当前窗⼝打开)3.通过使⽤属性href来指定要链接的url,标签的内容可以为⽂本也可为其他标签   a.点击进⼊2⽹页,点击⽂字进⼊   b.,点击图⽚进⼊xt-decoration:none; 去下划线10. 锚点

《静夜思》

11. 热点区域基本结构 ....为图⽚的特定区域建⽴超级链接usemap=“#id”图像映射标签建⽴对图⽚的映射注意:⼀般使⽤id属性,但是最好是id和name都使⽤图像区域标签定义映射的具体区域,通过使⽤shape属性来指定区域的形状,coords指定区域的位置和⼤⼩,href指定链接地址注意:必须放置在标签内部shape 形状 rect矩形 circle圆形 poly多边形coords 坐标12. ⾏内框架 属性: ⽤来引⼊其他页⾯的、height 框架的宽度和⾼度order 框架的边框 默认有边框------值:1 有边框 0 ⽆边框ing 滚动条 默认有滚动条------值:yes 有边框 no ⽆边框13. 框架标签框架标签可以实现在⼀个html⽂档中显⽰其他html⽂档的功能框架集 (不能⽤在body中,使⽤时body中的内容将不显⽰)HTML5 不⽀持 标签。

cols/rows="" ---pixels px / % 百分⽐剩下的所有空间Frameborder ------1(有边框) 、0(⽆边框)Noresize ---------框架⼤⼩不允许改变等15. ⽹页中图⽚的分类1.内容图⽚2.修饰图⽚——⾊彩表现少,解析速度快,⽀持动图,⽀持透明,是⽹页中修饰类图⽚的⾸选——⾊彩表现较多,不⽀持动图,也不⽀持透明,是⽹页中内容图⽚的⾸选——⽀持透明效果最好16. table表格table的相关属性属性1. border2. cellspacing3. cellpadding4. bordercolor5. bgcoloralign ⽔平⽅向的对齐⽅式 left/center/rightvalign 垂直⽅向的对齐⽅式 top/center/bottom1. 单元格合并:列合并-------colspan="合并的列数" ⽔平合并单元格⾏合并-------rowspan="合并的⾏数" 垂直合并单元格2.标题和表格居中

课程表

3. 表格内字体颜⾊Style=”color:red”值表格默认⽆边框,border="1"单元格与单元格之间的距离内容与单元格四周的距离边框的颜⾊表格背景⾊1. form表单采集数据的范围:属性: ⾏为 数据提交的路径 ⽅式 数据提交的⽅式get 提交时,在地址栏上⽅能看到提交的内容,长度有限制post 提交时,在地址栏上⽅看不到提交内容,相对来说较安全,长度没有限制表单结构type 类型:="text" ⽂本框="password" 密码框="radio" 单选框,单选框 必须要有相同的name值="checkbox" 复选框=”file” ⽂件框="submit" 提交按钮="reset" 重置按钮="button" 普通按钮在=”hidden” 隐藏域----建议:是按钮类型时,写上value值------⼀般⾮按钮类型时,⼀般需要写上older=”内容” 内容变浅⾊显⽰在输⼊框,光标停在输⼊框后内容消失gth=” ” 限制输⼊框最⼤长度(数字位数)6.(点击⽂字选中复选框) 7. multiple=”multiple” 可选多个⽂件8. border:none(去内边框) outline:none(去外边框)label使⽤⽰例

《红楼梦》,中国古代章回体长篇⼩说,⼜名《⽯头记》等,被列为中国古典

《红楼梦》开篇以神话形式介绍作品的由来,说⼥娲补天之⽯剩⼀块未⽤

《红楼梦》诞⽣于18世纪中国封建社会末期,当时清政府实⾏闭关锁国

2. 单选与复选框单选框 name值⼀定要保持⼀致复选框单选或复选框默认被选中,加 checked="checked" 或 checked属性点击⽂字能选中或取消单选或复选按钮:⽂本域 / 多⾏⽂本框下拉选择框selected加在option上 选项默认被选中补充:readonle 只读 disable 禁⽤3. HTML5新增标签标签语义化H5 Test

我们以微信的⼀个⽤户名⽚为例

演⽰H5常⽤的语义化标签

基本信息 ⽤户的基本信息
  • 猫头鹰的巢
  • 昵称: 胖啄⽊鸟
  • 微信号: kameleonX
  • 地区: 辽宁 ⼤连
展⽰信息 ⽤户的朋友圈缩略图
个性签名

没⼼没肺的活着


朋友圈

更多信息
操作按钮 ⽤户的可执⾏的操作
发消息

⾳视频通话
kameleon@
版权所有 © 2018-2019 猫头鹰的巢
关于⽂档的细节:⽬前只有 Chrome 和 Safari 6 ⽀持
标签。
基本信息 ⽤户的基本信息
details : 标签⽤于描述⽂档或⽂档某个部分的细节summary : 标签包含 details 元素的标题,"details" 元素⽤于描述有关⽂档或⽂档⽚段的详细信息
kameleon@
版权所有 © 2018-2019 猫头鹰的巢
address : 标签定义⽂档作者或拥有者的联系信息。如果
元素位于
元素内部,则它表⽰该⽂章作者或拥有者的联系信息。通常的做法是将 address 元素添加到⽹页的头部或底部small : 标签将旁注 (side comments) 呈现为⼩型⽂本。免责声明、注意事项、法律限制或版权声明的特征通常都是⼩型⽂本。⼩型⽂本有时也⽤于新闻来源、许可要求。对于由 em 元素强调过的或由 strong 元素标记为重要的⽂本,small 元素不会取消对⽂本的强调,也不会降低这些⽂本的重要性。
3. 表格内字体颜⾊Style=”color:red”值表格默认⽆边框,border="1"单元格与单元格之间的距离内容与单元格四周的距离边框的颜⾊表格背景⾊1. form表单采集数据的范围:
属性: ⾏为 数据提交的路径 ⽅式 数据提交的⽅式get 提交时,在地址栏上⽅能看到提交的内容,长度有限制post 提交时,在地址栏上⽅看不到提交内容,相对来说较安全,长度没有限制表单结构type 类型:="text" ⽂本框="password" 密码框="radio" 单选框,单选框 必须要有相同的name值="checkbox" 复选框=”file” ⽂件框="submit" 提交按钮="reset" 重置按钮="button" 普通按钮在=”hidden” 隐藏域----建议:是按钮类型时,写上value值------⼀般⾮按钮类型时,⼀般需要写上older=”内容” 内容变浅⾊显⽰在输⼊框,光标停在输⼊框后内容消失gth=” ” 限制输⼊框最⼤长度(数字位数)6.(点击⽂字选中复选框) 7. multiple=”multiple” 可选多个⽂件8. border:none(去内边框) outline:none(去外边框)label使⽤⽰例

《红楼梦》,中国古代章回体长篇⼩说,⼜名《⽯头记》等,被列为中国古典

《红楼梦》开篇以神话形式介绍作品的由来,说⼥娲补天之⽯剩⼀块未⽤

《红楼梦》诞⽣于18世纪中国封建社会末期,当时清政府实⾏闭关锁国

2. 单选与复选框单选框 name值⼀定要保持⼀致复选框单选或复选框默认被选中,加 checked="checked" 或 checked属性点击⽂字能选中或取消单选或复选按钮:⽂本域 / 多⾏⽂本框下拉选择框selected加在option上 选项默认被选中补充:readonle 只读 disable 禁⽤3. HTML5新增标签标签语义化 H5 Test

我们以微信的⼀个⽤户名⽚为例

演⽰H5常⽤的语义化标签

基本信息 ⽤户的基本信息
  • 猫头鹰的巢
  • 昵称: 胖啄⽊鸟
  • 微信号: kameleonX
  • 地区: 辽宁 ⼤连
展⽰信息 ⽤户的朋友圈缩略图
个性签名

没⼼没肺的活着


朋友圈

更多信息
操作按钮 ⽤户的可执⾏的操作
发消息

⾳视频通话
kameleon@
版权所有 © 2018-2019 猫头鹰的巢
关于⽂档的细节:⽬前只有 Chrome 和 Safari 6 ⽀持
标签。
基本信息 ⽤户的基本信息
details : 标签⽤于描述⽂档或⽂档某个部分的细节summary : 标签包含 details 元素的标题,"details" 元素⽤于描述有关⽂档或⽂档⽚段的详细信息