做网站 最好的开源cms,云搜索神器,包头索易网站建设,外链屏蔽逐步解除文章目录 什么是HTML页面vscode 开放工具搭建第一个HTML页面编写vscode 如何快速生成代码框架html标签——注释、标题、段落、换行标签格式化标签img 标签(src 属性01)img 属性02(alt、title、width/height、border)a标签href属性a标签target属性表格标签01 基本属性表格标签02… 文章目录 什么是HTML页面vscode 开放工具搭建第一个HTML页面编写vscode 如何快速生成代码框架html标签——注释、标题、段落、换行标签格式化标签img 标签(src 属性01)img 属性02(alt、title、width/height、border)a标签href属性a标签target属性表格标签01 基本属性表格标签02 表格头部表格主体单元格合并列表标签 无序列表列表标签 有序列表自定义列表表单域input 文本框input 密码框input 单选框input复选框、普通按钮input 提交清空上传文件lable标签、select标签、textarea标签无语义标签 div、span特殊字符☁️结语 什么是HTML页面
HTML叫做超文本标记语言 把它拆分一下拆成 超文本意味着页面支持文本、声音、图片、视频、表格、链接 标记在页面上展示数据就需要标签啦这些标签就组成了一个个的标记
HTML页面是运行在浏览器上面的
vscode 开放工具搭建
点击去下载vscode去下插件 第一个HTML页面编写
双标签标签有开始有结束
单标签只有一个标签
htmlhtml文件根标签 head编写页面相关的属性 title页面的标题 body页面的内容展示信息
相当于是DOM树所有的标签都是html的子标签head和body是兄弟标签 head和title是父子标签。每一个标签相当于是一个对象程序员可以通过这些代码拿到这些对象拿到之后就可以对这些对象进行增删查改。
关于DOM树可以查看这篇文章什么是DOM?你了解DOM树吗
vscode 如何快速生成代码框架
快速生成代码框架 按 ! 回车
生成结果
html标签——注释、标题、段落、换行标签
注释标签能被用户看到
!--这是注释--标题标签h1-h6 有六个从h1-h6数字越大字体越小
h1标题1/h1
h2标题1/h2段落标签
p段落标签/p如果你直接按回车它会解析成空格展示在页面上。
换行标签换行标签换行后行间隙比段落标签间隙小
br/br/是规范写法不建议写成br 格式化标签
在工作中一般都是以CSS来实现的但是HTML也可以实现同样的效果
加粗标签
strong加粗标签/strong
或者
b加粗标签/b倾斜
em倾斜标签/em
或者
i倾斜标签/i删除线
del删除线/del
或者
s删除线/s下划线
ins下划线/ins
或者
u下划线/u每一个效果的第一种写法除了它本身的效果还起到强调的效果强调可以让文本被爬虫获取到。
img 标签(src 属性01)
img 标签必须搭配着src来使用 src是用来指定图片路径的(绝对路径/相对路径)
img src图片路径绝对路径直接写图片路径 或者 网络上的图片资源 相对路径./xxx.png 或者 ./img/xxx.png 或者 …/xxx.png
img 属性02(alt、title、width/height、border)
alt属性替换文本当文本不能正确显示的时候会显示一个替换的文字。alt后面的文案只有当图片加载出错的时候才会展示如果图片加载成功这个文案就不会显示
img src图片路径 alt替换文字title属性当你的鼠标移动到图片上时显示文字
img src图片路径 title描述示例
width/height控制图片宽度高度宽度和高度一般改一个就行另外一个会等比例缩放。
img src图片路径 height高度 width宽度例如
img src图片路径 height100pxpx像素这一张图片上的亮点像素越大图片越大 border边框参数是宽度的像素但一般用 CSS 来设定
img src图片路径 border10px效果展示这张图片附近的黑框框就是边框 img 后面 可以写多个属性通过空格或者换行来分隔属性的先后顺序不影响页面展示。 a标签href属性
超链接标签a 它包括两个属性
href必须具备表示点击后会跳转到那个界面target打开方式。默认是_self点击后改变当前页面如果是_blank则用新的标签页打开。
href属性使用 通过文字跳转到对应的界面 a href跳转界面的路径页面上展示的内容
/a效果图点击后跳转到对应的界面 跳转到当前页面(刷新页面) a href#跳转到当前页面(相当于刷新页面)/a效果图点击后仍在当前界面 通过图片跳转到对应的界面 a href跳转界面的路径img src图片路径
/a效果图点击后就会跳转到对应的界面
a标签target属性
target打开方式。默认是_self点击后改变当前页面如果是_blank则用新的标签页打开(另起一个页面)。 a href要跳转到的网址 target这里可以写 _self 或者 _blank跳转/a表格标签01 基本属性
表格标签基本使用 01 --table
table标签表示整个表格 tr 表示表格的一行 td表示一个单元格 th表示表头单元格会居中加粗
table 包含trtr包含td或者th 表格标签有一些属性可以用于设置大小边框等但是一般使用CSS方式来设置。这些属性都要放到table标签中 align 是表格相对于周围元素的对齐方式。align“center”不是内部元素的对齐方式border表示边框1表示有边框数字越大边框越粗表示没边框cellpadding内容距离边框的距离默认1像素cellspacing单元格之间的距离默认为2像素width / height设置尺寸 注意这几个属性vscode都提示不出来 示例
!--表格--table alignleft border1 cellpadding50cellspacing0 width500 height200!--第一行--trtd姓名/tdtd性别/tdtd年龄/td/tr!--第二行--trtd张三/tdtd男/tdtd32/td/tr!--第三行--trtd李四/tdtd男/tdtd24/td/tr/table效果图
表格标签02 表格头部表格主体单元格合并
thead表格的头部区域注意和th区分范围是比th要大的 tbody表格得到主体区域
thead 里面的内容居中加粗展示。 我们通常把表头相关信息放在thead里而表格内容相关信息放在tbody里
示例 table border1 width500height200 cellspacing0cellpadding50alignleft!--第一行--theadtrth姓名/thth性别/thth年龄/th/tr/theadtbody!--第二行--trtd姓名/tdtd性别/tdtd年龄/td/tr!--第三行--trtd张三/tdtd男/tdtd32/td/tr!--第四行--trtd李四/tdtd男/tdtd24/td/tr/tbody/table效果 表格合并
rowspan合并行
td rowspan 要合并的单元格个数 内容 /td示例合并两个男表格 table border1 width500height200 cellspacing0cellpadding50alignleft!--第一行--theadtrth姓名/thth性别/thth年龄/th/tr/theadtbody!--第二行--trtd张三/tdtd rowspan2男/tdtd32/td/tr!--第三行--trtd李四/td!--因为合并了所以要删掉 td男/td --td24/td/tr!--第三行--trtd小红/tdtd女/tdtd18/td/tr/tbody/table效果图
colspan合并列
td colspan 要合并的单元格个数 内容 /td示例合并小红和女这两格 !--第三行--trtd colspan2小红/女/td!-- 因为合并了所以要删掉 td女/td --td18/td/tr效果图
列表标签 无序列表
无序列表[重要]ul和li标签 ulli 内容 /li/ul可以使用快捷键快速生成li标签
示例 h1这是无序列表/h1!-- ul type 引号内可以写:disc 实心圆 浏览器默认的展示方式square 实心方块circle 空心圆--ul typediscli这是内容1/lili这是内容2/lili这是内容3/li/ulul typesquareli这是内容1/lili这是内容2/lili这是内容3/li/ulul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ul效果
列表标签 有序列表自定义列表
有序列表[用的不多]ol li olli 内容 /li/ol示例
h1这是有序列表/h1olli /li/ol!-- ol type 引号内可以写:a 表示小写英文字母编号A 表示大写英文字母编号i 表示小写罗马数字编号I 表示大写罗马数字编号1 表示数字编号(默认)--ol typeali这是内容1/lili这是内容2/lili这是内容3/li/olol typeAli这是内容1/lili这是内容2/lili这是内容3/li/olol typeili这是内容1/lili这是内容2/lili这是内容3/li/olol typeIli这是内容1/lili这是内容2/lili这是内容3/li/olol type1li这是内容1/lili这是内容2/lili这是内容3/li/ol效果图 start 属性可以控制序号从几开始 ol start序号li内容/li/ol示例 ol start5li这是内容/lili这是内容/lili这是内容/li/ol效果图:
自定义列表 dldt 自定义列表显示内容dd自定义列表内容/dd/dt/dl示例 h1这是自定义列表/h1dldt 自定义列表显示内容dd自定义列表内容1/dddd自定义列表内容2/dddd自定义列表内容3/dd/dt/dl效果
表单域
表单标签 用表单标签来完成服务器的一次交互
表单标签分为两个部分
表单域包含表单元素的区域重点是form标签表单控件输入框提交按钮等重点是input标签
表单域
form action服务器地址/forminput 文本框
表单控件输入框提交按钮等重点是input标签
input作用让用户用来输入的。
input中有一个type属性我们对type取不同的值可以控制input的类型 form action服务器地址姓名 input type类型/form文本框(type取text) 示例: form action服务器地址姓名 input typetext/form效果
可以看到他是单行输入。
input 密码框
密码框(type取password) form action服务器地址密码 input typepassword/form效果图
input 单选框 input typeradio 男input typeradio 女效果 但是这不是单选框男和女都能选
解决方案 加name属性如果name后面的值相同那就只能选一个了~ 示例 input typeradio namegender 男input typeradio namegender 女效果
如果我想要它默认选择女该怎么实现呢 我们可以借助checked属性 示例 input typeradio namegender 男input typeradio namegender checkedchecked 女效果图 如果你写成这样 input typeradio namegender checkedchecked 男input typeradio namegender checkedchecked 女那么网页一打开他是默认选了男还是选了女呢 这就要看你的浏览器了~~ input复选框、普通按钮
input复选框
input typecheckbox示例 input typecheckbox吃饭input typecheckbox睡觉input typecheckbox打游戏效果
普通按钮 input typebutton效果
在按钮里写字 input typebutton value这是一个平平无奇的按钮效果
按钮通常需要搭配JS来使用。
input 提交清空上传文件
提交按钮通常用来提交用户在前端填写的数据把数据提交到服务器上。需要搭配form使用 form actioninput typesubmit/form效果图
示例 form action姓名input typetext namenameinput typesubmit/form效果
如果我在表中填写错误想要清空该咋办呢 可以使用reset
示例 form action姓名input typetext namenameinput typesubmitinput typereset/form效果
提交文件 form actioninput typefile/form效果点击后开始选择文件
lable标签、select标签、textarea标签
lable标签 通过label标签可以将输入框、复选框、单选按钮等表单控件与它们的标签关联起来从而提供更好的表单使用体验。当用户单击label标签时会触发关联的表单控件方便用户选择或输入数据。
示例 label formale男/labelinput typeradio namesex idmalelabel forfemale女/labelinput typeradio namesex idfemalename的作用是控制让两个选项只能有一个选中 for的作用是将它包裹的内容与那一个元素进行关联通过id来关联起来 效果点击文字“男”或者“女”即可选择。
select标签
select/select效果 select标签通常搭配option来使用 示例 select name idoption value --请选择年份-- /optionoption value --2005-- /optionoption value --2006-- /optionoption value --2007-- /option/select效果 一打开网页选项框里默认是第一个选项如果要修改可以使用selected 示例 select name idoption value --请选择年份-- /optionoption value selectedselected --2005-- /optionoption value --2006-- /optionoption value --2007-- /option/select
效果现在默认是选择2005了~
textarea标签 textarea name id/textarea效果 我们可以通过cols和rows来控制它的大小 示例 textarea name id cols20 rows20/textarea效果 在实际的开发中可以通过CSS来达到这样的效果
无语义标签 div、span
div标签division的缩写含义是分割 span标签含义是跨度
就是两个盒子用于网页布局
div是单独占一行的是一个大盒子span不单独占一行是一个小盒子
div标签 示例 div!-- 独占一行 --div吃饭/divdiv睡觉/divdiv玩/div!-- 不独占一行 --divspan吃饭/spanspan睡觉/spanspan玩/span/div/div效果
特殊字符
有些特殊的字符在html文件中是不能直接表示的例如 空格nbsp 小于号lt 大于号gt 按位与amp html标签就是用 表示的因此内容里存在 就会发生混淆。 示例 p这里有四个空格nbsp;nbsp;nbsp;nbsp;nbsp;开始写/pplt;gt;amp;/p效果 ☁️结语
请给自己些耐心不要急于求成。 山外青山楼外楼莫把百尺当尽头。 保持空杯心态加油努力吧 都看到这里啦真棒(*^▽^*)
可以给作者一个免费的赞赞吗这将会鼓励我继续创作谢谢大家
如有纰漏或错误欢迎指正
