-
前端三剑客 - HTML
前言
接下来的时间将会给大家带来前端的相关知识,主要是做到扫盲的效果,在后面我们自己做网页时会用到前端三剑客HTML,CSS,JavaScript对网页进行布局,美化.
💥编译软件: Edge,Chrome.FireFox等浏览器.
💟编辑软件: VsCode
🍓参考文档:MDN
1.初始HTML
HTML(Hypertext Markup Language)超文本标记语言,它诞生就是为了给静态页面例如报纸进行排版编写,不是编译语言(Java,C/C++),而是一种定义内容结构的标记语言.随着技术不断创新发展,原有的HTML已经不能满足人们需求,所以出现CSS(页面格式修饰),JavaScript(页面逻辑控制)使我们的网页变得缤纷多彩.
1.1第一个HTML
创建一个记事本,并写入Hello HTML,修改后缀为html,打开方式为Edge.
于是第一个html文本就创建成功啦.
在浏览器中使用F12,进入开发者模式,查看网页信息,可以看见,
我们只写入了Hello HTML但是浏览器会对代码进行补全.
在开发者模式中,我们可以使下面这个箭头对页面信息进行查询.
可以修改内容(但是这种修改是对真正数据没有影响)
还可以查看网站彩蛋
那么常规的HTML文档是如何编写的呢?
1.2HTML的构成
HTML由一系列的标签构成,而标签中包裹的就是大量的元素.例如
DOCTYPE html> <head> <title>这是一个标题title> head> <body> hello world body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这里的:
- !DOCTYPE 用来链接HTML编写规范库,比如检错功能
提供给用户查看的内容,例如文本,视频…
当前由于记事本功能的局限性,使用建议大家使用VSCode,其提供了强大的编辑功能.
在新建成功一个html文件后,输入
!后出现提示后,回车既可以为我们自动创建一个模板
下面将详细认识一些常见标签
2.HTML常见标签
2.1 注释标签
格式:
- 1
可以看见注释不会在网页上显示,但是会在元素查看器中看见.
和idea,VS2016相同可以使用
ctrl + /对代码进行注释/取消注释2.2 标题标签
格式:
<body> <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> <h4>四级标题h4> <h5>五级标题h5> <h6>六级标题h6> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
规则: 数字越小,字体大.
2.3 段落标签
格式:
<body> <p>段落1Lorem, ipsum dolor sit amet consectetur adipisicing elit.Quia ducimus unde labore sint perferendis repudiandae nihil quas harum fugit, delectus in commodi illo inventore, beatae laudantium nobis error nulla maxime!p> <p>段落2Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias sed excepturi aliquid perspiciatis odio fugit neque harum nobis porro, repellat magni iste voluptates ab corrupti, tempora, molestiae nam iure rerum.p> <p>段落3Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore deserunt molestias impedit necessitatibus aspernatur ad, iure magni commodi tempora, dolor, et laudantium! Natus excepturi sunt sapiente repellendus a, assumenda iure.p> body>- 1
- 2
- 3
- 4
- 5
在vscode中可以使用
lorem生成一段随机文字用于测试.
注意:
-
p标签的内容是一个块级元素,所以上下段落之间会留有空隙
-
p标签会对文本中的空格数进行控制
-
-
如果要使用多个空格,可以使用转义字符.
-
字符 转义字符 & &< &It;` 空格 > >‘’ "@ ©
-
-
-
如果要对每个段落实现2空格的格式,可以使用空格,也可以使用css
2.4 换行标签
对于
``示例:
2.5 水平线标签
示例:
2.6 格式化标签
常见的格式化标签有加粗,倾斜,删除线,下划线
可以看见这些内容都显示在一行上,这是因为格式化标签是行内元素(不独占一行)
当然这些效果都可以通过CSS实现.
2.7 图片标签
img标签是一个单标签,其相关属性如下
- src :图片的地址,可以是本地地址,也可以是网络地址
- alt: 图片加载失败后鼠标放到失败图片所显示的内容
- title: 图片的标题
- width: 图片宽度
- height: 图片高度
示例:
这里图片是和文件在同一目录下,可以使用
./Op.jpg和Op.jpg的相对路径标识图片地址,也可以使用绝对地址和网络地址.
当图片地址失效或者出错时,就会显示alt的内容
2.8 超链接标签
标签属性:
- href: 点击后跳转的地址
- target: _self点击后在当前页面进行跳转, _blank创建一个空页面跳转
示例:
对于链接中的地址不仅可以跳转网络地址,还有多种发送
- 内部链接:
- 外部链接
-
空链接
-
下载链接
- 网页元素链接:例如让图片与其创建连接
2.9 表格标签
下面是常见的表格标签
- table标签: 表示整个表格
- tr: 表格中的一行
- td: 表格中的一个单元格
- th: 表头单元格,字体会默认居中加粗
示例:
但是该表格没有边框,于是可以通过
border设置边框
但是表格太小了,于是可以通过
width / height指定
但是内容都不是居中对齐的,这时候就可以通过CSS首先居中
2.10 列表标签
列表分为下面几种.
示例:
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表title> head> <body> <h3>无序列表h3> <ul> <li>Javali> <li>Goli> <li>C++li> <li>pythonli> ul> <h3>有序列表h3> <ol> <li>Javali> <li>Phpli> <li>C++li> <li>Goli> ol> <h3>自定义列表h3> <dl> <dt>😀dt> <dd>😁dd> <dd>😊dd> <dd>😥dd> dl> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
2.11 表单标签
对用户输入的信息进行处理,主要分为两部分
- 表单域: 表单控制的区域,主要是form标签
- 表单控件:填写组件,提交组件,主要是input标签
from标签
- 1
- 2
- 3
其中描述了其中的内容提交给谁,提交细节等
input标签
属性
type的不同其作用也不同text是单号输入框, password是密码输入框(会对输入内容隐藏), submit是对表单内容提交,value是输入框中默认显示内容
radio是单选框,首先name属性相当于给input取名,所以对于单选框来说,只能选择多个名字相同中的一个,所以一定要设置name属性
checked:默认选择
复选框实现对多个元素的选择
设置按钮触发内置事件
清空按钮对当前form表单内容重置
select标签
select标签提供多个选项,其中可以设置selected=“selected” 来设置默认选项
textarea标签
textarea标签可以实现对多行文本输入
属性:
- rows和cols,行宽和列高
2.12 无语义标签
- div标签,表示块级标签
- span标签,代表元素之间的跨度,是行内元素
3. HTML案例
3.1 展示简历案例
效果图:
代码实现:
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历title> head> <body> <div> <h2>基本信息h2> <img src="https://gitee.com/Zzt-xx-up/picture/raw/master/image-20220912152424410.png" alt="个人照片" width="200" height="200"> <p><span>求职意向: span>Java开发工程师p> <p><span>联系电话: span>10086p> <p><span>邮箱: span>XXX@163.comp> <p><a href="https://gitee.com/Zzt-xx-up">我的giteea>p> <p><a href="https://blog.csdn.net/weixin_61543874?type=blog">我的博客a>p> div> <div> <h2>教育背景h2> <ol> <li>XXXX - XXXX XXX小学li> <li>XXXX - XXXX XXX初中li> <li>XXXX - XXXX XXX高中li> <li>XXXX - XXXX XXX大学li> ol> div> <div> <h2>专业技能h2> <ul> <li>熟悉Java, C/C++语言li> <li>熟悉顺序表,链表,栈,队列,二叉树,堆,哈希等数据结构li> <li>熟练使用数据库的增删查改li> <li>熟悉掌握Web开发,能够独立开发一个简单网页li> ul> div> <div> <h2>我的项目h2> <ol> <h3>错题本h3> <p>开发时间: XXXX.XX - XXXX.XXp> <p>功能介绍:p> <ul> <li>支持错题检索li> <li>支持错题复习li> ul> ol> <ol> <h3>留言墙h3> <p>开发时间: XXXX.XX - XXXX.XXp> <p>功能介绍:p> <ul> <li>支持留言发布li> <li>支持匿名留言li> ul> ol> div> <div> <h2>个人评价h2> <p>自主学习能力强,团队协作能力强p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
3.2 填写简历案例
效果图:
代码实现:
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历title> head> <body> <table> <thead> <h3>请填写简历信息h3> thead> <tbody> <tr> <td> <label for="name">姓名label> td> <td> <input type="text" id="name"> td> tr> <tr> <td>性别td> <td> <input type="radio" name="gender" checked = "checked" id="man"> <label for="gender"><img src="man.png" alt="" width="20px" >男label> <input type="radio" name="gender" id="woman"> <label for="woman"><img src="female.png" alt="" width="20px">女label> td> tr> <tr> <td>出生日期td> <td> <select> <option>-- 请选择年份 --option> <option>1990option> <option>1991option> <option>1992option> <option>1993option> <option>1994option> <option>1995option> <option>1996option> <option>1997option> <option>1998option> <option>1999option> <option>2000option> <option>2001option> <option>2002option> <option>2003option> <option>2004option> <option>2005option> <option>2006option> <option>2007option> <option>2008option> <option>2009option> <option>2010option> <option>2011option> <option>2012option> <option>2013option> <option>2014option> <option>2015option> <option>2016option> <option>2017option> <option>2018option> <option>2019option> <option>2020option> <option>2021option> <option>2022option> <option>2023option> <option>2024option> select> <select> <option>-- 请选择月份 --option> <option>1option> <option>2option> <option>3option> <option>4option> <option>5option> <option>6option> <option>7option> <option>8option> <option>9option> <option>10option> <option>11option> <option>12option> select> <select> <option>-- 请选择日期 --option> <option>1option> <option>2option> <option>3option> <option>4option> <option>5option> <option>6option> <option>7option> <option>8option> <option>9option> <option>10option> <option>11option> <option>12option> <option>13option> <option>14option> <option>15option> <option>16option> <option>17option> <option>18option> <option>19option> <option>20option> <option>21option> <option>22option> <option>23option> <option>24option> <option>25option> <option>26option> <option>27option> <option>28option> <option>29option> <option>30option> <option>31option> select> td> tr> <tr> <td> 就读学校 td> <td> <input type="text"> td> tr> <tr> <td> 应聘岗位 td> <td> <input type="checkbox" id="1"> <label for="1">前端开发label> <input type="checkbox" id="2"> <label for="2">后端开发label> <input type="checkbox" id="3"> <label for="3">测试开发label> <input type="checkbox" id="4"> <label for="4">运维开发label> td> tr> <tr> <td> 掌握的技能 td> <td> <textarea name="" id="" cols="30" rows="10">textarea> td> tr> <tr> <td> 项目经历 td> <td> <textarea name="" id="" cols="30" rows="10">textarea> td> tr> <tr> <td>td> <td> <input type="checkbox" id="checked"> <label for="chexked">我已经仔细阅读过公司的招聘要求。label> td> tr> <tr> <td>td> <td> <a href="#">点击查看我的招聘状态a> td> tr> <tr> <td>td> <td> <h3>请应聘者确认: h3> <ul> <li>以上信息真实有效li> <li>能够尽早去公司实习li> <li>能接受公司的加班文化li> ul> td> tr> tbody> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
3.3 Emmets插件
VSCode提供多种快捷键
- 快速输入标签
input + 回车
- 快速输入多个标签
h3*3 + 回车
- 标签自带id
p#one + 回车
- 标签自带类名
p.one + 回车
- 标签自带子元素
ol > li*3 + 回车
- 标签带兄弟元素
li+ol
- 标签自带内容
li{121}
点击查看我的招聘状态请应聘者确认:
- 以上信息真实有效
- 能够尽早去公司实习
- 能接受公司的加班文化
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
3.3 Emmets插件
VSCode提供多种快捷键
- 快速输入标签
input + tab
- 快速输入多个标签
h3*3 + tab
- 标签自带id
p#one + tab
- 标签自带类名
p.one + tab
- 标签自带子元素
ol > li*3 + tab
- 标签带兄弟元素
li+ol
- 标签自带内容
li{121}
-
相关阅读:
大厂秋招真题【贪心】美团20230826秋招T2-小美的数组重排
北斗卫星导航系统：引领现代林业发展的先锋
PyTorch中并行训练的几种方式
新款吉利星越L正式上市，媒介盒子多家媒体报道
C++ explicit的作用
1.7 信息化发展与应用
java设计模式2，开闭原则
RSA加密和解密原理及过程（非对称加密）
大龄程序员谈架构经验 内行看门道
微整形SDK解决方案，为企业节省大量开发成本
- 原文地址：https://blog.csdn.net/weixin_61543874/article/details/126918311
