网页前端培训1HTML/基础标签

小鱼儿 2024-05-01 16:10 78阅读 0赞

## **HTML** ##

**简介**：超文本标记语言是一种用于创建网页的标准**标记**语言，不是编程语言。“超文本”指网页内可以包含非文字元素如：图片、链接、音乐等。HTML文档也叫web页面。

**后缀名**：.html .htm本身几乎没有任何区别。

#### **基础语法**： ####

**标签**：标签又叫做元素，由*尖括号*包围的关键词，比如 <html>，通常是*成对出现*的，HTML 元素以**开始标签**起始，HTML 元素以**结束标签**终止，开始和结束标签也被称为*开放标签*和*闭合标签。*某些 HTML 元素具有**空内容。**

**标签属性：**可以在元素中添加**附加信息，**一般描述于**开始标签。**

**文档：**通过<html> 标签定义整个 HTML 文档

**头部：**<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

**主体：** <body> 标签定义文档的主体。

<body>
    <p>这是第一个段落。</p>
    </body>

**文档标题：** <title> 标签定义了不同文档的标题

**标题：**通过<h1> - <h6> 标签来定义，重要性依次递减，起强调作用，用在主体中，自动换行

<h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>

**水平线：** 通过 <hr> 标签进行分隔，常用属性：color，size，width（百分比或px）,align对齐方式

<p>XXXXXXXX</p>
    <hr color="red"size="3"width="50%"align="left/center">
    <p>XXXXXXXX</p>

**段落：**通过标签 <p> 来定义，自动换行

<p>这是一个段落。</p>
    <p>这是另外一个段落。</p>

**换行：**通过标签 <br> 来定义，单标签

<p> 
    XXXXXX<br>XXXXXXX
    </p>

**列表：**无序列表<ul>，圆点开头

有序列表<ol> ，数字/罗马字母开头

**层：**<div>块级元素，默认全部宽度，高度有多少占多少，属性：width，height,align

<div style="width=100px;height:100px">XXXXX</div>

**块：**<span>行内元素（不会自动换行，不存在宽高）

**超链接：** 通过标签 <a> 来定义

属性：href连接要跳转的位置 target窗口打开的位置：\_self当前窗口 \_blank空白窗口

<a href="https://www.bilibili.com">哔哩哔哩动画弹幕网站</a>

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

**锚点：** 通过标签 <a> 来定义

href后跟\#表示刷新当前页面，可以回到顶部

跳转到id/name位置

**图像：** 通过标签 <img> 来定义，单标签

属性：src 引入图片的地址（必须属性）

alt 当图片破损或不存在时，显示的文本内容

titile 当鼠标悬停在图片上时显示的文本

width：图片的宽

height：图片的高

border：图片的边框

**表格：** 通过<table>标签来定义

tr 行

td 标准单元格

th 表头（字体居中 加粗等效果）

table属性：width表格宽度

weight表格高度

border表格边界

align表格对齐方式

style="border-collapse:collapse;"合并表格的边框

tr属性：align行内容的对齐方式

bgcolor行背景颜色

**文档与外部资源关系：** 通过<link> 标签定义

**元数据:** 通过 <meta>标签描述一些基本的元数据，元数据也不显示在页面上，但会被浏览器解析，通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。<meta> 一般放置于 <head> 区域。

为搜索引擎定义关键词:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    为网页定义描述内容:
    <meta name="description" content="免费 Web & 编程 教程">
    定义网页作者:
    <meta name="author" content="Runoob">
    每30秒钟刷新当前页面:
    <meta http-equiv="refresh" content="30">

**脚本：** <script>标签用于加载脚本文件

**HTML注释：**

**格式化标签：**

**<font>：**规定文本的字体、尺寸、颜色 face、size、color

**<pre>：**定义预格式化的文本（保留空格与换行）

<pre> Hello World </pre>
    Hello&nbspWorld
    &nbsp空格符

**<b>:**加粗

**<i>:**倾斜

**<u>:**下划线

**<del>:**中划线

**<sup>:**上标

**<sub>:**下标

**空元素：**没有内容的 HTML 元素，未来版本中要求元素必须关闭，所以<XXX/>最保险

**网页结构：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16][]

//图片来自菜鸟教程[HTML 简介 | 菜鸟教程 (runoob.com)][HTML _ _ _ _runoob.com]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/4a0eeef468bd4d7e99f20389f4c06c02.png
[HTML _ _ _ _runoob.com]: https://www.runoob.com/html/html-intro.html