wordpress 超酷主题,浙江网站建设优化,wordpress 插件 证书,影院资讯 wordpress目录 前言#xff1a;
1.HTML结构
1.1认识HTML标签
1.2HTML文件基本结构
1.3标签层次结构
1.4快速生成代码框架
2.HTML常见标签
2.1注释标签
2.2标题标签#xff1a;h1-h6
2.3段落标签#xff1a;p
2.4换行标签#xff1a; br
2.5格式化标签
2.6图片标签#…目录 前言
1.HTML结构
1.1认识HTML标签
1.2HTML文件基本结构
1.3标签层次结构
1.4快速生成代码框架
2.HTML常见标签
2.1注释标签
2.2标题标签h1-h6
2.3段落标签p
2.4换行标签 br
2.5格式化标签
2.6图片标签img
2.7超链接标签a
2.7.1外部链接
2.7.2内部链接
2.7.3空链接
2.7.4下载链接
2.7.5网页元素链接
2.7.6锚点链接
2.8表格标签
2.9合并单元格
2.10列表标签
2.10.1无序标签
2.10.2有序列表
2.10.3自定义列表
2.11表单标签
2.11.1 from标签
2.11.2 input标签
2.11.3 label标签
2.11.4 select标签
2.11.5 textarea标
2.12无语义标签div span
2.13HTML特殊字符
3.综合案例展示
3.1展示简历信息
3.2填写简历
结束语 前言
在前几节中小编主要是与大家介绍了有关于网络方面的知识以及如何进行编程那么想要做出来一个网站那么就离不开前端的知识如HTML、CSS已经JavaScript。所以从这节开始小编将与大家分享一些前端的一些基础知识这节我们就先从HTML开始吧
1.HTML结构
1.1认识HTML标签
在HTML中代码是由“标签”来构成的。如下所示 bodyhello/body 标签名body是放到里面的。大部分标签成对出现body为开始标签/body为结束标签。少数标签只有开始标签称为“单标签”。开始标签和结束标签之间写的是标签的内容。开始标签中可能带有“属性”id属性相当于给这个标签设置了一个唯一的标识符身份证号。
如下所示 body id myIdhello/body 1.2HTML文件基本结构
如下代码所示
htmlheadtitle第一个页面/title/headbodyHello World!/body
/html
运行结果展示
html标签是整个html文件根标签最顶层标签。head标签中写页面的属性。body标签中写的是页面上显示的内容。title标签中写的是页面的标题。
1.3标签层次结构
一般是分为父子关系和兄弟关系。 对于上述的代码来说
head和body是HTML的子标签HTML就是head和body的父标签。title是head的子标签head是title的父标签。head和body之间是兄弟关系。
标签之间构成了一个DOM树如下图所示
DOM是Document Object Mode文本对象模型的缩写。
1.4快速生成代码框架
那么这里我们编写代码使用的是VScode编辑器。在其中可以使我们快速生成代码。如下实例所示
按住shift然后点击回车就可以自动生成了。 2.HTML常见标签
2.1注释标签
注释是不会显示在界面上的目的是为了提高代码的可读性。 在VScode中我们只要按住Ctrl / 即可生成。
注释的原则
要和代码逻辑一致。尽量使用中文。不要传递负能量。
2.2标题标签h1-h6
标题标签一共有六个从h1-h6数字越大字体就越小。
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 我是注释 --h1hello/h1h2hello/h2h3hello/h3h4hello/h4h5hello/h5h6hello/h6
/body
/html
结果展示
2.3段落标签p
如果我们在文本中显示一段比较长的文字在HTML中会发现没有分段展示。如下所示
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中我们无需对这个津津计较但在移动设备上必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
实是等于一个屏幕物理像素的。
/body
/html 结果展示 即使是在代码中进行手动换行在执行出来的结果还是一样的。这里我们是想要让段落之间进行分隔清楚。 所以这里我们只要使用p标签就可以进段落操作了。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。p/p但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中我们无需对这个津津计较但在移动设备上必须弄明白这点。p/p在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
实是等于一个屏幕物理像素的。
/body
/html 结果展示
2.4换行标签 br
上述是段落标签那么如果我们只是向要换行呢此时我们就可以使用br标签来进行换行了。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 换行标签 --在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。br但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中我们无需对这个津津计较但在移动设备上必须弄明白这点。br在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确
实是等于一个屏幕物理像素的。
/body
/html 结果展示 可能有人觉得好像没有太大的区别啊
注意了
在段落标签中是行与行之间还是有一定的缝隙的但是换行是没有缝隙的。 2.5格式化标签
格式标签主要的功能有以下几点
加粗strong标签和b标签。倾斜em标签和i标签。删除线del标签和s标签。下换线ins标签和u标签。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 格式化标签 --strongstrong 加粗/strongbb 加粗/bem倾斜/emi倾斜/idel删除线/dels删除线/sins下划线/insu下划线/u
/body
/html
结果展示
2.6图片标签img
img标签必须带有scr属性表示图片路径。该图片路径需要我们放置到与html的同级目录中。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 图片标签 --img srcdog.jpg alt萨摩耶 title这是一只萨摩耶 width500px height400px border 5px
/body
/html 结果展示 在img标签中还要其他属性
alt替换文本。当文本不能正确显示的时候会显示一个替换的文字。title提示文本鼠标放到图片上时就会有一个提示语。width/height控制宽度高度高度和宽度一般改一个就行另外一个会等比例缩放否则就会图片失衡。border边框参数是宽度的像素但是一般使用CSS来设定。
注意
属性可以有多个不能写到标签之前。属性之间用空格分隔可以是多个空格也可以是换行。属性之间不分先后顺序。属性使用“键值对”的格式来表示。关于目录的表示可以使用绝对路径也可以使用相对路径的表示方式。
2.7超链接标签a
2.7.1外部链接
外部链接是由href引用其他网站的地址。
href表示点击后会跳转到哪个页面。target打开方式默认是_self如果是_blank则用新的标签打开。 a href http://www.baidu.com 百度 /a 代码展示 结果展示
鼠标点击之后就会跳转到百度的界面并且没有打开新的标签。 2.7.2内部链接
内部链接是指网站内部页面之间的链接写相对路径即可。
代码展示
1.html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya href2.html点我跳转到2.html/a
/body
/html
2.html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya href1.html点我跳转到1.html/a
/body
/html
结果展示 2.7.3空链接
空链接是指使用#在href中占位。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya href#空链接/a
/body
/html
结果展示 你会发现点击没有出现任何的效果这就是空链接。
2.7.4下载链接
href对应的路径是一个文件可以使用zip文件。
我们先来在改目录下创建一个test.zip文件。 代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hreftest.zip下载文件/a
/body
/html 结果展示
2.7.5网页元素链接
可以给图片等任何元素添加链接(把元素放置到a 标签中)。
代码展示 结果展示
点击图片之后就会跳转
2.7.6锚点链接
可以快速定位到页面中的某个位置。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya href#dogdog/aimg srcdog.jpg
/body
/html
结果展示
这里的效果不明显大概就是你点击文字之后就会定位了图片所在的位置。后面的案例里大家会体会到的。 2.8表格标签
table标签表示整个表格。tr表示表格的一行。td表示一个单元格。th表示表头单元格会居中加粗。thead表格的头部区域注意和th区分范围是比th要大的tbody表格得到主体区域。
table包含trtr包含td或者是th。
在表格标签汇总有一些属性可以用于设置大小边框等但是一般使用CSS的方式俩设置这些属性都要放置在table标签中。
align是表格相对于周围元素的对齐方式aligncenter不是内部元素的对齐方式。border表示边框1表示有边框数字越大边框越粗表示没边框。cellpadding内容距离边框的距离默认1像素。cellspacing单元格之间的距离默认为2像素。width/height设置尺寸。
注意以上这些属性在VScode中都没有提示。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 表格标签 --!-- 创建一个三行三列的表格 --table border1 width400px height200px!-- 表头 --thead!-- 表头内容 --th姓名/thth年龄/thth性别/th/thead!-- 表单 --tbody!-- 第一行信息 --trtd张三/tdtd18/tdtd男/td/tr!-- 第二行信息 --trtd王五/tdtd20/tdtd男/td/tr!-- 第三行信息 --trtd李四/tdtd18/tdtd女/td/tr/tbody/table
/body
/html
结果展示
2.9合并单元格
如果现在我想合并单元格该怎么合并呢有以下两种方式可以进行合并。
跨行合并rowspann。跨列合并colspann。
合并步骤入下所示
先确定到底是合并行rowspan还是列colspan。找对单元格如果是合并那么先去找最上面的行信息如果是列合并那么先去找最左边的列。删除后面合并的行或者是列。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 表格标签 --!-- 创建一个三行三列的表格 --table border1 width400px height200px!-- 表头 --thead!-- 表头内容 --th姓名/thth年龄/thth性别/th/thead!-- 表单 --tbody!-- 第一行信息 --trtd张三/tdtd18/tdtd rowspan2男/td/tr!-- 第二行信息 --trtd王五/tdtd20/td/tr!-- 第三行信息 --trtd colspan2李四 | 18/tdtd女/td/tr/tbody/table
/body
/html
结果展示
2.10列表标签
2.10.1无序标签
他是通过ul/ul和li/li来组成其中ul表示unorderedlistli 表示list。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3无序列表/h3ulli唐僧/lili孙悟空/lili猪八戒/lili沙师弟/li/ul
/body
/html
结果展示 2.10.2有序列表
它是由ol/ol和li/li来组成其中ol就和上面ul的意思相反他是orderedlist的缩写。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3MYSQL中事务具备以下四大特性/h3olli原子性/lili一致性/lili持久性/lili隔离性/li/ol
/body
/html
结果展示
2.10.3自定义列表
它是由dl/dl和dt/dt组成的。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3自定义列表/h3dldt标题/dtdt联表查询/dtdt索引/dtdt事务/dt/dl
/body
/html
结果展示
2.11表单标签
表单就是让用户输入信息的重要途径。
分成两个部分
表单域包含表单元素的区域重点是form标签。表单控件输入框提交按钮等重点是input标签。
接下来我们一一给大家讲解一下。
2.11.1 from标签
from标签是描述了要把数据按照什么方式提交到哪个页面中。下面是一个综合展示如果不清楚同学可以先看下面的内容。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actionhttps://www.baidu.com methodget姓名input typetext idusername namename br密码input typepasswordbr性别input typeradio namesex value男男nbsp;nbsp;nbsp;input typeradio namesex value女女nbsp;nbsp;nbsp;br爱好input typecheckbox听音乐nbsp;nbsp;input typecheckbox看书nbsp;nbsp;input typecheckbox跳舞nbsp;nbsp;input typecheckbox阅读br头像input typefilebr大学selectoption北京大学/optionoption selectedselected清华大学/optionoption陕西师范大学/option/selectbr备注textarea cols30 rows10/textareabrinput typebutton value普通按钮nbsp;nbsp;input typesubmit value提交nbsp;nbsp;input typereset value清空/form
/body
/html
结果展示 2.11.2 input标签
各种输入控件单行文本框按钮单选框复选框。
type必须有取值种类很多有buttoncheckboxtextfileimagepassword radio等。name给input起了个名字尤其是对于单选按钮具有相同的name才能多选一。valueinput中的默认值。checked默认被选中。用于单选按钮和多选按钮。maxlength设定最大长度。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 文本框 --h3文本框/h3input typetext!-- 密码框 --h3密码框/h3input typepassword!-- 单选框 --h3单选框/h3!-- 注意单选框之间必须具备相同的name属性才能实现 多选一 的效果 --input typeradio namesex 男input typeradio namesex 女!-- 复选框 --h3复选框/h3爱好input typecheckbox跳舞nbsp;nbsp;nbsp;input typecheckbox画画nbsp;nbsp;nbsp;input typecheckbox运动nbsp;nbsp;nbsp;input typecheckbox唱歌nbsp;nbsp;nbsp;!-- 普通按钮 --h3普通按钮/h3!-- 此时点击是没有效果的这个要配合后期学习的JS才会有效果这个后面会给大家讲解 --input typebutton value我是一个普通按钮!-- 提交按钮 --!-- 注意提交按钮必须放置在form标签中他是点击之后要尝试交给服务器的 --h3提交按钮/h3form actionhttp://www.baidu.cominput typetext nameusernameinput typesubmit value提交/form!-- 清空按钮 --!-- 注意清空按钮必须放置在form标签中点击后会将form内所有用户输入的内容重置--h3提交按钮/h3form actionhttp://www.baidu.cominput typetext nameusernameinput typesubmit value提交input typereset value清空/form/body
/html
结果展示
2.11.3 label标签
label标签是搭配input使用点击label也能选中对应的单选/复选框能够提升用户体验。
for属性指定当前label和哪个相同id的input标签对应。此时的点击才是有用的
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- label标签 --label formale男/labelinput typeradio namesex idmale
/body
/html
结果展示 2.11.4 select标签
下拉菜单option中定义selectedselected表示默认选中。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- selected下拉菜单 --selectoption北京/optionoption selectedselected上海/optionoption天津/optionoption上海/optionoption杭州/option/select
/body
/html
结果展示 2.11.5 textarea标
textarea就是一个文本域就是默认内容。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- textarea标签 --textarea cols30 rows10/textarea
/body
/html
结果展示
2.12无语义标签div span
div标签他是divsion的缩写含义是分隔的意思。
span标签含义是跨度的意思。
它两就像是两个盒子用于网页的布局。
div是独占一行的是一个大盒子。span不独占一行是一个小盒子。
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 无语义标签 divspan --divspanhello1/spanspanhello2/spanspanhello3/span/divdivspanworld1/spanspanworld2/spanspanworld3/span/div
/body
/html
结果展示 2.13HTML特殊字符
空格nbsp;小于号lt;大于号gt;按位与amp;
还有许多这里小编就不给大家展示了如果还有不会的可以直接点击这个链接☞HTML 教程 | 菜鸟教程进行学习哦
3.综合案例展示
下面小编就带领着大家一起来运用上述的知识来进行简单的编写。
3.1展示简历信息
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我的简历 HTML版本/title
/head
bodydivdivh1李四/h1/divdivh2基本信息/h2img srcdog.jpg width200px height180pxp/p求职意向Java工程师p/p联系电话111-2222-3333p/p邮箱xxxxxxx163.comp/pa hrefhttps://gitee.com/YAUGAOLELE target_blank我的gitee账号/ap/pa hrefhttps://blog.csdn.net/weixin_61599986?spm1000.2115.3001.5343 target_blank我的个人博客/a/divdivh2教育背景/h2ollixxxx-xxxx 某某大学/lilixxxx-xxxx 某某高中/li/ol/divdivh2专业技能 /h2ulliJavaSE.../lili数据结构/liliMySQL/lili网络/liliJavaEE.../li/ul/divdivh2所获奖项/h2ullixxxx一等奖/lilixxxx二等奖/lilixxxx三等奖/li/ul/div/div
/body
/html
结果展示 3.2填写简历
代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title在线简历填写/title
/head
bodytable width500px cellapacing0theadh3请填写简历信息/h3/theadtbodytrtdlabel forname 姓名 /label/tdtdinput typetext idname/td/trtrtd性别/tdtdinput typeradio namesex value男男nbsp;nbsp;nbsp;input typeradio namesex value女女/td/trtrtd出生日期/tdtdselectoption--请选择年份--/optionoption1998/optionoption1999/optionoption2000/optionoption2001/optionoption2002/optionoption2003/optionoption2004/optionoption2005/optionoption2006/optionoption2007/optionoption2008/optionoption2009/optionoption2010/option/selectselectoption--请选择月份--/optionoption value1/optionoption value2/optionoption value3/optionoption value4/optionoption value5/optionoption value6/optionoption value7/optionoption value8/optionoption value9/optionoption value10/optionoption value11/optionoption value12/option/selectselectoption--请选择日期--/optionoption value1/optionoption value2/optionoption value3/optionoption value4/optionoption value5/optionoption value6/optionoption value7/optionoption value8/optionoption value9/optionoption value10/optionoption value11/optionoption value12/optionoption value13/optionoption value14/optionoption value15/optionoption value16/optionoption value17/optionoption value18/optionoption value19/optionoption value20/optionoption value21/optionoption value22/optionoption value23/optionoption value24/optionoption value25/optionoption value26/optionoption value27/optionoption value28/optionoption value29/optionoption value30/optionoption value31/option/select/td/trtrtd就读学校/tdtdinput typetext/td/trtrtd应聘岗位/tdtdinput typecheckbox前端开发input typecheckbox后端开发input typecheckbox测试开发input typecheckbox运维开发/td/trtrtd掌握的技能/tdtdtextarea cols30 rows10/textarea/td/trtrtd项目经历/tdtdtextarea cols30 rows10/textarea/td/trtrtd/tdtdinput typecheckbox idlisencelabel forlisence 我已仔细阅读过公司的招聘要求/label/td/trtrtd/tdtdh3应聘者确认/h3ulli以上信息真实有效/lili能够尽早去公司实习/lili能接受公司的加班文化/li/ul/td/tr/tbody/table
/body
/html
结果展示 结束语
好啦 这节的HTML基础知识小编就与大家分享到这里啦后期小编会继续带着大家一起学习JS和CSS有关的基础知识的大家有啥不会的可以在评论区留言给小编希望这节对大家了解网络有一定帮助想要学习的同学记得关注小编和小编一起学习吧如果文章中有任何错误也欢迎各位大佬及时为小编指点迷津在此小编先谢过各位大佬啦
