HTML文件知识点记录-CSDN博客

本文链接：https://blog.csdn.net/HYPER_DDD/article/details/140619806

HTML(Hyper Text Markup Language)的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

1 HTML文件的创建

软件方面运用的是Visual Studio 2019

打开软件选择创建选择创建新项目，选择ASP.NET Web应用程序，

选择创建空白模版。

在配置完项目后，在“项目”栏选择添加类，

选择HTML页进行添加便可得到基础的HTML文件，联网运行后便能链接到所创建的网页。

2 HTML段落解析

<!DOCTYPE html>                 <!--版本声明：HTML5-->
<html>
<head>                          <!--头部-->

    <meta charset="utf-8" />    <!--文档定义字符编码-->
    <title>My website</title>
</head>

<body>                          <!--主体部分-->
    <h1>Hello，world!</h1>
</body>
</html>

HTML基本架构主要由头部和主体部分组成。

头部包含了定义文档的字符编码以及title部分。其中头部的meta标签的charset属性用于定义文档的字符编码属性格式，主要格式有：gb3212：代表国家标准第2312条，不包含繁体；gbk：国家标准扩展版包含繁体以及所有亚洲字符；unicode：万国码 utf-8；是unicode的升级版，代表世界通用的语言编码。title部分则为网页标题。

主体部分则是网页的主要内容，可以对内容及其属性进行自定义修改，包括字体大小、颜色、布局等。网页可以在对程序进行修改保存后进行刷新，进而对修改内容进行同步。

效果视图：

3 主体自定义

3.1 字体大小

<body>                          <!--主体部分-->
    <h1>Hello，world!</h1>
    <h2>smaller</h2>
    <h6>smallest</h6>
</body>

其中<h1>标签是对字体大小的定义，h1为最大字体，h2次之，以此类推一直到h6。

效果视图：

3.2 列表的创建

列表分为排序列表和无序列表，其中排序列表标签为<ol>（即ordered list），无序列表标签为<ul>（unordered list）。列表内容需要附上<li>标签，否则将不作为列表内容而呈现。

<body>                          <!--主体部分-->
    <h1>
        List 1

        <ol>
            <li>first one</li>
            <li>second one</li>
        </ol>


        List 2
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
    </h1>
</body>

效果视图：

3.3 表格创建

3.3.1 table表格

表格创建标签为<table>，该种类型表格用于展示数据和页面布局。其中<table>又包括头部和主题部分<thead>和<tbody>。表格内用标签<tr>创建行，表格数据标签则用<th>(t-heading)和<td>(t-data)，其中<th>表示内容会加粗字体。

<body>                          <!--主体部分-->

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead> 
        
        <tbody>
            <tr>
                <td>小王</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>11</td>
            </tr>
        </tbody>

    </table>
        
</body>

效果视图：

3.3.2 form表格

除了table外还有一种表格标签为<form>，<form>表格主要用于数据收集和用户交互。数据收集则需要用到<input>标签的type属性，用于定义所搜集信息的类型，能够定义的类型有：

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

例子：

其中<div>标签是HTML中的一个容器元素，‌用于将文档分割为独立的、‌不同的部分。‌它可以用来组合块级元素，‌并通过样式表对这些元素进行格式化。‌<div>标签本身并不直接提供样式，‌而是通过CSS来应用样式。‌它可以用作严格的组织工具，‌并且不使用任何格式与其关联。‌

<body>                          <!--主体部分-->

    <form>
        <div>
            姓名<input name="name" type="text" placeholder="姓名" />
            编号<input name="gender" type="text" placeholder="NO."/>
        </div>
        
        <div>
            性别
            <input name="male" type="radio" />男
            <input name="female" type="radio" />女
        </div>
      
        <div>
            出生年月
            <input name="year" type="text" placeholder="年" />年
            <input name="month" list="months" placeholder="月" />月
            <datalist id="months">

                <option value="1">
                <option value="2">
                <option value="3">
                <option value="4">
                <option value="5">
                <option value="6">
                <option value="7">
                <option value="8">
                <option value="9">
                <option value="10">
                <option value="11">
                <option value="12">
           
            </datalist>
                
        </div>

        <input type="submit" />
    </form>
        
</body>

效果视图：

3.4 图片读写

效果视图：

<body>                          <!--主体部分-->

    <img src="image/Peter.jpg" alt="Peter" title="Peter Griffin" width="500">
        
</body>
</html>

要在网页插入图片需要用到img src标签，用于图像的单位。若图像与HTML文件处于同一文件夹，则只需要输入图片文件名即可；若图像文件位于HTML文件所处文件夹内的一子文件夹，则需像以上代码在图像文件前对文件夹名称作出声明；若图像文件所处文件夹与HTML文件所处文件夹处于同根目录，标注方式则如下所示；若图像来源于特定链接，则需要附上网址全称。

<img src="./image/Peter.jpg" alt="Peter" title="Peter Griffin" width="500">

alt标签为图像文本注释，主要用于如下图图片加载失败时的场景，以便访问者能读取图像信息。title标签为图像标题；width/height标签（一般只调整其中一个）则用于按比例调整图像大小。

图片加载失败情况下的效果视图：

3.5 超链接插入

<body>
    <a href = "https://localhost:44368/HtmlPage1.html"> <h1>Click Here</h1> </a>
</body>

插入超链接所用的标签为“a href”，标签框内需要附上链接完整地址，若采用的是由HTML文件创建网页，则需要两个HTML文件同时同时连接服务器。标签框内的文本为自定义选项，视作超链接触发器。

效果视图：

3.6 CSS文件

3.6.1 style样式编辑

以以下代码为例，对网页内文字样式做出改变。首先是改变字体颜色，通过在标签框内添加<style>标签，利用其color属性来做出编辑；其次就是将文字居中，主要方法有两种，一种是添加<style>的text-align:center属性，另一种则是使用<center>标签。

<body>                          <!--主体部分-->
    
    <center><h1 style="color: red;">Hello world !</h1></center>

    <h1 style="color:red; text-align:center;">hello</h1>
    
</body>
</html>

效果视图：

但这种对行内元素一一作出修改的方式十分麻烦，这时候就可以用到另外一种方式，在头部<head>模块内添加<style>模块，对主体部分需要编辑的样式作出统一的定义。如此我们也能得到同样的效果。

<head>                          <!--头部-->

    <meta charset="utf-8" />    <!--文档定义字符编码-->
    <title>My website</title>
    <style>

        h1 {
            color: red ;
            text-align: center ;
        }

    </style>
</head>

效果视图：

3.6.2 CSS文件

除了以上方式，我们还可以创建一个样式表CSS文件对style编辑作出定义，再在HTML文件中对CSS文件进行引用。再“添加类”中选择样式表创建CSS文件。

stylesheet1.css（对主体部分所定义的<h1>部分文字的字体颜色以及文字位置做出改变）

h1 {

    color:red;
    text-align:center;

}

在HTML文件<head>头部内对css文件进行引用，<link rel用于对引用文件进行关联，表明所引用文件类型是stylesheet样式表文件，href链接所需要引用的css文件。

<head>                          <!--头部-->

    <meta charset="utf-8" />    <!--文档定义字符编码-->
    <title>My website</title>
    <link rel="stylesheet" href="StyleSheet1.css">
</head>

效果视图：

3.6.3 块级元素div

块级元素<div> 标签用于定义文档中的分区或节，‌可以将文档分割为独立的、‌不同的部分。‌编辑<div>内元素元素的样式同样可以以对标签单独编辑、在<head>添加<style>标签或者引用css文件的方式来达成目标。

<!DOCTYPE html>                     <!--HTML5版本声明-->
<html>
<head>                              <!--头部-->

    <meta charset="utf-8" />        <!--文档定义字符编码-->
    <title>My website</title>
    <style>

        div{

            background-color:hotpink;
            height:300px;
            width:200px;
            padding:50px;            <!--文字填充-->
            margin:50px;             <!--页边空白-->
            font-size:50px;          <!--字体大小-->
            border:3px solid black;  <!--边框-->  
        }

    </style>
   
</head>

<body>                               <!--主体部分-->
    
    <div>

        hello world!

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

效果试图：

3.6.4 标签优先级

在对HTML元素样式进行定义时，我们有可能会对同一元素样式进行重复定义，导致我们期望的样式被覆盖掉，这时我们需要了解不同标签的优先级程度，以此来更好地避免这一种情况。以下主要探讨四种元素的优先级，分别是：inline属性内联元素、class元素、id标识符以及type标签。

内联元素（inline element）通常不会独占一行，它会根据内容的长度来占据空间。不同的元素具有不同的作用，常见的内联元素有<span>, <a>, <em>, <strong>, <img>, <b>, <i>, <del>等。如果你需要将内联元素变为块级元素，可以通过CSS的display属性设置为block。反之，如果你需要将块级元素变为内联元素，可以通过CSS的display属性设置为inline。

块元素class主要用于为HTML元素指定一个或多个类名，‌以便通过这些类名应用样式、‌行为和属性。‌其引用格式为：.+class名称。

在HTML中，‌id属性用于为HTML元素指定一个唯一的标识符。‌每个HTML文档中不能有多个具有相同id的元素。‌id属性的使用具有以下几个特点和用途：‌id值必须是唯一的，‌不能与其他元素的id值相同。‌如果在文档中存在多个具有相同id的元素，‌可能会导致一些不可预期的行为，‌特别是在使用JavaScript或CSS进行样式设置或交互时。‌引用格式为：#+id名称。

type标签则例如以上所运用的<h1>、<div>标签等。

就优先级而言inline>id>class>type。

<!DOCTYPE html>                 <!--HTML5版本声明-->
<html>
<head>                          <!--头部-->

    <meta charset="utf-8" />    <!--文档定义字符编码-->
    <title>My website</title>
    <style>

        h1{
            color:mediumpurple;
        }

        .apple{
            color:yellowgreen;
        }

        #ok{
            color:deepskyblue;
        }

    </style>
    
</head>

<body>                          <!--主体部分-->

    <h1 class="apple" id="ok"> hello world!</h1>
    <h1 class="apple"> hello world!</h1>
    <h1> hello world!</h1>

</body>
</html>

效果视图：

3.6.5 关系选择器

HTML的关系选择器（也称为上下文选择器或结构伪类选择器）是CSS中用于根据元素在文档树中的位置来选择元素的一种方式。这种选择器允许你根据父元素、子元素、相邻兄弟元素或后续兄弟元素等关系来定位元素。关系选择器并不直接通过名称来标识，而是通过特定的组合符号来定义元素之间的关系。

主体部分：

<body>                          <!--主体部分-->

    <ol>

        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <ul>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <ol>
                
                <li>item 7</li>
                <li>item 8</li>
                <li>item 9</li>
            </ol>
        </ul>
        <h1>
        <li>item 10</li>
        <li>item 11</li>
        </h1>
    </ol>

</body>

多元素选择器（multiple element selector）：a,b。同时选择多种元素进行定位。

    <style>
        ul,h1{
            color:red;
        }
    </style>

后代选择器（descendant selector）：a b。选择元素a中的后代元素b进行定位。

    <style>
        ol ol{
            color:red;
        }
    </style>

子选择器（child selector）：a>b。选择元素a中的直接子元素b进行定位。

    <style>
        ul>ol{
            color:red;
        }
    </style>

相邻兄弟选择器（adjacent sibling selector）：a+b。选择元素a的下一个相邻兄弟元素进行定位。

    <style>
        ul+h1{
            color:red;
        }
    </style>

---------------------------------------------------------------------------------------------------------------------------------

属性选择器（attribute selector）：[a = b]。

Attribute Selector（属性选择器）是CSS中的一种选择器，它允许开发者根据元素的属性及其值来选择元素，并应用相应的样式。属性选择器提供了一种灵活的方式来选择元素，特别是当这些元素没有类或ID等更具体的标识符时。

属性选择器的基本语法是在选择器名称后面加上方括号[]，并在方括号内指定要匹配的属性名和可选的属性值。例如：

[attribute]：选择具有指定属性的所有元素。
[attribute=value]：选择具有指定属性且属性值完全等于指定值的所有元素。

常见的属性选择器有：

存在性选择器
- [attribute]：选择具有指定属性的所有元素。
完全匹配选择器
- [attribute=value]：选择具有指定属性且属性值完全等于指定值的所有元素。
单词匹配选择器
- [attribute~=value]：选择具有指定属性且属性值中包含完整单词value的所有元素。单词之间通过空格分隔。
前缀匹配选择器
- [attribute^=value]：选择具有指定属性且属性值以value开头的所有元素。
后缀匹配选择器
- [attribute$=value]：选择具有指定属性且属性值以value结尾的所有元素。
子串匹配选择器
- [attribute*=value]：选择具有指定属性且属性值中包含value作为子串的所有元素。
语言属性选择器（较少见）
- [attribute|=value]：主要用于选择具有lang属性且属性值以value开头，后面可能跟着连字符-和其他字符的元素。这通常用于选择特定语言的元素。

选择所有具有title属性的<abbr>元素，并为其添加下划线：
```
abbr[title] {  
    border-bottom: 1px dotted #ccc;  
}
```

选择所有href属性值以http开头的<a>元素，并为其添加背景图：

a[href^="http"] {  
    padding-right: 10px;  
    background: url(arrow.png) right no-repeat;  
}

伪类选择器（Pseudo-class Selector）：a：b。是一种特殊的选择器，用于选择元素的特定状态或行为。伪类选择器以冒号（:）开头，它们不直接对应HTML文档中的任何标签或类名，而是根据元素的特定状态或属性来应用样式。伪类选择器在前端开发中非常有用，因为它们允许开发者为元素的不同状态（如鼠标悬停、激活、焦点等）定义不同的样式，从而提升用户体验和页面的交互性。

<!DOCTYPE html>                 <!--HTML5版本声明-->
<html>
<head>                          <!--头部-->

    <meta charset="utf-8" />    <!--文档定义字符编码-->
    <title>My website</title>
    <style>
        botton{
            width:100px;
            height:50px;
            border :10px;
            font-size:30px;
            background-color :red;
        }

        botton:hover{
            background-color :green;
        }
    </style>
    
</head>

<body>                          <!--主体部分-->

    <botton>Click it</botton>

</body>
</html>

伪元素选择器（Pseudo-element selector）：a::b。伪元素选择器用于选择元素的特定部分或生成内容。

伪元素选择器通常与content属性一起使用，特别是在::before和::after中，因为这两个伪元素默认不包含任何内容。

伪元素选择器不能直接应用于非替换元素（如<span>、<div>等）的文本内容，它们作用于元素的特定部分或生成的虚拟内容。

伪元素选择器的常见类型包括：

::before
- 在元素的内容之前插入新内容。这可以用于在元素前添加图标、文本或其他装饰性内容。
- 示例：p::before { content: "注意："; } 会在每个<p>元素的内容前添加“注意：”文本。
::after
- 在元素的内容之后插入新内容。与::before类似，但内容被添加到元素的末尾。
- 示例：a::after { content: " ↗"; } 会在每个链接文本后添加一个小箭头。
::first-letter
- 用于向文本的首字母设置特殊样式。它仅适用于块级元素。
- 示例：p::first-letter { font-size: 24px; } 会将每个段落首字母的字体大小设置为24px。
::first-line
- 用于向文本的首行设置特殊样式。它也只能用于块级元素。
- 示例：p::first-line { font-weight: bold; } 会将每个段落首行的文本加粗。
::selection
- 用于设置用户选中文本的样式（在大多数浏览器中，但并非全部）。
- 示例：::selection { background: yellow; } 会将用户选中的文本背景色设置为黄色。

3.6.6 响应式设计

HTML响应式设计是一种网页设计方式，它能够使网页在不同大小的屏幕（如桌面显示器、平板电脑和手机）上都能良好地展示和工作。为了实现响应式设计，我们不仅仅依赖HTML（HyperText Markup Language，超文本标记语言），还需要结合CSS（Cascading Style Sheets，层叠样式表）和JavaScript（一种编程语言），以及可能使用的一些框架或库（如Bootstrap）来简化开发过程。

响应式设计过程主要包括四个部分：viewport、媒体查询Media Queries、弹性盒子Flexbox和网格布局Grids。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在HTML响应式设计中，<meta name="viewport"> 标签扮演着至关重要的角色。这个标签位于HTML文档的<head>部分，用于控制页面的布局（layout）和尺寸（dimension）在视口（viewport）中的表现。视口是用户网页的可视区域，它的大小可以随着设备的不同而变化，比如手机、平板电脑和桌面显示器的视口大小就不同。

<meta name="viewport"> 标签能够影响视口的尺寸和比例，从而允许开发者控制页面在不同设备上的渲染方式。如果不设置这个标签，那么页面可能会以不适当的缩放比例显示，导致用户体验不佳。

width=device-width：这个指令告诉浏览器将页面的宽度设置为与设备屏幕的宽度相同。这样，无论设备屏幕的宽度如何变化，页面的宽度都会与之匹配，从而实现响应式设计。
initial-scale=1.0：这个指令设置了页面的初始缩放级别。1.0意味着页面将以1:1的比例显示，即页面元素的大小与它们在CSS中定义的大小相同，不进行任何缩放。

除了这两个常用的指令外，content属性还可以包含其他指令，如：

maximum-scale=1.0, minimum-scale=1.0：这些指令分别设置了用户能够缩放页面的最大和最小比例。将它们都设置为1.0可以防止用户对页面进行缩放。
user-scalable=no：这个指令直接禁止用户缩放页面。然而，需要注意的是，在一些浏览器中，这个指令可能会被忽略或不被支持。

完整的<meta name="viewport"> 标签示例，禁止用户缩放并设置初始缩放级别为1.0：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

然而，需要注意的是，虽然禁止用户缩放可以保持页面的布局不被破坏，但这也限制了用户的浏览体验。

Media Queries媒体查询允许你根据不同的屏幕尺寸或设备特性应用不同的样式规则。这是响应式设计中最重要的特性之一。第一个@media设置了网页尺寸大于等于特定数值时的样式，第二个则设置了小于等于特定数值时的样式。

<!DOCTYPE html>                 <!--HTML5版本声明-->
<html>
<head>                          <!--头部-->


    <title>My website</title>
    <style>
        @media (min-width:800px){
            
            body{
                background-color:pink;
            }

        }

        @media (max-width:799px){

            body{
                background-color: deepskyblue;
            }
        }
    </style>
   
</head>

<body>                          <!--主体部分-->

    <h1>Hello world!</h1>
</body>
</html>

CSS Flexbox和Grid布局为创建复杂且响应式的布局提供了强大的工具。Flexbox用于一维布局（行或列），而Grid则用于二维布局。

其中display: flex; 和 flex-wrap: wrap; 是Flexbox布局模型中非常重要的两个属性，它们一起工作来创建一个灵活的容器，能够自动调整其子元素的大小、顺序和排列方式，以适应不同的屏幕尺寸和布局需求。

<!DOCTYPE html>                 <!--HTML5版本声明-->
<html>
<head>                          <!--头部-->

    <title>My website</title>
    <style>
      
        #information{

            display:flex;
            flex-wrap:wrap;
           
        }

        #information > div {
            
            font-size:20px;
            background-color: black;
            padding: 30px;
            margin: 30px;
            width:200px;
        }

        h1 {
            color: red;
        }

    </style>
    <!--link rel="stylesheet" href="StyleSheet1.css"-->
</head>

<body>                          <!--主体部分-->

    <div id="information">
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
        <div><h1>Hello world!</h1></div>
    </div>
    
</body>
</html>

display:grid;将网页设置成grid形式，grid-column-gap、grid-row-gap、grid-template-columns则分别设置grid的个体列间距、个体行间距、及网格单元的宽度及每行单元个数。

<!DOCTYPE html>                 <!--HTML5版本声明-->
<html>
<head>                          <!--头部-->

    <title>My website</title>
    <style>
      
        #grid{

            display:grid;
            background-color:aquamarine;
            padding:20px;
            grid-column-gap:20px;
            grid-row-gap:20px;
            grid-template-columns:auto auto auto auto;
            margin:10px;
           
        }

        .grid-item{
            
            background-color:white;
            text-align:center;
            font-size:20px;
            padding: 30px;
          
        }

    </style>

</head>

<body>                          <!--主体部分-->

    <div id="grid">

        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
        <div class="grid-item">10</div>
        <div class="grid-item">11</div>

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

3.6.7 scss文件

SCSS（Sassy CSS）是Sass（Syntactically Awesome Stylesheets）的一个语法，它是对CSS的扩展，增加了许多强大的功能，比如变量、嵌套规则、混合（mixins）、继承、导入其他SCSS文件等。使用SCSS可以让CSS的编写变得更加高效和可维护。SCSS文件通常以.scss为扩展名。

利用Visual Studio2019运行scss文件时需要用到插件web compiler，可以软件的管理拓展内进行下载安装，或者直接在官网链接进行操作：

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

运行时右键对scss文件进行转译操作，随后在生成的compilerconfig.json文件内便可以得到转译后的css文件名，这样在HTML文件只需引用转译后的css文件名即可。

scss文件：

//创建变量
$color:blue;

%try{
    font-size:30px;
    padding:10px;
    margin:10px;
    color:red;
}

div {
    background-color: green;

    //嵌套
    ol {
        font-size: 30px;
        color: $color;
    }

    table {

        //继承
        @extend %try;
        text-align: center;

        th {
            border: 2px solid black;
        }

        td{
            border: 2px solid black;
        }

        border: 2px solid black;
        border-collapse:collapse;
    }
}

html：

<!DOCTYPE html>                 <!--HTML5版本声明-->
<html>
<head>                          <!--头部-->

    <title>My website</title>
    
    <link rel="stylesheet" href="StyleSheet11.css">
    
</head>

<body>                          <!--主体部分-->

    <div>

        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
            </tbody>
        </table>

        <ol>
            <li>E</li>
            <li>F</li>
            <li>G</li>
        </ol>

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