成都企业网站设计服务商,wordpress标签库 导入,个人如何建网站,杨思网站建设公司目录 HTML认知web标准vscode的简介和使用注释标题和段落换行和水平线标签文本格式化标签图片图片-基本使用图片-属性 绝对路径相对路径音频标签视频标签超链接 HTML基础列表列表-无序和有序列表-自定义 表格表格-使用表格-表格标题和表头单元格表格-结构标签#xff08;了解了解表格-合并单元格 表单表单-input基本使用表单-input-占位符表单-单选功能和默认选中表单-上传多个文件表单-按钮-input表单-按钮button表单-下拉菜单表单-文本域表单-lable标签 语义化标签1.1没有语义的布局标签-div和span2.1 有语义的布局标签了解 字符实体综合案例综合案例-学生信息表综合案例-表单 HTML认知
web标准
小结
结构HTML → 页面元素表现CSS → 页面样式行为JavaScript → 页面交互的动态效果
vscode的简介和使用
英文状态!→回车或者tab键
快速生成骨架 注释
ctrl /
标题和段落
快捷方式快速修改多个同个字样
1️⃣鼠标左键长按选中想要修改的1同个字样就会自动标识出来 2️⃣ctrl d 多选多按一次d多选一个字样。可以看到三个光标同时在闪 ⭐️标题标签
h1/h1
⭐️段落标签
p/p
换行和水平线标签
⭐️换行标签
br
⭐️水平线标签
hr
文本格式化标签
⭐️
标签说明b加粗u下划线i倾斜s删除线
⭐️
语义突出重要性的强调语境
标签说明strong加粗ins下划线em倾斜del删除线
图片
图片-基本使用
⭐️img src alt
图片-属性
⭐️img src alt title
title悬停时显示文本
width
height
⭕️如果只设置weight和height其中一个另一个没设置的会自动等比例缩放此时图片不会变形
⭕️如果同时设置weight和height设置不当会变形
绝对路径
绝对路径指目录下的绝对位置可直接到达目标位置通常从盘符开始的路径。
盘符开头D:\day01\images\1.jpg
完整的网络地址https://www.itcat.cn/2018czgw/images/logo.gif了解
相对路径
相对路径常用从当前文件开始出发找目标文件的过程
同级目录当前文件和目标文件在同一目录中
代码步骤直接写目标文件名字即可
img src目标图片.gif或img src./目标图片.gif
下级目录目标文件在下级目录中
代码步骤文件夹名字/直接写目标文件名字
img srcimages/目标图片.gif
上级目录目标文件在上级目录中
代码步骤…/直接写目标文件名字
…/返回上一级
img src../目标图片.gif
音频标签
⭐️audio src controls autoplay loop/audio
属性名功能src音频的路径controls显示播放的控件autoplay自动播放部分浏览器不支持loop循环播放
音频标签目前支持三种格式MP3、Wav、Ogg
视频标签
⭐️video src controls autoplay muted loop/video
属性名功能src视频的路径controls显示播放的控件autoplay自动播放谷歌浏览器中序配合muted实现静音播放loop循环播放
视频标签标签目前支持三种格式MP4、WebM、Ogg
超链接
⭐️a href./目标网页.html超链接/a
不知道跳转地址的时候href的值书写#空链接 链接标签的target属性
属性名target
属性值目标网页的打开形式
取值效果_self默认值在当前窗口中跳转_blank在新窗口中跳转 HTML基础
列表
列表-无序和有序
无序列表
标签名说明ul表示无序列表的整体用于包裹li标签li表示陆无序列表的每一项用于包含每一行的内容
⭕️ul标签中只允许包含li标签
⭕️li标签可以包含任意内容
有序列表
标签名说明ol表示有序列表的整体用于包裹li标签li表示陆无序列表的每一项用于包含每一行的内容
⭕️ol标签中只允许包含li标签
⭕️li标签可以包含任意内容
列表-自定义
标签名说明dl表示自定义列表的整体用于包裹dt/dd标签dt表示自定义列表的主题dd表示自定义列表的针对主题的每一项内容
dd前会默认显示缩进效果
⭕️dl标签中只允许包含dt/dd标签
⭕️li标签可以包含任意内容
表格
表格-使用
标签名说明table表格整体可用于包裹多个trtr表格每行可用于包裹tdtd表格单元格可用于包裹内容
标签的嵌套关系table tr td
表格的相关属性
属性名属性值效果border数字边框宽度width数字表格宽度height数字表格高度
实际开发时针对样式效果推荐用CSS设置
表格-表格标题和表头单元格
标签名名称说明caption表格大标题表示表格整体大标题默认在表格整体顶部居中位置显示th表头单元格表示一列小标题通常用于表格第一行默认内部文字加粗并居中显示
表格-结构标签了解
场景让表格的内容结构分组突出表格的不同部分头部、主体、底部使语义更加清晰。
标签名名称thead表格头部tbody表格主体tfoot表格底部
表格-合并单元格
属性名属性值说明rowspan合并单元格的个数跨行合并将多行的单元格垂直合并colspan合并单元格的个数跨列合并将多列的单元格水平合并 trtd小哥哥/tdtd rowspan2100/tdtd真帅气/td/trtrtd小姐姐/td!-- td99/td --td真漂亮/td/trtrtd总结/tdtd colspan2郎才女貌/td!-- td郎才女貌/td --
/tr⭕️只有同一个结构标签中的单元格才能合并不能跨结构标签合并不能跨thead、tbody、tfoot
表单
表单-input基本使用
标签名type属性值说明inputtext文本框用于输入单行文本inputpassword密码框用于输入密码inputradio单选框用于多选一inputcheckbox多选框用于多选多inputfile文件选择用于之后上传文件inputsubmit提交按钮用于提交inputreset重置按钮用于重置inputbutton普通按钮默认无功能之后配合js添加功能
文本框input typetextbr密码框input typepasswordbr单选框input typeradiobr多选框input typecheckboxbr上传文件input typefilebr提交按钮input typesubmitbr重置按钮input typeresetbr普通按钮input typebutton表单-input-占位符
属性名说明placeholder占位符。提示用户输入的文本 文本框input typetext placeholder请输入用户名表单-单选功能和默认选中
场景在网页中显示多选一的单选表单控件
属性名说明name分组。有相同name属性值的单选框为一组一组中同时只能有一个被选中checked默认选中
⭕️name属性对于单选框有分组功能
性别input typeradio namesex男input typeradio namesex checked女表单-上传多个文件
场景在网页显示文件选择的表单控件
属性名说明multiple多文件选择
input typefile multiple表单-按钮-input
场景在网页中显示不同功能的按钮表单控件
标签名type属性值说明inputsubmit提交按钮。点击之后提交数据给后端服务器inputreset重置按钮。点击之后恢复表单默认值inputbutton普通按钮。默认无功能之后配合js添加功能
⭕️如果需要实现以上按钮功能需要配合form标签使用
⭕️form使用方法用form标签把表单标签一起包裹起来即可
form action用户名input typetextbr密码input typepasswordbrinput typesubmitinput typeresetinput typebutton value普通按钮/form表单-按钮button
场景在网页中显示用户点击的按钮
标签名type属性值说明buttonsubmit提交按钮。点击之后提交数据给后端服务器buttonreset重置按钮。点击之后恢复表单默认值buttonbutton普通按钮。默认无功能之后配合js添加功能
⭕️谷歌浏览器中button默认是提交按钮
⭕️button标签是双标签更便于包裹其他内容文字、图片等
button按钮/button
button typesubmit提交按钮/button
button typereset重置按钮/button
button typebutton普通按钮没有任何功能/button表单-下拉菜单
场景在网页中提供多个选择项的下拉菜单表单控件
⭐️标签组成
select标签下拉菜单的整体
option标签下拉菜单的每一项
⭐️常见属性
selected下拉菜单的默认选中
selectoption北京/optionoption广州/optionoption上海/optionoption selected深圳/option/select表单-文本域
场景在网页中提供可输入多行文本的表单控件
⭐️标签名textarea
⭐️常见属性
cols规定了文本域内可见宽度
rows规定了文本域内可见行数
⭕️右下角可以拖拽改变大小
⭕️实际开发时针对样式效果推荐使用CSS设置
textarea cols60 rows30/textarea表单-lable标签
场景常用于绑定内容与表单标签的关系
⭐️标签名lable
使用方法①复杂
1.使用lable标签把内容如文本包裹起来
2.在表单标签上添加id属性
3.在lable标签的for属性中设置对应的id属性值 姓名input typeradio namesex idman label forman男/labelinput typeradio namesex idwoman label forwoman女/label使用方法②简单
1.直接使用lable标签把内容如文本和表单标签一起包裹起来
2.需要把lable标签的for属性删除即可
姓名labelinput typeradio namesex idman 男/labellabelinput typeradio namesex idwoman 女/label点字照样选中前面的表单
语义化标签
学习路径
1.没有语义的布局标签
2.有语义的布局标签了解
1.1没有语义的布局标签-div和span
场景实际开发网页时会大量频繁的使用到div和span这两个没有语义的标签
div标签一行只能显示一个独占一行
span标签一行可以显示多个
普通文字div这是div标签/divdiv这是div标签/divspan这是span标签/spanspan这是span标签/span2.1 有语义的布局标签了解
场景在HTML5新版本中推出了一些有语义的布局标签供开发者使用
标签
标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章
字符实体
常见字符实体
场景在网页中展示特殊符号效果时需要使用字符实体代替
结构英文
常见字符实体
显示结果描述实体名称空格nbsp小于号lt大于号gt和号amp引号quot’撇号apos(IE不支持)¢分centcent£镑poundpound¥元yenyen€欧元euroeuro§小节sect©版权copyrightcopy
⭕️只记一个空格就好了
综合案例
综合案例-学生信息表
table border1 width500 height300captionh3优秀学生信息表格/h3/captiontrth年纪/thth姓名/thth学号/thth班级/th/trtrtd rowspan2高三/tdtd张三/tdtd110/tdtd三年二班/td/trtrtd赵四/tdtd120/tdtd三年三班/td/trtrtd评语/tdtd colspan3你们都很优秀/td/tr/table综合案例-表单
h1青春不常在抓紧谈恋爱/h1hr昵称input typetext placeholder请输入昵称brbr性别input typeradio namesex checked男input typeradio namesex女brbr所在城市selectoption北京/optionoption selected上海/optionoption广州/optionoption深圳/option/selectbrbr婚姻状况input typeradio namemarry未婚input typeradio namemarry已婚input typeradio namemarry保密brbr喜欢的类型input typecheckbox checked可爱input typecheckbox checked性感input typecheckbox御姐input typecheckbox萝莉input typecheckbox小鲜肉input typecheckbox大叔brbr个人介绍brbrtextarea cols60 rows8/textareabrh3我承诺/h3olli年满18岁、单身/lili抱着严肃的态度/lili真诚寻找另一半/li/olinput typecheckbox我同意所有条款brbrbutton typesubmit免费注册/buttonbutton typereset重置/button
