HTML前端常用标签(复习)
liuian 2025-01-11 15:11 26 浏览
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 | ||
target (默认当前窗口打开,可新建窗口打开) | 用于指定链接页面的打开方式,其取值有self和blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
锚点标签
id="" | 锚点定位 | 通过创建锚点链接,用户能够快速定位到目标内容。 | <h3 id="two">第2集</h3> | 使用相应的id名标注跳转目标的位置。 (找目标) |
base标签
<base target="_blank" /> | base 可以设置整体链接的打开状态 | base 写到 <head> </head> 之间 |
预格式化标签
<pre>文本</pre> | 标签可定义预格式化的文本。 | 所谓的预格式化文本就是 ,按照我们预先写好的文字格式来显示页面, 保留空格和换行等。 |
表格标签
<table> 定义表格标签 | border | 设置表格边框(默认border="0"无边框) | <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>标签中输入其他标签或者文字的做法是不被允许的。 | 里面只能包含li 没有顺序,我们以后布局中最常用的列表 | ||
<ol><li></li></ol> | 有序列表 | 所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。 | 里面只能包含li 有顺序, 使用情况较少 | |||
<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> | 第二种用法 for 属性规定 label 与哪个表单元素绑定。 | 当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面 |
文本域
<textarea >文本内容</textarea> | 通过textarea控件可以轻松地创建多行文本输入框. | cols="每行中的字符数" rows="显示的行数" 我们实际开发不用 | <textarea > 文本内容</textarea> |
select下拉列表
<select> | 在option 中定义selected =" selected "时,当前项即为默认选中项。 |
form表单域
<form action="url地址" method="提交方式" name="表单名称"> | action 属性值:url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method 属性值:get/post | 用于设置表单数据的提交方式,其取值为get或post。 | |
name 属性值:名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
以上标签基本包含了前端开发所需常用标签.来自本人,黑马程序员.传智播客学习笔记.
以下是个人笔记整理,需要请关注私信我.
希望本人笔记能对各位有所帮助.
前端不难,难的在于东西多和杂.每天努力学习一点点,不放弃.
相关推荐
- 2023年最新微信小程序抓包教程(微信小程序 抓包)
-
声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...
- 测试人员必看的软件测试面试文档(软件测试面试怎么说)
-
前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...
- 复活,视频号一键下载,有手就会,长期更新(2023-12-21)
-
视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...
- 新款HTTP代理抓包工具Proxyman(界面美观、功能强大)
-
不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...
- 使用Charles工具对手机进行HTTPS抓包
-
本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...
- 苹果手机下载 TikTok 旧版本安装包教程
-
目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...
- 【0基础学爬虫】爬虫基础之抓包工具的使用
-
大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...
- 防止应用调试分析IP被扫描加固实战教程
-
防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...
- 一文了解 Telerik Test Studio 测试神器
-
1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...
- HLS实战之Wireshark抓包分析(wireshark抓包总结)
-
0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...
- 信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )
-
HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...
- Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口
-
使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...
- python爬虫教程:教你通过 Fiddler 进行手机抓包
-
今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...
- Fiddler入门教程全家桶,建议收藏
-
学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...
- fiddler如何抓取https请求实现手机抓包(100%成功解决)
-
一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...
- 一周热门
-
-
Python实现人事自动打卡,再也不会被批评
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
系统C盘清理:微信PC端文件清理,扩大C盘可用空间步骤
-
10款高性能NAS丨双十一必看,轻松搞定虚拟机、Docker、软路由
-
python使用fitz模块提取pdf中的图片
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- table.render (33)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)