-
前端入门-HTML篇
HTML学习
接下来开始学习前端的一些知识,不是要求很深入,只是要了解前端的一些语法,能看懂前端并能简单应用即可HTML入门
前端三剑客: HTML CSS JavaScript
我们首先学习HTML
首先先创建一个html的文件
后缀名的意义是告诉操作系统, 要使用什么默认程序打开
HTML的代码是通过浏览器运行的,只要使用浏览器打开对应的html的文件,就能执行, 不用安装额外的运行环境(比如Java中的JVM)
html不需要编译,只要浏览器读取就能执行(鲁棒性)
html的最顶层标签是html
需要有一个head和body,head放一些属性信息
body放页面上显示的内容
- html 是有一些标签构成的
- 每个标签都有开始 标签和结束 标签 和 . 但是也是由部分标签只有开始标签,没有结束 标签
- 标签之间可以嵌套, 是树形结构的, 像这里,的html是head和body的父标签,head和body是html的字标签
- 标签(tag)也叫做元素(element)
但是使用记事本来写前端代码就会很难受,所以我们需要一下编译器
主要的几种编译器
IDEA也可以写前端,但是IDEA社区版只支持HTML,不支持CSS 和 JavaScript
IDEA专业版才支持前端三剑客
JetBrains也有专门的前端编译器WebStrom, 很专业,但是却很重
这里 主要推荐 VSCode
VScode里的一些操作
输入! + TAB就会生成一下html的初始化模板
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>Documenttitle> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
<html lang="en"> html标签是可以在开始标签中写一些属性的, 使用空格来分割标签与键值对, 使用=来分割键和值(注意,=两侧不能有空格- 1
- 2
- 3
<title>Documenttitle>- 1
- 2
编写html可以使用VSCode
运行html直接使用浏览器运行html即可
HTML的常见标签
注意: 一下提到的TAB 都可以使用 enter 键代替
注释标签
ctrl + /
- 1
- 2
在网页上右键,查看网页源代码,就能查看源代码了
标题标签
h数字 + TAB
<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> <h4>四级标题h4> <h5>五级标题h5> <h6>六级标题h6>- 1
- 2
- 3
- 4
- 5
- 6
在markdown中 #一级标题 ==>
一级标题
段落标签
p + TAB
<p>and STL which ensures a higher execution speed and smaller program size.p>- 1
换行标签
br + TAB
在html中, 要换行就要使用换行标签
注意: br标签是单标签, 没有 结束标签, 所以放在要换行的最后就行了
<p>and STL which ensures a higher execution speed <br> and smaller <br> program size.p>- 1
- 2
- 3
格式化处理
加错 strong b
倾斜 em i
删除线 del s
下划线 ins u
<strong>加粗strong> <b>加粗b> <em>倾斜em> <i>倾斜i> <del>删除线del> <s>删除线s> <ins>下划线ins> <u>下划线u>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<strong>加粗strong><br> <b>加粗b><br> <em>倾斜em> <i>倾斜i> <del>删除线del> <s>删除线s> <ins>下划线ins> <u>下划线u>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
独占一行的标签也叫做"块级元素"
不独占一行的标签也叫做"行内元素"
图片标签
img + TAB
<img src="" alt="">- 1
在src后面加上绝对路径或者相对路径或者网络地址或者gif图片
<img src="d:/跨屏互联/duck.jpg" alt="" width="200px" height="400px"> <img src="./dog.png" alt="这是一只单身狗" width="300px" height="400px"> <img src="https://img0.baidu.com/it/u=2365849558,1527799798&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=319" alt="">- 1
- 2
- 3
alt 平时不会显示 , 但是当图片加载不出来了,就会显示alt里面的文字
图片的宽度和长度 的单位是像素(px)
像素是屏幕上最基本的单位, 屏幕上有很多的小的光点,每个光点都能显示出一种颜色
假设一台显示器是 1920 * 1080 (1080p)
就是说 在水平方向是有1920 的光点
在垂直方向上,有1080个光点
超链接
a + TAB
首先要知道链接(link)与连接(connection)是不一样的
链接是一种快捷方式, 通过链接可以找到另一个资源
超链接可以找到外部的网站
<a href="https://www.baidu.com">百度a> <a href="https://www.souhu.com">搜狐a> <a href="https://www.zhihu.com">知乎a>- 1
- 2
- 3
点过之后图标就会变成紫色
超链接还能进行内部html的跳转
点击图片就能跳转到对应的网站
<a href="https://www.baidu.com"> <img src="https://img0.baidu.com/it/u=2365849558,1527799798&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=319" alt=""> a>- 1
- 2
- 3
点一下人像,就会连接到百度官网
表格标签
table + TAB
<table> <tr> <th>姓名th> <th>学号th> tr> <tr> <td>张三td> <td>111td> tr> <tr> <td>李四td> <td>222td> tr> table>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
在html中出现红色,并不意味着报错,所以不要紧张
列表标签
有序列表 ol (ordered list)
无序列表 ul (unordered list)
列表项 li (lits item)
<ol> <li>闪电侠li> <li>绿箭侠li> <li>超人li> ol> <ul> <li>海王li> <li>蝙蝠侠li> <li>钢骨li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
表单标签
使用表单标签来与用户交互
form标签 : 进行前后端的交互, 功能室构造一个http请求
input标签
input标签有很多的形态, 这些形态可以表示不同的元素效果
文本框和密码框
<input type="text"> 单行文本框 <br> 换行 <input type="password"> 密码框 输入的时候,会显示小黑点- 1
- 2
- 3
所以,以后在保存的网站中,忘记了密码,就可以修改一下input形式
password ----> text
单选框
<input type="radio" name = "gender">男 <input type="radio" name = "gender">女- 1
- 2
创建单选项,name要相同, 告诉浏览器这是一组选项, 这样子才会出现互斥单选的情况
但是这个小圆圈比较小,所以不好点到
此时就可以使用label标签来进行
<input type="radio" name = "gender" id = "male"><label for = "male">男label> <input type="radio" name = "gender" id = "female"><label for = "female">女label> 添加id 配合使用 label 标签,就能实现,点到"男"就能选中- 1
- 2
- 3
复选框
checkbox
<input type="checkbox" name = "I">学习 <input type="checkbox" name = "I">睡觉 <input type="checkbox" name = "I">看视频- 1
- 2
- 3
小技巧 : 使用列编辑, ALT + 鼠标光标,就能选中
按钮
<input type="button" value = "这是按钮" onlick = "alert(hello)">- 1
后面的onclick是js的内容
最后的效果
提交
<input type="submit" value = "这是一个提交按钮">- 1
提交按钮要搭配form标签使用
文件选择框
<input type="file">- 1
下拉标签
sekect
select 常常配合option 标签一起使用
<select > <option>一班option> <option>二班option> <option>三班option> select>- 1
- 2
- 3
- 4
- 5
文本框(多行)
之前 input 标签的 text 和 password 都只能写一行,textarea标签能实现多行输入,不够的话,还能自动增加, 支持拖拽放大缩小
<textarea cols="30" rows="10">textarea>- 1
以上就是常用的html的标签
上面提到的都是语义化标签, 每个标签都有特定的语义和用途
还有两个特殊的标签, 无语义标签, div 和 span
div 默认是独占一行的会计标签
span 默认是不独占一行的行内标签
div 和 span 配合css 和 js , 就可以实现语义化的大部分标签
实例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>Documenttitle> head> <body> <h1>闪电侠h1> <img src="https://img0.baidu.com/it/u=2365849558,1527799798&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=319" alt=""> <p>求职意向: Java开发工程师p> <p>联系电话: 123456p> <p>邮箱: 123455@qq.comp> <a href="https://www.baidu.com">我的githuba><br> <a href="https://www.zhihu.com">我的博客a> <h2>教育背景h2> <ol> <li> 2000-2006 XX小学<br> li> <li> 2006-2009 XX初中<br> li> <li> 2009-2012 XX高中<br> li> <li> 2012-2016 XX大学<br> li> ol> <h2>专业技能h2> <ul> <li> Java基础语法扎实 li> <li> 熟悉常见的数据结构 li> <li> 熟悉计算机网络理论 li> <li> 掌握Web开发能力 li> ul> <h2>我的项目h2> <ol> <li> <h3>留言墙h3> <p>开发时间: 2020年9月p> <p>功能介绍p> <ul> <li> 支持匿名评论 li> <li> 支持上传图片 li> ul> li> <li> <h3>刷题网站h3> <p>开发时间: 2020年12月p> <p>功能功能介绍p> <ul> <li> 提供海量的题目 li> <li> 配备完善的答案讲解 li> ul> li> ol> <h3>个人评价h3> <p>学习能力强,有很强的探索精神,有集体意识p> 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
其实是很简单的,可以一气呵成写出来,只是一些标签的运用
实例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>Documenttitle> head> <body> <h2>请填写简历信息h2> <table> <tr> <td>姓名td> <td><input type="text">td> tr> <tr> <td>性别td> <td> <input type="radio" id = "male" name = "gender" ><img src="picture/man.png" alt="" width=18px> <label for="male">男label> <input type="radio" id = "female" name = "gender"><img src="picture/female.png" alt=""width= 18px> <label for="female">女label> td> tr> <tr> <td> 出生日期 td> <td> <select> <option>---请输入年份---option> <option>2000option> <option>2001option> <option>2002option> <option>2003option> <option>2004option> <option>2005option> <option>2006option> <option>2007option> <option>2008option> 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" name="" id="frontend"><label for="frontend">前端开发label> <input type="checkbox" name="" id="backend"><label for="backend">后端开发label> <input type="checkbox" name="" id="pa"><label for="pa">测试开发label> <input type="checkbox" name="" id="op"><label for="op">运维开发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="yes"><label for="yes">我已阅读过公司的招聘要求label> td> tr> <tr> <td>td> <td> <a href="#">查看我的状态a> td> tr> <tr> <td>td> <td> <h2>请招聘者注意h2> <ul> <li>以上信息真实有效li> <li>能尽早去公司实习li> <li>能接受公司的加班文化li> ul> td> tr> 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
-
相关阅读:
67个团建游戏
基于CMake的C++项目管理实践
智能搬运小车（自动抓取、循迹）
Windows多线程编程
卷积神经网络-池化层和激活层
排队（单调队列+二分）
【数仓】数据仓库高频面试题题英文版(1)
[附源码]java毕业设计社区新冠疫苗接种管理系统
一个具有强大PDF处理能力的.Net开源项目
后端工程师的前端之路系列--小程序学习
- 原文地址：https://blog.csdn.net/m0_60354608/article/details/127585054
