web前端HTML语法及拓展

slicesss

已于 2022-10-13 10:40:47 修改

阅读量599

点赞数

分类专栏： html 前端 python 文章标签：前端 html javascript

于 2022-10-09 18:36:44 首次发布

本文链接：https://blog.csdn.net/weixin_44748127/article/details/127230529

版权

python 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

什么是 HTML？

HTML（代表超文本标记语言）是构成大多数网页和在线应用程序的计算机语言。超文本是用于引用其他文本片段的文本，而标记语言是告诉 Web 服务器文档的样式和结构的一系列标记。

HTML有很多用例，即：

1. 网页开发：开发人员使用HTML 代码来设计浏览器如何显示网页元素，例如文本、超链接和媒体文件。
2. 互联网导航：由于 HTML 被大量用于嵌入超链接，因此用户可以轻松地在相关页面和网站之间导航和插入链接。
3. 网络文档：HTML 使组织和格式化文档成为可能，类似于 Microsoft Word。还值得注意的是，HTML 现在被视为官方 Web 标准。万维网联盟 (W3C)维护和开发 HTML 规范，同时提供定期更新。

html元素的三个部分

开始标签 : 用于说明元素开始生效的位置。标签用左尖括号和右尖括号包裹。例如，使用开始标签  创建一个段落。
内容 : 这是其他用户看到的输出。
结束标签 : 与开始标签相同，但在元素名称前有一个正斜杠。例如， 结束一个段落。

<!-- 这是一个例子 -->
开始标签			内容					结束标签	
<p>		这是在HTML中添加段落的方法。		</p>

HTML 元素的另一个关键部分是它的属性，它有两个部分——名称和属性值。名称标识用户想要添加的附加信息，而属性值给出进一步的说明。

# 例如，添加紫色和font-family verdana 的样式元素将如下所示：
< p style= "color:purple;font-family:verdana" >这是在HTML中添加段落的方法。< /p >

另一个属性，HTML 类，对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。

<!-- 例如，我们将对标题 <h1>和段落<p>使用相同的样式 -->
<!-- 样式包括背景颜色、文本颜色、边框、边距和填充，在 .important 类下 -->
<!-- 要在<h1> 和 <p>之间实现相同的样式，请在每个开始标记后添加 class=”important” -->

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多数元素都有一个开始标签和一个结束标签，但有些元素不需要结束标签即可工作。

<!-- 例如空元素。这些元素不使用结束标签，因为它们没有内容 --> 
<!-- 这个图像标签有两个属性。一个src属性，图像路径，和一个alt属性，描述性文本 -->
<!-- 但是，它没有内容，也没有结束标签 -->

< img src= "/" alt= "图像" >

最后，每个 HTML 文档都必须以 <!DOCTYPE> 声明开头，以告知 Web 浏览器文档类型。

< !DOCTYPE html >

最常用的 HTML 标签和 HTML 元素

块级元素

每个 HTML 页面都使用这三个标签：

<html>标签是定义整个 HTML 文档的根元素。
<head>标签保存页面标题和字符集等元信息。
<body>标签包含了页面上出现的所有内容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的块级标签包括：

标题标签 ：这些范围从 <h1> 到 <h6>，其中标题 h1 的大小最大，当它们向上移动到 h6 时变得越来越小。
段落标签 ：全部使用 标签括起来。
列表标签：有不同的变体。<ol> 标签用于有序列表，<ul>用于无序列表。然后，使用<li> 标记将各个列表项括起来。

内联元素-文本格式化标签

内联元素格式化块级元素的内部内容，例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。

或者标签会以粗体呈现一个元素
或者标签会以斜体显示
<del></del>或者<s></s>标签会以斜体显示
<ins></ins>或者标签会以斜体显示
超链接也是使用<a>标记和 href 属性来指示链接目标的内联元素：
<a href="https://www.baidu.com/" >点我！</a>

标签关系

包含关系

<head>
    <title></title>
</head>

并列关系

<head></head>
<body></body>

第一个HTML

每个页面都会有一个基本的结构标签（骨架标签），页面内容在这些标签上书写

<html></html> html标签 : 页面中最大的标签，称为根标签
<head></head> 文档的头部 : 注意在head标签中我们必须要设置的标签是title
<title></title> 文档的标题 : 让页面有自己的标题
<body></body> 文档的主体 : 元素包括文档的所有内容，页面内容基本都是放在body里

<html>
    <head>
        <title>好好学习前端</title>
    </head>
    <body>
        一定好好学习，十四周拼出上海工作证
    </body>
</html>

在这里插入图片描述

HTML的基本使用

实体(转义字符)

在HTML中有些时候，我们不能直接书写一些特殊符号
比如，当我们需要在字母两侧使用大于号和小于号时，可能会被识别为标签
因此如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体(转义字符)
实体的语法结构：&实体名称;

在这里插入图片描述

meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的
mata标签的属性有：

设置页面的字符集：< meta charset="utf-8" >
设置网页的描述：< meta name="description" content="" >
设置网页的关键字：< meta name="keywords" content="" >
请求的重定向：< meta http-equiv="refresh" content="5;url=地址"/ >

hgroup标签

用来为标题分组，可以将一组相关标题同时放入hgroup

    <hgroup>
        <h1>静夜思</h1>
        <h2>李白</h2>
    </hgroup>

段落和换行标签

标签用于定义段落，它可以将整个网页分为若干个段落。
 换行标签

语义化标签

header 表示网页的头部
main 表示网页的主体部分（一个网页中只会有一个main）
footer 表示网页的底部
nav 表示网页的导航
aside 和主体相关的其他内容（侧边栏）
section 表示一个独立的区块，上边标签不能表示时使用section
div 没有语义，标签用来布局，就用来表示一个区块，目前div还是主要的布局元素
span 行内元素，没有语义，一般用于在网页中选中文字

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

      <header></header>
      <main></main>
      <footer></footer>
      <nav></nav>
      <aside></aside>
      <article></article>
      <section></section>

      <div></div>
      <span></span>
</body>
</html>

列表

在html中可以创建列表，html列表一共有三种：有序列表、无序列表、定义列表

有序列表，使用ol标签来创建有序列表，使用li表示列表项
无序列表，使用ul标签来创建无序列表，使用li表示列表项
定义列表，使用dl标签来创建定义列表，使用dt来表示定义内容，使用dd来对内容进行解释说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中的内容</dd>
    </dl>

    <!-- 列表间的嵌套 -->
    <ul>
        <li>结构</li>
        <ul>
            <li>结构的作用</li>
        </ul>
    </ul>
</body>
</html>

在这里插入图片描述

超链接

超链接可以让我们从一个页面跳转到其它页面，或是当前页面的其他位置
使用a标签定义超链接，其属性href指定链接的目标路径

值可以是一个外部网站地址，即绝对路径
也可以是一个内部网页的地址，即相对路径

超链接是一个行内元素，在a标签中可以嵌套除它自身以外的任何元素
在超链接中还可以设置打开页面方式、跳转页面位置、页面占位符

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        若在路径前加'./'，则代表当前目录下，不加时默认也为这种
        若在路径前加'../'，则代表当前目录的上一目录下
    -->
    <a href="https://www.baidu.com">超链接1</a>
    <a href="test05.html">超链接2</a>

    <!-- 
        tatget属性，用来指定超链接打开位置
        可选值：_self 默认值，在当前页面中打开超链接
               _blank 在一个新的页面中打开超链接
     -->
     <a href="https://www.baidu.com" target="_self">超链接3</a>
     <a href="https://www.baidu.com" target="_blank">超链接4</a>

     <!-- 
         id属性（唯一不重复的）
            1.每个标签都可以添加一个id属性
            2.id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

        可以通过id属性跳转到页面任意位置，设置href为#目标元素的id属性值
      -->
    <a href="#bottom">去指定位置标签</a>

    <!-- 可以将超链接的href属性设置为#，这样点击超链接后页面不发生跳转，而是转到当前页面的顶部位置 -->
    <a id="bottom" href="#">回到顶部</a>

    <!-- 
        在开发中，可以将javascript:;来作为超链接路径的占位符
        作为href的属性，此时点击这个超链接什么也不会发生
     -->
     <a href="javascript:;">这是一个空的超链接</a>
</body>
</html>

在这里插入图片描述

图片标签

图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img是一个自结束标签
img的属性有src、alt、width、height等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定外部图片的路径(路径规则与超链接相同)
        alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
            搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎收录
        
        width 图片的宽度(单位是像素)
        height 图片的高度(单位是像素)
     -->
     <img width='200'src="JavaIO流目录.png" alt="IO流">
     
</body>
</html>