第一步, 新建文本文档, 并将文件类型修改为.html
文件.
第二步, 打开文档开始写代码.
第四步, 使用浏览器打开就运行成功了.
前端代码的运行环境就是浏览器, 前端中浏览器就相当于Java
中JVM
这样的角色, 浏览器可以解析html, css, js
等代码中的内容, 根据代码去构造前端页面.
在浏览器中按F12
会出现一个控制台, 这个就是用来查看web页面的控制台, 可以用来查看网页中的源码与运行时的输出结果, 调试你写的前端代码.
先点击下面图中所指的按钮再指向浏览器的某一页面元素, 就能自动跳到该处的源码部分.
用记事本写代码是没有语法高亮和关键字补全的, 可以使用vsCode/WebSocket进行前端代码的编写, 对于HTML, CSS, JS不用安装额外的插件.
像上面直接在记事本中写出来的html代码结构是不规范的, 但前端的代码即使有一些不规范之处, 浏览器也会尽可能的去执行, 这个特性被称为浏览器的 “鲁棒性”.
在vsCode/WebSocket可以输入!+Tab
可以自动生成一个基本的HTML结构模板.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
body>
html>
代码中的第一行是在声明文档的类型, 表示当前的文档是一个HTML文件.
html标签是整个html 文件的根标签(最顶层标签), 表示网页所使用的语言, 这里的en表示英语, 主要用于翻译功能, 比如有些浏览器打开这个网页的时候, 会根据系统语言(中文), 和网页语言(英语), 提示用户是否要把网页内容翻译成中文.
head标签里面存放的内容主要表示页面的一些属性, 与页面内容无直接关系, 比如里面的第一个meta
标签表示网页的字符编码格式是UTF-8
, title
标签用来定义文档的标题, 显示在浏览器的标题栏或标签页上, 如下图:
body
标签中写的是页面上显示的内容.
html的代码结构有如下规则特点:
那么就来介绍一些html中支持的标签, 看一下每个标签是干啥的, 标签中有哪些关键属性.
语法格式:
代码示例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
hellowold
body>
html>
执行结果:
注释虽然不会在网页展示, 但是在浏览器查看网页源代码是可以看到注释的.
在vsCode/WebSocke可以使用快捷键ctrl+/
快速进行注释与非注释之间的转换.
一共分为6级标题, 级数越小, 标题越粗越大.
语法格式:
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
执行结果:
标题标签每个标签都是独占一行的, 和代码的编写无关.
HTML中使用p
标签表示段落, 每一个p标签都独占一行, 段落之间有一个明显的段落间距.
语法格式:
<p>内容p>
代码示例:
通过lorem+Tab
可以自动填充一段文本, 便于我们检查段落的格式, 在html源代码中写的换行会被忽略, 写的多个连续空有的时候忽略, 有时候是视为一个空格.
<p>
第一段: Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>
<p>
第二段: Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>
<p>
第三段: Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>
br
是一个单标签(不需要结束标签), 表示换行.
语法格式:
<br/>或者<br>
代码示例:
<p>
第一段: Lorem, ipsum dolor sit amet consectetur adipisicing elit.<br><br><br>
Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>
执行结果:
文本格式化常见的有四个, 即加粗, 倾斜, 删除线, 下划线.
<strong>变粗strong>
<b>变粗b>
<em>倾斜内容em>
<i>倾斜i>
<del>删除线del>
<s>删除线s>
<ins>下划线ins>
<u>下划线u>
图片标签也叫img
标签, 是单标签, img
标签里面必须有src
属性表示图片的路径, 可以是相对路径, 也可以是绝对路径, 也可以是网络路径.
img
标签的常用属性:
src
: 图片的路径路径.alt
: 图片获取失败后显示的内容.title
: 鼠标放到图片上有提示的文本信息.width/height
: 设置图片宽度/高度, 当width与height只设置一个时, 图片会等比例缩小或放大.id
: 给标签一个唯一的标识, HTML中任何元素都可以指定id, 但每个元素的id不能相同.语法格式:
<img src="路径" alt="替换文本">
代码示例:
使用相对路径, html的工作目录就是该html文件所在的目录, 这里的图片和代码文件在同一路径下.
<img src="./风景图.jpg" alt="">
使用绝对路径.
<img src="D:/Administrator/Pictures/Saved Pictures/风景图.jpg" alt="">
使用网络路径.
比如https://pic.netbian.com/uploads/allimg/220802/231950-165945359015c6.jpg
就是一个网络路径.
<img src="https://pic.netbian.com/uploads/allimg/220802/231950-165945359015c6.jpg" alt="">
alt
属性表示如果访问不到图片, 就会显示一张默认的图片加一段替换文本.
<img src="./666.jpg" alt="图片失效!">
如果想要为图片配上一句话, 可以使用title
标签, 这样在鼠标放上去就能显示文本.
<img src="./风景图.jpg" title="这是一张风景图">
最后常用的属性就是使用widht
和height
来设置图片的大小了, 常用单位为px
(像素), 我们知道显示器是由一个个很小的灯泡构成的, 一个小灯泡就是一个像素, 小灯炮越多越密集, 显示的内容就越清晰.
<img src="./风景图.jpg" title="这是一张风景图" width="500" height="500">
widht
和height
只设置一个的话可让图片等比例缩放, 可以避免图片变形失衡.
<img src="./风景图.jpg" title="这是一张风景图" width="500">
“链接”(link)一般是一种快捷方式, “超链接” 就是跳转到的页面可以是当前网站之外的 ,标签为a
, 属于行内元素常用属性有href
表示链接地址, 如果将href属性的值给做#
就表示一个空链接, 点了也是不会跳转的.
1. 外部链接: href
引用其他网站的地址 .
<a href="https://www.bilibili.com/">点这里可以打开b站的主页a>
还有一个属性是target
, 值一般写作_block
, 表示在一个新标签页打开链接而不会替换原有的页面, 同时如果把图片放在a标签里面, 点击图片也能跳转链接.
<a href="https://www.bilibili.com/" target="_blank"><img src="图标.jfif">a>
2. 内部链接: 网站内部页面之间的链接, 写相对路径即可.
这里一个目录中有text.html
和text1.html
两个文件, 演示从text1.html页面跳到text.html页面
3. 下载链接: href
对应的路径****可以设置成一个文件的路径, 表示下载文件, 可以是压缩包.
<a href="./风景图.zip">点击下载压缩包a>
4. 锚点链接: 可以快速定位到页面中的某个位置.
语法上可以使用使用id
属性在某一个标签位置插入一个锚点, a标签在href中给出锚点名即可, 此时, 点击锚点链接就会跳到锚点的位置.
<div id="box1">div>
<a href="#box1">a>
代码示例:
<a href="#one">第一集a>
<a href="#two">第二集a>
<a href="#three">第三集a>
<p id="one">
第一集剧情
p>
<img src="D:/Administrator/Pictures/Saved Pictures/彦5.jpg" alt="" width="1000">
<p id="two">
第二集剧情
p>
<img src="D:/Administrator/Pictures/Saved Pictures/彦2.jpg" alt="" width="1000">
<p id="three">
第三集剧情
p>
<img src="D:/Administrator/Pictures/Saved Pictures/彦3.jpg" alt="" width="1000">
表格标签有一组标签配合使用.
table
: 表示整个表格.tr
: 表示表格中的一行.td
: 表示一行中的一个单元格th
, 表示表头(第一行)中的单元格, 会居中并加粗.thead
,表示表格的头部部分,比th范围大。tbody
,表示表格主体部分.table
包含tr
, tr
包含td
或者th
.
比如下面的的代码描述的就是一个简单的表格:
上面得到的表格很简陋, 我们可以使用给table
标签添加border
属性来加一个边框.
<table border="1px">
<tr>
<th>急救中心th>
<th>急救电话th>
tr>
<tr>
<td>医院td>
<td>120td>
tr>
<tr>
<td>派出所td>
<td>110td>
tr>
<tr>
<td>消防队td>
<td>119td>
tr>
table>
还可以使用width
和height
属性来调整表格的大小, 使用cellspacing
属设置为0
来去除边框间隙.
上面表格中的主体部分是靠左对齐的, 我们如果想要让主体部分居中单凭HTML的语法是无法做到的, 就需要使用到CSS
了, 具体会在下一篇博客介绍.
<style>
td {
text-align: center;
}
style>
<table border="1px" width="300" height = "200" cellspacing="0">
<tr>
<th>急救中心th>
<th>急救电话th>
tr>
<tr>
<td>医院td>
<td>120td>
tr>
<tr>
<td>派出所td>
<td>110td>
tr>
<tr>
<td>消防队td>
<td>119td>
tr>
table>
列表主要分为有序列表, 无序列表和自定义列表, 无序列表使用标签ul
来表示, 有序列表使用标签ol
来表示, 无序列表和有序列表里面每行的内容都使用li
来表示; 自定义列表使用dl
来表示, 可以使用dt
设置一个小标题, 列表里面每行的内容使用dl
来表示.
<h3>无序列表h3>
<ul>
<li>Javali>
<li>Pychonli>
<li>Goli>
<li>C语言li>
<li>C++li>
ul>
<h3>有序列表h3>
<ol>
<li>Javali>
<li>Pychonli>
<li>Goli>
<li>C语言li>
<li>C++li>
ol>
<h3>自定义列表h3>
<dl>
<dt>编程语言dt>
<dd>Javadd>
<dd>Pychondd>
<dd>Godd>
<dd>C语言dd>
<dd>C++dd>
dl>
表单是一个包含若干表单元素的区域, 表单元素是允许用户在表单中输入信息的元素, 如: 文本框, 密码框, 单选按钮, 复选框, 下拉按钮, 列表等, 表单标签是HTML与用户交互的重要手段, 使用form
标签可以把页面上用户进行的操作.输入提交到服务器上, 可以进行一些前后端交互, 这里的实例需要结合服务器和网络编程中的内容来理解, 会在后面的博客中介绍.
input
标签有很多的形态, 能够表现成各种用户用来输入的组件, 下面进行简单的介绍.
input
标签是一个单标签常用属性有下面几个:
type
: 这个属性必须有, 取值种类很多多, button, checkbox, text, file, image, password, radio
等.name
: 给input起了个名字, 尤其是对于 单选按钮, 具有相同的name才能多选一.value
: input 中的默认值.checked
: 默认被选中(用于单选按钮和多选按钮).maxlength
: 设定最大长度.1. 文本框和密码框
type属性的值为text
时表示是一个文本框, 值为password
表示是一个密码框.
<h3>登录h3>
账号: <input type="text"><br>
密码: <input type="password"><br>
2. 单选框
type属性的值为radio
表示一个单选框, 对于单选框需要加个name
属性, name属性相同的单选框, 值之间是互斥的, 只能选一个.
<h3>单选框h3>
<input type = "radio" name="sex">男
<input type = "radio" name="sex">女
还可以使用checked
属性增加一个默认选项的功能, 比如默认选择男.
<h3>单选框h3>
<input type = "radio" name="sex" checked="checked">男
<input type = "radio" name="sex">女
还可以使用label
标签来实现点击文本也能选中的功能, 通过给for
属性赋予文本输入框的id
, 这样就指定了是为哪一个文本框提供了选中功能.
<input type = "radio" name="sex" id="man" checked ="checked">
<label for="man">男label>
<input type = "radio" name="sex" id="woman">
<label for="woman">女label>
3. 复选框
type属性的值为checkbox
表示一个复选框, 也可以设置checked
属性为checked表示默认选项, 搭配label
标签等.
<h3>复选框: 大学生日常h3>
<input type="checkbox" checked="checked">吃饭<br>
<input type="checkbox">睡觉<br>
<input type="checkbox">学习<br>
<input type="checkbox">娱乐
4. 按钮
type属性的值为button
表示是一个普通按钮, submit
表示是一个提交按钮, reset
表示是一个提交按钮.
普通按钮一般需要搭配JS
使用, 比如这里使用JS中的一个函数alert
, 功能是弹出一个对话框显示文本内容.
<h3>按钮h3>
<input type="button" value= "这是一个按钮" onclick="alert('hello')">
提交, 清空按钮都必须放到form
标签内, 提交按钮点击后就会尝试给服务器发送, 清空按钮点击后会将form内所有的用户输入内容重置, 在后面的博客中会演示.
除此之外还可以使用button
标签来实现按钮效果的效果.
<button onclick="alert('不要点我')">一个按钮button>
如果需要选择文件, 上传文件, 可以设置type属性为file
, 上传文件需要配合服务端实现…
<input type="file">
select
标签可以实现下拉菜单功能, 一个option
表示一项菜单, option中也可以定义selected="selected"
表示默认选中.
<select>
<option selected="selected">--请选择年份--option>
<option>1991option>
<option>1992option>
<option>1993option>
<option>1994option>
<option>1995option>
<option>其他...option>
select>
textarea
标签用来实现多行文本框, cols
属性表示显示出的列数, rows
表示显示出的行数.
<h3>多行输入框h3>
<form>
<textarea cols="50" rows="10">textarea>
form>
无语义标签有两个, 分别div
标签和span
标签, 没有特定的含义, 可以运用在各种场景, 除了input等和服务器交互的标签代替不了, 其他的有语义标签都能使用这两标签结合CSS
替代, div
默认是独占一行的块级元素, 而span
默认是不独占一行的行内元素.
目标页面:
代码示例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历title>
<style>
.one {
width: 600px;
height: 1500px;
border-style: solid;
}
style>
head>
<body class="one">
<h1>愿荣的简历h1>
<div>
<h2>基本信息h2>
<img src="D:/Administrator/Pictures/Saved Pictures/头像1.jpg" alt="证件照">
<p>求职意向: Java开发工程师, 测试开发工程师p>
<p>联系电话: 1008611p>
<p>邮箱: [email protected]p>
<p>个人博客: <a href="https://blog.csdn.net/Trong_?spm=1000.2115.3001.5343">CSDNa>p>
<p>gitee: <a href="https://gitee.com/xin-xiangrong">https://gitee.com/xin-xiangronga>p>
div>
<div>
<h2>教育背景h2>
<ol>
<li>2010 - 2012 欣欣向荣幼儿园 幼儿园li>
<li>2012 - 2017 欣欣向荣小学 小学li>
<li>2017 - 2019 欣欣向荣中学 初中li>
<li>2019 - 2021 欣欣向荣中学 高中li>
<li>2021 - 2025 欣欣向荣大学 软件工程 本科li>
ol>
div>
<div>
<h2>专业技能h2>
<ul>
<li>Java 基础语法扎实, 已经刷了800道Leetcode题.li>
<li>常见数据结构都可以独立实现并熟练应用.li>
<li>熟知计算机网络理论,并且可以独立排查常见问题.li>
<li>掌握Web开发能力,并且独立开发了学校的留言墙功能.li>
ul>
div>
<div>
<h2>我的项目h2>
<ol>
<li>
<h3>留言墙h3>
<p>开发时间:2023年9月 到 2023年12月p>
<p>
功能介绍:
<ul>
<li>支持留言发布li>
<li>支持匿名留言li>
ul>
p>
li>
<li>
<h3>学习小助手h3>
<p>开发时间:2023年9月 到 2023年12月p>
<p>
功能介绍:
<ul>
<li>支持错题检索li>
<li>支持同学探讨li>
ul>
p>
li>
ol>
div>
<div>
<h2>个人评价h2>
<p>在校期间,学习成绩优良,多次获得奖学金.p>
div>
body>
html>
代码示例:
DOCTYPE html>
<html lang="en">
<head>
<h3>请填写简历信息h3>
<meta charset="UTF-8">
<title>简历填写title>
<style>
.one {
width: 510px;
height: 750px;
border-style: solid;
}
style>
head>
<body class="one">
<table>
<tr>
<td>
<label for="name">姓名label>
td>
<td>
<input type="text" id="name">
td>
tr>
<tr>
<td>
性别
td>
<td>
<input type="radio" name='1' id="male" checked="checked">
<label for="male"><img src="男.png" alt="" width="20px">男label>
<input type="radio" name = '1' id="female">
<lable><img src="女.png" alt="" width="20px">女lable>
td>
tr>
<tr>
<td>出生日期td>
<td>
<select>
<option>--请选择年份--option>
<option>2000option>
<option>2001option>
<option>2002option>
<option>2003option>
<option>2003option>
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="forntend">
<label for="forntend">前端开发label>
<input type="checkbox" id="backend">
<label for="backend">后端开发label>
<input type="checkbox" id="pa">
<label for="pa">测试开发label>
<input type="checkbox" id="op">
<label for="op">运维开发label>
td>
tr>
<tr>
<td>掌握的技能td>
<td>
<textarea cols="53" rows="10">textarea>
td>
tr>
<tr>
<td>项目经历td>
<td>
<textarea cols="53" rows="10">textarea>
td>
tr>
<tr>
<td>td>
<td>
<input type="radio" id="lisence">
<label for="lisence">我已仔细阅读过公司的招聘要求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>
<tr>
<td>
td>
<td>
<button onclick="alert('提交成功!')">提交button>
td>
tr>
table>
body>
html>