目录

1.HTML

2.注释

3.标题标签

4.段落标签

5.换行与水平分隔线

6.文本格式化标签

7.图像标签和属性

8.超链接

8.列表标签

9.表格标签

10.表单标签

11.HTML5


1.HTML

        HTML(HyperText Markup Language,超文本标记语言)是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架,使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。以下是HTML的一些基本特点:

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html>:声明文档类型和HTML版本。
  • <html>:根元素,包裹所有其他HTML元素。
  • <head>:头部元素,包含元信息,如字符集、页面标题、样式表链接、脚本链接等。
  • <title>:定义浏览器工具栏的标题。
  • <body>:主体元素,包含可见的页面内容,如文本、图片、视频、游戏、可播放的音频等。
  • <p>:段落元素。

  • 标签:HTML标签用于标记文本,以便浏览器知道如何渲染它们。
  • 属性:提供关于元素的额外信息,通常在开始标签中规定。

2.注释

        html中注释用<!-- 内容 -->来表示,注释的内容不会显示在页面上:

<!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>
    <!-- width -->
    <!-- <strong>这是加粗的文字</strong> -->
</body>
</html>

3.标题标签

        html中用<h1>内容</h1>到<h6>来表示不同级别的标题,数字越小标题级别越高:

<!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>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
</body>
</html>

4.段落标签

        html中用<p>内容</p>来表示段落:

<!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>
    <p>HTML(Hypertext Markup Language)是一种标记语言,用于创建网页结构和内容。它由一系列标签组成,这些标签描述了网页中各种元素的含义和结构。HTML使用标签来标识文本、图像、链接和其他内容,使浏览器能够正确地解释和显示网页内容。HTML的主要目标是提供一种标准化的方式来创建网页,使内容能够在不同的设备和浏览器上保持一致地呈现。它通过使用一系列预定义的标签和属性来描述页面的结构和内容,这些标签告诉浏览器如何展示文本、图像、表格、链接等内容。      HTML的发展经历了多个版本,不断演变和更新以适应不断变化的互联网需求。与其他技术(如CSS和JavaScript)结合使用,HTML能够实现更丰富、交互性更强的网页。总的来说,HTML是构建网页基础的重要语言,它定义了网页的结构和内容,为其他技术提供了基础,使网页能够以易于理解和浏览的方式呈现给用户。</p>
</body>
</html>

5.换行与水平分隔线

        html中用<br>表示换行,<hr>表示水平分隔线:

<!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>
    第一行内容
    <br>
    <br>
    第二行内容
    <hr>
</body>
</html>

6.文本格式化标签

        html中用<strong></strong>和<b></b>表示加粗,<em>和<i>表示倾斜,<ins>和<u>表示下划线,<del>和<s>表示删除线:

<!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>
    <strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>em 倾斜</em>
    <i>i 倾斜</i>
    <ins>ins 下划线</ins>
    <u>u 下划线</u>
    <del >del 删除线</del>
    <s>s 删除线</s>
</body>
</html>

7.图像标签和属性

        HTML中的图像标签是 <img>,它用于在网页上嵌入图像。以下是 <img> 标签及其属性的详细介绍:

以下是一些常用的 <img> 标签属性:

  1. src (Source)

    • 用途:指定图像文件的URL(统一资源定位符)。
    • 示例<img src="image.jpg" alt="描述">
  2. alt (Alternative Text)

    • 用途:提供当图像无法显示时的替代文本。这对屏幕阅读器用户和搜索引擎优化(SEO)都有帮助。
    • 示例<img src="image.jpg" alt="美丽的风景">
  3. width

    • 用途:设置图像的宽度。可以指定像素值(px)或百分比(%)。
    • 示例<img src="image.jpg" alt="描述" width="500">
  4. height

    • 用途:设置图像的高度。同样,可以指定像素值或百分比。
    • 示例<img src="image.jpg" alt="描述" height="300">
  5. title

    • 用途:当用户将鼠标悬停在图像上时,显示的工具提示文本。
    • 示例<img src="image.jpg" alt="描述" title="图像标题">
  6. style

    • 用途:用于直接在HTML中添加CSS样式。
    • 示例<img src="image.jpg" alt="描述" style="border: 1px solid black;">
  7. class

    • 用途:用于指定一个或多个CSS类名,这些类名可以在样式表中定义。
    • 示例<img src="image.jpg" alt="描述" class="rounded img-responsive">
  8. id

    • 用途:用于指定元素的唯一ID,可以用于JavaScript操作或CSS样式化。
    • 示例<img src="image.jpg" alt="描述" id="main-image">
<!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>
    <img src="./R-C1.jpg" alt="白蛇传">

    <img src="./微信图片_20230328143626.jpg" title="这是一只狗">

    <img src="./R-C.jpg" width="100">

    <img src="./微信图片_20230328143626.jpg" height="600">

    <img src="https://i.mcmod.cn/class/cover/20200805/1596622593_79030_ggIm.jpg@480x300.jpg" alt="">
</body>
</html>

8.超链接

        HTML中的链接标签是 <a>,它用于创建超链接,允许用户通过点击来导航到其他网页、文件、位置、电子邮件地址或任何其他URL:

以下是一些常用的 <a> 标签属性:

  1. href:指定目标URL,为#时跳转到本页面

  2. target:指定链接打开的位置

  • _self:默认值,在相同的框架或窗口中打开链接。
  • _blank:在新窗口或标签页中打开链接。
  • _parent:在父框架集中打开链接。
  • _top:在整个窗口中打开链接,忽略任何框架。

        3. title:鼠标悬停时显示的信息

<!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>
    <a href="https://chat.openai.com/">chatgpt</a>

    <a href="./01-标签的写法.html" target="_blank">01</a>

    <a href="#">#</a>
</body>
</html>

8.列表标签

        html中用<ul></ul>里面加入<li></li>来表示无序列表,用<o></ol>里面加入<li></li>来表示有序列表,用<dl></dl>里面加入<dt></dt>来表示自定义列表:

<!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>
    <ul>
        <li>666</li>
        <li>777</li>
    </ul>
    <ol>
        <li>888</li>
        <li>999</li>
    </ol>
    <dl>
        <dt>444</dt>
        <dd>333</dd>
    </dl>
</body>
</html>

9.表格标签

        html中用<table></table>表示表格域,它有很多属性:

  • border:设置表格边框的宽度。
  • width:设置表格的宽度。
  • cellspacing:设置单元格之间的空间。
  • cellpadding:设置单元格内容和边框之间的空间。
  • align:设置表格在页面中的对齐方式。
  • bgcolor:设置表格的背景颜色。

        <caption></caption>用于定义表格的标题。

        <thead></thead>用于定义表格的列标题。

        <tbody></tbody>包含表格的主体内容。

        <tr></tr>定义表格的一行。

        <th></th>定义表格的表头单元格。

        <td></td>定义表格的单元格,属性:

  • colspan:设置单元格横跨的列数。
  • rowspan:设置单元格横跨的行数。
  • align:设置单元格内容的水平对齐方式。
  • valign:设置单元格内容的垂直对齐方式。
<!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>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td>
                <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>
</body>

</html>

10.表单标签

表单(Form)是HTML中用于收集用户输入信息的元素。以下是HTML中常用的表单标签及其用途:

<form>:表单标签

  • 定义一个HTML表单,用于用户输入。
  • 属性:
    • action:指定表单数据提交到的URL。
    • method:指定提交表单数据的方法(通常是GETPOST)。
    • enctype:当methodPOST时,指定表单数据的编码类型(例如,application/x-www-form-urlencodedmultipart/form-data)。
    • name:表单的名称,用于JavaScript引用。
    • target:指定在何处打开表单提交后返回的页面(例如,_blank在新窗口中打开)。

<input>:输入字段标签

  • 定义用户输入的单个字段。
  • 属性:
    • type:定义输入字段的类型(例如,textpasswordcheckboxradiosubmitresetfilehidden等)。
    • name:定义输入字段的名称,用于在提交表单时引用该字段的值。
    • value:定义输入字段的初始值。
    • placeholder:提供输入字段的提示信息。
    • readonly:指定输入字段为只读。
    • disabled:禁用输入字段。
    • size:定义输入字段的大小。
    • maxlength:定义输入字段的最大长度。
    • checked:对于类型为radiocheckbox的输入字段,指定默认选中状态。

<label>:标签标签

  • 定义输入字段的标签。
  • 属性:
    • for:与相关输入字段的id属性关联,改善表单的可用性。

<textarea>:文本区域标签

  • 定义多行文本输入字段。
  • 属性:
    • name:定义文本区域的名称。
    • rows:定义文本区域的可见行数。
    • cols:定义文本区域的可见宽度。
    • placeholder:提供文本区域的提示信息。
    • readonly:指定文本区域为只读。

<select>:选择框标签

  • 定义下拉列表。
  • 属性:
    • name:定义选择框的名称。
    • multiple:允许选择多个选项。
    • size:定义选择框的可见选项数。

<option>:选项标签

  • 定义下拉列表中的选项。
  • 属性:
    • value:定义选项的值。
    • selected:指定选项默认选中。

<button>:按钮标签

  • 定义一个按钮。
  • 属性:
    • type:定义按钮的类型(例如,submitresetbutton)。
    • name:定义按钮的名称。
    • value:定义按钮的初始值。
<!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>
    <form action="">
        <input type="text" placeholder="请输入用户名">
        <br><br>
        <input type="password" placeholder="请输入密码">
        <br><br>
        <input type="checkbox" checked> 敲前端代码
        <br><br>
        <input type="file" multiple>
        <br><br>
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <label><input type="radio" name="gender" checked> 女</label>
        <br><br>
        城市:
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected>武汉</option>
        </select>
        <br><br>
        <textarea>请输入评论</textarea>
        <br><br>
        <button type="reset">提交</button>
        <br><br>
    </form>
    <div></div>
    <span></span>
    66666&nbsp;66666666
    &lt;p&gt;
</body>

</html>

11.HTML5

        H5通常指的是HTML5,这是HTML(HyperText Markup Language)的第五个主要版本,由万维网联盟(W3C)和网页超文本应用技术工作组(WHATWG)共同开发。HTML5在2014年10月28日被W3C正式推荐为标准。

        HTML5引入了许多新的元素和功能,旨在更容易地创建丰富的网页内容,同时支持更多的多媒体内容,并且在不依赖插件的情况下也能在网页上运行。以下是HTML5的一些主要特点:

新的语义标签

  • <article>:定义独立的自包含内容。
  • <section>:定义文档中的一个区段。
  • <nav>:定义导航链接。
  • <header>:定义文档或节的页眉。
  • <footer>:定义文档或节的页脚。
  • <aside>:定义页面内容之外的内容,如侧边栏。
  • <figure> 和 <figcaption>:定义媒体内容及其标题。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部