HTML基础
Web的结构组成:
- HTML (超文本标记语言)
- CSS (层叠样式表)
- JavaScript (轻量级的脚本标记语言, 行为和动态)
HTML的语法规范
- 标签由尖括号包裹
- 基本都是成对出现(开始标签和结束标签成对组成, 结束标签比开始标签多一个/)
<p>这是一个段落</p>
大部分都是双标签,但是还有一类比较特殊,叫做
单标签
(自闭合标签
,空标签
)
<img src="">
<meta name="keywords">
标签的属性
代表特定功能和特征的,用来描述标签,它可以分为内置属性(已经设定好的,比如img标签里面的alt), 自定义属性(自己可以设定)
- 属性与属性之间需要用空格隔开
- 属性无顺序关系
HTML基本结构
//文档声明: 告诉浏览器以什么标准来解析页面, 不写的话会产生怪异盒模型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta chraset="utf-8">
<meta name="keywords" content="关键词的内容">
<meta name="description" content="描述内容">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
几个重要的标签
标题标签
可以分为六级, 分为h1~h6,从表象上看: 粗细一样,文字大小逐次递减,从SEO优化上来讲,重要程度也是逐次递减. h1一般会放在logo的部分
<!-- 快捷键 h$*6{第$级别标题} -->
<h1>第1级标题</h1>
<h2>第2级标题</h2>
<h3>第3级标题</h3>
<h4>第4级标题</h4>
<h5>第5级标题</h5>
<h6>第6级标题</h6>
段落标签
<p>这是一段落</p>
图片标签
<img src="https://img1.baidu.com/it/u=985534782,1957558876&fm=26&fmt=auto&gp=0.jpg" alt="替换文字" title="鼠标悬停文字">
<!--
alt : 图片路径
title: 鼠标悬停会出现的文字
-->
超链接
<a href="https://img1.baidu.com/it/u=985534782,1957558876&fm=26&fmt=auto&gp=0.jpg" target="_blank"></a> <!-- 在新窗口打开 -->
<a href="https://img1.baidu.com/it/u=985534782,1957558876&fm=26&fmt=auto&gp=0.jpg" target="_blank"></a> <!-- 在自身窗口打开 -->
<!--
href : 跳转的地址
target : _self:在当前窗口打开
_blank:在新窗口打开
-->
<a href="http://baidu.com">
<img src="https://img1.baidu.com/it/u=985534782,1957558876&fm=26&fmt=auto&gp=0.jpg" alt="你好">
</a>
//点击图片跳转
a标签href里面的的几个值
- href: 普通的网址
- href: #回到顶部
- href: 里面什么都不写, 重新加载