邢台做网站优化费用,深圳建设信息网站,快懂百科登录入口,蚌埠网站排名目录
html骨架
body主体内基本元素
基本元素
超文本#xff08;超链接跳转#xff09;
锚点
图片标签 列表标签
表格标签 框架标签#xff08;窗口标签#xff09;
音频标签
视频标签
VScode编译器
输入框
字体样式
实例展示#xff1a; 首先简要介绍前端的整…目录
html骨架
body主体内基本元素
基本元素
超文本超链接跳转
锚点
图片标签 列表标签
表格标签 框架标签窗口标签
音频标签
视频标签
VScode编译器
输入框
字体样式
实例展示 首先简要介绍前端的整体体系 html骨架
html标签元素由三部分组成标签标签属性标签内容。
例如
div stylecolor: red idzzz1020前端体系/div
!DOCTYPE html
!-- 英文状态下生成框架 --
!-- 英文状态下Ctrl?标记为注释 --
html langen
head
!-- head/head标签设置页面配置信息 --meta charsetUTF-8!-- 设置页面编码配置信息 --meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- title/title设置页面标题 --
/head
body
!-- body/body设置页面主题 --/body
/html
body主体内基本元素
基本元素
h1zzzz/h1h2zzzzh2 换行、行间空隙、加粗、分级paaaa/p 换行、行间空隙divdddd/div 换行spanqqqq/span 无明显格式作用形成独立空间便于单独操作hr 水平线br 换行可用在内容之间
超文本超链接跳转
a hrefhttps://www.bilibili.com target_blanka标签跳转至b站/a
配套属性href指定超文本资源路径target指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top跳出顶级窗口)
配套属性href指定超文本资源路径
target指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top跳出顶级窗口)
锚点
a nametop指定的位置/a
.
.
.
a href#top回到指定位置/a #后面跟的是所要对应a标签的名字
此时的a标签为为锚点如果要跳到另一个同目录页面的一个指定位置在href后加其他页面路径
a href#top styleposition:fixed;right:10px;top:10px;/a(将锚点固定位置右上角)
图片标签 列表标签 ulli无序列表1/lili无序列表2/lili无序列表3/lili无序列表4/li/ulol typea start3 !-- type为序号类型start表示从第几个开始编写 --li有序列表1/lili有序列表2/lili有序列表3/lili有序列表4/li/ol
表格标签
table/table标签表示建立表格
border1 表格边框 cellpadding10px 单元格的填充度cellspacing10px 控制单元格与单元格之间的距离通常为0
width30px
height40px
tr 表示行
td 单元格
th 字体加粗并且居中
thead/thead 用此封装的部分永远在表格的最上方为表头
tbody/tbody 永远在表格的中间位置
tfoot/tfoot 永远在表格的最下面
表格封装的作用让表格的不同成分封装为独立空间互不影响
rowspan 列合并
colspan行合并 显示效果如下 框架标签窗口标签
iframe srchttps://www.bilibili.com frameborder0 width600px height400px nametest1这是一个窗口框架标签默认打开bilibili/iframe
frameborder0作用去掉窗口边框
href后面也可以加自制网页的网址
nametest1窗口名称
a hrefhttps://www.csdn.net/ targettest1窗口内打开CSDN /a
a hrefhttps://www.hbu.edu.cn/ targettest1窗口内打开河北大学 /a
利用a标签可以让窗口内跳转别的页面
音频标签
audio srcimg/bj.mp3 controlstrue 音频/audiocontrolstrue手动控制音频播放也可换为autoplay进入网页自动播放或loop循环播放
视频标签 video src20220908_185521_7215.mp4 controls width500px height300px/videocontrols 手动播放 autoplay 自动播放 loop 循环播放 width500px height300px可改变视频窗口大小但不会改变原视频外框的形状
VScode编译器
英文状态下生成框架
英文状态下Ctrl/标记为注释
div回车 自动生成div标签
h1 a img iframe 同理
div{vjygbjbghvjbh} 可生成div标签加内容
div*10 可生成10个连续的div标签
divpa 嵌套结构生成
divpaspanh3 div结构下生成同级元素
输入框
input typetext 单行文本框
input typepassword 单行密码框
男input typeradio namesex女input typeradio namesex 单选择标签name相同的只能选择一个
体育input typecheckbox 复选择标签
音乐input typecheckbox
学习input typecheckbox
input typefile 文件选择器
input typecolor 颜色选择器
input typedate 日期选择器
input typedatetime_local 日期时间选择器
input typeweek 周选择器
input typerange min0 max100 value50 滑动选择器范围从0到100初始位置是50
input typenumber min0 max100 value50 step5 步长为5select name id 下拉选择器默认展示第一个option valueA型/optionoption valueB型/optionoption valueAB型/optionoption valueO型/option/A
/select/thtextarea name id cols40 rows10宽度为40一行40个文字到顶后自动换行高度为10共有10行超过10行后出现滚动条input typebutton value按钮 普通按钮
input typesubmit value提交
input typereset value重置 要放在form/form中才有效果
fieldset/fieldset 可将输入框分类
lengend/lengend 可定义标题包装为模块
字体样式
行内样式
div stylecolor:red;background:yellow;test/div
内部样式 headtitle选择器/titlemeta charsetutf8/stylediv{color:blue;background:green; }/style/head
外部样式 headtitle选择器/titlemeta charsetutf8/link relstylesheet hrefcss/index.css 叔侄关系/head
div{color: red;background:pink;
}
优先级行内样式内部样式外部样式
内部样式和外部样式符合刷墙原理有覆盖效果
实例展示
!DOCTYPE html
htmlheadtitle10.14homework/titlemeta charsetutf8//headbodytable border1 cellspacing0trth姓名/ththinput typetext/thth性别/thth 男input typeradio namesex女input typeradio namesex/thth rowspan3img srcimg/666.png alt帝皇铠甲 height90/th/trtrth生日/ththinput typedate/thth血型/ththselect name idoption valueA型/optionoption valueB型/optionoption valueAB型/optionoption valueO型/option/A/select/th/trtrth爱好/thth colspan3运动input typecheckbox音乐input typecheckbox学习input typecheckbox其他input typetext/th/trtrth住址/thth colspan3input typetext/ththinput typesubmit value上传头像/th/trtrth学历/ththinput typetext/thth手机号/thth colspan2input typetext/th/trtrth个人简介/thth colspan4textarea name id cols70 rows2/textarea/th/trtrth个性签名/thth colspan2input typetext name id/ththinput typesubmit value提交/ththinput typereset value重置/th/tr/table/body
/html
