HTML学习
学习的过程必备:笔记本记笔记+电脑写代码+参考书/参考网站
笔记就不放上来啦!
编辑器
VS Code
Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,编辑器中内置了扩展程序管理的功能。
步骤 1: 新建 HTML 文件
在 VS Code 安装完成后,选择" 文件(F)->新建文件(N) “,在新建的文件中输入代码
步骤 2: 另存为 HTML 文件
然后选择” 文件(F)->另存为(A) ",文件名为test.html
步骤 3: 在浏览器中运行这个 HTML 文件
然后鼠标右击编辑器上的文件名,选择在默认浏览器打开(也可以其他的浏览器)
就能在浏览器中显示界面
基本标签
head标签内有title \meta \style \link \base \script。
body标签内有h1~h6(标题) \ p(段落)\ br(换行)\ a(超链接)\ img(图片)
div 用来划分一个区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!--重要!!!防止页面出现乱码-->
<title>学习的过程</title> <!--网站标题-->
</head>
<body>
<h2>春晓</h2> <!--页面二级标题-->
<p>春眠不觉晓,<br>处处闻啼鸟,<br>夜来风雨声,<br>花落知多少。</p>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!--防止页面出现乱码-->
<title>学习的过程</title> <!--网站标题-->
</head>
<body>
<h1>问卷调查</h1>
<ol> <!--有序列表-->
<li>你通过什么途径学习</li>
<ol type="A">
<li>百度搜索</li>
<li>谷歌搜索</li>
<li>其他</li>
</ol>
<li>你觉得网页设计怎么样</li>
<ol type="A">
<li>酷炫大方</li>
<li>简单</li>
<li>粗糙</li>
</ol>
<li>你觉得这本书如何</li>
<ul type="disc"> <!--无序列表-->
<li>通俗易懂</li>
<li>内容丰富</li>
<li>一般般</li>
</ul>
</ol>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!--重要!!!防止页面出现乱码-->
<title>学习的过程</title> <!--网站标题-->
<style type="text/css">
table,tr,td{border: 1px solid silver;}
</style>
</head>
<body>
<table>
<caption>学生成绩表</caption> <!--表格标题-->
<thead> <!--表头-->
<tr> <!--行-->
<th>姓名</th> <!--表头单元格-->
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr>
<td>张三</td> <!--单元格-->
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody>
<tfoot> <!--表尾-->
<tr>
<td>平均分</td>
<td colspan="2">385</td> <!--合并列-->
</tr>
</tfoot>
</table>
</body>
</html>
图片相对路径的确定
对于0313.html来说,一张图是在同一目录下;另一张是在同级目录img的下一级中。
第一种相对路径:<img src="1.jpg" />
第二种相对路径:<img src="img/1.jpg" />
那么对于0303_1.html来说,一张图位于上级目录;一张位于上级目录中的img文件夹中。
第一种相对路径: <img src="../1.jpg" />
第二种相对路径:<img src="../img/1.jpg" />
对于图片和文件建议使用英文,因为很多服务器是英文操作系统。
超链接
点击图片或文字跳转到新的页面
<body>
<a href="test/0313_1.html"><img src="1.jpg"/></a><br/>
<a href="test/0313_1.html">点击跳转</a>
</body>
表单
允许用户在表单中输入内容,比如文本域、下拉列表、单选框、复选框、按钮…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!--重要!!!防止页面出现乱码-->
<title>学习的过程</title> <!--网站标题-->
</head>
<body>
<form>
昵称:<input type="text"/><br/>
密码:<input type="text"/><br/>
邮箱:<input type="text"/>
<select>
<option>qq.com</option>
<option>163.com</option>
</select><br/>
性别:男<input type="radio" name="gender" value="男"/>
女<input type="radio" name="gender" value="女"/><br/>
爱好:旅游<input type="checkbox" name="hobby" value="旅游"/>
听歌<input type="checkbox" name="hobby" value="旅游"/>
摄影<input type="checkbox" name="hobby" value="旅游"/>
运动<input type="checkbox" name="hobby" value="旅游"/><br/>
个人简介:<br/>
<textarea rows="5" cols="20"></textarea><br/>
上传个人照片:<br/>
<input type="file"/><br/>
<input type="submit" value="提交按钮"/>
</form>
</body>
</html>
表单
iframe,在当前网页嵌入另一个网页。