从这篇博客开始会简单的介绍一些前端的基础语法,和一些小程序的前端代码的页面实现,后面会根据这些前端和后端代码,搭建起一个真正的网页项目
前端一般用下面三个语言进行实现
- html 描述页面的结构
- css 描述页面的样式
- javaScript 实现页面的动态交互
而这篇博客先来讲一下HTML的基础语法
标签化
在之前的博客中提到如何解决客户端和服务器之间的数据格式问题,其中有一种解决方式就是使用标签化的语言,而html就是标签化的语言,非常类似于xml,标签一般由开始标签和结束标签构成,标签之间可以嵌套
html文件一般由以下几部分构成了,最顶层的标签是html,然后是head,其中放一些属性,其次是body,其中放正文信息,类似于以下的形式
<html>
<head>
</head>
<body>
hello world
</body>
</html>
我们的html文件不像java一样需要jdk进行编译运行,而是可以通过浏览器打开,直接执行里面的代码
推荐使用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>Document</title>
</head>
<body>
hello world
</body>
</html>
注意:vscode需要我们手动保存代码,用ctrl+s
注释
和C语言,java的注释不同,html中的注释长这样
<!-- 注释 -->
标题标签
html中的标题可以从1号到6号,数字越大,标题越小
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签
使用段落标签,可以使我们的html中的正文部分分行进行显示,并且有一定的段落间隔。可以用lorem关键字来随机生成一些字符串来显示效果
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore aspernatur quod deserunt unde enim neque perferendis debitis expedita. Ducimus voluptas consequuntur inventore assumenda minus placeat, voluptates quod aliquam eum eos!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam commodi quisquam placeat illo? Dolore quaerat voluptas ipsa iste consequuntur consectetur consequatur officia asperiores eaque delectus minus recusandae quia, nobis deserunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate, velit reprehenderit aliquid facilis ipsam provident quaerat sint dolorum quae, atque id, animi quo incidunt rerum. Atque animi placeat reiciendis iusto.</p>
我们在html中使用enter进行换行的话,不会在浏览器中体现出来,因为浏览器不确定你是要把代码写的好看一点还是要换行,因此在html中,使用br标签进行换行
br标签是个单标签,没有结束的标签
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>
Labore aspernatur quod deserunt unde enim neque perferendis debitis expedita. Ducimus voluptas consequuntur inventore assumenda minus placeat, voluptates quod aliquam eum eos!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>
Quam commodi quisquam placeat illo? Dolore quaerat voluptas ipsa iste consequuntur consectetur consequatur officia asperiores eaque delectus minus recusandae quia, nobis deserunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate, velit reprehenderit aliquid facilis ipsam provident quaerat sint dolorum quae, atque id, animi quo incidunt rerum. Atque animi placeat reiciendis iusto.</p>
文字效果
效果 | 标签 | 标签 |
---|---|---|
加粗 | strong | b |
倾斜 | em | i |
删除线 | del | s |
下划线 | ins | u |
这里的两个标签是等效的,可以用左边的也可以用右边的 |
<strong>加粗</strong> <b>加粗</b>
<em>倾斜</em> <i>倾斜</i>
<del>删除线</del> <s>删除线</s>
<ins>下划线</ins> <u>下划线</u>
通过运行上述的代码,可以看到,这些文字都是挨着的,并没有分行,这些不独占一行的叫做“行内元素”,与之对应的叫“块级元素”
图片
<img src="curry.jpg">
src代表图片的路径,如果按照上面这样写的话,就需要图片和代码在同一个文件夹的目录中,也可以使用绝对路径
<img src="D:/curry.jpg">
还可以使用网络的路径
<img src="https://cn.bing.com/images/search?q=库里扣篮图片&FORM=IQFRBA&id=F4217F7E573E280FF833FAE233D22BB863C80679">
其他属性
<img src="curry.jpg" alt="库里扣篮" title="库里" width="600px" height="800px"
border="3px">
- alt : 当图片无法正常显示时,使用这里的文字来替换图片的位置
- titile : 鼠标放到图片上的提示文字
- width : 图片的宽度
- height : 图片的高度
- border : 图片的边框,单位是像素
超链接
和ppt中的超链接一样,点了以后就可以跳转到别的页面
<a href="http://www.baidu.com">百度</a>
还有一个属性是target,代表连接的打开方式,默认是_self,也就是在本页面打开,还有_blank,也就是新开一个标签页打开
<a href="http://www.baidu.com" target="_blank">百度</a>
表格
标签 | 含义 |
---|---|
table | 整个表格 |
tr | 表格中的一行 |
td | 一个单元格 |
th | 表头单元格(加粗局中) |
thead | 表格的头部区域 |
tbody | 表格的主体区域 |
其他属性
- align : 表格相对于其他元素的对齐方式
- border : 边框
- cellpadding : 内容和边框的距离
- cellspacing : 单元格之间的距离
- width : 宽度
- height : 高度
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张哥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李姐</td>
<td>女</td>
<td>19</td>
</tr>
</table>
列表
有序列表 : ol(ordered list)
无序列表 : ul (unordered list)
列表项 : li (list item)
<ul>
<li>数学</li>
<li>语文</li>
<li>英语</li>
</ul>
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
表单标签
form标签
主要是为了进行前后端交互,构造一个http请求的,后面的博客中会提到
input 标签
<input type="">
根据type内的不同的属性,得到不同的效果
文本框
<input type="text">
密码框
<input type="password">
单选框
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
单选框的name属性一致,两个单选的选项才会相关联,选了一个另一个就会变成非选中状态,而checked代表默认选择的选项
可以通过label标签,使得我们不仅仅是点击按钮,也可以点击按钮旁边的文字来勾选选项
<label for="male">男</label> <input id="male" type="radio" name="sex">
label中的for属性就是指定当前label和哪个相同id的input标签对应的
复选框
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打豆豆
普通按钮
<input type="button" value="按钮"onclick="alert('hello')">
value代表input中的默认值
onclick代表按钮按下后的反应,这里代表网页提示“hello”,后续的js中会讲解到
提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
提交的按钮必须放到form表单中,点击后就会给服务器发送数据
选择文件
<input type="file">
点击后会弹出一个窗口,可以选择文件
文本框
<textarea rows="3" cols="50">
</textarea>
rows代表行,cols代表列
文本框中的内容是显示在网页上的默认内容
下拉菜单
里面的每一个option是一个选项,也可以通过selected来选择默认选项
<select>
<option>--请选择出生年份--</option>
<option>1991</option>
<option>1992</option>
<option selected="select">1993</option>
<option>1994</option>
<option>1995</option>
</select>
无语义标签
用于网页的布局,将有关联的标签放到同一个无语义标签中
div
独占一行的
span
不独占一行的