HTML基本标签
大纲
HTML介绍
网页和网站的区别?
多个网页构成一个网站,网页是构成网站的基本元素,通常由图片(img src)、链接、文字、视频、音频、多媒体等等
如何使用文本打开图片
1、新建txt文本
2、文本编辑
<img src="photo.jpg">
<>标签符号
img 标签名字,图片标签
srs 图片的属性
“ ”里面放图片的路径
3、文本后缀名改成html
常用浏览器
网页通过浏览器来展示,常用浏览器有IE、火狐(Firefox)、谷歌(Chrome)···
浏览器内核:负责读取网页内容,整理讯息、计算网页的显示方式并显示页面
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IT、猎豹安全、360极速浏览器、百度浏览器 |
Firefox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
Chrome | Blink | Chrom/opera浏览器内核、Blink其实是WebKit的分支 |
W3W
W3W(万维网联盟)是国际最著名的标准化组织,我们的web标准也是由标准化组织制定的一系列标准的集合。
由于我们的网页通过浏览器来展示,那么使用不同的浏览器,则会让我们的代码格式的显示有某些问题,为了避免这种问题,则指定了web标准
web标准构成:结构(HTML)+表现(CSS)+行为(JavaScript)
HTML:超文本标记语言,用来描述网页的一种语言,不是编程语言。
CSS:表现
JS:行为
HTML基本结构
1、语法规范
-
所有的标签都要放在< >中,例如
-
大多数标签都是成对出现的,即双标签,例如,当然,有双标签也会有单标签
-
标签的关系:包含、并列
<!--包含关系--> <html> <head></head> </html> <!--并列关系--> <html> <head></head> <title></title> </html>
标签结构
<!DOCTYPE html> <!--根标签,页面中最大的标签-->
<html lang="en">
<head> <!--头部,必须要设置它当中的title标签-->
<!--字符编码-->
<meta charset="UTF-8">
<title>Title</title> <!--标题,自己网页的标题-->
</head>
<body> <!--文档主体,页面内容基本都放这里-->
<img src="图片相对路径" alt=""> <!--图片标签,单标签-->
</body>
</html>
常用标签
标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>我是一级标题标签</h1>
<h2>我是二级标题标签</h2>
<h3>我是三级标题标签</h3>
<h4>我是四级标题标签</h4>
<h5>我是五级标题标签</h5>
<h6>我是六级标题标签</h6>
</body>
</html>
段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p>北京时间2021年9月20日,长征七号遥四运载火箭搭载天舟三号货运飞船,在海南文昌航天发射场成功发射。
天舟三号装载了航天员生活物资、舱外航天服及出舱消耗品、空间站平台物资、部分载荷和推进剂等,<br>
与天和核心舱及天舟二号组合体完成交会对接后,转入三舱(船)组合体飞行状态.
</p>
<p>天舟三号是中国空间站关键技术验证及建造阶段的第五次飞行任务。按照任务规划,
天舟三号货运飞船装载了航天员生活物资、舱外航天服及出舱消耗品、空间站平台物资、部分载荷和推进剂等,
与空间站组合体完成交会对接后,转入组合体飞行段,为空间站在轨建造后续飞行任务奠定基础。<br>
北京时间2021年10月16日,神舟十三号载人飞船发射取得圆满成功。天和核心舱和天舟二号、天舟三号组合体已进入对接轨道,
状态良好,满足与神舟十三号交会对接的任务要求和航天员进驻条件。</p>
</body>
</html>
段落练习案例一
运行结果:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验艺术</title>
</head>
<body>
<h1>实验艺术:转化艺术教育思维的重要赋能引擎</h1>
<p>刚刚过去的3月,实验艺术因为多地举办相关展览和研讨活动而备受关注。3月26日,
“艺术×设计×心理”跨学科实验艺术项目——第二回展“低垂之眼”在四川大学美术馆以研讨会的形式开幕。
3月15日,5年举办一届的“新青年——第四届实验艺术文献展”于江西景德镇开幕。
从这两个活动可以深刻感受到实验艺术在国内的发展状态,及其在社会发展过程中所发挥的作用和产生的影响。
那么,作为中国美术教育现代教育系统中较为新兴的学科,实验艺术在国内的发展现状如何?
与传统学科相比有着哪些特点?又呈现出了哪些发展态势?</p>
<h4>实验艺术整体发展如何</h4>
<p>“新青年——第四届学院实验艺术文献展暨中国学院实验艺术教育大会”是对我国近5年来实验艺术领域教学
、科研、创作及学生发展成果的系统呈现。</p>
<h4>实验艺术要走向何方</h4>
<p>实验艺术相比传统造型艺术,是一个年轻的专业学科和艺术领域。山东艺术学院美术学院副院长孙磊被称为
山东实验艺术的领头人,在他看来,实验艺术是高等美术教育中的一个概念,简单说就是学院中的当代艺术。
“当然它有更为深刻的内涵,‘实验艺术’不同于‘美术学’学科中的油画、版画、雕塑等,而是一种因为艺术工
作方法而确定性质的专业学科,即以有价值的主题思想作为表达前提,寻求恰如其分的艺术法式与语言载体,
最终完成艺术作品面向社会与公众的物质化呈现。</p>
<p>作者:墨川 <br>
2022.4.14</p>
</body>
</html>
文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式化标签</title>
</head>
<body>
<!--粗体-->
<strong>我是加粗标签</strong><br> <!--br是换行标签-->
<b>我也是加粗标签</b><br>
<!--倾斜-->
<em>我是倾斜标签</em><br>
<i>我也是倾斜标签</i><br>
<!--删除-->
<del>我是删除线</del><br>
<s>我也是删除线</s><br>
<!--下划线-->
<ins>我是下划线</ins><br>
<u>我也是下划线</u><br>
<!--标签嵌套:倾斜加粗-->
<strong>
<em>倾斜加粗</em>
</strong>
</body>
</html>
盒子标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子标签</title>
</head>
<body>
<!--div是一个大盒子,一个div盒子单独占一行-->
<div>我是一个div盒子</div>
<div>我是一个div盒子1</div>
<!--span是一个小盒子,一行可以有多给span盒子-->
<span>我是span盒子</span>
<span>我是span盒子1</span>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<img src="photo.jpg" alt="图片不存在" title="风景美景" height="750">
<!--图片标签 src 图片的相对路径/绝对路径 alt 图片不存在时显示 title 当鼠标悬停在图片上显示的名称-->
<!--可以设置width 图片的宽,默认单位像素 或者设置height 图片的高度,设置宽度之后,高度会等比例变化;高度也一样等比例变化-->
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--外部链接 href 鼠标点击后跳转的链接-->
<a href="http://www.baidu.com" target="_self">我是一个a标签</a>
<!--target="_self"属性,当前页面进行跳转-->
<!--内部链接-->
<a href="作业1.html" target="_blank">我也是一个a1标签</a>
<!--target="_blank"属性,新的页面打开-->
<a href="#">我是一个空链接</a>
<!--# 空连接-->
<a href="photo.zip">这是一个压缩文件</a>
<!--下载地址,压缩包-->
</body>
</html>
锚点标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点标签</title>
</head>
<body>
<hi id="返回首页">首页</hi>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<a href="#返回首页">返回首页</a>
<!--打锚点步骤:1、先在打锚点的位置定义id-->
<!--2、获取锚点的位置,获取id-->
</body>
</html>
特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符标签</title>
</head>
<body>
<p>人生得意须尽欢, 莫使金樽空对月</p>
<!--文本中有多个空格的时候,页面只会显示一个空格-->
<!-- 一个空格-->
<p>人生得意须尽欢, 莫使金樽空对月</p>
<!-- 一个大空格,相当于一个字符,一个tab-->
<p>是一个段落标签
<!--< 是小于符号 < > 是一个大于符号 >-->
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格的作用:只是用来展示数据-->
<!--table 表格标签 外框-->
<table align="center" border="1" cellpadding="10" cellspacing="0">
<!--属性:align="center"表示居中-->
<!--border="1" 加表格框-->
<!--cellpadding="10"文字和单元格之间的空白区域默认1像素-->
<!--cellspacing="0"单元格之间的空隙默认2像素-->
<!--thead定义表格头部,内部必须有行tr-->
<thead>
<tr> <!--th标签用来表示表头,加粗并且居中-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<!--tbody定义表格主体,用于存放数据-->
<tbody>
<!--tr 又定义第二行-->
<tr>
<!--td 定义列-->
<td>丽丽</td>
<td>女</td>
<td>18</td>
<td>跳绳</td>
</tr>
<!--tr 又定义第三行-->
<tr>
<td>泡泡</td>
<td>男</td>
<td>16</td>
<td>跑步</td>
</tr>
</tbody>
</table>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--列表标签用于布局-->
<!--第一种:无序列表-->
<h3>所有菜单</h3>
<ul>
<li>辣椒炒肉</li>
<li>糖醋排骨</li>
<li>番茄炒蛋</li>
</ul>
<!--第二种:有序列表-->
<h3>访问量</h3>
<ol>
<li>抖音 100000</li>
<li>快手 50000</li>
<li>火山 4000</li>
</ol>
<!--第三种:自定义列表-->
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
<!--ul ol当中只能放li标签 li标签中可以放任意标签-->
<!--dl 当中只能放dt和dd标签 dd里面可以放任意标签-->
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单是为了收集用户信息-->
<!--action=""提交的链接-->
<!--method="get"请求的方法get post-->
<form action="" method="get">
<!--文本框-->
用户名:<input type="text" placeholder="请输入用户名"><br>
<!--type="text" 数据类型是文本形式-->
<!--value="请输入用户名"提示语,需要手动删除-->
<!--placeholder="请输入用户名"提示语,不用删除-->
<!--密码框-->
密码:<input type="password"><br>
<!--type="password"数据类型为密码形式,输入的内容不会显示出来-->
<!--单选框-->
性别:男 <input type="radio" name="radio"> 女 <input type="radio" name="radio"><br>
<!--checked="checked"默认选中-->
<!--name="radio"设置同一个name可以实现二选一功能-->
<!--性别单选按钮有相同的name,才可以实现多选-->
<!--复选框(多选框-->
爱好:唱歌 <input type="checkbox" name="checkbox">
跳舞 <input type="checkbox" name="checkbox">
做运动 <input type="checkbox" name="checkbox"><br>
<!--提交submit-->
<input type="submit" value="注册">
<!--type="submit"会把收集的信息提交到action=""这里的网址-->
<!--重置按钮 还原表单刚开始的状态-->
<input type="reset" value="重置">
<!--普通按钮 button-->
<input type="button" value="获取验证码"><br>
<!--文件上次 file-->
上传文件:<input type="file">
</form>
</body>
</html>
表单2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单2</title>
</head>
<body>
<form action="">
<label for="username">用户名</label><input type="text" id="username">
<!--label绑定一个表单元素,当点击label中的文本时,会自动将焦点转到对应的表单元素上-->
<label for="nan">男:</label><input type="radio" id="nan" name="sex">
<label for="nv">女:</label><input type="radio" id="nv" name="sex">
</form>
</body>
</html>
下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form action="">
<!--让用户有更多的选择,可以节省空间 selected="selected"默认选中-->
<select name="" id="">
<option value="" selected="selected">广州</option>
<option value="">上海</option>
<option value="">长沙</option>
<option value="">中山</option>
<option value="">梅州</option>
</select>
</form>
</body>
</html>
文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<form action="">
工作日报
<textarea name="" id="" cols="30" rows="10">
工作日报的内容···
</textarea>
<!--cols="30"每一行多少字 rows="10"可以写多少行-->
</form>
</body>
</html>