TML(HyperText Markup Language)是一种用于创建网页的标准标记语言。在HTML中,"元素"和"标签"是构建网页的基本组成部分,它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的,而HTML元素是由标签及其包含的内容组成的。
参考文档:https://www.cjavapy.com/article/3303/
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>
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:文本域
万维网,建立在internet上,全球性的、交互、多平台、分布的信息资源。
wwwf组成:
双标签:<标签名>内容</标签名>
单标签:<标签名 />
注释标签:<!-- 注释说明 -->
各种标签,以html文档结构来做:
<!doctype html> <!--文档类型标签-->
<html> --最外层的标签
<head> <!--头部标签,包含编码、标题等-->
<title>标题</title> <!--标题标签-->
<meta charset="utf-8"/> <!--编码格式-->
</head>
<body> <!--主体标签,里面显示的内容-->
<h1>哈哈哈哈</h1>
</body>
</html>
h1~h6,h1最大的,h6最小的
属性:align,对齐方式
属性值:left-左对齐,center-居中,right-右对齐
示例:
<h1 align="left">标题左对齐</h1>
<p>内容</p>
属性:
-title:提示信息
-style:行内样式
-dir:文字方向,默认从左向右,ltl或者rtl
示例:
<p title="这是提示信息" dir="ltl"></p>
属性:
align:对齐方式,默认center居中对齐
color:颜色
width:宽度,可以取值百分比或者像素
size:高度,只能取值像素
noshade:取消阴影
示例:
<hr color="red" width="50%" size="10"/>
<b></b>和<strong></strong>
属性:
src:图片路径
alt:图片加载错误时提示信息
title:鼠标放在图片上提示信息
width:宽度
border:边框
示例:
<img src="1.jpg" alt="图片加载失败" title="提示信息"/>
属性:
href:要跳转的地址
示例:
<a href="https://www.baidu.com">百度一下</a>
*请认真填写需求信息,我们会在24小时内与您取得联系。