整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 元素与标签

HTML 元素与标签


TML(HyperText Markup Language)是一种用于创建网页的标准标记语言。在HTML中,"元素"和"标签"是构建网页的基本组成部分,它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的,而HTML元素是由标签及其包含的内容组成的。


参考文档:https://www.cjavapy.com/article/3303/


1、HTML 元素


HTML元素指的是从开始标签到结束标签的所有内容。它们是HTML文档的构建块,用于创建和组织网页内容。HTML元素可以包含文本、图片、链接、表格等多种类型的数据。元素可能包括一个开始标签和一个结束标签,也可能只有一个标签(在自闭合元素的情况下)。


1) <!DOCTYPE> 声明


用于定义文档类型,告诉浏览器此文档使用哪个HTML版本。


<!DOCTYPE html>


2) <html>


根元素,包含整个HTML文档。


<html lang="en">
</html>


3) <head>


包含文档的元数据,如标题、字符集声明和链接到样式表。


<head>
  <title>页面标题</title>
  <meta charset="UTF-8">
</head>


4)<title>


定义文档的标题,显示在浏览器的标题栏或页面的标签页上。


<title>这是文档的标题</title>


5)<body>


包含文档的所有可见内容,如文本、图片、链接和其他多媒体元素。


<body>
  <h1>这是一个主标题</h1>
  <p>这是一个段落。</p>
</body>


6) <header>


定义一个区域或页面的头部,通常包含标题和导航链接。


<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
</header>


7) <footer>


定义页面或区域的页脚部分,通常包含版权信息、联系信息等。


<footer>
  <p>版权所有 ? 2024</p>
</footer>


8) <nav>


定义导航链接的部分,用于页面内或页面间的导航。


<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
  </ul>
</nav>


9)<section>


定义文档中的一个独立部分,通常与标题一起使用。


<section>
  <h2>章节标题</h2>
  <p>这是该章节的一些内容。</p>
</section>


10. <article>


定义可以独立于内容其余部分的完整自包含内容,例如博客帖子或新闻文章。


<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>


11. <aside>


定义与周围内容稍微分离的内容,如侧边栏或广告栏。


<aside>
  <p>这是一些附加信息。</p>
</aside>


12. <figure> 和 <figcaption>


<figure> 定义独立的流内容(如图表、图像、代码示例等),<figcaption> 提供该内容的标题。


<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>图像标题</figcaption>
</figure>


2、HTML 标签


HTML标签是HTML元素的一部分,用于从逻辑上开始或结束一个元素。标签通常成对出现,包括一个开始标签和一个对应的结束标签,结束标签的名称前会有一个斜线(/)作为区分。有些HTML标签是自闭合的,意味着它们不需要结束标签,如图像标签(<img />)和换行标签(<br />)。


标签

说明

<!DOCTYPE>

声明文档类型和HTML版本。

<html>

标识一个HTML文档的根元素。

<head>

包含了文档的元数据。

<title>

指定文档的标题。

<body>

包含了可见的页面内容。

<h1> - <h6>

定义标题,从

<h1> 到 <h6> 重要性递减。

<p>

定义段落。

<br>

插入一个换行符。

<hr>

在页面上绘制一条水平线。

<b>

定义粗体文本。

<i>

定义斜体文本。

<u>

定义下划线文本。

<strong>

定义重要文本。

<em>

定义强调文本。

<mark>

定义被标记或高亮的文本。

<small>

定义小号文本。

<sub>

定义下标文本。

<sup>

定义上标文本。

<a>

定义超链接。

<img>

在页面中嵌入图像。

<ul>

定义无序列表。

<ol>

定义有序列表。

<li>

定义列表项。

<table>

定义表格。

<th>

定义表格的表头单元格。

<tr>

定义表格的行。

<td>

定义表格单元。

<form>

定义HTML表单。

<input>

定义输入控件。

<textarea>

定义多行文本输入控件。

<button>

定义按钮。

<select>

定义下拉列表。

<option>

定义下拉列表中的选项。

<article>

定义文章。

<section>

定义文档中的一个区域(或节)。

<header>

定义介绍性内容或导航链接的容器。

<footer>

定义注脚或文档的页脚。

<nav>

定义导航链接的部分。

<aside>

定义侧边栏内容。


使用示例:


<!DOCTYPE html>
使用示例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML标签使用示例</title>
</head>
<body>
<header>
    <h1>欢迎来到我的网页</h1>
    <nav>
        <a href="#content">主要内容</a> |
        <a href="#contact-form">联系表单</a>
    </nav>
</header>
<section id="content">
    <article>
        <h2>HTML基础</h2>
        <p>HTML是构建网页的基石。<strong>标签</strong>是它的核心组成部分。<mark>本文</mark>介绍了一些最常用的HTML标签。</p>
    </article>
    <aside>
        <h3>注意</h3>
        <p>记得检查HTML5的新特性和标签。</p>
    </aside>
    <ul>
        <li>文本标签</li>
        <li>列表</li>
        <li>表格</li>
        <li>表单</li>
    </ul>
    <ol>
        <li>先介绍基础</li>
        <li>然后是进阶</li>
    </ol>
    <table>
        <tr>
            <th>标签</th>
            <th>描述</th>
        </tr>
        <tr>
            <td><p></td>
            <td>段落标签</td>
        </tr>
        <tr>
            <td><a></td>
            <td>链接标签</td>
        </tr>
    </table>
</section>
<section id="images">
    <h2>图片</h2>
    <img src="example.jpg" alt="示例图片">
</section>
<footer>
    <section id="contact-form">
        <h2>联系我们</h2>
        <form>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email"><br>
            <input type="submit" value="提交">
        </form>
    </section>
    <p>? 2024 HTML标签示例</p>
</footer>
</body>
</html>


参考文档:Hhttps://www.cjavapy.com/article/3303/

TML:完成页面的内容展示

CSS:完成页面样式的控制,美化页面,完成页面的布局。

表单:用于采集用户输入的数据。用于和服务器进行交互。

form:用于定义表单的。可以定义一个范围(代表用户采集数据的范围)

属性:action:指定提交数据的url(指的就是把数据提交到哪里)

method:指定提交方式

分类:一共有7种,2种比较常用。

get:1.请求参数会在地址栏显示

2.请求参数的长度是有限制的。

3.请求不安全

post:1.请求参数不会在地址栏显示,会封装在请求体中。

2.请求参数的长度没有限制

3.较为安全

表单里面的数据要想被提交,必须指定它的name属性

表单项标签

input:可以通过type属性值,改变元素展示的样式。

type属性:text:文本输入框,默认值

placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动情况提示信息。

password:密码输入框

radio:1.单选框(要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样)

2.一般会给每一个单选框提供value属性,指定其被选中后提交的值。

3.checked属性可以指定默认值

checkbox:复选框:

1.一般会给每一个单选框提供value属性,指定其被选中后提交的值。

2.checked属性可以指定默认值

file:文件选择框

hidden:隐藏域,用于提交一些信息

按钮:

submit:提交按钮。可以提交表单

button:普通按钮

image:图片提交按钮

src属性指定图片的路径

label:指定输入项的文字描述信息

注意:lable的for属性一般会和input的id属性值对应。如果对应了,点击lable区域,会让input输入框获取焦点。


select:下拉列表

子元素:option,指定列表项

textarea:文本域

、www:

万维网,建立在internet上,全球性的、交互、多平台、分布的信息资源。

wwwf组成:

  • url:统一资源定位器,通俗来说就是访问地址
  • HTTP:超文本传输协议
  • HTML:超文本标记语言

2、网页的后缀名:html和htm

3、标签:

双标签:<标签名>内容</标签名>

单标签:<标签名 />

注释标签:<!-- 注释说明 -->

各种标签,以html文档结构来做:

<!doctype html> <!--文档类型标签-->
<html> --最外层的标签
<head> <!--头部标签,包含编码、标题等-->
	<title>标题</title> <!--标题标签-->
	<meta charset="utf-8"/> <!--编码格式-->
</head>
  <body> <!--主体标签,里面显示的内容-->
  	<h1>哈哈哈哈</h1>
  </body>
</html>

4、标题标签

h1~h6,h1最大的,h6最小的

属性:align,对齐方式

属性值:left-左对齐,center-居中,right-右对齐

示例:

<h1 align="left">标题左对齐</h1>

5、段落标签:

<p>内容</p>

属性:

-title:提示信息

-style:行内样式

-dir:文字方向,默认从左向右,ltl或者rtl

示例:

<p title="这是提示信息" dir="ltl"></p>

6、换行标签:<br/>

7、水平线标签:<hr/>

属性:

align:对齐方式,默认center居中对齐

color:颜色

width:宽度,可以取值百分比或者像素

size:高度,只能取值像素

noshade:取消阴影

示例:

<hr color="red" width="50%" size="10"/>

8、强调标签:加粗字体

<b></b>和<strong></strong>

9、图片标签:<img />

属性:

src:图片路径

alt:图片加载错误时提示信息

title:鼠标放在图片上提示信息

width:宽度

border:边框

示例:

<img src="1.jpg" alt="图片加载失败" title="提示信息"/>

10、超链接:<a>文本</a>

属性:

href:要跳转的地址

示例:

<a href="https://www.baidu.com">百度一下</a>