HTML基础总结

heyunh

已于 2022-04-10 11:19:07 修改

阅读量563

点赞数 1

文章标签：前端

于 2022-04-10 11:11:01 首次发布

本文链接：https://blog.csdn.net/Miratowa_/article/details/124069432

版权

本文介绍了HTML的基本概念，包括标签的作用、元素的类型以及常见属性的应用。重点讲解了如<h1>至<h6>的标题标签、<p>段落标签、<br/>换行和<hr/>水平线等文本格式化标签，同时阐述了<img>图像标签、<a>超链接标签、<table>表格标签和列表、表单元素的用法。此外，还提到了表单中的<input>标签和下拉列表<select>的属性配置。

摘要由CSDN通过智能技术生成

文章目录

HTML简介

HTML是一种超文本标记语言，Web标准的构成：结构，表现，行为。

HTML就是用来描述网页结构的一套标记标签，它的语法比较简单，易于学习。

一、标签是什么？

HTML标签是由尖括号包围的关键词，eg：<html>
标签一般都是成对出现的，eg: <html></html> 这是开始标签和结束标签
但也有单标签，eg: <br/> 这是换行标签

下面展示HTML基本结构标签（这是每一个网页都必须有的基本结构）

<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
---------------
</body>
</html>

<html></html>是一个完整HTML页面的根标签
<head></head>是文档的头部，包含<title></title>
<title></title>是网页的标题
<body></body>是文档的主题，包含了网页可见的部分

二、标签与元素

1.标签与元素的关系

一个起始标签和一个结束标签构成一个元素 eg: <html></html>成为<html>元素

下面依次介绍HTML各个元素

<h1> -- <h6>定义文档的标题（双标签）。

标题对文档来说很重要，不仅为了生成粗体和大号的文本，还为了搜索引擎可以使用标题为网页的结构和内容编制索引。标题重要性从h1到h6一次递减。

<p></p>是段落标签（双标签）

可以将文档分成若干个段落；浏览器会自动在段落前后添加一个空白行。

<br/>是换行标签（单标签）

它是一个空的HTML元素，没有内容，所以没有结束标签，是一个单标签。

<hr/>用来创建水平线，可用于分割内容（单标签）
文本格式化标签

<strong></strong>加粗 <b></b>同义
<em></em>倾斜 <i></i>同义
<del></del>删除线（在文字中间添加一条直线） <s></s>同义
<ins></ins>下划线 <u></u>同义

HTML区块

大多数HTML元素被分为块级元素、行内元素、行内块元素，都没有特殊的含义，可当作容器来使用。

<div></div>是一个典型的块级元素，浏览器会在它的前后自动拆行，所以块级元素独占一行。<div>元素用来组合其他HTML元素。
<span></span>是一个典型的行内块元素，一行可以放多个，但相邻的行内块元素之间会有一个固定的小缝隙。<span>元素用来组合行内元素。

2.HTML属性和相关标签

属性是HTML元素提供的附加信息。属性总是以名称/值键值对的形式出现， eg: name=''value''

图像标签<img src='' '' alt='' '' >

图像标签是单标签
src是源属性（source），值是图像的地址
alt是图像加载不出来时，給网页提供一个替换文本
除此之外，<img>还有height（高度）和weight（宽度）属性，属性默认单位是px
<img>还有title属性，当鼠标移动到图像上时，鼠标旁边会有提示文本，提示文本就是title属性的值

超链接标签<a></a>

<a>是一个链接，链接跳转的地址放在href属性的值里
<a>是双标签，双标签里应包含内容，由于链接可以是文字，图片等，所以在两个尖括号中间可以放文字或图片等
<a>还有一个target属性，这个属性常用的有两个值 _blank 和 _self ，_self是浏览器默认值，它表示在当前页面打开链接；_blank表示在新的页面打开链接

表格标签<table></table>

<table>元素应该包含子标签<tr> <td></td> <td></td> </tr> ,其中<tr>代表行，<td>代表列
表头单元格要用<th>元素代替<td>元素，浏览器会默认表头单元格里的内容居中在单元格里
<td>有两个合并属性

colspan=''number''横向合并单元格，跨列
rowspan=''number''纵向合并单元格，跨行

合并单元格时要删除被合并的单元格

列表标签

无序列表<ul> <li></li><li></li> </ul> ,它有一种常用属性-------type,属性值有三种，disc-----列表前是实心圆；circle------列表前是空心圆；square--------列表前是实心方块
有序列表<ol> <li></li><li></li> </ol> ,type=' 'A / a / I / i ''

表单<input>

type='' text '' / '' password '' / '' radio '' / '' checkbox '' / '' submit '' =‘’文本框‘’ / ‘’单选框‘’ / ‘’复选框‘’ / ‘’提交按钮‘’
<input>标签的属性name-----定义元素名称； value------定义元素值