HTML前端常用标签(复习) html 前端

myzbx 2024-12-22 19:43 51 浏览

1. HTML 初识

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义：

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

标题标签       	<hx></hx>     
段落标签     		<p></p>
水平线标签			<hr />
 换行标签       <br/>
 无语义标签    <div></div>   和 <span></span>             注:这两个标签在后期经常使用

文本格式化标签

<b></b>和<strong></strong>		 文字加粗
<i></i>和<em></em>	               	斜体
<s></s>和<del></del>	            	加删除线
<u></u>和<ins></ins>		            加下划线

图片标签

<img src="图像URL" />	src  图像路径	图像标签	<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

属性:

alt 文本,图像不显示时显示文字<img src="" alt="">

title 文本,鼠标悬停时显示内容<img src="cz.jpg" title="文本" />

width 图像宽度<img src="cz.jpg" width="300" height="300" />

height 图像高度<img src="cz.jpg" width="300" height="300" />

border 设置图像边框宽度<img src="cz.jpg" border="3" />

链接标签

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

属性：

href (链接地址)必须写	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能			1. 外部链接需要添加 http:// www.baidu.com 2. 内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a > 3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。 4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
target (默认当前窗口打开,可新建窗口打开)	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

锚点标签

id=""

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

使用相应的id名标注跳转目标的位置。 (找目标)

base标签

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

预格式化标签

标签可定义预格式化的文本。

所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。

表格标签

<table> 定义表格标签 <tr> 定义表格行 <td></td> 表格数据 </tr> </table>	border	设置表格边框(默认border="0"无边框)	<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
	cellspacing	设置单元格与单元格之间的空白间距 (默认2像素)
	cellpadding	设置单元格内容与单元格边框之间的空白间距 (默认1像素)
	width	设置表格的宽度
	height	设置表格的高度
	align	设置表格在网页中的水平对齐方式 (三个属性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。	<caption>个人信息表</caption>
	rowspan="合并单元格的个数"	跨行合并	合并的顺序我们按照先上后下先左后右的顺序
	colspan="合并单元格的个数"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格标题标签
	<tr></tr><td></td>	标签，他就像一个容器，可以容纳所有的元素	<tr><td></td></tr>
	<th><td>	一般表头单元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！	以上标签都是放到table标签中。	更好的给表格划分结构
	<tbody> 用于定义表格的主体。放数据本体。	以上标签都是放到table标签中。
	<tfoot>放表格的脚注之类。	以上标签都是放到table标签中。

列表标签

列表(ul里面只能包含li ,li里面可以包含标签)	<ul><li></li></ul>	无序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本与ul 一致。但是实际中比无序列表用的少很多。	里面只能包含li 有顺序，使用情况较少
	<dl> <dt>名词1</dt> <dd>名词1解释1</dd> </dl>	自定义列表		里面有2个兄弟， dt 和 dd

input控件

<input type="属性值" value="你好">	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文本域
name	由用户自定义	控件的名称	用户名:<input type="text" name=“username” />
value	由用户自定义	input控件中的默认问本值	用户名:<input type="text" name="username" value="请输入用户名">
size	正整数	input控件在页面中的显示宽度
checked 默认被选中	checked	定义选择控件默认被选中的项	<input type="radio" name="sex" value="女" />女
maxlength	正整数	控件允许输入的最多字符数

<label> </label>

<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>	第一种用法就是用label直接包括input表单。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面
<label for="sex">男</label> <input type="radio" name="sex" id="sex">	第二种用法 for 属性规定 label 与哪个表单元素绑定。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

文本域

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

select下拉列表

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

form表单域

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

以上标签基本包含了前端开发所需常用标签.来自本人,黑马程序员.传智播客学习笔记.

以下是个人笔记整理,需要请关注私信我.

希望本人笔记能对各位有所帮助.

前端不难,难的在于东西多和杂.每天努力学习一点点,不放弃.

HTML 表单属性

上一篇：HTML表单date和time高级元素的使用
下一篇：html开发笔记22-表单元素「用户名、密码、单选框、多选框」

HTML前端常用标签(复习) html 前端

1. HTML 初识

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿