HTML简单了解跨门槛知识

最新推荐文章于 2024-11-17 20:29:19 发布

进击的李子

最新推荐文章于 2024-11-17 20:29:19 发布

阅读量98

点赞数 1

文章标签： html 前端学习 html5

本文链接：https://blog.csdn.net/m0_64307371/article/details/126198961

版权

HTML:

1.HTML概述
2.HTML标签
3.HTML属性
4.文本格式化标签
5.表格/列表
6.表单

1.HTML概述

超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。

（就是用计算机能懂的语言来建立自己的 WEB 站点，运行在浏览器上，由浏览器来解析。）

网站是网页的集合，网页是其中一个页面，常是html格式文件。 html是用来描述网页的一种语言。网页由图片、链接、文字组成。 HTML
不是一种编程语言，而是一种标记语言,标记语言是一套标记标签 ,HTML 使用标记标签来描述网页, HTML 文档包含了HTML
标签及文本内容,HTML文档也叫做 web 页面.

（就是html可以制作页面，页面里可以放图片、链接、文字。）

新建文档，后缀改为.html即可获得HTML文档：
在这里插入图片描述

输入内容即可获得一个html网页：
注：//后边跟的是注释，起解释作用。

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!DOCTYPE html>//声明为 HTML5 文档
<html>//声明 HTML 页面的标签
<head>//网页头部，包含了文档的元数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<meta charset="utf-8">//便于计算机存储文字
<title>网页标题名</title>//网页标题，显示在网页上方
</head>
<body>
       //内容写在body中
</body>
</html>

————————————————————————————————————
————————————————————————————————————

2.HTML标签

HTML 元素以开始标签起始，HTML 元素以结束标签终止，元素的内容是开始标签与结束标签之间的内容。

（就是标签一个放开头，一个放结尾，中间写内容）

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。没有内容的 HTML
元素被称为空元素。

（下边的换行标签就是，就是只需要写一个就行）

HTML 标题：
HTML 标题是通过h1-h6标签来定义的。h1 定义最大的标题， h6 定义最小的标题。

标题很重要：

请确保将 HTML 标题
标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将
h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

（不可以为了有标题那样的效果就随便使用哦~）

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

输出结果：
在这里插入图片描述

HTML 段落：

HTML 段落是通过标签 p 来定义的。

（中间放长段落短段落我都可以呦~）

<p>这是一个段落。</p>
<p>这是一个段落。</p>

输出结果：
在这里插入图片描述

HTML 链接：

HTML 链接是通过标签 a来定义的。

（给我一个链接地址，我一下就能转到那个地方）

<a href="http://www.baidu.com">这是一个链接，会转到百度官网</a>
//href超文本引用，定义链接指向

输出结果：
在这里插入图片描述

HTML 图像：

HTML 图像是通过标签 img来定义的。

（这年头谁还不加个图片了）

<img src="/images/logo.png" width="250" height="390" />
  //src指向图片路径
  //width定义图片长度
  //height定义图片高度

输出结果：
在这里插入图片描述

换行标签：
br （段落太长，我来换行）

8月6日，东部战区继续在台岛北部、西南、东部海空域进行实战化联合演训。<br/>
在战区联合作战体系支撑下<br/>战区海军出动舰艇、战机、岸导等任务兵力，重点进行了联合对陆打击、对海突击等课目训练。

输出结果：
在这里插入图片描述
————————————————————————————————————
————————————————————————————————————

3.HTML属性

（是不是迷惑上边的a链接为啥加href；img图片后边跟width和height。）

HTML 元素可以设置属性，属性可以在元素中添加附加信息，属性一般描述于开始标签，属性总是以名称/值对的形式出现。

例如上边的：
链接a的属性：href定义链接指向；
图片img的属性：width定义图片长度，height定义图片高度。

属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

例如：
width=“250” | height=“390” | name=“value”
双引号中的就是属性值
(知道属性、属性值，就记住这些吧)
常用：

属性=“属性值”	作用
target=“_blank”	img中如果你将 target 属性设置为 “_blank”, 链接将在新窗口打开
type=“text/password/radio/button/checkbox/submit”	style中定义类型是：文本输入框/密码输入框/单选按钮/普通按钮/复选按钮/提交按钮
alt=“图片”	img中图片加载不出来显示的内容。例：这个显示图片
border=“1”	表格外边框大小。

其他参考属性：

属性	作用
class	为html元素定义一个或多个类名
id	定义元素的唯一id
style	规定元素的行内样式
title	描述了元素的额外信息 (作为工具条使用)
hidden	属性规定对元素进行隐藏。

4.文本格式化标签

对输出的文本进行格式，这些HTML标签被称为格式化标签。

（有了这个想加粗就不用拿h标题了，还可以倾斜、放大、缩小）
（重要）

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

<b>这个文本是加粗的</b>
<strong>这个文本是加粗的</strong>
<big>这个文本字体放大</big>
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
<small>这个文本是缩小的</small>
<sub>下标</sub>
<sup>上标</sup>

输出结果：
在这里插入图片描述
（不重要）

标签	描述
code	定义计算机代码
kbd	定义键盘码
samp	定义计算机代码样本
var	定义变量
pre	定义预格式文本

<code>计算机输出</code>
<kbd>键盘输入</kbd>
<tt>打字机文本</tt>
<samp>计算机代码样本</samp>
<var>计算机变量</var>

输出结果：
在这里插入图片描述

标签	描述
abbr	定义缩写
address	定义地址
bdo	定义文字方向
blockquote	定义长的引用
q	定义短的引用语
cite	定义引用、引证
dfn	定义一个定义项目。

（这就不一一举例了哦。。。。。。。。。）
————————————————————————————————————
————————————————————————————————————

5.表格/列表

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义）每行被分割为若干单元格（由 td>标签定义）。字母 td
指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

（表格table包含行tr，tr包含表头th和单元格td）

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

输出结果:
在这里插入图片描述

HTML 表格表头，表格的表头使用 th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本

（th作用嘛，就是像下边这样起带头作用吧！）

<table border="1">
<tr>
  <th>手机</th>
  <th>电脑</th>
  <th>电视</th>
</tr>
<tr>
  <td>3999</td>
  <td>7 854</td>
  <td>7 800</td>
</tr>
</table>

输出结果：
在这里插入图片描述

表格标签：

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

列表：

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

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>

输出结果：
在这里插入图片描述

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

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ol>

输出结果：
在这里插入图片描述

列表标签：

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

6.表单

HTML 表单用于收集用户的输入信息。将用户收集到的信息发送到 Web 服务器。
表单元素是允许用户在表单中输入内容：
比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）
等等。

我们可以使用 form 标签来创建表单:

文本域（Text Fields）:

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

在这里插入图片描述
密码字段:
密码字段通过标签 input type="password"来定义:

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

在这里插入图片描述

单选按钮（Radio Buttons）:
input type="radio"标签定义了表单的单选框选项:

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

在这里插入图片描述
复选框（Checkboxes）:
input type=“checkbox” 定义了复选框。

(复选框可以选取一个或多个选项)

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

在这里插入图片描述

表单标签：

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