前端编程艺术（1）---HTML

25 阅读 0 评论 0 点赞

1.HTML

2.注释

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> 标签属性：

src (Source)
- 用途：指定图像文件的URL（统一资源定位符）。
- 示例：<img src="image.jpg" alt="描述">
alt (Alternative Text)
- 用途：提供当图像无法显示时的替代文本。这对屏幕阅读器用户和搜索引擎优化（SEO）都有帮助。
- 示例：<img src="image.jpg" alt="美丽的风景">
width
- 用途：设置图像的宽度。可以指定像素值（px）或百分比（%）。
- 示例：<img src="image.jpg" alt="描述" width="500">
height
- 用途：设置图像的高度。同样，可以指定像素值或百分比。
- 示例：<img src="image.jpg" alt="描述" height="300">
title
- 用途：当用户将鼠标悬停在图像上时，显示的工具提示文本。
- 示例：<img src="image.jpg" alt="描述" title="图像标题">
style
- 用途：用于直接在HTML中添加CSS样式。
- 示例：<img src="image.jpg" alt="描述" style="border: 1px solid black;">
class
- 用途：用于指定一个或多个CSS类名，这些类名可以在样式表中定义。
- 示例：<img src="image.jpg" alt="描述" class="rounded img-responsive">
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> 标签属性：

href：指定目标URL，为#时跳转到本页面
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：指定提交表单数据的方法（通常是GET或POST）。
- enctype：当method为POST时，指定表单数据的编码类型（例如，application/x-www-form-urlencoded或multipart/form-data）。
- name：表单的名称，用于JavaScript引用。
- target：指定在何处打开表单提交后返回的页面（例如，_blank在新窗口中打开）。

<input>：输入字段标签

定义用户输入的单个字段。
属性：
- type：定义输入字段的类型（例如，text, password, checkbox, radio, submit, reset, file, hidden等）。
- name：定义输入字段的名称，用于在提交表单时引用该字段的值。
- value：定义输入字段的初始值。
- placeholder：提供输入字段的提示信息。
- readonly：指定输入字段为只读。
- disabled：禁用输入字段。
- size：定义输入字段的大小。
- maxlength：定义输入字段的最大长度。
- checked：对于类型为radio或checkbox的输入字段，指定默认选中状态。

<label>：标签标签

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

<textarea>：文本区域标签

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

<select>：选择框标签

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

<option>：选项标签

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

<button>：按钮标签

定义一个按钮。
属性：
- type：定义按钮的类型（例如，submit, reset, button）。
- 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>：定义媒体内容及其标题。

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » 前端编程艺术（1）---HTML

点赞(0) 打赏

本文分类：文章资讯
本文标签：前端编程艺术（1）---HTML
浏览次数：25 次浏览
本文链接：https://freeymw.com/article/30698.html

评论列表共有 0 条评论

暂无评论

前端编程艺术（1）---HTML

1.HTML

2.注释

3.标题标签

4.段落标签

5.换行与水平分隔线

6.文本格式化标签

7.图像标签和属性

8.超链接

8.列表标签

9.表格标签

10.表单标签

11.HTML5

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复