HTML学习总结

最新推荐文章于 2024-06-19 01:21:22 发布

cause-you-know

最新推荐文章于 2024-06-19 01:21:22 发布

阅读量165

点赞数

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_63593692/article/details/122519364

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习

HTML介绍

HTML介绍

定义

超文本标记语言，主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML标签

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

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
语法骨架

<html>      根标签
   <head>   头标签
      <title></title>   标题标签
   </head>
   <body>  主题标签
   </body>
</html>

html标签：作用：所有html中标签的一个根节点
head标签：作用：用于存放：title,metal,base,style,script,link 注意在head标签中必须设置title标签
title标签：作用：让页面拥有一个属于自己的标题
body标签：作用：页面的主体部分，用于存放所有的html标签：p,h,a,b,u,i,s,em,dei,ins,strong,img

排版标签

标题标签（熟记）

标题（Heading）是通过<h1>-<h6>等标签进行定义的。<h1>定义最大的标题。<h6> 定义最小的标题。

段落标签（熟记）

段落是通过 <p>标签定义的。

水平线标签（认识）

<hr/>标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

换行标签（熟记）

如果希望在不产生一个新段落的情况下进行换行（新行），可以使用 <br/>标签。
<br/>元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
文本格式化标签（熟记）
在这里插入图片描述

标签属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

注意：
1、标签可以拥有多个属性，必须写在开始标签中，位于标签名后
2、属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
3、任何标签的属性都有默认值，省略该属性则取默认值

图像标签Img（重点）

定义图像的语法是：

<img src="图像URL" />

<img />标记属性：
在这里插入图片描述
图片格式：
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。

链接标签

HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用<a>标签在 HTML 中创建链接。
有两种使用<a>标签的方式：
1、通过使用 href 属性 - 创建指向另一个文档的链接
2、通过使用 name 属性 - 创建文档内的书签
基本语法：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href 属性规定链接指向的页面的 URL。
target属性规定在何处打开链接文档。
base标签
base标签可以设置整体链接的打开状态，写在<head></head>之间

特殊字符标签

在这里插入图片描述

注释标签

在html中还有一种特殊的标签——注释标签。
如果需要在html文档中添加一些便于阅读和理解但又不需要显示在页面的注释文字，就需要使用注释标签，基本语法格式如下：

<!-- 注释语句 -->

列表标签

HTML 支持有序、无序和自定义列表

无序列表 ul （重点）

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

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：
1、Coffee
2、Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表ol

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol> 标签。每个列表项始于<li>标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

自定义列表（理解）

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

表格

1.表格标签的作用：展示数据
格式：

<table> //table表示创建一个表格
	<tr>  //表示表格的一行
		<td>单元格内容</td> //<td>表示一个单元格
	</tr>
</table>

2.通常用th标签表示表头内容，将展示的内容加粗居中

<table> //table表示创建一个表格
	<tr>  //表示表格的一行
		<th>单元格内容</th> //<th>一般表示表头，将展示的内容加粗居中
	</tr>
</table>

3.通常用thead和tbody标签表示表格的头部和主体

<table> //table表示创建一个表格
	<thead> //thead标签中必须嵌套<tr>标签
		<tr>  //表示表格的一行
			<th>单元格内容</th> //<th>一般表示表头，将展示的内容加粗居中
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

4.合并单元格
①合并单元格方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
②合并单元格三部曲：
先确定是跨行还是跨列合并
找到目标单元格（若跨行则上面为目标单元格，若跨列则左侧为目标单元格）。写上合并方式=合并的单元格数目<td colspan="2"></td>
删除多余的单元格!!!
5.表格的属性
在这里插入图片描述

表单

用于搜集不同类型的用户输入
由表单域、提示文本和表单控件组成

input

<input>元素是最重要的表单元素。
<input>元素有很多形态，根据不同的 type 属性。
在这里插入图片描述

Lable标签

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点

1、用label直接包裹input
2、如果label里面有多个表单，想定位到某个可以通过 for id 的格式来进行

<label>输入账号：<input  type="text"/></label>

当鼠标点击输入账号时，光标也会在表单中显示

<label>输入账号：<input  type="text"/></label><br />
<label for="2">输入账号：<input  type="text"/><input  type="text" id="2"/></label>

textareal控件（文本域）

用于输入大量的信息

留言板
<textarea>请输入留言</textarea>