HTML学习笔记——HTML常用标签

目录

1|0HTML常用标签

1|1!DOCTYPE

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页。

注意：

1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。

2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

1|2html lang="zh-CN"

告诉浏览器或者搜索引擎这是一个英文网站.本页面采取英文来显示

<html lang="zh-CN">

1|3字符集

 
<meta charset="UTF-8"/>

字符集是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8"编码，尽量统一写成标准的“UTF-8”，不要写成“utf8"或“UTF8"。

1|4段落标签

<p>

段落之间会有段间距。

1|5换行标签

<br/>

行之间保持行间距。

1|6加粗，斜体，下划线，删除线
语义 标签 说明
加粗 <strong></strong>或者<b></b> 更推荐使用<strong>标签加粗语义更强烈
倾斜 <em></em>或者<i></i> 更推荐使用<em>标签加粗语义更强烈
删除线 <del></del>或者<s></s> 更推荐使用<del>标签加粗语义更强烈
下划线 <ins></ins>或者<u></u> 更推荐使用<ins>标签加粗语义更强烈

1|7div和span标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：

1.<div>标签用来布局，但是一行只能放一个<div>。大盒子

2.<span>标签用来布局，一行上可以多个<span>。小盒子

1|8图像标签

图像标签的src属性是必须要写的。

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

1|9超链接

 
<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

1|0链接分类

1|0空链接

如果当时没有确定链接目标时<a href="#">首页</a>。

1|0锚点链接

点我们点击链接，可以快速定位到页面中的某个位置

  1. 在链接文本的href 属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
  2. 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>

1|10特殊字符
HTML原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; “ 引号
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&ensp; [ ] 半个空白位
&emsp; [ ] 一个空白位
&nbsp; [ ] 不断行的空白

1|11表格

tr：一行

td：一个单元格

th：标题单元格

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式。
border 1或"" 规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。
cellspacing 像素值 规定单元格之间的空白，默认2像素。
width 像素值或百分比 规定表格的宽度。
height 像素值或百分比 规定表格的高度。

1|0合并单元格

1.先确定是跨行还是跨列合并。

2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>。

3.删除多余的单元格。

1|12列表

<ul>标签用于定义无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

1|0自定义列表

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和
<dd>（描述每一个项目/名字）一起使用。

<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

<dl></dl>里面只能包含<dt>和<dd>。

<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。

1|13form表单

1|0input表单类型
属性值 描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。
checkbox 定义复选框。
file 定义输入字段和“浏览”按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

单选按钮需要有相同的name属性。

1|0表单元素的属性
属性 属性值 描述
name 由用户自定义 定义input元素的名称。
value 由用户自定义 规定input元素的值。
checked checked 规定此input元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度。

1|14lable标签

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
语法：

<labe1 for="sex">男</labe1>
<input type="radio" name="sex" id="sex" />

1|15select下拉列表

 
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

<select>中至少包含一对<option>。

在<option>中定义selected="selected"时，当前项即为默认选中项。


__EOF__

本文作者：Tyu
本文链接：https://www.cnblogs.com/Tyu-t/p/15769334.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   垆边画船听雨眠  阅读(129)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS学习笔记——基础选择器，字体属性，文本属性，三种样式表
·  CSS学习笔记——显示模式，背景，三大特性
·  html--基本标签
·  HTML核心标签和属性
·  [编程基础] 常用html标签使用介绍
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手