时间戳

首页 > 技术文章 > HTML基础

HTML基础

asas001 2021-07-06 12:04 原文

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: 里面什么都不写, 重新加载

推荐阅读