【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 常用HTML标签(1)
🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
HTML中的双标记和单标记
双标签也叫围堵标记：需要关闭标记如：<head></head>
单标签也叫空标记 不需要关闭标记如：<meta/>
HTML标记的的写法
标记的基本结构
任何标记皆由<和>所包围住，如 <P> <td> </td>
注意 标记名与小于号之间不能留有空白字符。
标记属性
某些标记 要加上参数（属性），某些则不必。如 <font size="2">Hello</font>
参数(属性)只可加于起始标记中。
结尾标记
在起始标记之标记名前加上符号"/"便是其终结标记，如 </font>
标记字母大小写皆可。
HTML常见排版标签
1.注释标签
<!--注解-->
像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以 是很多行）而不作显示!
使用注释的目的是给不同的HTML部份加上说明，方便日后修改, 这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分 做什么、那部分做什么。
举个栗子
<!—从这里开始是产品介绍的一些部分-->
用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字眼。
举个栗子
<!--本文版权为 1998, Creation of Webpage 所拥有，未经许，请勿抄摘-->
段落标记
p标签
<P>称为段落标记。作用：为字、画、表格等之间留一空白行。
本来<P>是一围堵标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要</P>作结尾。
<P>的常用参数：
例如
<p align="center">
align的可选值：right, left, center
br标签
<br>称为换行标记。作用：让文字、图片、表格等显示于下一行
由于浏览器会自动忽略原始码中空白和换行的部分，这让<br>成为最常用的标记之 一。
因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。
hr水平线标签
<hr>称为水平线。作用：插入一条水平线。
center居中标签
<center></center>
居中标记的作用：让文字、图片、表格等显示于中间。
这标记原先是 Netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align="CENTER" 的参数，<center>似乎多于了，事实上它还是常用的标记之一，其简单 易用，常用于文字上，对于己加有 align="center" 参数的 <table> 标记亦要不厌其烦 地加上居中标记，因有很多浏览器不支持<table> 标记中的 align="center" 参数
pre格式化标记
<pre>
<pre>称为预设格式标记。作用：是让文件按照原始码的排列方式显示
空格的代码 ,快捷键ctrl+shift+space
div标签
<div>称为区块标记。作用：让文字、图片、表格等的摆放位置, 是我们最常用的一个排版标签!
<div>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力,这些我将会在后面详述，这处只介绍 一个属性设定。
基本使用
以 <div align="center"> 为例：
align="center" 可选值：center ; left ; right 决文字、图片、表格等居中、靠左或靠右!
<div align="center"> 的作用和居中标记 <center >一样
前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法!
以后所有的元素(文字，图片，视频等)必须放在表格或div中!
字体标签
我们最最常见和常用的的几个字体标签如下:
<strong>文字1</strong>
<em>文字2</em>
<span>文字3</span>
含义解释:
strong加粗强调标记
em 斜体标记
span 普通行内元素标记 关于什么是行内元素 我会在后面详细说到!
h1 ~ h6标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐
减小,每个标题标记所标示 的字句将独占一行且上下留一空白行!
<font>标签与<basefont>标签
负责设定文字的大小和文字颜色，但各有用处，且看以下比较
<basefont> 可以用于文件的开头部分，即 <head> 与 </head> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。 <font> 是应用于文件的内文部分，即 <body> 与 </body> 之间的位置，只影响 所标示的字句，是一个围堵标记。
两标记可同时存在，唯没被 <font> 所标示的字句才直接受 <basefont> 所影 响，而 <font> 本身亦受 <basefont> 的影响
但是目前在HTML标签中 以上这两个标签都很少被使用了!
无序列表和有序列表标签ul与ol
<ol> 称为顺序清单标记, 内部使用<li>表示清单项目, 所谓顺序清单就是在每一项前面加上 1,2,3… 等数目，又称编号清单。
举个栗子
<ol type="i" start="4">
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
type="i" 设定数目款式，其值有五种，请参考 下图，内定为 type=“1”
start="4" 设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3… 等整 数，内定为 start=“1”。
<ul>称为无序清单标记, 所谓无序清单就是在每一项前面没有序列等的符号，故又称符号清单
它 的参数设定例如： <ul type="square">
type="square" 设定符号款式，其值有三种，如下:
默认为为 type="disc也可以是 type="circle 也可以是 type="square
图片标记img
定义和用法
img 元素可定义一副图像。
必需的属性
alt:规定图像的替代文本。
src:规定显示图像的 URL。
例如
<img src="图片路径.jpg" alt="上海鲜花港 - 郁金香" />
可选的属性
align:规定如何根据周围的文本来排列图像。
border:定义图像周围的边框。
height:定义图像的高度。
hspace:定义图像左侧和右侧的空白。
vspace:定义图像顶部和底部的空白。
width:设置图像的宽度。
表格标签table
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr td 元素组成。
tr 元素定义表格行, td 元素定义表格单元
更复杂的 HTML 表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。
例如
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr> <td>January</td> <td>$100</td> </tr>
</table>
<table>可选的常用属性如下:
align:规定表格相对周围元素的对齐方式。
bgcolor:规定表格的背景颜色。
border:规定表格边框的宽度。
cellpadding:规定单元边沿与其内容之间的空白。
cellspacing:规定单元格之间的空白。
frame:规定外侧边框的哪个部分是可见的。
rules:规定内侧边框的哪个部分是可见的。
width:规定表格的宽度。
表格标签中的其他标记
<thead>、<tbody>、<tfoot>
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody> 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
如使用 thead、tfoot 以及tbody元素，就必须使用全部的元素。
它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签， 大家可以自己去尝试一下!
表格中的<tr>标签
<tr> 标签定义 HTML 表格中的行。
tr 元素包含一个或多个 th 或td元素。
例如:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
tr标签的可选属性
align:定义表格行的内容对齐方式。
bgcolor:规定表格行的背景颜色。
valign:规定表格行中内容的垂直对齐方式。
表格中的<th>标签
<th>定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
可选的属性
align :规定单元格内容的水平排列方式。
bgcolor:规定表格单元格的背景颜色。不赞成使用，请使用样式替代它。
heicolspan:指明此单元格可横跨的列数
ght:规定表格单元格的高度。
rowspan:指明此单元格可横跨的行数。
valign:规定单元格内容的垂直排列
width:规定表格单元格的宽度。
表格中的<td>标签
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。
可选的属性如下:
align :规定单元格内容的水平排列方式。
bgcolor:规定表格单元格的背景颜色。
colspan:指明此单元格可横跨的列数
height:规定表格单元格的高度。
rowspan:指明此单元格可横跨的行数。
valign:规定单元格内容的垂直排列
width:规定表格单元格的宽度。
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
