目录
HTML描述网页骨架,是一个标签化的语言。
一.安装和使用VSCode
安装
安装使用VSCode编写代码,搜索安装:
下载完成:
使用
1.直接选择文件夹打开
2.创建代码文件
右键创建文件
3.编辑代码
写完代码后记得ctrl+s保存
系统设置自动保存
运行
运行代码用浏览器运行
双击这个html就可以运行
二.HTML结构
1.html代码通过标签来组织,形如<html></html>用尖括号组织的,成对出现的东西就是标签。
2.一个标签是成对出现的,<html>开始标签 </html>结束标签
3.标签是可以嵌套的
4.可以在开始标签中,给标签赋予属性,属性相当于是键值对,可以有一个或多个
HTML常见标签
<html>:文件最顶层的标签,树根节点。
<head>:存放了这个页面的一些属性。
<body>:存放了这个页面包含哪些内容。
输入hello world还有更快的方法:输入英文!,按下tab,此时就能生成一个基本的页面。只需要去编辑body的内容即可。
注释标签
注释的内容不会在页面上显示,但是右键查看网页源代码可以看见注释。
在VSCode中注释的快捷键:ctrl+/
想要取消再次按一次ctrl+/
标题标签
<h1>---<h6>
html里面标签是否换行,和代码的编写无关,而是和标签自身有关(有的标签独自占一行,有的标签不独占)
在html源代码中写的换行会被忽略,写的多个空格会被视为是一个。
段落标签:<p>
每个段落之间,不光是要换行,同时还有一个明显的段落间距。(可以通过css调整段落间距)
换行标签:<br>
格式化标签
变粗:<strong>、< b>
倾斜:<em>、<i>
删除线:<del>、<s>
下划线:<ins>、<u>
图片标签:<img>
网页上是可以显示图片的。
img有一个核心的属性,src(必填项),src描述了该图片的路径(路径可以是一个本地的绝对路径,也可以是一个相对路径,还可以是网路路径)
绝对路径:
相对路径:
直接复制文件地址:
<img>的其他属性
alt属性
在图片挂了的时候,就会显示alt对应的文本
title属性
鼠标悬停在图片上,会给出一个提示。
width/height属性
描述图的属性
高度和宽度可以同时设置,也可以只设置一个。如果只设置一个,另一个会等比例缩放。
单位:px(像素)
超链接标签:<a>
“链接”link (快捷方式)
“超”链接跳转到的页面,可以是在当前网站之外的。
还有一个属性target,一般写作target="_blank",就可以打开一个新的标签业。(而不会替换原有页面)
表格标签
<table>表示整个表格
<tr>表示一行
<td>表示一个单元格
<th>表示表头的一个单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>小明</td>
<td>123</td>
</tr>
<tr>
<td>小红</td>
<td>234</td>
</tr>
<tr>
<td>小强</td>
<td>456</td>
</tr>
</table>
</body>
</html>
让上面的数据更像一个表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<table width="500px" height="300px" border="1px" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>小明</td>
<td>123</td>
</tr>
<tr>
<td>小红</td>
<td>234</td>
</tr>
<tr>
<td>小强</td>
<td>456</td>
</tr>
</table>
</body>
</html>
列表标签
有序列表:<ol> //ordered list
无序列表:<ul> // unordered list
列表项:<li> //list item
input标签
单行文本框
text和password
单选框
radio属性
选择框标签,一般需要与name属性一起使用
checked属性
会使打开页面后,默认选择当前选项,但可以修改选项。
复选框
可以选择多个,属性checkbox,也可以使用checked属性默认选中
按钮
button
对于按钮点击之后要干什么,需要通过js来配合。
文件选择框
file
select标签
textarea多行编辑框
上述这些标签,也可以称为是“控件”,是构成一个图形化界面的基本要素。
无语义标签
没有特定含义,可以使用在各种场景中。
div默认独占一行,span默认不独占一行。
div标签 span标签
HTML的相关文档:mdn文档
三.展示案例
展示个人简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<h1>Roylele的简历</h1>
<h2>基本信息</h2>
<img src="lefu.png" alt="" height="200px">
<p>求职意向:软件开发工程师</p>
<p>联系方式:111</p>
<p>邮箱:123456@qq.com</p>
<p>
<a href="https://www.csdn.com">我的博客</a>
</p>
<p>
<a href="https://github.com">我的github</a>
</p>
<h2>教育背景</h2>
<ol>
<li>1990-1996 小太阳小学</li>
<li>1997-2000 小太阳中学</li>
<li>2001-2004 小太阳高中</li>
<li>2005-2008 小太阳大学</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>熟练掌握Java的基本语法,熟悉面向对象程序思想</li>
<li>熟悉常用的数据结构和算法,比如顺序表、链表、二叉树、堆、哈希表等</li>
<li>熟悉操作系统中的典型概念,熟练掌握并发编程,对于多线程安全、加锁等操作具有深刻的认识</li>
<li>熟练掌握网路编程,熟悉网路原理,熟悉TCP/IP协议栈中的典型工作机制</li>
<li>熟练掌握SQL,能够进行增删改查,熟悉SQL的索引和事物等机制</li>
</ul>
<h2>我的项目</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间:2008-2011</p>
<div>功能介绍</div>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间:2011-2012</p>
<div>功能介绍</div>
<ul>
<li>支持题目的回顾</li>
<li>支持错题功能</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
在校期间,多次获得奖学金,学习成绩优良。
</body>
</html>
成果展示: