html入门基础-常见标签（详细）

 

标题标签h1-h6

h1-h6:数字越大，文本字体越小，反之则相反。

代码展示：

效果展示：

 段落标签<p>

独占一行，可将网页分成若干段落，且段落与段落之间有间隔

代码展示：

效果展示： 

换行标签<br> 

它是一个单表签，其作用是开始新的一行。

代码展示：

效果展示： 

字体标签：

加粗：<b>，<strong>

倾斜：<em>，<i>

删除线：<del>，<s>

下划线：<ins>，<u>

上标：<sup> ，下标：<sub>

代码展示：

效果展示： 

图片标签： <img>

src:是<img>必须的属性，通过src描述图片路径，src可以是绝对路径，也可是相对路径，也可是网络路径。

alt:对图片资源进行文字描述，当图像无法打开时显示的文字
title：  提示文本，鼠标放在图片上所显示的文字
width： 设置图像的宽度
height ： 设置图像的高度
border： 设置图像的边框粗细

代码展示：

 

效果展示： 

超链接标签<a>

作用：从一个页面跳转到另一个页面

1.内部链接：网站内部页面之间的相互链接

2.空链接（#）

3.网页元素链接：点击图片即可跳转

4.外部链接：特定格式：http://www.......

5.下载链接：herf=“压缩包的名字”

6.锚点链接：是使用在一个网页中，内容太长不好寻找指定内容是所设置的链接，可直接找到想要查找的内容。

在href属性中，设置值为#名字的形式

代码展示： 

表格标签：

table：表示整个表格
tr：表示一行
td：表示一列
th：表示表头中的一列或第一行进行加粗居中处理
thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的
tbody: 表格得到主体区域 。

写在table中的表格属性：

align：属性值： left（左对齐）,center（居中）,right（右对齐）  
border： 1或0 规定是拥有边框，默认没有
cellpadding ：文字距离边框的距离
cellspacing：  单元格与单元格之间的空白区域默认为2
width： 规定表格的宽度

合并单元格：

合并行：rowspan              eg：rowspan="合并行的个数"

合并列：colspan               eg:   colspan="合并列的个数"

代码展示：
 

效果展示： 

列表标签： 

无序列表：<ul></ul>中嵌套<li></li>

有序列表：<ol></ol>中嵌套<li></li>

自定义列表：<dl>中只能包含<dt>，<dd>,其中<dt>，<dd>为兄弟关系

代码展示：

效果展示： 

表单标签

<form> 标签：<form>会把范围内的表单元素信息直接递交给服务器。

action: url地址         用于指定接收并处理表单数据的读物程序的url地址
method: get/post     提交方式
name: 名称             用于指定名称，用来区分页面的多个表单

<input>标签：<input>中必须包含type属性，且type属性根据值不同，输入形式也不同

type属性值：

button： 定义可点击按钮
checkbox： 定义复选框
file ：定义输入字段和浏览按钮没提供文件的上传
hidden： 定义隐藏的输入段
image ：定义图像形式的提交按钮
password： 定义密码字段，该字段被掩码
radio： 定义单选按钮
reset： 定义重置按钮，会清楚表单中的所有数据
submit ：定义提交按钮，将表单的数据输出给后台
text： 单行输入字段可输入文本。默认20个字符

type类型外的属性：

name： 自定义 定义input元素的名字
value： 自定义 规定input元素的值
checked ：checked     规定首次出现时默认被选中的值
maxlength： 正整数      输入字段中的最大长度

注：1.name，value是每个表单元素都应有的，供后台使用

        2.name的元素名，要求单选，复选分别相同

        3.  checked主要针对于复选框和单选框，checked为默认值

<lable>标签：

<lable>为input元素定义的标注

<select>标签：

<select>为下拉表单

1.<select>标签中嵌套<option>

2.在<option>中定义select="select"时，证明当权选项为默认项

<textarea>标签：

文本域 又叫多行编辑框

五定义语标签：div & span

<div>是一个块级元素

<span>是一个行级元素

块级元素独占一行，行级元素不独占一行

综合案例：（因影响美观加了css样式，仅供参考）

 效果展示：

小结：感觉写的还差点意思，不过第一次写博客，再接再厉。

有什么不足的地方家人们多多指正，谢谢。

https://blog.youkuaiyun.com/m0_64702044/article/details/126800335?spm=1001.2014.3001.5502