时间戳

首页 > 技术文章 > html快速入门

html快速入门

l-uz 2022-02-10 09:36 原文

HTML

img

简介

HTML （Hypertext Markup Language） 是用于构建网页及其内容的代码。例如，内容可以在一组段落、项目符号列表或使用图像和数据表中进行结构化；

通俗的理解为：HTML就是构造网页的骨架；

定义

HTML 是一种定义内容结构的标记语言。HTML由一系列元素组成，您可以使用这些元素来包含或包装内容的不同部分，以使其以某种方式显示或以某种方式执行。封闭的标签可以使单词或图像超链接到其他位置，可以斜体化单词，可以使字体变大或变小，等等；

例如，以以下内容行为例：

My cat is very grumpy

如果我们希望该行独立存在，我们可以通过将其括在段落标记中来指定它是一个段落：

<p>My cat is very grumpy</p>

HTML元素

image

我们元素的主要部分如下：

  • 开始标记（Opening tag）：它由元素的名称（在本例中为 p）组成，该名称括在左尖括号和右尖括号中。这表示元素开始或开始生效的位置 — 在本例中为段落开始的位置。
  • 结束标记（Closing tag）：这与开始标记相同，只是它在元素名称前包含正斜杠。这表示元素的结束位置 — 在本例中为段落结束的位置。未能添加结束标记是标准的初学者错误之一，可能会导致奇怪的结果。
  • 内容：这是元素的内容，在本例中，它只是文本。
  • 元素：开始标记、结束标记和内容共同构成了元素。

元素的属性：

image

属性包含有关元素的额外信息，如果不希望这些元素显示在实际内容中。此处是属性名称，并且是属性值。该属性允许您为元素提供一个非唯一标识符，该标识符可用于使用样式信息和其他内容将其作为目标（以及具有相同值的任何其他元素）class``editor-note``class``class

  • 属性应始终具有以下内容：
它与元素名称（或上一个属性，如果元素已具有一个或多个属性）之间的空格。
属性名称后跟等号。
由左引号和右引号括起来的属性值。

注意：不包含 ASCII 空格（或任何字符）的简单属性值可以保持不加引号，但建议您引用所有属性值，因为这会使代码更加一致和易于理解。" ' = < >

HTML标签

在HTML中，标签用于创建元素；

HTML 元素的名称是尖括号（如段落）中使用的名称。请注意，结束标记的名称前面有一个斜杠字符 ，并且在空元素中，结束标记既不是必需的，也不是允许的。如果未提及属性，则在每种情况下都使用默认值；

注意! 元素和标签不是一回事。标签在源代码中开始或结束元素，而元素是DOM的一部分DOM是用于在浏览器中显示页面的文档模型；

HTML 标签分类

分类1

  • 双标签：通俗理解为有头有尾的；
<p></p>
<a></a>
  • 自闭合标签：单标签
<img/>

分类2

块级别标签：在页面内以块的形式展现，每一个标签都出现在新的一行，占用全部宽度；

<div></div>
<h1></h1>
<p></p>

行内标签：通常在块级元素内，不会导致文本换行，只占必要的部分宽度

<a></a>
<u></u>
<i></i>
<s></s>
<b></b>
<img>
<em></em>
<strong></strong>

HTML文档结构

主题结构

<html>
  	<head>编写给浏览器查看的内容</head>
    <body>编写展示给用户查看的内容</body>
</html>

自建html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

image

文档结构剖析

  • <!DOCTYPE html>： 解释文档类型，必须写的序言；
  • <html></html>：此元素包装整个页面上的所有内容，根元素；
  • <head></head>：此元素充当要包含在 HTML 页面上的所有内容的容器，是编写给浏览器查看的内容；
  • <meta charset="utf-8">：设置字符集
  • <title></title>：页面的标题，即在加载页面的浏览器选项卡中显示的标题；
  • <body></body>：Web 用户访问页面时向他们显示的所有内容，编写给用户查看的内容；

如何注释

方式一：

1.单行注释
<!--单行注释内容-->
2.多行注释
  <!--
  多行注释内容1
  多行注释内容2
  -->

方式二：

  • 快捷键：Ctrl+?

注意！

编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

HTML标签

head内常见的标签

标签 说明
<title>内容</title> 定义网页标题
<style></style> 内部支持css代码
<script></script> 内部支持编写js代码，还可以通过src属性导入外部js文件
<link> 通过href属性引入外部的css文件
meta 定义网页源信息
keywords关键字搜索
description网页描述信息

注意，在html文件中 可以编写html和css以及js，但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展；

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>Hammer Title</title>

    <!--  样式:将h1标题修改颜色  -->
    <style>
        h1 {
            color: cyan;
        }
    </style>
    <!-- js动态效果:验证  -->
    <script>
        prompt('hammer')
    </script>
    <!-- 引入外部js   -->
    <script src="第一个js文件.js"></script>
    <link rel="stylesheet" href="第一个css文件.css">
    <!-- 网页源:refresh-刷新,2秒后跳转到百度  -->
    <meta  http-equiv="refresh" content="2;URL=http://www.baidu.com">
    <!-- 关键字查询:相当于热词搜索   -->
    <meta name="keywords" content="Hammer's html">
    <!-- 网页描述性信息   -->
    <meta name="description" content="hammer html">
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

image

body内常见的标签

标题标签

有h1~h6级别标签，一共六个级别标签

<h1></h1>

<body>
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
</body>

image

段落标签

代表段落，块级标签

<body>
<p>This is a single paragraph</p>
</body>

image

字体相关标签

标签 说明
<b></b> 字体加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线 
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

注意：有时候相同的样式 可能有多种标签可以实现

换行、水平分割线标签

  • <br>：换行
  • <hr>：水平分割线

image

列表标签

网络上的很多内容都是列表，HTML有特殊的元素。标记列表始终包含至少 2 个元素。最常见的列表类型是有序列表和无序列表：

  • 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个<ul>元素包围。
  • 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol>元素包围。

无序列表

<body>
<p>At Mozilla, we’re a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

</body>

<!--快速生成列表标签-->
ul>li{$$$}*10

image

有序列表

<ol>
<li>Hammer</li>
<li>hammer</li>
<li>ze</li>
</ol>

image

标题列表（了解）

	<dl>
    <dt>标题1</dt>
      <dd>内容1</dd>
    <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
	</dl>

链接标签

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的标签：<a></a>是 "anchor" （锚）的缩写；

a标签的两种用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--通过href属性指定网址(URL)点击跳转-->
<a href="http://www.baidu.com">百度</a>
<!--锚点-->
<!--通过跟id值来跳转-->
<a href="#d2" id="d1">锚点1</a>
<div style="background-color: cyan;height:1000px"></div>
<a href="#d1" id="d2">锚点2</a>
<div style="background-color: #aaa1a4;height:1000px"></div>

</body>
</html>

链接标签跳转的方式

1.当前页面跳转	target="_self"  (默认)	
2.新建页面跳转	target="_blank"

<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

图片标签

  • <img>
  • src 属性是必须的，它包含了你想嵌入的图片的文件路径；
  • alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时；
  • title：属性写文本用于鼠标悬浮在图片上之后提示的文本信息；
  • height、width属性写像素，用于调整图片的尺寸，需要注意调整的时候 修改一个另外一个自动等比例缩放，如果同事调整两个 那么可能会造成图片的失真；
<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

表格标签

表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表 ；

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

  • 标签：<table></table>
    • <thead></thead>：表头
    • <tbody></tbody>：表单
    • <tr></tr>：表示一行
    • <th></th>：在表头的字段名称
    • <td></td>：普通的单元格数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hammer</td>
            <td>18</td>
            <td>male</td>
        </tr>
    </tbody>
</table>
</body>
</html>
属性 说明
border 表格边框
cellpadding 内边距
cellspacing 外边距
width 像素 百分比（最好通过css来设置长宽）
rowspan 单元格竖跨多少行
colspan 单元格横跨多少列（即合并单元格） 
<body>
<table border="1" cellpadding="10px" cellspacing="5px" >
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hammer</td>
            <td>18</td>
            <td>male</td>
        </tr>
    </tbody>
</table>
</body>

image

HTML特殊符号

符号 说明
&nbsp; 空格(牛逼的sp)
&gt; 大于号
&lt; 小于号
&amp; &符号
&yen; 羊角符￥
&copy; 版权符
&reg; 注册商标 
<body>
<!--空格-->
<p>特殊符号1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特殊符号2</p>
<hr>
<!--大于-->
<p>a&gt;b</p>
<!--小于-->
<p>a&lt;b</p>
<!--&符号-->
<p>&amp;</p>
<!--羊角符-->
<p>&yen;100000</p>
<!--版权符号-->
<p>&copy;版权</p>
<!--注册商标-->
<p>&reg;</p>
</body>

image

布局标签

<div></div>：用来占位布局，属于块级标签，可以无限制的嵌套块级标签或者行内标签；

<span></span>：行内标签；

image

注意：p标签虽然是块级别标签，但是不能嵌套块级标签；

标签的两大重要属性

  • id属性：相当于个体查找
  • class属性：群体查找
类似于python面向对象中的类的继承
  	可以将多个标签划为一类
      <h1 class='c1'></h1>
      <p class='c1'></p>
    并且一个标签可以有很多类
      <h1 class='c1 c2 c3'></h1>
      <p class='c1 c8 c9'></p>

【待续】

推荐阅读