HTML基础介绍_html h元素介绍-CSDN博客

本文链接：https://blog.csdn.net/h13393176983/article/details/102652514

html介绍

实例解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

HTML 标题

标题（Heading）是通过 h1 - h6标签进行定义的。

h1 定义最大的标题。 h6 定义最小的标题。

HTML 文本格式化标签

标签	描述
b	定义粗体文本
em	定义着重文字
i	定义斜体字
small	定义小号字
strong	定义加重语气
sub	定义下标字
sup	定义上标字
ins	定义插入字
del	定义删除字

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 head 区域使用 style 元素来包含CSS
外部引用 - 使用外部 CSS 文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

###外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

标签	描述
style	定义文本样式
link	定义资源引用地址

HTML 表格标签

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

HTML列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。

列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

###HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 列表标签

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

HTML 表单和输入

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置:

<form>
.
input 元素
.
</form>

文本域（Text Fields）

文本域通过 input type=“text” 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

密码字段通过标签 input type=“password” 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

input type=“radio” 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

提交按钮(Submit Button)

** input type=“submit” 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。?*

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML 表单标签

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮
datalist	指定一个预先定义的输入控件选项列表
keygen	定义了表单的密钥对生成器字段
output	定义一个计算结果